@economic/taco 2.14.2 → 2.16.0

package/dist/taco.cjs.development.js

@@ -188,6 +188,47 @@ function IconAccounting(props, svgRef) {
 }
 var Accounting = /*#__PURE__*/React.forwardRef(IconAccounting);
 
+function IconAiChatSolid(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: "M18.823 2.122a.188.188 0 01.352 0l.874 2.364c.02.051.06.092.111.11l2.364.875a.188.188 0 010 .352l-2.364.875a.188.188 0 00-.11.11l-.875 2.364a.188.188 0 01-.352 0l-.875-2.364a.187.187 0 00-.11-.11l-2.364-.875a.188.188 0 010-.352l2.364-.874a.187.187 0 00.11-.111l.875-2.364zm1.667 7a.188.188 0 01.351 0l.515 1.39a.19.19 0 00.11.112l1.39.514a.188.188 0 010 .352l-1.39.514a.188.188 0 00-.11.111l-.515 1.39a.187.187 0 01-.351 0l-.515-1.39a.187.187 0 00-.11-.11l-1.391-.515a.188.188 0 010-.352l1.39-.514a.187.187 0 00.111-.111l.515-1.39zm-5.363-2.36c-.889-.328-1.014-1.455-.374-2.008a12.291 12.291 0 00-3.864-.606C5.979 4.148 2 6.884 2 10.26c0 2.393 1.999 4.463 4.91 5.467L4.513 19.99a.556.556 0 00.832.706l5.406-4.325.426-.003c3.493-.076 6.477-1.538 7.829-3.612l-.879-.325c-1.034-.383-1.034-1.845 0-2.228l.234-.086a1.168 1.168 0 01-.476-.595l-.745-2.013-2.013-.745z",
+    fill: "currentColor"
+  }));
+}
+var AiChatSolid = /*#__PURE__*/React.forwardRef(IconAiChatSolid);
+
+function IconAiStars(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("mask", {
+    id: "ai-stars_svg__a",
+    fill: "#fff"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M17.324 2.476a.188.188 0 01.351 0l.875 2.364c.019.05.06.091.11.11l2.364.875a.188.188 0 010 .352l-2.363.874a.187.187 0 00-.111.11l-.875 2.365a.188.188 0 01-.351 0l-.875-2.364a.188.188 0 00-.11-.11l-2.364-.875a.188.188 0 010-.352l2.363-.875a.188.188 0 00.111-.11l.875-2.364zM8.226 4.931c.266-.719 1.281-.719 1.547 0l1.566 4.23 4.23 1.566c.719.266.719 1.282 0 1.547l-4.23 1.566-1.566 4.23c-.266.72-1.281.72-1.547 0L6.66 13.84l-4.23-1.566c-.719-.265-.719-1.281 0-1.547l4.23-1.566 1.566-4.23zM9 7.16L7.96 9.974a.825.825 0 01-.488.487L4.66 11.5l2.81 1.041a.825.825 0 01.488.487L9 15.84l1.04-2.812a.825.825 0 01.488-.487l2.811-1.04-2.81-1.04a.825.825 0 01-.488-.488L9 7.162zm8.675 7.315a.188.188 0 00-.351 0l-.875 2.364a.188.188 0 01-.11.11l-2.364.875a.188.188 0 000 .352l2.363.874c.052.02.092.06.111.11l.875 2.364c.06.164.291.164.351 0l.875-2.363a.187.187 0 01.11-.11l2.364-.875a.188.188 0 000-.352l-2.363-.875a.187.187 0 01-.111-.11l-.875-2.364z"
+  })), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M17.324 2.476a.188.188 0 01.351 0l.875 2.364c.019.05.06.091.11.11l2.364.875a.188.188 0 010 .352l-2.363.874a.187.187 0 00-.111.11l-.875 2.365a.188.188 0 01-.351 0l-.875-2.364a.188.188 0 00-.11-.11l-2.364-.875a.188.188 0 010-.352l2.363-.875a.188.188 0 00.111-.11l.875-2.364zM8.226 4.931c.266-.719 1.281-.719 1.547 0l1.566 4.23 4.23 1.566c.719.266.719 1.282 0 1.547l-4.23 1.566-1.566 4.23c-.266.72-1.281.72-1.547 0L6.66 13.84l-4.23-1.566c-.719-.265-.719-1.281 0-1.547l4.23-1.566 1.566-4.23zM9 7.16L7.96 9.974a.825.825 0 01-.488.487L4.66 11.5l2.81 1.041a.825.825 0 01.488.487L9 15.84l1.04-2.812a.825.825 0 01.488-.487l2.811-1.04-2.81-1.04a.825.825 0 01-.488-.488L9 7.162zm8.675 7.315a.188.188 0 00-.351 0l-.875 2.364a.188.188 0 01-.11.11l-2.364.875a.188.188 0 000 .352l2.363.874c.052.02.092.06.111.11l.875 2.364c.06.164.291.164.351 0l.875-2.363a.187.187 0 01.11-.11l2.364-.875a.188.188 0 000-.352l-2.363-.875a.187.187 0 01-.111-.11l-.875-2.364z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M17.675 2.476l.704-.26-.704.26zm-.351 0l-.704-.26.704.26zM18.55 4.84l.703-.26-.703.26zm.11.11l-.26.704.26-.704zm2.364.875l.26-.704-.26.704zm0 .352l-.26-.704.26.704zm-2.363.874l-.26-.703.26.703zm-.111.11l.703.261-.703-.26zm-.875 2.365l.704.26-.704-.26zm-.351 0l-.704.26.704-.26zm-.875-2.364l.703-.26-.703.26zm-.11-.11l.26-.704-.26.703zm-2.364-.875l-.26.703.26-.703zm0-.352l-.26-.704.26.704zm2.363-.875l.26.704-.26-.704zm.111-.11l.703.26-.703-.26zm-6.676.09l-.703.26.703-.26zm-1.547 0l.703.26-.703-.26zm3.113 4.231l-.704.26.12.324.323.12.26-.704zm4.23 1.566l-.26.703.26-.703zm0 1.547l-.26-.703.26.704zm-4.23 1.566l-.26-.703-.324.12-.12.323.704.26zm-1.566 4.23l-.703-.26.703.26zm-1.547 0l.703-.26-.703.26zM6.66 13.84l.704-.26-.12-.324-.324-.12-.26.704zm-4.23-1.566l.26-.703-.26.704zm0-1.547l.26.703-.26-.703zm4.23-1.566l.26.704.324-.12.12-.323-.704-.26zm1.3.812l.703.26-.704-.26zM9 7.162l.703-.26L9 5l-.704 1.9.704.26zM7.472 10.46l-.26-.703.26.704zM4.66 11.5l-.26-.703-1.901.704 1.9.703.26-.703zm2.81 1.041l.261-.703-.26.703zm.488.487l.704-.26-.704.26zM9 15.84l-.703.26L9 18l.703-1.9L9 15.84zm1.04-2.812l.704.26-.703-.26zm.488-.487l-.26-.703.26.703zm2.811-1.04l.26.703 1.901-.703-1.9-.704-.26.704zm-2.81-1.04l.26-.704-.26.704zm-.488-.488l.703-.26-.703.26zm7.284 4.503l-.704-.26.704.26zm.351 0l.704-.26-.704.26zM16.45 16.84l.703.26-.703-.26zm-.11.11l.26.704-.26-.704zm-2.364.875l-.26-.703.26.703zm0 .352l.26-.704-.26.704zm2.363.874l-.26.704.26-.704zm.111.11l.703-.26-.703.26zm.875 2.364l-.704.26.704-.26zm.351 0l.704.26-.704-.26zm.875-2.363l.703.26-.703-.26zm.11-.11l.261.703-.26-.704zm2.364-.875l.26.703-.26-.703zm0-.352l.26-.703-.26.703zm-2.363-.875l-.26.704.26-.704zm-.111-.11l.703-.26-.703.26zM18.38 2.216c-.302-.817-1.457-.817-1.759 0l1.407.52a.563.563 0 01-1.055 0l1.407-.52zm.874 2.363l-.874-2.363-1.407.52.875 2.364 1.406-.52zm-.332-.332a.562.562 0 01.332.332l-1.406.52a.937.937 0 00.553.555l.521-1.407zm2.364.874l-2.364-.874-.52 1.407 2.363.874.52-1.407zm0 1.759c.816-.302.816-1.456 0-1.759l-.521 1.407a.563.563 0 010-1.055l.52 1.407zm-2.364.875l2.364-.875-.521-1.407-2.363.875.52 1.407zm.332-.333a.562.562 0 01-.332.333l-.52-1.407a.937.937 0 00-.554.554l1.406.52zm-.874 2.364l.874-2.364-1.406-.52-.875 2.363 1.407.52zm-1.759 0c.302.816 1.457.816 1.759 0l-1.407-.52a.563.563 0 011.055 0l-1.407.52zm-.874-2.364l.874 2.364 1.407-.52-.875-2.364-1.406.52zm.332.333a.562.562 0 01-.332-.333l1.406-.52a.938.938 0 00-.553-.554l-.521 1.407zm-2.364-.875l2.364.875.52-1.407-2.363-.875-.52 1.407zm0-1.759c-.816.303-.816 1.457 0 1.759l.521-1.407c.49.181.49.874 0 1.055l-.52-1.407zm2.364-.874l-2.364.874.521 1.407 2.364-.874-.521-1.407zm-.332.332a.562.562 0 01.332-.332l.52 1.407a.938.938 0 00.555-.554l-1.407-.52zm.874-2.363l-.874 2.363 1.406.52.875-2.363-1.407-.52zM10.477 4.67c-.508-1.37-2.447-1.37-2.955 0l1.407.52a.1.1 0 01.015-.027.041.041 0 01.01-.01A.085.085 0 019 5.142c.021 0 .037.006.045.011a.041.041 0 01.01.01.1.1 0 01.015.028l1.407-.52zm1.565 4.231l-1.565-4.23-1.407.52 1.565 4.23 1.407-.52zm3.788 1.123L11.6 8.458l-.521 1.407 4.23 1.565.521-1.406zm0 2.954c1.371-.508 1.371-2.447 0-2.954l-.52 1.406a.103.103 0 01.028.015.044.044 0 01.009.01.084.084 0 01.011.046.084.084 0 01-.011.045.04.04 0 01-.01.01.102.102 0 01-.028.015l.521 1.407zm-4.23 1.565l4.23-1.565-.52-1.407-4.232 1.566.521 1.406zm-1.123 3.788l1.565-4.23-1.407-.521-1.565 4.23 1.407.521zm-2.955 0c.508 1.371 2.447 1.371 2.955 0l-1.407-.52a.1.1 0 01-.015.028.04.04 0 01-.01.009.085.085 0 01-.045.012.085.085 0 01-.046-.012.04.04 0 01-.01-.01.1.1 0 01-.015-.027l-1.407.52zm-1.565-4.23l1.565 4.23 1.407-.52-1.565-4.231-1.407.52zm-3.788-1.123l4.23 1.565.521-1.406-4.23-1.566-.521 1.407zm0-2.954c-1.371.507-1.371 2.446 0 2.954l.52-1.407a.1.1 0 01-.028-.015.04.04 0 01-.009-.01.085.085 0 01-.011-.045.09.09 0 01.011-.046.043.043 0 01.01-.01.099.099 0 01.028-.015l-.521-1.406zm4.23-1.566l-4.23 1.566.52 1.406L6.92 9.865 6.4 8.458zM7.523 4.67L5.957 8.901l1.407.52 1.565-4.23-1.407-.52zm1.14 5.563l1.04-2.81-1.406-.521-1.04 2.81 1.407.521zm-.93.93c.431-.159.771-.498.93-.93l-1.406-.52a.075.075 0 01-.044.044l.52 1.407zm-2.811 1.041l2.811-1.04-.52-1.407-2.812 1.04.52 1.407zm2.811-.366l-2.811-1.04-.52 1.406 2.81 1.04.521-1.406zm.93.93a1.574 1.574 0 00-.93-.93l-.52 1.406c.02.008.036.024.044.045l1.407-.52zm1.04 2.811l-1.04-2.81-1.406.52 1.04 2.81 1.407-.52zm-.366-2.81l-1.04 2.81 1.407.52 1.04-2.81-1.407-.52zm.93-.931c-.43.16-.77.499-.93.93l1.407.52a.075.075 0 01.044-.044l-.52-1.406zm2.812-1.04l-2.811 1.04.52 1.406 2.812-1.04-.52-1.407zm-2.811.366l2.811 1.04.52-1.407-2.81-1.04-.521 1.407zm-.93-.93c.159.43.499.77.93.93l.52-1.407a.075.075 0 01-.044-.044l-1.407.52zm-1.04-2.812l1.04 2.811 1.406-.52-1.04-2.811-1.407.52zm9.73 7.314a.563.563 0 01-1.055 0l1.407-.52c-.302-.816-1.457-.816-1.759 0l1.407.52zm-.875 2.364l.875-2.364-1.407-.52-.874 2.363 1.406.52zm-.553.554a.938.938 0 00.553-.554l-1.406-.52a.563.563 0 01.332-.333l.52 1.407zm-2.364.874l2.364-.874-.521-1.407-2.364.875.521 1.406zm0-1.055c.49.181.49.874 0 1.055l-.52-1.406c-.817.302-.817 1.456 0 1.758l.52-1.407zm2.364.875l-2.364-.875-.52 1.407 2.363.875.52-1.407zm.553.554a.938.938 0 00-.553-.554l-.521 1.407a.563.563 0 01-.332-.333l1.406-.52zm.875 2.363l-.875-2.363-1.406.52.874 2.364 1.407-.52zm-1.055 0a.563.563 0 011.055 0l-1.407.52c.302.817 1.457.817 1.759 0l-1.407-.52zm.875-2.363l-.875 2.363 1.407.52.874-2.363-1.406-.52zm.553-.554a.937.937 0 00-.553.554l1.406.52a.562.562 0 01-.332.333l-.52-1.407zm2.364-.875l-2.363.875.52 1.407 2.364-.875-.521-1.407zm0 1.055a.563.563 0 010-1.055l.52 1.407c.817-.302.817-1.456 0-1.758l-.52 1.406zm-2.363-.874l2.363.874.52-1.406-2.363-.875-.52 1.407zm-.554-.554a.938.938 0 00.553.554l.521-1.407a.562.562 0 01.332.332l-1.406.52zm-.875-2.364l.875 2.364 1.406-.52-.874-2.364-1.407.52z",
+    fill: "currentColor",
+    mask: "url(#ai-stars_svg__a)"
+  }));
+}
+var AiStars = /*#__PURE__*/React.forwardRef(IconAiStars);
+
 function IconArrowBottom(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -1471,6 +1512,21 @@ function IconEnvelopeApproved(props, svgRef) {
 }
 var EnvelopeApproved = /*#__PURE__*/React.forwardRef(IconEnvelopeApproved);
 
+function IconEnvelopeSolid(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: "M2.137 5.07l8.77 7.016a1.75 1.75 0 002.186 0l8.77-7.016c.088.209.137.439.137.68v12.5A1.75 1.75 0 0120.25 20H3.75A1.75 1.75 0 012 18.25V5.75c0-.241.049-.471.137-.68zM3.28 4.064c.15-.042.307-.064.47-.064h16.5c.163 0 .32.022.47.064l-8.564 6.85a.25.25 0 01-.312 0L3.28 4.064z",
+    fill: "currentColor"
+  }));
+}
+var EnvelopeSolid = /*#__PURE__*/React.forwardRef(IconEnvelopeSolid);
+
 function IconEnvelope(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2481,6 +2537,19 @@ function IconPersonTick(props, svgRef) {
 }
 var PersonTick = /*#__PURE__*/React.forwardRef(IconPersonTick);
 
+function IconPhoneSolid(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: "M5.357 4.384l.891-.58c.835-.542 1.942-.323 2.586.513l1.28 1.663c.56.724.628 1.734.17 2.496l-1.273 2.12c.372.965.962 1.855 1.77 2.67a8.253 8.253 0 002.701 1.844l1.876-1.253c.711-.475 1.645-.398 2.317.19l1.565 1.373c.782.685.99 1.862.487 2.755l-.538.957c-.536.952-1.517 1.508-2.576 1.46-2.498-.115-5.197-1.718-8.096-4.811-2.903-3.098-4.408-5.983-4.514-8.655-.045-1.125.47-2.168 1.354-2.742z",
+    fill: "currentColor"
+  }));
+}
+var PhoneSolid = /*#__PURE__*/React.forwardRef(IconPhoneSolid);
+
 function IconPlay(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -2587,6 +2656,19 @@ function IconProjects(props, svgRef) {
 }
 var Projects = /*#__PURE__*/React.forwardRef(IconProjects);
 
+function IconQuestionMarkBold(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: "M5.367 7.727a.476.476 0 00.484.48h3.147c.274 0 .492-.222.537-.493.184-1.108.965-1.9 2.266-1.9 1.161 0 2.252.623 2.252 2.053 0 1.246-.864 1.841-2.195 2.705-1.714 1.09-2.634 2.534-2.422 4.715l.008.173a.5.5 0 00.5.478h3a.5.5 0 00.5-.5v-.18c0-1.514.665-1.953 2.322-3.072 1.374-.934 2.86-2.025 2.86-4.545 0-3.569-3.002-5.325-6.556-5.325-3.361 0-6.618 1.557-6.703 5.411zm3.432 12.247c0 1.388 1.09 2.322 2.776 2.322 1.741 0 2.817-.934 2.817-2.322 0-1.416-1.09-2.35-2.817-2.35-1.7 0-2.776.934-2.776 2.35z",
+    fill: "currentColor"
+  }));
+}
+var QuestionMarkBold = /*#__PURE__*/React.forwardRef(IconQuestionMarkBold);
+
 function IconQuestionMark(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     fill: "none",
@@ -3294,6 +3376,8 @@ const icons = {
   'accounting-year-cancel': AccountingYearCancel,
   'accounting-year': AccountingYear,
   accounting: Accounting,
+  'ai-chat-solid': AiChatSolid,
+  'ai-stars': AiStars,
   'arrow-bottom': ArrowBottom,
   'arrow-down': ArrowDown,
   'arrow-end': ArrowEnd,
@@ -3391,6 +3475,7 @@ const icons = {
   'entry-type-supplier-invoice': EntryTypeSupplierInvoice,
   'entry-type-supplier-payment': EntryTypeSupplierPayment,
   'envelope-approved': EnvelopeApproved,
+  'envelope-solid': EnvelopeSolid,
   envelope: Envelope,
   'expand-view': ExpandView,
   expenses: Expenses,
@@ -3466,6 +3551,7 @@ const icons = {
   'person-minus': PersonMinus,
   'person-plus': PersonPlus,
   'person-tick': PersonTick,
+  'phone-solid': PhoneSolid,
   play: Play,
   'plus-minus': PlusMinus,
   print: Print,
@@ -3474,6 +3560,7 @@ const icons = {
   profile: Profile,
   'project-cards': ProjectCards,
   projects: Projects,
+  'question-mark-bold': QuestionMarkBold,
   'question-mark': QuestionMark,
   quicklinks: Quicklinks,
   'rating-bankruptcy': RatingBankruptcy,
@@ -4016,9 +4103,13 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
     title,
     children,
     placement,
+    hide = false,
     ...otherProps
   } = props;
   const className = cn(otherProps.className);
+  if (hide) {
+    return children;
+  }
   return /*#__PURE__*/React.createElement(TooltipPrimitive.Root, {
     delayDuration: 250
   }, /*#__PURE__*/React.createElement(TooltipPrimitive.Trigger, {
@@ -4291,6 +4382,12 @@ const defaultLocalisationTexts = {
       saving: {
         progress: 'Saving...',
         complete: 'Saved'
+      },
+      clearChangesConfirmationDialog: {
+        title: 'Discard changes',
+        description: 'Are you sure you want to discard changes on row ‘[ROW_IDENTIFIER] [ROW_IDENTIFIER_VALUE]’. Your changes will be lost.',
+        cancel: 'Continue edititng',
+        confirm: 'Discard'
       }
     },
     filters: {
@@ -4391,6 +4488,19 @@ const defaultLocalisationTexts = {
     },
     otherOptions: {
       tooltip: 'Table settings'
+    },
+    validation: {
+      index: 'Index',
+      alert: {
+        unsavedEntries: (count = 1) => count === 1 ? 'unsaved entry:' : 'unsaved entries:',
+        incompleteAndHavntBeenSaved: (count = 1) => count === 1 ? 'is incomplete and haven’t been saved.' : 'are incomplete and haven’t been saved.'
+      },
+      resetFiltersDialog: {
+        title: 'Row is hidden',
+        description: 'The row is hidden due to filtering.',
+        cancel: 'Cancel',
+        confirm: 'Remove filters'
+      }
     }
   },
   searchInput: {
@@ -6692,11 +6802,14 @@ const Trigger$4 = /*#__PURE__*/React.forwardRef(function DrawerTrigger(props, re
   }));
 });
 
+const DEFAULT_OUTLET_NAME = 'default';
 const Outlet = /*#__PURE__*/React.forwardRef(function Outlet(props, ref) {
+  var _props$name;
   const className = cn('h-full ml-auto overflow-hidden flex-shrink-0', props.className);
   return /*#__PURE__*/React.createElement("div", Object.assign({}, props, {
     className: className,
     "data-taco": "drawer-outlet",
+    "data-taco-outlet-name": (_props$name = props.name) !== null && _props$name !== void 0 ? _props$name : DEFAULT_OUTLET_NAME,
     ref: ref
   }));
 });
@@ -6720,6 +6833,7 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(props, ref) {
     children,
     focusTrap = props.focusTrap === undefined && props.variant === 'overlay' ? true : props.focusTrap,
     showCloseButton = true,
+    outletName,
     ...otherProps
   } = props;
   const [open, setOpen] = reactUseControllableState.useControllableState({
@@ -6749,9 +6863,10 @@ const Drawer = /*#__PURE__*/React.forwardRef(function Drawer(props, ref) {
   }, []);
   React.useEffect(() => {
     var _document$querySelect;
-    const outletElement = (_document$querySelect = document.querySelector('[data-taco="drawer-outlet"]')) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.body;
+    const outletSelector = `[data-taco="drawer-outlet"][data-taco-outlet-name="${outletName !== null && outletName !== void 0 ? outletName : DEFAULT_OUTLET_NAME}"]`;
+    const outletElement = (_document$querySelect = document.querySelector(outletSelector)) !== null && _document$querySelect !== void 0 ? _document$querySelect : document.body;
     setOutlet(outletElement);
-  }, []);
+  }, [outletName]);
   React.useEffect(() => {
     if (open) {
       // if drawerStack is defined, this means that another drawer was opened before
@@ -6784,7 +6899,30 @@ Drawer.Close = Close$3;
 Drawer.Actions = Actions;
 Drawer.Outlet = Outlet;
 
+const isTruncated = targetElement => {
+  if (targetElement !== null) {
+    return targetElement.offsetWidth < targetElement.scrollWidth;
+  }
+  return false;
+};
+const useTruncated = (element, deps = []) => {
+  const [truncated, setTruncated] = React__default.useState(isTruncated(element));
+  React__default.useEffect(() => {
+    setTruncated(isTruncated(element));
+  }, [element, ...deps]);
+  return {
+    truncated
+  };
+};
+
 const Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
+  const [showTooltip, setShowTooltip] = React.useState(false);
+  const messageRef = React.useRef(null);
+  React.useEffect(() => {
+    // refs are null on the first render so setting showTooltip state forces the rerender to see if message is
+    // truncated or not
+    setShowTooltip(true);
+  }, []);
   const {
     disabled,
     children,
@@ -6802,14 +6940,21 @@ const Field = /*#__PURE__*/React.forwardRef(function Field(props, ref) {
     'text-yellow-700': warning && !invalid,
     'opacity-50': disabled
   });
+  const {
+    truncated: isMessageTrucated
+  } = useTruncated(messageRef.current, [message, showTooltip]);
   return /*#__PURE__*/React.createElement("label", Object.assign({}, otherProps, {
     className: className,
     "data-taco": "label",
     ref: ref
-  }), children, message && /*#__PURE__*/React.createElement("span", {
+  }), children, message && /*#__PURE__*/React.createElement(Tooltip, {
+    title: message,
+    hide: !isMessageTrucated
+  }, /*#__PURE__*/React.createElement("span", {
     className: messageClassName,
+    ref: messageRef,
     role: invalid ? 'alert' : undefined
-  }, message));
+  }, message)));
 });
 
 const Form = /*#__PURE__*/React.forwardRef(function Form(props, ref) {
@@ -9013,6 +9158,7 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
     findTotal,
     loading = false,
     onChange: handleChange,
+    onClear: handleClearCallback,
     onClickFindNext: handleClickFindNext,
     onClickFindPrevious: handleClickFindPrevious,
     settingsContent,
@@ -9049,6 +9195,7 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
       return (_internalRef$current2 = internalRef.current) === null || _internalRef$current2 === void 0 ? void 0 : _internalRef$current2.blur();
     });
     handleChange('');
+    handleClearCallback === null || handleClearCallback === void 0 ? void 0 : handleClearCallback();
   };
   const handleFocus = event => {
     var _attributes$onFocus;
@@ -9170,6 +9317,8 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
         opacity: 0.999
       }
     }, input, /*#__PURE__*/React__default.createElement("div", {
+      // We need to trigger blur when settings got blured as well, because settings is a part of SearchInput2 component
+      onBlur: handleBlur,
       className: settingsClassname,
       onClickCapture: () => {
         var _internalRef$current5;
@@ -12516,9 +12665,9 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     sortDirection,
     table
   } = props;
-  const className = cn('sticky font-bold border-b-2 box-content group/column relative', '[[role="table"][data-resizing="true"]_&]:pointer-events-none', 'px-[var(--table3-cell-padding-x)]', {
+  const className = cn('font-bold border-b-2 box-content group/column relative', '[[role="table"][data-resizing="true"]_&]:pointer-events-none', 'px-[var(--table3-cell-padding-x)]', {
     '!border-white': isPlaceholder,
-    'h-10 items-center': !isPrinting,
+    'h-10 items-center sticky': !isPrinting,
     'pb-2': isPrinting,
     'cursor-pointer select-none': canSort,
     'hover:bg-grey-100': !isPlaceholder && (canSort || canResize || hasMenu),
@@ -12598,27 +12747,60 @@ const RowContext = /*#__PURE__*/React__default.createContext({
   setIsHovered: () => {
     /* empty */
   },
-  rowIndex: 0
+  rowIndex: 0,
+  hasError: false
 });
 const useRowContext = () => React__default.useContext(RowContext);
 
+const Highlight = props => {
+  const {
+    current,
+    frozenColumnIndex,
+    index,
+    tableRef,
+    ...attributes
+  } = props;
+  const {
+    hasError: rowHasError
+  } = useRowContext();
+  const ref = React__default.useRef(null);
+  const className = cn('h-full flex [justify-content:inherit] [text-align:inherit]', props.className, {
+    // normal row
+    'bg-blue-200/25': !current && !rowHasError,
+    // current row
+    'bg-blue-200/75': current && !rowHasError,
+    // normal row with error
+    'bg-[#eaeaf5]': !current && rowHasError,
+    // current with error
+    'bg-[#dadaf5]': current && rowHasError
+  });
+  React__default.useEffect(() => {
+    if (ref.current && current) {
+      scrollColumnIntoView(index, frozenColumnIndex, ref.current, tableRef.current);
+    }
+  }, [current]);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
+    "data-taco": 'highlight',
+    className: className,
+    ref: ref
+  }));
+};
+
 function DisplayCell(props) {
   const {
     cell,
     className,
     column,
-    getValue,
+    value,
     index,
     row,
     table,
-    tableRef
+    tableRef,
+    highlighted,
+    highlightedAsCurrent
   } = props;
   const columnMeta = React__default.useMemo(() => column.columnDef.meta, []);
   const tableMeta = table.options.meta;
-  const {
-    rowIndex
-  } = React__default.useContext(RowContext);
-  const value = getValue();
   // cells are heavily memoized because performance in our table is critical
   // be careful and selective about props that you pass to the cell
   const memoedProps = React__default.useMemo(() => {
@@ -12636,29 +12818,9 @@ function DisplayCell(props) {
       tableRef
     };
   }, [row.original, props.children, value, tableMeta.columnFreezing.frozenColumnIndex]);
-  const memoedHighlight = React__default.useMemo(() => {
-    var _tableMeta$search$que;
-    if (!tableMeta.search.isHighlightingEnabled || !columnMeta.enableSearch) {
-      return false;
-    }
-    if ((_tableMeta$search$que = tableMeta.search.query) !== null && _tableMeta$search$que !== void 0 && _tableMeta$search$que.length) {
-      return isCellHighlighted(tableMeta.search.query, value, columnMeta.dataType);
-    }
-    return false;
-  }, [value, tableMeta.search.isHighlightingEnabled, tableMeta.search.excludeUnmatchedResults, tableMeta.search.query]);
-  const memoedHighlightCurrent = React__default.useMemo(() => {
-    if (!tableMeta.search.isHighlightingEnabled || !memoedHighlight || tableMeta.search.currentHighlightColumnIndex === undefined) {
-      return false;
-    }
-    const [currentRowIndex, currentColumnIndex] = tableMeta.search.highlightedColumnIndexes[tableMeta.search.currentHighlightColumnIndex];
-    if (currentRowIndex === rowIndex && currentColumnIndex === index) {
-      return true;
-    }
-    return false;
-  }, [memoedHighlight, tableMeta.search.highlightedColumnIndexes.length, tableMeta.search.currentHighlightColumnIndex]);
   return /*#__PURE__*/React__default.createElement(MemoedDisplayCell, Object.assign({}, memoedProps, {
-    highlighted: memoedHighlight,
-    highlightedAsCurrent: memoedHighlightCurrent
+    highlighted: highlighted,
+    highlightedAsCurrent: highlightedAsCurrent
   }));
 }
 const MemoedDisplayCell = /*#__PURE__*/React__default.memo(function MemoedDisplayCell(props) {
@@ -12699,31 +12861,6 @@ const MemoedDisplayCell = /*#__PURE__*/React__default.memo(function MemoedDispla
     tableRef: tableRef
   }, content) : content);
 });
-const Highlight = props => {
-  const {
-    current,
-    frozenColumnIndex,
-    index,
-    tableRef,
-    ...attributes
-  } = props;
-  const ref = React__default.useRef(null);
-  const className = cn('h-full flex [justify-content:inherit] [text-align:inherit]', props.className, {
-    // normal row
-    'bg-blue-200/25': !current,
-    // current row
-    'bg-blue-200/75': current
-  });
-  React__default.useEffect(() => {
-    if (ref.current && current) {
-      scrollColumnIntoView(index, frozenColumnIndex, ref.current, tableRef.current);
-    }
-  }, [current]);
-  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
-    className: className,
-    ref: ref
-  }));
-};
 
 function Footer$3(props) {
   const {
@@ -12753,7 +12890,7 @@ const MemoedFooter = /*#__PURE__*/React__default.memo(function MemoedFooter(prop
     meta,
     table
   } = props;
-  const className = cn('sticky bottom-0 border-t-2 font-bold h-10 box-content items-center group/column relative', {
+  const className = cn('sticky bottom-0 border-t-2 font-bold h-10 box-content items-center group/column relative z-10', {
     'z-30': isFrozen
   });
   if (table.options.debugAll) {
@@ -13686,238 +13823,701 @@ function useRowClick(onRowClick) {
   };
 }
 
-var SavingStateValue;
-(function (SavingStateValue) {
-  SavingStateValue["Saving"] = "saving";
-  SavingStateValue["Saved"] = "saved";
-  SavingStateValue["Error"] = "error";
-})(SavingStateValue || (SavingStateValue = {}));
-function useEditing(isEnabled, onSave) {
-  // used to switch the table into editing mode
-  const [isEditing, setIsEditing] = React__default.useState(false);
-  // Saving indicator need to show saving state per row, saving state can have at lkeast two states 'saving', 'saved',
-  // 'saved' should remain for a few seconds to show tick icon after row has been saved.
-  const [savingStates, setSavingStates] = React__default.useState(null);
-  // sets of row changes pending save, either they have not saved yet or they have errors
-  const [changes, setChanges] = React__default.useState(null);
-  const [detailModeEditing, setDetailModeEditing] = React__default.useState(false);
-  function getCellValue(cell) {
-    var _changes$cell$row$id;
-    return changes ? (_changes$cell$row$id = changes[cell.row.id]) === null || _changes$cell$row$id === void 0 ? void 0 : _changes$cell$row$id[cell.column.id] : undefined;
-  }
-  // Saves editing cell value into editing state.
-  function setCellValue(cell, value) {
-    setChanges(currentChanges => {
-      const nextChanges = {
-        ...currentChanges
-      };
-      if (nextChanges[cell.row.id]) {
-        nextChanges[cell.row.id][cell.column.id] = value;
-        // we should probably delete the cell if it has just reverted back to its original value
-      } else {
-        nextChanges[cell.row.id] = {
-          ...cell.row.original,
-          [cell.column.id]: value
-        };
-      }
-      return nextChanges;
-    });
+const focussableNodeNames = ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'DETAILS'];
+const focusableSelector = /*#__PURE__*/focussableNodeNames.join(', ');
+const hasChanged = (value, newValue) => {
+  if (dateFns.isDate(value) && dateFns.isDate(newValue)) {
+    return !isWeakEqual(value, newValue);
+  } else if (Array.isArray(value)) {
+    return JSON.stringify(value) !== JSON.stringify(newValue);
   }
-  // Removes changes from editing state by row id
-  function resetChange(rowId) {
-    let currentChanges = changes ? {
-      ...changes
-    } : {};
-    if (currentChanges) {
-      delete currentChanges[rowId];
-    }
-    const changeset = Object.keys(currentChanges);
-    if (changeset.length === 0) {
-      currentChanges = null;
+  return value !== newValue;
+};
+const willRowMoveAfterSorting = (value, cell, rowIndex, rows, desc) => {
+  var _resortedRows$index;
+  const miniSortRows = [{
+    ...cell.row,
+    original: {
+      ...cell.row.original,
+      [cell.column.id]: value
     }
-    setChanges(currentChanges);
+  }];
+  // getValue is used by the built-in sort functons, so we need to make sure it returns the changed value
+  miniSortRows[0].getValue = () => value;
+  let index = 0;
+  if (rowIndex > 0) {
+    miniSortRows.unshift(rows[rowIndex - 1]);
+    index = 1;
   }
-  const handleKeyDown = React__default.useCallback(event => {
-    if (event.defaultPrevented) {
+  if (rowIndex < rows.length - 1) {
+    miniSortRows.push(rows[rowIndex + 1]);
+  }
+  let resortedRows = [...miniSortRows].sort((a, b) => cell.column.getSortingFn()(a, b, cell.column.id));
+  if (desc) {
+    resortedRows = resortedRows.reverse();
+  }
+  return ((_resortedRows$index = resortedRows[index]) === null || _resortedRows$index === void 0 ? void 0 : _resortedRows$index.id) !== cell.row.id;
+};
+// Last focused cell state (not react state)
+class LastCellIndex {
+  constructor() {
+    this._value = '0';
+  }
+  get value() {
+    return this._value;
+  }
+  set value(val) {
+    this._value = val;
+  }
+}
+// Returns index of a closest parent column
+function getColumnIndex(element) {
+  if (element) {
+    var _element$closest;
+    return (_element$closest = element.closest('[role=cell]')) === null || _element$closest === void 0 ? void 0 : _element$closest.getAttribute('data-column-index');
+  }
+  return null;
+}
+
+const FOCUS_MANAGER_OPTIONS = {
+  tabbable: true,
+  // Filter out all focusable elelemnts which are not in current row
+  accept: element => !!element.closest('[role="row"][data-current="true"]')
+};
+function Row$1(props) {
+  var _tableMeta$validation, _tableMeta$validation2;
+  const focusManager = focus.useFocusManager();
+  const tableMeta = props.table.options.meta;
+  const isCurrentRow = tableMeta.currentRow.currentRowIndex === props.index;
+  const isDraggingRow = tableMeta.rowDrag.dragging[props.row.id];
+  const isFirstRow = props.index === 0;
+  // we use non-css hovered state to determine whether to render actions or not, for performance
+  const [isHovered, setIsHovered] = React__default.useState(false);
+  // tab behaviour is consistent across normal mode and edit mode, handle it here
+  const handleKeyDown = event => {
+    if (event.isDefaultPrevented() || event.isPropagationStopped()) {
       return;
     }
-    if (shouldTriggerShortcut(event, {
-      key: 'e',
-      meta: true,
-      shift: false
-    })) {
-      setIsEditing(editing => !editing);
-    } else if (shouldTriggerShortcut(event, {
-      key: 's',
-      meta: true,
-      shift: false
-    })) {
-      // Prevent default browser save
-      event.preventDefault();
-      saveChangesIfNeeded();
-    }
-  }, [isEditing]);
-  const handleBlur = React__default.useCallback(event => {
-    if (event.target === event.currentTarget) {
-      saveChangesIfNeeded();
-    }
-  }, []);
-  // Creates initial saving states from changes object
-  const addSavingStates = () => {
-    const changeset = Object.keys(changes || {});
-    const additionalSavingStates = _.reduce(changeset, (result, value) => {
-      return {
-        ...result,
-        [value]: {
-          state: SavingStateValue.Saving
-        }
-      };
-    }, {});
-    setSavingStates({
-      ...savingStates,
-      ...additionalSavingStates
-    });
-  };
-  // Repoves edititng state by row is. Used in delayed saving indicator.
-  const removeSavingState = rowId => {
-    const newSavingStates = {
-      ...savingStates
-    };
-    delete newSavingStates[rowId];
-    setSavingStates(newSavingStates);
-  };
-  // Checks if we have changes, then saves them
-  const saveChangesIfNeeded = function () {
-    try {
-      if (!changes) {
-        return Promise.resolve();
-      }
-      const changeset = Object.keys(changes);
-      const _temp = function () {
-        if (onSave && changeset.length) {
-          addSavingStates();
-          return Promise.resolve(Promise.allSettled(changeset.map(rowId => onSave(changes[rowId])))).then(function (responses) {
-            setChanges(currentChanges => {
-              const nextChanges = {
-                ...currentChanges
-              };
-              responses.forEach((response, index) => {
-                const rowId = changeset[index];
-                if (response.status === 'fulfilled') {
-                  delete nextChanges[rowId];
-                }
-              });
-              return nextChanges;
-            });
-            setSavingStates(savingStates => {
-              const nextSavingStates = savingStates ? {
-                ...savingStates
-              } : {};
-              responses.forEach((response, index) => {
-                const rowId = changeset[index];
-                if (response.status === 'fulfilled') {
-                  nextSavingStates[rowId] = {
-                    state: SavingStateValue.Saved
-                  };
-                } else {
-                  // add the error when validation is added
-                  nextSavingStates[rowId] = {
-                    state: SavingStateValue.Error
-                  };
-                }
-              });
-              return nextSavingStates;
-            });
-          });
+    if (event.key === 'Tab') {
+      tableMeta.hoverState.pause(true);
+      let focusedElement;
+      if (event.shiftKey) {
+        // looping backwards
+        focusedElement = focusManager.focusPrevious(FOCUS_MANAGER_OPTIONS);
+        if (focusedElement) {
+          // override default behaviour, since we're handling focus internally now
+          event.preventDefault();
+        } else {
+          // there are no previous elements to focus, go up a row or go outside the table
+          if (!isFirstRow) {
+            event.preventDefault();
+            tableMeta.currentRow.setCurrentRowIndex(props.index - 1);
+            setTimeout(() => focusManager.focusLast(FOCUS_MANAGER_OPTIONS), 1);
+          }
         }
-      }();
-      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
-    } catch (e) {
-      return Promise.reject(e);
+      } else {
+        // looping forwards
+        focusedElement = focusManager.focusNext(FOCUS_MANAGER_OPTIONS);
+        if (focusedElement) {
+          // override default behaviour, since we're handling focus internally now
+          event.preventDefault();
+        } else {
+          // there are no next elements to focus, go down a row or go outside the table
+          if (!props.isLastRow) {
+            event.preventDefault();
+            tableMeta.currentRow.setCurrentRowIndex(props.index + 1);
+            setTimeout(() => focusManager.focusFirst(FOCUS_MANAGER_OPTIONS), 1);
+          }
+        }
+      }
     }
   };
-  const [rowMoveReason, setRowMoveReason] = React__default.useState({});
-  const removeRowMoveReason = columnId => {
-    setRowMoveReason(prevState => {
-      const newState = {
-        ...prevState
-      };
-      delete newState[columnId];
-      return newState;
+  const hasError = !!Object.keys((_tableMeta$validation = (_tableMeta$validation2 = tableMeta.validation.errors) === null || _tableMeta$validation2 === void 0 ? void 0 : _tableMeta$validation2[props.row.id]) !== null && _tableMeta$validation !== void 0 ? _tableMeta$validation : {}).length;
+  // rows are heavily memoized because performance in our table is critical
+  // be careful and selective about props that you pass to the row
+  const memoedProps = {
+    // aria-grabbed is being deprecated but there is no current alternative api, we use it until there is
+    'aria-grabbed': isDraggingRow ? true : tableMeta.rowDrag.isEnabled ? false : undefined,
+    'data-current': isCurrentRow,
+    'data-selected': props.row.getIsSelected(),
+    'data-invalid': hasError,
+    draggable: tableMeta.rowDrag.isEnabled,
+    index: props.index,
+    onClick: tableMeta.rowClick.handleClick,
+    onDrop: tableMeta.rowDrop.isEnabled ? tableMeta.rowDrop.handleDrop : undefined,
+    onKeyDown: handleKeyDown
+  };
+  let output = /*#__PURE__*/React__default.createElement(MemoedRow, Object.assign({}, props, memoedProps));
+  if (tableMeta.editing.isEditing && (isCurrentRow || isHovered && !tableMeta.hoverState.isPaused)) {
+    output = /*#__PURE__*/React__default.createElement(EditingRow, Object.assign({}, props, memoedProps, {
+      isFirstRow: isFirstRow,
+      setCurrentRowIndex: tableMeta.currentRow.setCurrentRowIndex
+    }));
+  }
+  // we store the row index in context because in a virtualised table the row index and the
+  // react table row index do not match when, for example, sorting is applied
+  const contextValue = React__default.useMemo(() => ({
+    isHovered,
+    setIsHovered,
+    rowIndex: props.index,
+    hasError
+  }), [isHovered, hasError, props.index]);
+  return /*#__PURE__*/React__default.createElement(RowContext.Provider, {
+    value: contextValue
+  }, output);
+}
+// turns out we might need some kind of "state" for the focused column, but it doesn't need to be react state that re-renders
+const lastCellIndex = /*#__PURE__*/new LastCellIndex();
+// This code is needed to avoid multiple rows being hovered at the same time (it happens since we use non-css hovering)
+let previouslyHoveredIndex;
+const unhoverPreviousRow = tableRef => {
+  if (previouslyHoveredIndex !== undefined) {
+    var _tableRef$current;
+    const mouseoutEvent = new MouseEvent('mouseout', {
+      view: window,
+      bubbles: true,
+      cancelable: true
     });
+    const previouslyHovered = tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.querySelector(`[data-row-index="${previouslyHoveredIndex}"]`);
+    previouslyHovered === null || previouslyHovered === void 0 ? void 0 : previouslyHovered.dispatchEvent(mouseoutEvent);
+  }
+};
+function EditingRow(props) {
+  const {
+    isFirstRow,
+    isLastRow,
+    onKeyDown,
+    setCurrentRowIndex,
+    virtualiser,
+    ...attributes
+  } = props;
+  const focusManager = focus.useFocusManager();
+  const tableMeta = props.table.options.meta;
+  const handleClickCapture = event => {
+    lastCellIndex.value = getColumnIndex(event.target);
   };
-  const showWarning = React__default.useCallback(event => {
-    if (isEditing && changes && Object.keys(changes).length > 0) {
-      event.returnValue = true;
-      return true;
+  const handleArrowLeftKey = event => {
+    let focusedElement;
+    if (event.key === 'ArrowLeft') {
+      // We need to perform special behaviour when focus reaches the end of the row,
+      // so we don't need default browser behaviour.
+      event.stopPropagation();
+      event.preventDefault();
+      tableMeta.hoverState.pause(true);
+      // "CTRL + ArrowLeft" or "META + ArrowLeft" should focus first focusable element of the row
+      if (event.ctrlKey || event.metaKey) {
+        event.target.blur();
+        focusedElement = focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);
+        lastCellIndex.value = getColumnIndex(focusedElement);
+      } else {
+        // looping backwards
+        focusedElement = focusManager.focusPrevious(FOCUS_MANAGER_OPTIONS);
+        if (focusedElement) {
+          lastCellIndex.value = getColumnIndex(focusedElement);
+        } else {
+          // there are no previous elements to focus, go up a row (if there are rows above)
+          if (!isFirstRow || !event.currentTarget.contains(focusedElement)) {
+            event.preventDefault();
+            tableMeta.hoverState.pause(true);
+            tableMeta.currentRow.setCurrentRowIndex(props.index - 1);
+            setTimeout(() => {
+              focusedElement = focusManager.focusLast(FOCUS_MANAGER_OPTIONS);
+              // Need to update lastIndex when row got changed and last element got selected.
+              lastCellIndex.value = getColumnIndex(focusedElement);
+            }, 1);
+          }
+        }
+      }
     }
-    return false;
-  }, [isEditing, changes]);
+  };
+  const handleArrowRightKey = event => {
+    let focusedElement;
+    if (event.key === 'ArrowRight') {
+      // We need to perform special behaviour when focus reaches the end of the row,
+      // so we don't need default browser behaviour.
+      event.stopPropagation();
+      event.preventDefault();
+      tableMeta.hoverState.pause(true);
+      // "CTRL + ArrowRight" or "META + ArrowRight" should focus last focusable element of the row
+      if (event.ctrlKey || event.metaKey) {
+        event.target.blur();
+        focusedElement = focusManager.focusLast(FOCUS_MANAGER_OPTIONS);
+        lastCellIndex.value = getColumnIndex(focusedElement);
+      } else {
+        // looping forwards
+        focusedElement = focusManager.focusNext(FOCUS_MANAGER_OPTIONS);
+        if (focusedElement) {
+          lastCellIndex.value = getColumnIndex(focusedElement);
+        } else {
+          // there are no next elements to focus, go down a row or go outside the table
+          if (!props.isLastRow && !event.currentTarget.contains(focusedElement)) {
+            event.preventDefault();
+            tableMeta.hoverState.pause(true);
+            tableMeta.currentRow.setCurrentRowIndex(props.index + 1);
+            setTimeout(() => {
+              focusedElement = focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);
+              // Need to update lastIndex when row got changed and last element got selected.
+              lastCellIndex.value = getColumnIndex(focusedElement);
+            }, 1);
+          }
+        }
+      }
+    }
+  };
   React__default.useEffect(() => {
-    window.addEventListener('beforeunload', showWarning);
-    return () => {
-      window.removeEventListener('beforeunload', showWarning);
-    };
-  }, [showWarning]);
-  return {
-    isEnabled,
-    isEditing,
-    toggleEditing: setIsEditing,
-    changes,
-    getCellValue,
-    setCellValue,
-    saveChangesIfNeeded,
-    detailModeEditing,
-    setDetailModeEditing,
-    rowMoveReason,
-    setRowMoveReason,
-    removeRowMoveReason,
-    handleKeyDown,
-    handleBlur,
-    resetChange,
-    savingStates,
-    removeSavingState
+    // if some row stuck in hovered state, we heed to unhover it when hover state is paused
+    if (tableMeta.hoverState.isPaused) {
+      unhoverPreviousRow(props.tableRef);
+    }
+  }, [tableMeta.hoverState.isPaused]);
+  const handleKeyDown = event => {
+    if (event.isDefaultPrevented() || event.isPropagationStopped() || tableMeta.editing.detailModeEditing || tableMeta.shortcutsState.isPaused) {
+      return;
+    }
+    onKeyDown(event); // handles tab behaviour
+    handleArrowLeftKey(event);
+    handleArrowRightKey(event);
   };
+  // this ensures we focus either on a field or on the same column when keyboard navigating up/down
+  React__default.useEffect(() => {
+    // When table in searching state, whe should prevent editing control to be focused, because it will cause search field to loose focus.
+    if (tableMeta.currentRow.currentRowIndex === props.index && !tableMeta.search.isSearching) {
+      if (lastCellIndex.value !== null) {
+        var _props$tableRef$curre;
+        const lastCellElement = (_props$tableRef$curre = props.tableRef.current) === null || _props$tableRef$curre === void 0 ? void 0 : _props$tableRef$curre.querySelector(`[role="row"][data-current="true"] [data-column-index="${lastCellIndex.value}"]`);
+        const focusableElement = lastCellElement === null || lastCellElement === void 0 ? void 0 : lastCellElement.querySelector(focusableSelector);
+        if (focusableElement) {
+          focusableElement.focus();
+          // if we found a cell but it doesn't contain focusable element, then we'll focus the first one in a row.
+        } else if (lastCellElement) {
+          const focusedElement = focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);
+          lastCellIndex.value = getColumnIndex(focusedElement);
+        }
+      } else {
+        const focusedElement = focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);
+        lastCellIndex.value = getColumnIndex(focusedElement);
+      }
+    }
+    // Need to subscribe to current row index and check is it a current row,
+    // for a situation where hovered row is the next row after current row...
+    // In this case row will not be re-rendered if user switch to next row, because hovered row also renders EditingRow.
+  }, [tableMeta.currentRow.currentRowIndex, tableMeta.search.isSearching]);
+  return /*#__PURE__*/React__default.createElement(MemoedRow, Object.assign({}, attributes, {
+    onClickCapture: handleClickCapture,
+    onKeyDown: handleKeyDown
+  }));
 }
-
-const savingIndicatorHideDelay = 3000;
-const COLUMN_ID$1 = '__editing_actions';
-const MemoedCell$1 = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
+const clickableElements = ['input', 'button', 'a', 'select', 'option', 'label', 'textarea'];
+const MemoedRow = /*#__PURE__*/React__default.memo(function MemoedRow(props) {
   const {
-    hasChanges,
-    isCurrentRow,
-    isEditing,
+    index,
+    isLastRow: _1,
+    measureRef,
+    onClick,
+    onClickCapture,
+    onDrop,
     row,
-    table
+    table,
+    tableRef,
+    ...attributes
   } = props;
+  const ref = React__default.useRef(null);
   const tableMeta = table.options.meta;
-  const savingState = tableMeta.editing.savingStates && tableMeta.editing.savingStates[row.id];
-  const [isSavedIndicatorVisible, setIsSavingIndicatorVisible] = React__default.useState(false);
   const {
-    texts
-  } = useLocalization();
-  const handleSaved = () => {
-    setIsSavingIndicatorVisible(false);
-    tableMeta.editing.removeSavingState(row.id);
-  };
-  const timer = useTimer(savingIndicatorHideDelay, handleSaved);
+    setIsHovered
+  } = useRowContext();
+  // we measure the first cell (since the row has display: contents) so that the virtualiser height is correct
   React__default.useEffect(() => {
-    if (savingState && savingState.state === SavingStateValue.Saved && !isSavedIndicatorVisible) {
-      setIsSavingIndicatorVisible(true);
-      timer.start();
+    var _ref$current;
+    const firstCell = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector('[role=cell]:first-child');
+    if (firstCell) {
+      measureRef(firstCell);
     }
-  }, [savingState]);
-  let content;
-  if (savingState) {
-    if (savingState.state === SavingStateValue.Saving) {
-      content = /*#__PURE__*/React__default.createElement(Tooltip, {
-        title: texts.table3.editing.saving.progress
-      }, /*#__PURE__*/React__default.createElement(Spinner, {
-        delay: 0,
-        className: "!text-grey-700 mr-1 !h-5 !w-5"
-      }));
-    } else if (isSavedIndicatorVisible) {
-      content = /*#__PURE__*/React__default.createElement(Tooltip, {
+  }, [ref.current]);
+  // we use capture because it also picks up clicks on e.g. select checkboxes
+  const handleClickCapture = event => {
+    if (typeof onClickCapture === 'function') {
+      onClickCapture(event);
+    }
+    // do this in the next frame, otherwise it remounts the row and prevents row actions on hover from being clickable
+    requestAnimationFrame(() => tableMeta.currentRow.setCurrentRowIndex(index));
+  };
+  const handleClick = event => {
+    if (typeof onClick === 'function') {
+      var _ref$current2;
+      const clickedElement = event.target;
+      if (!((_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.contains(event.target)) || clickableElements.includes(clickedElement.tagName.toLowerCase()) || clickedElement.closest(clickableElements.map(tag => `[role=row] ${tag}`).join(','))) {
+        return;
+      }
+      onClick(row.original);
+    }
+  };
+  const handleMouseEnter = () => {
+    // When user moving mouse to fast, then some of the rows are getting stuck in hover state,
+    // because mouseleave event never got triggered, to avoid this to happen we're saving the index of last hovered row,
+    // so that we can unhover it when new row got hovered, and saving it in a variable outside of react to save in performance,
+    // since it would be very performance heavy to use state which is bound to mouse events.
+    if (previouslyHoveredIndex !== undefined) {
+      if (previouslyHoveredIndex !== index) {
+        unhoverPreviousRow(tableRef);
+        previouslyHoveredIndex = index;
+      }
+    } else {
+      previouslyHoveredIndex = index;
+    }
+    setIsHovered(true);
+  };
+  const handleMouseLeave = () => {
+    if (previouslyHoveredIndex === index) {
+      previouslyHoveredIndex = undefined;
+    }
+    setIsHovered(false);
+  };
+  const [isDraggedOver, dropTargetProps] = useDropTarget(event => onDrop === null || onDrop === void 0 ? void 0 : onDrop(event, row.original));
+  const className = cn('group/row contents',
+  // resizing column requires dragging, which means the mouse might (on rare occasions) move over rows and trigger hover state
+  // that in turn triggers rendering of e.g. row actions, which could cause janky ui - so don't allow mouse interaction when resizing
+  '[[role="table"][data-resizing="true"]_&]:pointer-events-none', {
+    'hover:cursor-pointer': typeof onClick === 'function'
+  });
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, onDrop ? dropTargetProps : undefined, {
+    className: className,
+    "data-row-index": index,
+    "data-dragged-over": isDraggedOver,
+    onClick: handleClick,
+    onClickCapture: handleClickCapture,
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    role: "row",
+    ref: ref
+  }));
+});
+
+var SavingStatusValue;
+(function (SavingStatusValue) {
+  SavingStatusValue["Saving"] = "saving";
+  SavingStatusValue["Saved"] = "saved";
+  SavingStatusValue["Error"] = "error";
+})(SavingStatusValue || (SavingStatusValue = {}));
+function useEditing(isEnabled, validation, onSave) {
+  // used to switch the table into editing mode
+  const [isEditing, setIsEditing] = React__default.useState(false);
+  // Saving indicator need to show saving status per row, saving status can have at least two states 'saving', 'saved',
+  // 'saved' should remain for a few seconds to show tick icon after row has been saved.
+  const [savingStatuses, dispatchSavingStatusAction] = React__default.useReducer(savingStatusesReducer, null);
+  // sets of row changes pending save, either they have not saved yet or they have errors
+  const [editingState, dispatchEditingAction] = React__default.useReducer((state, action) => editingReducer(state, action), null);
+  const [detailModeEditing, setDetailModeEditing] = React__default.useState(false);
+  function getCellValue(cell) {
+    var _editingState$cell$ro;
+    return editingState ? (_editingState$cell$ro = editingState[cell.row.id]) === null || _editingState$cell$ro === void 0 ? void 0 : _editingState$cell$ro[cell.column.id] : undefined;
+  }
+  // Saves editing cell value into editing state.
+  function setCellValue(cell, value) {
+    dispatchEditingAction({
+      type: EditingActionType.SET_CELL_VALUE,
+      payload: {
+        rowId: cell.row.id,
+        cellId: cell.column.id,
+        value,
+        originalValues: cell.row.original
+      }
+    });
+  }
+  // Removes changes from editing state by row id
+  function resetChange(rowId) {
+    dispatchEditingAction({
+      type: EditingActionType.RESET_CHANGE,
+      payload: {
+        rowId
+      }
+    });
+    validation.resetErrors(rowId);
+  }
+  const handleKeyDown = React__default.useCallback(event => {
+    if (event.defaultPrevented) {
+      return;
+    }
+    if (shouldTriggerShortcut(event, {
+      key: 'e',
+      meta: true,
+      shift: false
+    })) {
+      setIsEditing(editing => !editing);
+    } else if (shouldTriggerShortcut(event, {
+      key: 's',
+      meta: true,
+      shift: false
+    })) {
+      // Prevent default browser save
+      event.preventDefault();
+      saveChangesIfNeeded();
+    }
+  }, [isEditing]);
+  const handleBlur = React__default.useCallback(event => {
+    if (event.target === event.currentTarget) {
+      saveChangesIfNeeded();
+    }
+  }, []);
+  // Creates initial saving statuses from changes object
+  const addSavingStatuses = () => {
+    const changeset = Object.keys(editingState || {});
+    const additionalSavingStatuses = _.reduce(changeset, (result, rowId) => {
+      return {
+        ...result,
+        [rowId]: SavingStatusValue.Saving
+      };
+    }, {});
+    dispatchSavingStatusAction({
+      type: SavingStatusActionType.SET_SAVING_STATUSES,
+      payload: {
+        states: additionalSavingStatuses
+      }
+    });
+  };
+  // Resets/removes saving status by row id. Used in delayed saving indicator.
+  const resetSavingStatus = rowId => {
+    dispatchSavingStatusAction({
+      type: SavingStatusActionType.RESET_SAVING_STATUS,
+      payload: {
+        rowId
+      }
+    });
+  };
+  // Checks if we have changes, then saves them
+  const saveChangesIfNeeded = function () {
+    try {
+      if (!editingState) {
+        return Promise.resolve();
+      }
+      const changeset = Object.keys(editingState);
+      const _temp = function () {
+        if (onSave && changeset.length) {
+          addSavingStatuses();
+          return Promise.resolve(Promise.allSettled(changeset.map(rowId => {
+            const validationSavePromise = new Promise((resolve, reject) => {
+              const changedRow = editingState === null || editingState === void 0 ? void 0 : editingState[rowId];
+              if (changedRow) {
+                var _validation$validate;
+                (_validation$validate = validation.validate(rowId, changedRow)) === null || _validation$validate === void 0 ? void 0 : _validation$validate.then(() => {
+                  const savePromise = onSave(changedRow);
+                  savePromise.then(() => {
+                    resolve();
+                  }).catch(reason => {
+                    if (reason.errors) {
+                      validation.setRowErrors(rowId, reason.errors);
+                    }
+                    reject(reason);
+                  });
+                }).catch(() => {
+                  validation.confirmErrors(rowId);
+                  dispatchSavingStatusAction({
+                    type: SavingStatusActionType.SET_SAVING_STATUS,
+                    payload: {
+                      rowId,
+                      state: SavingStatusValue.Error
+                    }
+                  });
+                  reject();
+                });
+              } else {
+                reject();
+              }
+            });
+            return validationSavePromise;
+          }))).then(function (responses) {
+            responses.forEach((response, index) => {
+              const rowId = changeset[index];
+              if (response.status === 'fulfilled') {
+                resetChange(rowId);
+                dispatchSavingStatusAction({
+                  type: SavingStatusActionType.SET_SAVING_STATUS,
+                  payload: {
+                    rowId,
+                    state: SavingStatusValue.Saved
+                  }
+                });
+              } else {
+                dispatchSavingStatusAction({
+                  type: SavingStatusActionType.SET_SAVING_STATUS,
+                  payload: {
+                    rowId,
+                    state: SavingStatusValue.Error
+                  }
+                });
+              }
+            });
+          });
+        }
+      }();
+      return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const [rowMoveReason, setRowMoveReason] = React__default.useState(null);
+  const removeRowMoveReason = () => {
+    setRowMoveReason(null);
+  };
+  const showWarning = React__default.useCallback(event => {
+    if (isEditing && editingState && Object.keys(editingState).length > 0) {
+      event.returnValue = true;
+      return true;
+    }
+    return false;
+  }, [isEditing, editingState]);
+  function getSavingStatus(rowId) {
+    return savingStatuses && savingStatuses[rowId];
+  }
+  React__default.useEffect(() => {
+    window.addEventListener('beforeunload', showWarning);
+    return () => {
+      window.removeEventListener('beforeunload', showWarning);
+    };
+  }, [showWarning]);
+  React__default.useEffect(() => {
+    if (!isEditing) {
+      setDetailModeEditing(false);
+      lastCellIndex.value = null;
+    }
+  }, [isEditing]);
+  return {
+    isEnabled,
+    isEditing,
+    toggleEditing: setIsEditing,
+    changes: editingState,
+    getCellValue,
+    setCellValue,
+    saveChangesIfNeeded,
+    detailModeEditing,
+    setDetailModeEditing,
+    rowMoveReason,
+    setRowMoveReason,
+    removeRowMoveReason,
+    handleKeyDown,
+    handleBlur,
+    resetChange,
+    getSavingStatus,
+    resetSavingStatus
+  };
+}
+var EditingActionType;
+(function (EditingActionType) {
+  EditingActionType[EditingActionType["SET_CELL_VALUE"] = 0] = "SET_CELL_VALUE";
+  EditingActionType[EditingActionType["RESET_CHANGE"] = 1] = "RESET_CHANGE";
+})(EditingActionType || (EditingActionType = {}));
+function editingReducer(state, action) {
+  switch (action.type) {
+    // Set cell value of the row
+    case EditingActionType.SET_CELL_VALUE:
+      return {
+        ...state,
+        [action.payload.rowId]: {
+          ...((state === null || state === void 0 ? void 0 : state[action.payload.rowId]) || action.payload.originalValues),
+          [action.payload.cellId]: action.payload.value
+        }
+      };
+    // Reset changes for the row
+    case EditingActionType.RESET_CHANGE:
+      {
+        let currentChanges = {
+          ...state
+        };
+        if (currentChanges) {
+          delete currentChanges[action.payload.rowId];
+        }
+        const changeset = Object.keys(currentChanges);
+        if (changeset.length === 0) {
+          currentChanges = null;
+        }
+        return currentChanges;
+      }
+    default:
+      return state;
+  }
+}
+var SavingStatusActionType;
+(function (SavingStatusActionType) {
+  SavingStatusActionType[SavingStatusActionType["SET_SAVING_STATUS"] = 0] = "SET_SAVING_STATUS";
+  SavingStatusActionType[SavingStatusActionType["SET_SAVING_STATUSES"] = 1] = "SET_SAVING_STATUSES";
+  SavingStatusActionType[SavingStatusActionType["RESET_SAVING_STATUS"] = 2] = "RESET_SAVING_STATUS";
+})(SavingStatusActionType || (SavingStatusActionType = {}));
+function savingStatusesReducer(state, action) {
+  switch (action.type) {
+    // Set single saving status for the row
+    case SavingStatusActionType.SET_SAVING_STATUS:
+      return {
+        ...state,
+        [action.payload.rowId]: action.payload.state
+      };
+    // Set multiple saving statuses for multiple rows at the same time
+    case SavingStatusActionType.SET_SAVING_STATUSES:
+      return {
+        ...state,
+        ...action.payload.states
+      };
+    // Reset/remove saving status for particular row
+    case SavingStatusActionType.RESET_SAVING_STATUS:
+      {
+        const newSavingStatus = {
+          ...state
+        };
+        newSavingStatus === null || newSavingStatus === void 0 ? true : delete newSavingStatus[action.payload.rowId];
+        return newSavingStatus;
+      }
+    default:
+      return state;
+  }
+}
+
+const savingIndicatorHideDelay = 3000;
+const COLUMN_ID$1 = '__editing_actions';
+const MemoedCell$1 = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
+  var _column$columnDef$met;
+  const {
+    hasChanges,
+    isCurrentRow,
+    row,
+    editing,
+    rowIdentifier,
+    table
+  } = props;
+  const savingStatus = editing.getSavingStatus(row.id);
+  const [isSavedIndicatorVisible, setIsSavingIndicatorVisible] = React__default.useState(false);
+  const {
+    texts
+  } = useLocalization();
+  const [clearConfirmationOpen, setClearConfirmationOpen] = React__default.useState(false);
+  const columns = table.getAllFlatColumns();
+  const column = columns.find(column => column.id === rowIdentifier);
+  const rowIdentifierHeader = column === null || column === void 0 ? void 0 : (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.header;
+  const edititngActionsRef = React__default.useRef(null);
+  const tableMeta = table.options.meta;
+  const handleSaved = () => {
+    setIsSavingIndicatorVisible(false);
+    editing.resetSavingStatus(row.id);
+  };
+  const timer = useTimer(savingIndicatorHideDelay, handleSaved);
+  React__default.useEffect(() => {
+    if (savingStatus && savingStatus === SavingStatusValue.Saved && !isSavedIndicatorVisible) {
+      setIsSavingIndicatorVisible(true);
+      timer.start();
+    }
+  }, [savingStatus]);
+  React__default.useEffect(() => {
+    tableMeta.shortcutsState.pause(clearConfirmationOpen);
+  }, [clearConfirmationOpen]);
+  let content;
+  if (savingStatus) {
+    if (savingStatus === SavingStatusValue.Saving) {
+      content = /*#__PURE__*/React__default.createElement(Tooltip, {
+        title: texts.table3.editing.saving.progress
+      }, /*#__PURE__*/React__default.createElement(Spinner, {
+        delay: 0,
+        className: "!text-grey-700 mr-1 !h-5 !w-5"
+      }));
+    } else if (isSavedIndicatorVisible) {
+      content = /*#__PURE__*/React__default.createElement(Tooltip, {
         title: texts.table3.editing.saving.complete
       }, /*#__PURE__*/React__default.createElement(Icon, {
         name: "tick",
@@ -13925,25 +14525,48 @@ const MemoedCell$1 = /*#__PURE__*/React__default.memo(function MemoedCell(props)
       }));
     }
   }
-  if (isEditing && isCurrentRow) {
+  if (editing.isEditing && isCurrentRow) {
     content = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content, /*#__PURE__*/React__default.createElement(IconButton, {
+      ref: edititngActionsRef,
       appearance: "transparent",
       "aria-label": texts.table3.editing.actions.tooltip,
       icon: "more",
       menu: menuProps => /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, /*#__PURE__*/React__default.createElement(Menu$1.Item, {
         icon: "tick",
         disabled: !hasChanges,
-        onClick: () => tableMeta.editing.saveChangesIfNeeded()
+        onClick: () => editing.saveChangesIfNeeded()
       }, texts.table3.editing.actions.save), /*#__PURE__*/React__default.createElement(Menu$1.Item, {
         icon: "close",
         disabled: !hasChanges,
-        onClick: () => tableMeta.editing.resetChange(row.id)
+        onClick: () => setClearConfirmationOpen(true)
       }, texts.table3.editing.actions.clear), /*#__PURE__*/React__default.createElement(Menu$1.Item, {
         icon: "undo",
-        onClick: () => tableMeta.editing.toggleEditing(false)
+        onClick: () => editing.toggleEditing(false)
       }, texts.table3.editing.actions.exit))),
       tabIndex: isCurrentRow ? 0 : -1
-    }));
+    }), /*#__PURE__*/React__default.createElement(Dialog, {
+      size: "xs",
+      open: clearConfirmationOpen,
+      onClose: () => {
+        setClearConfirmationOpen(false);
+        requestAnimationFrame(() => {
+          if (edititngActionsRef.current) {
+            edititngActionsRef.current.focus();
+            // When table looses focus, we need to re-set the last column index
+            lastCellIndex.value = getColumnIndex(edititngActionsRef.current);
+          }
+        });
+      }
+    }, /*#__PURE__*/React__default.createElement(Dialog.Content, {
+      "aria-label": texts.table3.editing.clearChangesConfirmationDialog.title
+    }, /*#__PURE__*/React__default.createElement(Dialog.Title, null, texts.table3.editing.clearChangesConfirmationDialog.title), /*#__PURE__*/React__default.createElement("p", null, texts.table3.editing.clearChangesConfirmationDialog.description.replace('[ROW_IDENTIFIER]', rowIdentifier && rowIdentifierHeader ? rowIdentifierHeader : texts.table3.validation.index).replace('[ROW_IDENTIFIER_VALUE]', rowIdentifier && rowIdentifierHeader ? row.original[rowIdentifier] : row.index)), /*#__PURE__*/React__default.createElement(Dialog.Footer, null, /*#__PURE__*/React__default.createElement(Group, null, /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button$1, {
+      tabIndex: 0
+    }, texts.table3.editing.clearChangesConfirmationDialog.cancel)), /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button$1, {
+      tabIndex: 0,
+      appearance: "primary",
+      autoFocus: true,
+      onClick: () => editing.resetChange(row.id)
+    }, texts.table3.editing.clearChangesConfirmationDialog.confirm)))))));
   }
   const contentClassName = cn('flex items-center justify-end text-right', {
     '-mb-2 -mt-2': isCurrentRow
@@ -13965,15 +14588,17 @@ function Cell$1(props) {
   return /*#__PURE__*/React__default.createElement(MemoedCell$1, Object.assign({}, props, {
     hasChanges: changeset.indexOf(props.row.id) >= 0,
     isCurrentRow: tableMeta.currentRow.currentRowIndex === rowIndex,
-    isEditing: tableMeta.editing.isEditing
+    editing: tableMeta.editing
   }));
 }
 const EDITING_ACTIONS_WIDTH = 60;
-function createRowEditingActionsColumn() {
+function createRowEditingActionsColumn(rowIdentifier) {
   return {
     id: COLUMN_ID$1,
     header: Header$1,
-    cell: Cell$1,
+    cell: context => /*#__PURE__*/React__default.createElement(Cell$1, Object.assign({}, context, {
+      rowIdentifier: rowIdentifier
+    })),
     footer: Footer$3,
     meta: {
       align: 'right',
@@ -14104,42 +14729,6 @@ const Indicator = ({
   }), indicatorText.title)), container);
 };
 
-const focussableNodeNames = ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT', 'DETAILS'];
-const focusableSelector = /*#__PURE__*/focussableNodeNames.join(', ');
-const hasChanged = (value, newValue) => {
-  if (dateFns.isDate(value) && dateFns.isDate(newValue)) {
-    return !isWeakEqual(value, newValue);
-  } else if (Array.isArray(value)) {
-    return JSON.stringify(value) !== JSON.stringify(newValue);
-  }
-  return value !== newValue;
-};
-const willRowMoveAfterSorting = (value, cell, rowIndex, rows, desc) => {
-  var _resortedRows$index;
-  const miniSortRows = [{
-    ...cell.row,
-    original: {
-      ...cell.row.original,
-      [cell.column.id]: value
-    }
-  }];
-  // getValue is used by the built-in sort functons, so we need to make sure it returns the changed value
-  miniSortRows[0].getValue = () => value;
-  let index = 0;
-  if (rowIndex > 0) {
-    miniSortRows.unshift(rows[rowIndex - 1]);
-    index = 1;
-  }
-  if (rowIndex < rows.length - 1) {
-    miniSortRows.push(rows[rowIndex + 1]);
-  }
-  let resortedRows = [...miniSortRows].sort((a, b) => cell.column.getSortingFn()(a, b, cell.column.id));
-  if (desc) {
-    resortedRows = resortedRows.reverse();
-  }
-  return ((_resortedRows$index = resortedRows[index]) === null || _resortedRows$index === void 0 ? void 0 : _resortedRows$index.id) !== cell.row.id;
-};
-
 const Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
   const {
     defaultValue: _,
@@ -14183,7 +14772,7 @@ const heights = {
     max: 86
   },
   medium: {
-    min: 34,
+    min: 32,
     max: 100
   },
   large: {
@@ -14195,6 +14784,7 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
   const {
     onKeyDown: handleKeyDown,
     onChange: handleChange,
+    onBlur,
     column,
     isCellInDetailMode,
     align,
@@ -14250,7 +14840,7 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
     resizeTextArea(e.target);
   };
   const textareaContainerClassName = cn('w-full', {
-    'focus-within:absolute focus-within:left-0 focus-within:top-0 focus-within:z-20 focus-within:px-[var(--table3-cell-padding-x)] focus-within:pt-[var(--table3-cell-padding-y)]': columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate
+    'focus-within:absolute focus-within:left-0 focus-within:top-0 focus-within:z-[9]': columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate
   });
   const handleTextareaKeyDown = event => {
     // By default Shift + Enter in textarea makes a new line, we want to keep this behaviour
@@ -14260,9 +14850,23 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
       handleKeyDown(event);
     }
   };
+  const handleBlur = event => {
+    // If truncation is enabled, then textarea should shring back to min height, when loosing focus.
+    if (columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
+      const textareaElement = event.currentTarget;
+      textareaElement.style.height = `${minMaxHeight.min}px`;
+    }
+    onBlur(event);
+  };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: textareaContainerClassName,
     "data-taco": "input-container"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    style: {
+      minHeight: `${minMaxHeight.min}px`
+    },
+    className: "relative"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: textareaContainerClassName
   }, /*#__PURE__*/React__default.createElement(Textarea, Object.assign({}, attributes, {
     onChange: event => {
       handleChange(event.target.value);
@@ -14272,14 +14876,8 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
     onKeyDown: e => {
       handleTextareaKeyDown(e);
     },
-    onBlur: event => {
-      // If truncation is enabled, then textarea should shring back to min height, when loosing focus.
-      if (columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
-        const textareaElement = event.currentTarget;
-        textareaElement.style.height = `${minMaxHeight.min}px`;
-      }
-    },
-    className: cn(getCellAlignmentClasses(align), `z-20 h-fit resize-none`, {
+    onBlur: handleBlur,
+    className: cn(getCellAlignmentClasses(align), `h-fit resize-none`, {
       [`!min-h-[${minMaxHeight.min}px]`]: columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate,
       '!yt-focus-dark': isCellInDetailMode,
       [`h-[${minMaxHeight.min}px]`]: !isCellInDetailMode && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate),
@@ -14288,7 +14886,7 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
     }),
     ref: ref,
     value: String(value !== null && value !== void 0 ? value : '')
-  })));
+  })))));
 });
 
 const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(props, externalRef) {
@@ -14303,6 +14901,7 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
     tableRef,
     value,
     cell,
+    error,
     isCurrentRow,
     ...attributes
   } = props;
@@ -14312,6 +14911,8 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
   const columnMeta = column.columnDef.meta;
   const controlRenderer = columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.control;
   const isCellInDetailMode = tableMeta.editing.detailModeEditing && (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.contains(document.activeElement));
+  const originalRow = cell.row.original;
+  // Revert to initial value if escape was pressed
   const handleKeyDown = event => {
     // For some reason keydown event handler is not propogated to the table when input or other control element is
     // in focus so we need to check for shortcut that toggles the editing.
@@ -14371,7 +14972,7 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
       return;
     }
   };
-  const isNumber = typeof value === 'number';
+  const isNumber = (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.dataType) === 'number';
   const handleInputKeyDown = event => {
     handleKeyDown(event);
     // Switching to editing mode, when key pressed any alphabetical character or number
@@ -14379,19 +14980,11 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
       tableMeta.editing.setDetailModeEditing(true);
     }
   };
-  const handleDatepickerChange = event => {
-    // When datepicker looses focus, it triggers change event, even if date wasn't changed,
-    // so adding additional check here to prevent adding change to the edititng state.
-    const originalDate = cell.row.original[cell.column.id];
-    const changedDate = event.detail;
-    if (hasChanged(originalDate, changedDate)) {
-      handleChange(changedDate);
-    }
-  };
   if (typeof controlRenderer === 'function') {
     return controlRenderer({
       ...attributes,
-      ref: ref,
+      ref: refCallback,
+      invalid: !!error,
       setValue: nextValue => {
         if (nextValue !== value) {
           handleChange(nextValue);
@@ -14400,19 +14993,22 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
       value
     }, data);
   } else if (controlRenderer === 'datepicker') {
-    const handleDatepickerKeyDown = event => {
-      handleKeyDown(event);
-      if (/^[a-z0-9]$/i.test(event.key)) {
-        tableMeta.editing.setDetailModeEditing(true);
-        return;
+    const handleDatepickerChange = event => {
+      // When datepicker looses focus, it triggers change event, even if date wasn't changed,
+      // so adding additional check here to prevent adding change to the edititng state.
+      const originalDate = originalRow[cell.column.id];
+      const changedDate = event.detail;
+      if (hasChanged(originalDate, changedDate)) {
+        handleChange(changedDate);
       }
     };
     return /*#__PURE__*/React__default.createElement(Datepicker, Object.assign({}, attributes, {
+      invalid: !!error,
       className: cn({
         '[&_input]:!yt-focus-dark': isCellInDetailMode
       }),
       onChange: handleDatepickerChange,
-      onKeyDown: handleDatepickerKeyDown,
+      onKeyDown: handleInputKeyDown,
       ref: refCallback,
       value: value
     }));
@@ -14424,6 +15020,7 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
     }));
   } else if (controlRenderer === 'textarea') {
     return /*#__PURE__*/React__default.createElement(TextareaControl, Object.assign({}, props, {
+      invalid: !!error,
       isCellInDetailMode: isCellInDetailMode,
       onKeyDown: handleInputKeyDown,
       ref: refCallback,
@@ -14431,6 +15028,7 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
     }));
   }
   return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, attributes, {
+    invalid: !!error,
     className: cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {
       '!yt-focus-dark': isCellInDetailMode
     }),
@@ -14445,12 +15043,18 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
 });
 
 function EditingCell(props) {
+  const {
+    cell,
+    table
+  } = props;
   const {
     isHovered
   } = useRowContext();
   // Need to explicitly pass tableMeta, because just passing the table object will not trigger editing change since table object is not mutatable.
-  const tableMeta = props.table.options.meta;
+  const tableMeta = table.options.meta;
+  const error = tableMeta.validation.getCellError(cell);
   return /*#__PURE__*/React__default.createElement(MemoedEditingCell, Object.assign({}, props, {
+    error: error,
     isHovered: isHovered,
     tableMeta: tableMeta
   }));
@@ -14465,8 +15069,10 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     table,
     tableRef,
     row,
-    isHovered,
-    tableMeta
+    tableMeta,
+    error,
+    highlighted,
+    highlightedAsCurrent
   } = props;
   const columnMeta = column.columnDef.meta;
   const cellRef = React__default.useRef(null);
@@ -14503,31 +15109,38 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     }
   };
   const handleBlur = () => {
+    var _tableMeta$editing$ch;
     tableMeta.editing.setDetailModeEditing(false);
+    if ((_tableMeta$editing$ch = tableMeta.editing.changes) !== null && _tableMeta$editing$ch !== void 0 && _tableMeta$editing$ch[cell.row.id]) {
+      tableMeta.validation.validate(cell.row.id, tableMeta.editing.changes[cell.row.id], cell.column.id);
+    }
   };
   // row move indicator
-  const moveReason = (_tableMeta$editing$ro = tableMeta.editing.rowMoveReason[cell.column.id]) !== null && _tableMeta$editing$ro !== void 0 ? _tableMeta$editing$ro : null;
+  const moveReason = ((_tableMeta$editing$ro = tableMeta.editing.rowMoveReason) === null || _tableMeta$editing$ro === void 0 ? void 0 : _tableMeta$editing$ro[cell.column.id]) || null;
   const rows = table.getRowModel().rows;
   const currentRowIndex = tableMeta.currentRow.currentRowIndex;
   const isCurrentRow = currentRowIndex !== undefined && ((_rows$currentRowIndex = rows[currentRowIndex]) === null || _rows$currentRowIndex === void 0 ? void 0 : _rows$currentRowIndex.id) === row.id;
   const mountNode = React__default.useMemo(() => {
-    if (moveReason) {
+    if (moveReason !== null && isCurrentRow && !error) {
       var _cellRef$current2, _cellRef$current2$par;
       return (_cellRef$current2 = cellRef.current) === null || _cellRef$current2 === void 0 ? void 0 : (_cellRef$current2$par = _cellRef$current2.parentElement) === null || _cellRef$current2$par === void 0 ? void 0 : _cellRef$current2$par.firstChild;
     }
     return null;
-  }, [moveReason, cellRef]);
+  }, [moveReason, isCurrentRow, error, cellRef]);
   const removeMoveReason = () => {
-    tableMeta.editing.removeRowMoveReason(cell.column.id);
+    tableMeta.editing.removeRowMoveReason();
   };
   React__default.useEffect(() => {
     // To avoid reseting move reason on another row hover,
     // we need to check for changes only if value got changed in the current row.
-    if (!isCurrentRow) {
+    if (!isCurrentRow || error) {
+      if (tableMeta.editing.rowMoveReason) {
+        removeMoveReason();
+      }
       return;
     }
     if (hasChanged(getValue(), value)) {
-      const moveReason = getRowMoveReason(table, row.index, row.original, cell, value);
+      const moveReason = getRowMoveReason(table, row.index, row.original, cell, value, tableMeta.search.excludeUnmatchedResults);
       tableMeta.editing.setRowMoveReason({
         [cell.column.id]: moveReason
       });
@@ -14535,28 +15148,19 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
       removeMoveReason();
     }
     return removeMoveReason;
-  }, [value]);
+  }, [value, tableMeta.currentRow.currentRowIndex, tableMeta.search.excludeUnmatchedResults, error]);
   const controlRenderer = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control;
   const className = cn('py-[calc(var(--table3-cell-padding-y)_-_0.06rem)]', {
-    relative: (isCurrentRow || isHovered) && controlRenderer === 'textarea',
-    // Need to set higher z-index, so that the current row textarea (in expanded state, when positioned absolute) overlaps rows below,
-    // but at the same time it should not overlap the table headers which has z-10.
-    'z-[9]': isCurrentRow && controlRenderer === 'textarea'
-  },
-  // component overrides - grayscale for editing hover
-  '[[role="row"][data-current="false"]:hover_&>*]:!grayscale [[role="row"][data-current="false"]:hover_&_.bg-white]:!bg-grey-100', typeof columnMeta.className === 'function' ? columnMeta.className(row.original) : columnMeta.className);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, moveReason !== null && mountNode && /*#__PURE__*/React__default.createElement(Indicator, {
-    reason: moveReason,
-    columnName: String(cell.column.columnDef.header),
-    mountNode: mountNode,
-    validationErrors: []
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: className,
-    "data-align": columnMeta.align,
-    "data-column-index": index,
-    "data-editable": true,
-    role: "cell",
-    ref: cellRef
+    // Textarea control is positioned absolute, when column is in enableTruncate mode, so the cell need to be positioned relative
+    relative: controlRenderer === 'textarea' && columnMeta.enableTruncate
+  }, typeof columnMeta.className === 'function' ? columnMeta.className(row.original) : columnMeta.className);
+  const fieldClassName = cn('!min-h-0 w-full !pb-0', {
+    '!pb-3': !!error
+  });
+  const content = /*#__PURE__*/React__default.createElement(Field, {
+    message: error,
+    invalid: !!error,
+    className: fieldClassName
   }, /*#__PURE__*/React__default.createElement(EditingControl, {
     align: columnMeta.align,
     column: cell.column,
@@ -14570,22 +15174,46 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     tableRef: tableRef,
     value: value,
     cell: cell,
+    error: error,
+    tabIndex: isCurrentRow ? 0 : -1,
     isCurrentRow: isCurrentRow
-  })));
+  }));
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, moveReason !== null && mountNode && !error ? /*#__PURE__*/React__default.createElement(Indicator, {
+    reason: moveReason,
+    columnName: String(cell.column.columnDef.header),
+    mountNode: mountNode,
+    validationErrors: []
+  }) : null, /*#__PURE__*/React__default.createElement("div", {
+    className: !highlighted ? className : undefined,
+    "data-align": columnMeta.align,
+    "data-column-index": index,
+    role: "cell",
+    "data-editable": true,
+    ref: cellRef,
+    "data-invalid": !!error,
+    "data-highlighted": highlighted
+  }, highlighted ? /*#__PURE__*/React__default.createElement(Highlight, {
+    current: highlightedAsCurrent,
+    className: className,
+    frozenColumnIndex: tableMeta.columnFreezing.frozenColumnIndex,
+    index: index,
+    tableRef: tableRef
+  }, content) : content));
 });
-function getRowMoveReason(table, rowIndex, rowValues, cell, newValue) {
+function getRowMoveReason(table, rowIndex, rowValues, cell, newValue, excludeUnmatchedResults) {
   var _table$getState$sorti;
   let rowMoveReason = null;
   const {
     globalFilter
   } = table.getState();
-  const isFilteredByGlobalFilter = Object.values({
+  const isFilteredByGlobalFilter = excludeUnmatchedResults ? Object.values({
     ...rowValues,
     [cell.id]: newValue
-  }).some(cellValue =>
-  // Global filter can be undefined when there is no text being searched so we pass an empty string to
-  // globalFilterFn as query in that case.
-  globalFilterFn(String(cellValue), globalFilter ? String(globalFilter) : ''));
+  }).some(() => {
+    // Global filter can be undefined when there is no text being searched so we pass an empty string to
+    // globalFilterFn as query in that case.
+    return globalFilterFn(String(newValue), globalFilter ? String(globalFilter) : '');
+  }) : true;
   if (!isFilteredByGlobalFilter) {
     rowMoveReason = IndicatorReason.SEARCH;
   } else if (cell.column.getIsFiltered() && !columnFilterFn(newValue, cell.column.getFilterValue())) {
@@ -14601,20 +15229,64 @@ function Cell$2(props) {
   const {
     column,
     row,
-    table
+    table,
+    index,
+    getValue,
+    cell
   } = props;
   const {
-    isHovered: isHoveredRow
+    isHovered: isHoveredRow,
+    hasError
   } = useRowContext();
   const rows = table.getRowModel().rows;
   const tableMeta = table.options.meta;
   const columnMeta = column.columnDef.meta;
+  const rowErrors = tableMeta.validation.errors ? tableMeta.validation.errors[row.id] : null;
+  const isColumnError = hasError && rowErrors && !!rowErrors[column.id];
   const currentRowIndex = tableMeta.currentRow.currentRowIndex;
   const isCurrentRow = currentRowIndex !== undefined && ((_rows$currentRowIndex = rows[currentRowIndex]) === null || _rows$currentRowIndex === void 0 ? void 0 : _rows$currentRowIndex.id) === row.id;
-  if (tableMeta.editing.isEditing && columnMeta.control && (isCurrentRow || isHoveredRow && !tableMeta.hoverState.isPaused)) {
-    return /*#__PURE__*/React__default.createElement(EditingCell, Object.assign({}, props));
+  let value = getValue();
+  // When row has changes we always need to show the editing state value, end revert it to original value only when row got saved successfully.
+  // Otherwise it might confuse user because it will look like display value is getting reverted everytime user leaves the row.
+  if (tableMeta.editing.isEditing) {
+    const editingValue = tableMeta.editing.getCellValue(cell);
+    value = editingValue !== null && editingValue !== void 0 ? editingValue : value;
+  }
+  const {
+    rowIndex
+  } = React__default.useContext(RowContext);
+  const memoedHighlight = React__default.useMemo(() => {
+    var _tableMeta$search$que;
+    if (!tableMeta.search.isHighlightingEnabled || !columnMeta.enableSearch) {
+      return false;
+    }
+    if ((_tableMeta$search$que = tableMeta.search.query) !== null && _tableMeta$search$que !== void 0 && _tableMeta$search$que.length) {
+      return isCellHighlighted(tableMeta.search.query, value, columnMeta.dataType);
+    }
+    return false;
+  }, [value, tableMeta.search.isHighlightingEnabled, tableMeta.search.excludeUnmatchedResults, tableMeta.search.query]);
+  const memoedHighlightCurrent = React__default.useMemo(() => {
+    if (!tableMeta.search.isHighlightingEnabled || !memoedHighlight || tableMeta.search.currentHighlightColumnIndex === undefined) {
+      return false;
+    }
+    const [currentRowIndex, currentColumnIndex] = tableMeta.search.highlightedColumnIndexes[tableMeta.search.currentHighlightColumnIndex];
+    if (currentRowIndex === rowIndex && currentColumnIndex === index) {
+      return true;
+    }
+    return false;
+  }, [memoedHighlight, tableMeta.search.highlightedColumnIndexes.length, tableMeta.search.currentHighlightColumnIndex]);
+  const highlightProps = {
+    highlighted: memoedHighlight,
+    highlightedAsCurrent: memoedHighlightCurrent
+  };
+  if (tableMeta.editing.isEditing && columnMeta.control && (isCurrentRow || isHoveredRow && !tableMeta.hoverState.isPaused ||
+  // When cell has error, we renderimg it in edit mode (UX reqirement)
+  isColumnError)) {
+    return /*#__PURE__*/React__default.createElement(EditingCell, Object.assign({}, props, highlightProps));
   }
-  return /*#__PURE__*/React__default.createElement(DisplayCell, Object.assign({}, props));
+  return /*#__PURE__*/React__default.createElement(DisplayCell, Object.assign({}, props, highlightProps, {
+    value: value
+  }));
 }
 
 const COLUMN_ID$2 = '__select';
@@ -14944,11 +15616,11 @@ const MemoedGroup = /*#__PURE__*/React__default.memo(function MemoedGroup(props)
     meta,
     table
   } = props;
-  const containerClassName = cn('sticky px-2 mb-[2px]', {
-    'h-10': !isPrinting
-  }, colSpan > 1 ? `col-span-${colSpan}` : '');
+  const containerClassName = cn('px-2 z-10 hover:z-20', colSpan > 1 ? `col-span-${colSpan}` : '', {
+    sticky: !isPrinting
+  });
   const innerClassName = cn('font-bold box-content group/column relative', 'px-[var(--table3-cell-padding-x)]', {
-    'h-full items-center': !isPrinting,
+    'h-10 items-center': !isPrinting,
     'pb-2': isPrinting,
     'border-b-2': !!children
   }, meta.headerClassName);
@@ -14958,7 +15630,8 @@ const MemoedGroup = /*#__PURE__*/React__default.memo(function MemoedGroup(props)
   return /*#__PURE__*/React__default.createElement("div", {
     className: containerClassName,
     "data-taco": "table3-column-group",
-    "data-align": align
+    "data-align": align,
+    role: "columnheader"
   }, /*#__PURE__*/React__default.createElement("div", {
     className: innerClassName
   }, /*#__PURE__*/React__default.createElement(Tooltip, {
@@ -15089,7 +15762,7 @@ function useConvertChildrenToColumns(props, options, editing) {
       columns.push(columnHelper.display(createRowActionsColumn()));
     }
     if (editing.isEnabled && editing.isEditing) {
-      columns.push(columnHelper.display(createRowEditingActionsColumn()));
+      columns.push(columnHelper.display(createRowEditingActionsColumn(props.rowIdentifier)));
     }
     return {
       columns,
@@ -15183,584 +15856,469 @@ function useEditingStateListener(table) {
       });
     }
   }, [meta.currentRow.currentRowIndex]);
-  // save if editing gets toggled off
-  React__default.useEffect(() => {
-    if (meta.editing.isEnabled) {
-      if (!meta.editing.isEditing) {
-        requestAnimationFrame(() => {
-          meta.editing.saveChangesIfNeeded();
-        });
-      } else if (meta.currentRow.currentRowIndex === undefined) {
-        meta.currentRow.setCurrentRowIndex(0);
-      }
-    }
-  }, [meta.editing.isEditing]);
-}
-
-function useSearch(isEnabled, excludeUnmatchedResultsInSearch = false, loadAll) {
-  const [query, setQuery] = React__default.useState();
-  const [enableHighlighting, setEnableHighlighting] = React__default.useState(true);
-  const [excludeUnmatchedResults, setExcludeUnmatchedResults] = React__default.useState(excludeUnmatchedResultsInSearch);
-  // highlighting
-  const [highlightedColumnIndexes, setHighlightedColumnIndexes] = React__default.useState([]);
-  const [currentHighlightColumnIndex, setCurrentHighlightColumnIndex] = React__default.useState(undefined);
-  return {
-    isEnabled,
-    isHighlightingEnabled: enableHighlighting,
-    toggleHighlighting: setEnableHighlighting,
-    excludeUnmatchedResults,
-    toggleExcludeUnmatchedResults: setExcludeUnmatchedResults,
-    query,
-    setQuery: isEnabled ? setQuery : () => undefined,
-    highlightedColumnIndexes,
-    setHighlightedColumnIndexes,
-    currentHighlightColumnIndex,
-    setCurrentHighlightColumnIndex,
-    loadAll
-  };
-}
-
-const ACTIONS_ON_ROW_LENGTH = 4;
-function useRowActions$1(actionsForRow, actionsForRowLength = ACTIONS_ON_ROW_LENGTH) {
-  return {
-    actionsForRow,
-    actionsForRowLength
-  };
-}
-
-const useLocalStorage = (key, initialValue) => {
-  const [state, setState] = React__default.useState(() => {
-    if (!key) {
-      return initialValue;
-    }
-    try {
-      const localStorageValue = localStorage.getItem(key);
-      if (typeof localStorageValue !== 'string') {
-        localStorage.setItem(key, JSON.stringify(initialValue));
-        return initialValue;
-      } else {
-        return JSON.parse(localStorageValue || 'null');
-      }
-    } catch {
-      // If user is in private mode or has storage restriction
-      // localStorage can throw. JSON.parse and JSON.stringify
-      // can throw, too.
-      return initialValue;
-    }
-  });
-  React__default.useEffect(() => {
-    if (!key) {
-      return;
-    }
-    try {
-      const serializedState = JSON.stringify(state);
-      localStorage.setItem(key, serializedState);
-    } catch {
-      // If user is in private mode or has storage restriction
-      // localStorage can throw. Also JSON.stringify can throw.
-    }
-  }, [key, state]);
-  const clear = () => {
-    if (key) {
-      localStorage.removeItem(key);
-    }
-  };
-  return [state, setState, clear];
-};
-
-function useTacoSettings() {
-  return React__default.useContext(TacoContext);
-}
-
-function useUniqueTableId(tableId) {
-  const tacoSettings = useTacoSettings();
-  return `taco.${tacoSettings.uniqueUserIdentifier}.table3.${tableId}.settings`;
-}
-function useSettings(id, defaultSettings = {}, onChangeSettings) {
-  const uniqueId = useUniqueTableId(id);
-  // If the onChangeSettings prop is provided, we intend to handle settings changes externally rather than saving them
-  // to local storage.
-  const [persistedSettings, setPersistedSettings] = useLocalStorage(uniqueId, defaultSettings);
-  useLazyEffect(() => {
-    if (onChangeSettings) {
-      onChangeSettings(persistedSettings);
-    }
-  }, [persistedSettings]);
-  return [persistedSettings, setPersistedSettings];
-}
-
-function useTable$1(props) {
-  var _ref, _defaultSettings$colu, _defaultSettings$rowH, _props$length;
-  // options
-  const options = useTablePreset(props);
-  const tableOptions = {
-    enableColumnFilters: options.enableFiltering,
-    enableColumnResizing: options.enableColumnResizing,
-    enableExpanding: options.enableRowExpansion,
-    enableGlobalFilter: options.enableSearch,
-    enableHiding: options.enableColumnHiding,
-    enableRowSelection: options.enableRowSelection,
-    enableMultiRowSelection: !options.enableRowSelectionSingle,
-    enableSorting: options.enableSorting
-  };
-  // resizing
-  if (tableOptions.enableColumnResizing) {
-    tableOptions.columnResizeMode = 'onChange';
-  }
-  // filtering
-  if (tableOptions.enableColumnFilters) {
-    if (!props.onFilter) {
-      tableOptions.filterFns = {
-        tacoFilter: (row, columnId, filter) => columnFilterFn(row.getValue(columnId), filter)
-      };
-      tableOptions.getFilteredRowModel = reactTable$1.getFilteredRowModel();
-    }
-    // we don't tableOptions.manualFiltering = true; because it breaks global filtering, server filtering still works :shrug:
-  }
-  // search
-  if (tableOptions.enableGlobalFilter) {
-    // search is always client side, since we call loadAll when searching
-    tableOptions.globalFilterFn = (row, columnId, searchQuery) => {
-      try {
-        if (row.original) {
-          const cell = row.getAllCells().find(cell => cell.column.id === columnId);
-          const columnMeta = cell === null || cell === void 0 ? void 0 : cell.column.columnDef.meta;
-          if (cell && cell.column.getIsVisible() && columnMeta !== null && columnMeta !== void 0 && columnMeta.enableSearch) {
-            const cellValue = getCellValueAsString(row.original[columnId], columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.dataType);
-            if (cellValue !== undefined) {
-              return globalFilterFn(cellValue, searchQuery);
-            }
-          }
-          return false;
-        }
-      } catch {
-        //
-      }
-      return false;
-    };
-    tableOptions.getFilteredRowModel = reactTable$1.getFilteredRowModel();
-    tableOptions.getColumnCanGlobalFilter = column => {
-      var _column$columnDef$met;
-      return (_column$columnDef$met = column.columnDef.meta.enableSearch) !== null && _column$columnDef$met !== void 0 ? _column$columnDef$met : true;
-    };
-  }
-  // sorting
-  if (options.enableSorting) {
-    if (props.onSort) {
-      tableOptions.manualSorting = true;
-      // onSort is called as a listener to let the consumer update their data, so we don't use onSortingChange
-    } else {
-      tableOptions.getSortedRowModel = reactTable$1.getSortedRowModel();
-    }
-  }
-  const [defaultSettings, setSettings] = useSettings(props.id, props.defaultSettings, props.onChangeSettings);
-  // custom features
-  const columnFreezing = useColumnFreezing( // temporarily see if deprecated frozenColumnCount is there
-  (_ref = (_defaultSettings$colu = defaultSettings.columnFreezingIndex) !== null && _defaultSettings$colu !== void 0 ? _defaultSettings$colu : defaultSettings === null || defaultSettings === void 0 ? void 0 : defaultSettings.frozenColumnCount) !== null && _ref !== void 0 ? _ref : props.defaultColumnFreezingIndex, options);
-  const columnOrdering = useColumnOrdering(options);
-  const currentRow = useCurrentRow(props.defaultCurrentRowIndex);
-  const editing = useEditing(options.enableEditing, props.onSave);
-  const fontSize = useFontSize(options.enableFontSize, defaultSettings.fontSize);
-  const hoverState = usePauseHoverState();
-  const printing = usePrinting(options.enablePrinting, props.loadAll, defaultSettings.showWarningWhenPrintingLargeDataset);
-  const rowActions = useRowActions$1(props.actionsForRow, props.actionsForRowLength);
-  const rowClick = useRowClick(props.onRowClick);
-  const rowDrag = useRowDrag(options.enableRowDrag);
-  const rowDrop = useRowDrop(options.enableRowDrop, props.onRowDrop);
-  const rowGoto = useRowGoto(options.enableRowGoto, props.onRowGoto);
-  const rowHeight = useRowHeight(options.enableRowHeight, // temporarily see if deprecated rowDensity is there
-  (_defaultSettings$rowH = defaultSettings.rowHeight) !== null && _defaultSettings$rowH !== void 0 ? _defaultSettings$rowH : defaultSettings === null || defaultSettings === void 0 ? void 0 : defaultSettings.rowDensity);
-  const rowSelection = useRowSelection();
-  const search = useSearch(options.enableSearch, defaultSettings.excludeUnmatchedRecordsInSearch, props.loadAll);
-  // columns
-  const {
-    columns,
-    defaultColumnSizing,
-    defaultColumnVisibility,
-    defaultSorting
-  } = useConvertChildrenToColumns(props, options, editing);
-  // built-in features
-  const initialState = React__default.useMemo(() => {
-    var _defaultSettings$colu2, _defaultSettings$colu3, _props$defaultSetting, _props$defaultSetting3;
-    const sanitizeSortedColumns = column => columns.find(definedColumn => definedColumn.id === column.id);
-    const state = {
-      columnOrder: ensureOrdering(columns, defaultSettings.columnOrder),
-      columnSizing: (_defaultSettings$colu2 = defaultSettings.columnSizing) !== null && _defaultSettings$colu2 !== void 0 ? _defaultSettings$colu2 : defaultColumnSizing,
-      columnVisibility: (_defaultSettings$colu3 = defaultSettings.columnVisibility) !== null && _defaultSettings$colu3 !== void 0 ? _defaultSettings$colu3 : defaultColumnVisibility,
-      sorting: defaultSettings.sorting ? defaultSettings.sorting.filter(sanitizeSortedColumns) : defaultSorting
-    };
-    // we don't save these outside the table, but they need to be here for print to inherit them - see PrintButton.tsx
-    if ((_props$defaultSetting = props.defaultSettings) !== null && _props$defaultSetting !== void 0 && _props$defaultSetting.columnFilters) {
-      var _props$defaultSetting2;
-      state.columnFilters = (_props$defaultSetting2 = props.defaultSettings) === null || _props$defaultSetting2 === void 0 ? void 0 : _props$defaultSetting2.columnFilters;
-    }
-    if ((_props$defaultSetting3 = props.defaultSettings) !== null && _props$defaultSetting3 !== void 0 && _props$defaultSetting3.globalFilter) {
-      var _props$defaultSetting4;
-      state.globalFilter = (_props$defaultSetting4 = props.defaultSettings) === null || _props$defaultSetting4 === void 0 ? void 0 : _props$defaultSetting4.globalFilter;
-    }
-    return state;
-  }, []);
-  const getSettings = () => {
-    const state = table.getState();
-    return {
-      columnFreezingIndex: columnFreezing.frozenColumnIndex,
-      columnOrder: columnOrdering.isEnabled ? state.columnOrder : undefined,
-      columnSizing: table.options.enableColumnResizing ? state.columnSizing : undefined,
-      columnVisibility: table.options.enableHiding ? state.columnVisibility : undefined,
-      excludeUnmatchedRecordsInSearch: search.excludeUnmatchedResults,
-      fontSize: fontSize.isEnabled ? fontSize.size : undefined,
-      rowHeight: rowHeight.isEnabled ? rowHeight.height : undefined,
-      showWarningWhenPrintingLargeDataset: printing.printWarningDialogVisibility,
-      sorting: state.sorting
-    };
-  };
-  const table = reactTable$1.useReactTable({
-    data: props.data,
-    columns,
-    getCoreRowModel: reactTable$1.getCoreRowModel(),
-    initialState,
-    ...tableOptions,
-    //debugAll: true,
-    meta: {
-      columnFreezing,
-      columnOrdering,
-      currentRow,
-      editing,
-      enableFooter: options.enableFooter,
-      fontSize,
-      getSettings,
-      hoverState,
-      isPrinting: props.id.endsWith('_print'),
-      isUsingServer: !!props.loadPage,
-      printing,
-      rowActions: rowActions,
-      rowClick: rowClick,
-      rowDrag,
-      rowDrop,
-      rowGoto,
-      rowHeight,
-      rowSelection,
-      search
-    }
-  });
-  // listeners
-  useCurrentRowListener(table);
-  useEditingStateListener(table);
-  useFilteringStateListener(table, props.onFilter);
-  useRowSelectionListener(table, props.onRowSelect);
-  useSettingsStateListener(table, setSettings);
-  useShortcutsListener(table, props.shortcuts);
-  useServerLoadingListener(table, props.loadPage);
-  useSortingStateListener(table, props.onSort);
-  return {
-    table,
-    length: (_props$length = props.length) !== null && _props$length !== void 0 ? _props$length : props.data.length
-  };
-}
-
-const FOCUS_MANAGER_OPTIONS = {
-  tabbable: true
-};
-function Row$1(props) {
-  const focusManager = focus.useFocusManager();
-  const tableMeta = props.table.options.meta;
-  const isCurrentRow = tableMeta.currentRow.currentRowIndex === props.index;
-  const isDraggingRow = tableMeta.rowDrag.dragging[props.row.id];
-  const isFirstRow = props.index === 0;
-  // we use non-css hovered state to determine whether to render actions or not, for performance
-  const [isHovered, setIsHovered] = React__default.useState(false);
-  // tab behaviour is consistent across normal mode and edit mode, handle it here
-  const handleKeyDown = event => {
-    if (event.isDefaultPrevented() || event.isPropagationStopped()) {
-      return;
-    }
-    if (event.key === 'Tab') {
-      tableMeta.hoverState.pause(true);
-      let focusedElement;
-      if (event.shiftKey) {
-        // looping backwards
-        focusedElement = focusManager.focusPrevious(FOCUS_MANAGER_OPTIONS);
-        if (focusedElement) {
-          // override default behaviour, since we're handling focus internally now
-          event.preventDefault();
-        } else {
-          // there are no previous elements to focus, go up a row or go outside the table
-          if (!isFirstRow) {
-            event.preventDefault();
-            tableMeta.currentRow.setCurrentRowIndex(props.index - 1);
-            setTimeout(() => focusManager.focusLast(FOCUS_MANAGER_OPTIONS), 1);
-          }
-        }
-      } else {
-        // looping forwards
-        focusedElement = focusManager.focusNext(FOCUS_MANAGER_OPTIONS);
-        if (focusedElement) {
-          // override default behaviour, since we're handling focus internally now
-          event.preventDefault();
-        } else {
-          // there are no next elements to focus, go down a row or go outside the table
-          if (!props.isLastRow) {
-            event.preventDefault();
-            tableMeta.currentRow.setCurrentRowIndex(props.index + 1);
-            setTimeout(() => focusManager.focusFirst(FOCUS_MANAGER_OPTIONS), 1);
-          }
-        }
-      }
-    }
-  };
-  // rows are heavily memoized because performance in our table is critical
-  // be careful and selective about props that you pass to the row
-  const memoedProps = {
-    // aria-grabbed is being deprecated but there is no current alternative api, we use it until there is
-    'aria-grabbed': isDraggingRow ? true : tableMeta.rowDrag.isEnabled ? false : undefined,
-    'data-current': isCurrentRow,
-    'data-selected': props.row.getIsSelected(),
-    draggable: tableMeta.rowDrag.isEnabled,
-    index: props.index,
-    onClick: tableMeta.rowClick.handleClick,
-    onDrop: tableMeta.rowDrop.isEnabled ? tableMeta.rowDrop.handleDrop : undefined,
-    onKeyDown: handleKeyDown
-  };
-  let output = /*#__PURE__*/React__default.createElement(MemoedRow, Object.assign({}, props, memoedProps));
-  if (tableMeta.editing.isEditing && (isCurrentRow || isHovered && !tableMeta.hoverState.isPaused)) {
-    output = /*#__PURE__*/React__default.createElement(EditingRow, Object.assign({}, props, memoedProps, {
-      isFirstRow: isFirstRow,
-      setCurrentRowIndex: tableMeta.currentRow.setCurrentRowIndex
-    }));
-  }
-  // we store the row index in context because in a virtualised table the row index and the
-  // react table row index do not match when, for example, sorting is applied
-  const contextValue = React__default.useMemo(() => ({
-    isHovered,
-    setIsHovered,
-    rowIndex: props.index
-  }), [isHovered, props.index]);
-  return /*#__PURE__*/React__default.createElement(RowContext.Provider, {
-    value: contextValue
-  }, output);
-}
-// turns out we might need some kind of "state" for the focused column, but it doesn't need to be react state that re-renders
-let lastIndex;
-function getColumnIndex(focusedElement) {
-  if (focusedElement) {
-    var _focusedElement$close;
-    return (_focusedElement$close = focusedElement.closest('[role=cell]')) === null || _focusedElement$close === void 0 ? void 0 : _focusedElement$close.getAttribute('data-column-index');
-  }
-  return null;
-}
-// This code is needed to avoid multiple rows being hovered at the same time (it happens since we use non-css hovering)
-let previouslyHoveredIndex;
-const unhoverPreviousRow = tableRef => {
-  if (previouslyHoveredIndex !== undefined) {
-    var _tableRef$current;
-    const mouseoutEvent = new MouseEvent('mouseout', {
-      view: window,
-      bubbles: true,
-      cancelable: true
-    });
-    const previouslyHovered = tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.querySelector(`[data-row-index="${previouslyHoveredIndex}"]`);
-    previouslyHovered === null || previouslyHovered === void 0 ? void 0 : previouslyHovered.dispatchEvent(mouseoutEvent);
-  }
-};
-function EditingRow(props) {
-  const {
-    isFirstRow,
-    isLastRow,
-    onKeyDown,
-    setCurrentRowIndex,
-    virtualiser,
-    ...attributes
-  } = props;
-  const focusManager = focus.useFocusManager();
-  const tableMeta = props.table.options.meta;
-  const handleClickCapture = event => {
-    lastIndex = getColumnIndex(event.target);
-  };
-  const handleArrowLeftKey = event => {
-    let focusedElement;
-    if (event.key === 'ArrowLeft') {
-      // We need to perform special behaviour when focus reaches the end of the row,
-      // so we don't need default browser behaviour.
-      event.stopPropagation();
-      event.preventDefault();
-      // "CTRL + ArrowLeft" or "META + ArrowLeft" should focus first focusable element of the row
-      if (event.ctrlKey || event.metaKey) {
-        event.target.blur();
-        focusedElement = focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);
-        lastIndex = getColumnIndex(focusedElement);
-      } else {
-        // looping backwards
-        focusedElement = focusManager.focusPrevious(FOCUS_MANAGER_OPTIONS);
-        if (focusedElement) {
-          lastIndex = getColumnIndex(focusedElement);
-        } else {
-          // there are no previous elements to focus, go up a row (if there are rows above)
-          if (!isFirstRow) {
-            event.preventDefault();
-            tableMeta.hoverState.pause(true);
-            tableMeta.currentRow.setCurrentRowIndex(props.index - 1);
-            setTimeout(() => {
-              focusManager.focusLast(FOCUS_MANAGER_OPTIONS);
-              // Need to update lastIndex when row got changed and last element got selected.
-              lastIndex = getColumnIndex(focusedElement);
-            }, 1);
-          }
-        }
+  // save if editing gets toggled off
+  React__default.useEffect(() => {
+    if (meta.editing.isEnabled) {
+      if (!meta.editing.isEditing) {
+        requestAnimationFrame(() => {
+          meta.editing.saveChangesIfNeeded();
+        });
+      } else if (meta.currentRow.currentRowIndex === undefined) {
+        meta.currentRow.setCurrentRowIndex(0);
       }
     }
+  }, [meta.editing.isEditing]);
+}
+
+function useSearch(isEnabled, excludeUnmatchedResultsInSearch = false, loadAll) {
+  const [isSearching, setIsSearching] = React__default.useState(false);
+  const [query, setQuery] = React__default.useState();
+  const [enableHighlighting, setEnableHighlighting] = React__default.useState(true);
+  const [excludeUnmatchedResults, setExcludeUnmatchedResults] = React__default.useState(excludeUnmatchedResultsInSearch);
+  // highlighting
+  const [highlightedColumnIndexes, setHighlightedColumnIndexes] = React__default.useState([]);
+  const [currentHighlightColumnIndex, setCurrentHighlightColumnIndex] = React__default.useState(undefined);
+  return {
+    isEnabled,
+    isHighlightingEnabled: enableHighlighting,
+    toggleHighlighting: setEnableHighlighting,
+    excludeUnmatchedResults,
+    toggleExcludeUnmatchedResults: setExcludeUnmatchedResults,
+    query,
+    setQuery: isEnabled ? setQuery : () => undefined,
+    highlightedColumnIndexes,
+    setHighlightedColumnIndexes,
+    currentHighlightColumnIndex,
+    setCurrentHighlightColumnIndex,
+    loadAll,
+    isSearching,
+    setIsSearching
   };
-  const handleArrowRightKey = event => {
-    let focusedElement;
-    if (event.key === 'ArrowRight') {
-      // We need to perform special behaviour when focus reaches the end of the row,
-      // so we don't need default browser behaviour.
-      event.stopPropagation();
-      event.preventDefault();
-      // "CTRL + ArrowRight" or "META + ArrowRight" should focus last focusable element of the row
-      if (event.ctrlKey || event.metaKey) {
-        event.target.blur();
-        focusedElement = focusManager.focusLast(FOCUS_MANAGER_OPTIONS);
-        lastIndex = getColumnIndex(focusedElement);
+}
+
+const ACTIONS_ON_ROW_LENGTH = 4;
+function useRowActions$1(actionsForRow, actionsForRowLength = ACTIONS_ON_ROW_LENGTH) {
+  return {
+    actionsForRow,
+    actionsForRowLength
+  };
+}
+
+const useLocalStorage = (key, initialValue) => {
+  const [state, setState] = React__default.useState(() => {
+    if (!key) {
+      return initialValue;
+    }
+    try {
+      const localStorageValue = localStorage.getItem(key);
+      if (typeof localStorageValue !== 'string') {
+        localStorage.setItem(key, JSON.stringify(initialValue));
+        return initialValue;
       } else {
-        // looping forwards
-        focusedElement = focusManager.focusNext(FOCUS_MANAGER_OPTIONS);
-        if (focusedElement) {
-          lastIndex = getColumnIndex(focusedElement);
-        } else {
-          // there are no next elements to focus, go down a row or go outside the table
-          if (!props.isLastRow) {
-            event.preventDefault();
-            tableMeta.hoverState.pause(true);
-            tableMeta.currentRow.setCurrentRowIndex(props.index + 1);
-            setTimeout(() => {
-              focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);
-              // Need to update lastIndex when row got changed and last element got selected.
-              lastIndex = getColumnIndex(focusedElement);
-            }, 1);
-          }
-        }
+        return JSON.parse(localStorageValue || 'null');
       }
+    } catch {
+      // If user is in private mode or has storage restriction
+      // localStorage can throw. JSON.parse and JSON.stringify
+      // can throw, too.
+      return initialValue;
     }
-  };
+  });
   React__default.useEffect(() => {
-    // if some row stuck in hovered state, we heed to unhover it when hover state is paused
-    if (tableMeta.hoverState.isPaused) {
-      unhoverPreviousRow(props.tableRef);
-    }
-  }, [tableMeta.hoverState.isPaused]);
-  const handleKeyDown = event => {
-    if (event.isDefaultPrevented() || event.isPropagationStopped() || tableMeta.editing.detailModeEditing) {
+    if (!key) {
       return;
     }
-    onKeyDown(event); // handles tab behaviour
-    handleArrowLeftKey(event);
-    handleArrowRightKey(event);
+    try {
+      const serializedState = JSON.stringify(state);
+      localStorage.setItem(key, serializedState);
+    } catch {
+      // If user is in private mode or has storage restriction
+      // localStorage can throw. Also JSON.stringify can throw.
+    }
+  }, [key, state]);
+  const clear = () => {
+    if (key) {
+      localStorage.removeItem(key);
+    }
   };
-  // this ensures we focus either on a field or on the same column when keyboard navigating up/down
-  React__default.useEffect(() => {
-    if (tableMeta.currentRow.currentRowIndex === props.index) {
-      if (lastIndex !== undefined) {
-        var _props$tableRef$curre, _lastIndexCell$queryS;
-        const lastIndexCell = (_props$tableRef$curre = props.tableRef.current) === null || _props$tableRef$curre === void 0 ? void 0 : _props$tableRef$curre.querySelector(`[role="row"][data-current="true"] [data-column-index="${lastIndex}"]`);
-        lastIndexCell === null || lastIndexCell === void 0 ? void 0 : (_lastIndexCell$queryS = lastIndexCell.querySelector(focusableSelector)) === null || _lastIndexCell$queryS === void 0 ? void 0 : _lastIndexCell$queryS.focus();
-      } else {
-        focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);
-      }
+  return [state, setState, clear];
+};
+
+function useTacoSettings() {
+  return React__default.useContext(TacoContext);
+}
+
+function useUniqueTableId(tableId) {
+  const tacoSettings = useTacoSettings();
+  return `taco.${tacoSettings.uniqueUserIdentifier}.table3.${tableId}.settings`;
+}
+function useSettings(id, defaultSettings = {}, onChangeSettings) {
+  const uniqueId = useUniqueTableId(id);
+  // If the onChangeSettings prop is provided, we intend to handle settings changes externally rather than saving them
+  // to local storage.
+  const [persistedSettings, setPersistedSettings] = useLocalStorage(uniqueId, defaultSettings);
+  useLazyEffect(() => {
+    if (onChangeSettings) {
+      onChangeSettings(persistedSettings);
     }
-    // Need to subscribe to current row index and check is it a current row,
-    // for a situation where hovered row is the next row after current row...
-    // In this case row will not be re-rendered if user switch to next row, because hovered row also renders EditingRow.
-  }, [tableMeta.currentRow.currentRowIndex]);
-  return /*#__PURE__*/React__default.createElement(MemoedRow, Object.assign({}, attributes, {
-    onClickCapture: handleClickCapture,
-    onKeyDown: handleKeyDown
-  }));
+  }, [persistedSettings]);
+  return [persistedSettings, setPersistedSettings];
 }
-const clickableElements = ['input', 'button', 'a', 'select', 'option', 'label', 'textarea'];
-const MemoedRow = /*#__PURE__*/React__default.memo(function MemoedRow(props) {
-  const {
-    index,
-    isLastRow: _1,
-    measureRef,
-    onClick,
-    onClickCapture,
-    onDrop,
-    row,
-    table,
-    tableRef,
-    ...attributes
-  } = props;
-  const ref = React__default.useRef(null);
-  const tableMeta = table.options.meta;
-  const {
-    setIsHovered
-  } = useRowContext();
-  // we measure the first cell (since the row has display: contents) so that the virtualiser height is correct
-  React__default.useEffect(() => {
-    var _ref$current;
-    const firstCell = (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.querySelector('[role=cell]:first-child');
-    if (firstCell) {
-      measureRef(firstCell);
+
+function useValidation(onCellValidate, onRowValidate) {
+  const [validationState, dispatch] = React__default.useReducer(validationReducer, {
+    errors: null,
+    draftErrors: null
+  });
+  function getCellError(cell) {
+    var _validationState$draf, _validationState$erro;
+    return validationState.draftErrors && ((_validationState$draf = validationState.draftErrors[cell.row.id]) === null || _validationState$draf === void 0 ? void 0 : _validationState$draf[cell.column.id]) || (validationState.errors ? (_validationState$erro = validationState.errors[cell.row.id]) === null || _validationState$erro === void 0 ? void 0 : _validationState$erro[cell.column.id] : undefined);
+  }
+  function setCellError(rowId, cellId, error) {
+    dispatch({
+      type: ValidationActionType.SET_CELL_ERROR,
+      payload: {
+        rowId,
+        cellId,
+        error
+      }
+    });
+  }
+  function setRowErrors(rowId, errors) {
+    dispatch({
+      type: ValidationActionType.SET_ROW_ERROR,
+      payload: {
+        rowId,
+        errors
+      }
+    });
+  }
+  function confirmErrors(rowId) {
+    dispatch({
+      type: ValidationActionType.CONFIRN_ERRORS,
+      payload: {
+        rowId
+      }
+    });
+  }
+  function resetErrors(rowId, cellId) {
+    dispatch({
+      type: ValidationActionType.RESET_ERRORS,
+      payload: {
+        rowId,
+        cellId
+      }
+    });
+  }
+  const setErrors = (errors, rowId, cellId) => {
+    if (cellId) {
+      setCellError(rowId, cellId, errors[cellId]);
+    } else {
+      setRowErrors(rowId, errors);
     }
-  }, [ref.current]);
-  // we use capture because it also picks up clicks on e.g. select checkboxes
-  const handleClickCapture = event => {
-    if (typeof onClickCapture === 'function') {
-      onClickCapture(event);
+  };
+  const validate = (rowId, row, cellId) => {
+    let validationPromise;
+    if (cellId && onCellValidate) {
+      validationPromise = onCellValidate(row[cellId], cellId, row);
+    } else if (onRowValidate) {
+      validationPromise = onRowValidate(row);
+    } else {
+      validationPromise = new Promise(resolve => {
+        resolve();
+      });
     }
-    // do this in the next frame, otherwise it remounts the row and prevents row actions on hover from being clickable
-    requestAnimationFrame(() => tableMeta.currentRow.setCurrentRowIndex(index));
+    validationPromise.then(() => {
+      // Need to reset previous errors,
+      // since promise resolve is the only place where we consider that previous errors is not relevant anymore.
+      resetErrors(rowId, cellId);
+    }).catch(errors => {
+      setErrors(errors, rowId, cellId);
+    });
+    return validationPromise;
   };
-  const handleClick = event => {
-    if (typeof onClick === 'function') {
-      var _ref$current2;
-      const clickedElement = event.target;
-      if (!((_ref$current2 = ref.current) !== null && _ref$current2 !== void 0 && _ref$current2.contains(event.target)) || clickableElements.includes(clickedElement.tagName.toLowerCase()) || clickedElement.closest(clickableElements.map(tag => `[role=row] ${tag}`).join(','))) {
-        return;
+  return {
+    validate,
+    setCellError,
+    setRowErrors,
+    confirmErrors,
+    getCellError,
+    resetErrors,
+    errors: validationState.errors,
+    draftErrors: validationState.draftErrors
+  };
+}
+// Taking care of reseting/removing errors for particular cell/row and reseting errors object to null, when no errors at all.
+function _resetErrors(errors, rowId, columnId) {
+  let currentErrors = errors ? {
+    ...errors
+  } : {};
+  if (currentErrors && currentErrors[rowId]) {
+    if (columnId) {
+      delete currentErrors[rowId][columnId];
+      const rowErrorsSet = Object.keys(currentErrors[rowId]);
+      if (rowErrorsSet.length === 0) {
+        delete currentErrors[rowId];
       }
-      onClick(row.original);
+    } else {
+      delete currentErrors[rowId];
+    }
+  }
+  const errorsSet = Object.keys(currentErrors);
+  if (errorsSet.length === 0) {
+    currentErrors = null;
+  }
+  return currentErrors;
+}
+var ValidationActionType;
+(function (ValidationActionType) {
+  ValidationActionType[ValidationActionType["SET_CELL_ERROR"] = 0] = "SET_CELL_ERROR";
+  ValidationActionType[ValidationActionType["SET_ROW_ERROR"] = 1] = "SET_ROW_ERROR";
+  ValidationActionType[ValidationActionType["CONFIRN_ERRORS"] = 2] = "CONFIRN_ERRORS";
+  ValidationActionType[ValidationActionType["RESET_ERRORS"] = 3] = "RESET_ERRORS";
+})(ValidationActionType || (ValidationActionType = {}));
+function validationReducer(state, action) {
+  var _state$draftErrors, _state$draftErrors2;
+  switch (action.type) {
+    // Saves cell error into draft errors state.
+    case ValidationActionType.SET_CELL_ERROR:
+      return {
+        ...state,
+        draftErrors: {
+          ...state.draftErrors,
+          [action.payload.rowId]: {
+            ...((_state$draftErrors = state.draftErrors) === null || _state$draftErrors === void 0 ? void 0 : _state$draftErrors[action.payload.rowId]),
+            [action.payload.cellId]: action.payload.error
+          }
+        }
+      };
+    // Saves row errors into draft errors state.
+    case ValidationActionType.SET_ROW_ERROR:
+      return {
+        ...state,
+        draftErrors: {
+          ...state.draftErrors,
+          [action.payload.rowId]: {
+            ...((_state$draftErrors2 = state.draftErrors) === null || _state$draftErrors2 === void 0 ? void 0 : _state$draftErrors2[action.payload.rowId]),
+            ...action.payload.errors
+          }
+        }
+      };
+    // Promotes errors from draft into confirmed state (When user moves to next/prev row)
+    case ValidationActionType.CONFIRN_ERRORS:
+      {
+        const newDraftErrors = {
+          ...state.draftErrors
+        };
+        const confirmedRow = {
+          ...newDraftErrors[action.payload.rowId]
+        };
+        delete newDraftErrors[action.payload.rowId];
+        return {
+          draftErrors: newDraftErrors,
+          errors: {
+            ...state.errors,
+            [action.payload.rowId]: confirmedRow
+          }
+        };
+      }
+    // Resets all errors for particular row or cell if cell id is passed.
+    // We need to reset both confirmed and draft errors, for the situations,
+    // when user is getting back to the row wich already had error.
+    case ValidationActionType.RESET_ERRORS:
+      {
+        const newDraftErrors = _resetErrors(state.draftErrors, action.payload.rowId, action.payload.cellId);
+        const newErrors = _resetErrors(state.errors, action.payload.rowId, action.payload.cellId);
+        return {
+          errors: newErrors,
+          draftErrors: newDraftErrors
+        };
+      }
+    default:
+      return state;
+  }
+}
+
+function usePauseShortcuts() {
+  const [isShortcutsPaused, setIsShortcutsPaused] = React__default.useState(false);
+  return {
+    isPaused: isShortcutsPaused,
+    pause: setIsShortcutsPaused
+  };
+}
+
+function useTable$1(props) {
+  var _ref, _defaultSettings$colu, _defaultSettings$rowH, _props$length;
+  // options
+  const options = useTablePreset(props);
+  const tableOptions = {
+    enableColumnFilters: options.enableFiltering,
+    enableColumnResizing: options.enableColumnResizing,
+    enableExpanding: options.enableRowExpansion,
+    enableGlobalFilter: options.enableSearch,
+    enableHiding: options.enableColumnHiding,
+    enableRowSelection: options.enableRowSelection,
+    enableMultiRowSelection: !options.enableRowSelectionSingle,
+    enableSorting: options.enableSorting
+  };
+  // resizing
+  if (tableOptions.enableColumnResizing) {
+    tableOptions.columnResizeMode = 'onChange';
+  }
+  // filtering
+  if (tableOptions.enableColumnFilters) {
+    if (!props.onFilter) {
+      tableOptions.filterFns = {
+        tacoFilter: (row, columnId, filter) => columnFilterFn(row.getValue(columnId), filter)
+      };
+      tableOptions.getFilteredRowModel = reactTable$1.getFilteredRowModel();
     }
-  };
-  const handleMouseEnter = () => {
-    // When user moving mouse to fast, then some of the rows are getting stuck in hover state,
-    // because mouseleave event never got triggered, to avoid this to happen we're saving the index of last hovered row,
-    // so that we can unhover it when new row got hovered, and saving it in a variable outside of react to save in performance,
-    // since it would be very performance heavy to use state which is bound to mouse events.
-    if (previouslyHoveredIndex !== undefined) {
-      if (previouslyHoveredIndex !== index) {
-        unhoverPreviousRow(tableRef);
-        previouslyHoveredIndex = index;
+    // we don't tableOptions.manualFiltering = true; because it breaks global filtering, server filtering still works :shrug:
+  }
+  // search
+  if (tableOptions.enableGlobalFilter) {
+    // search is always client side, since we call loadAll when searching
+    tableOptions.globalFilterFn = (row, columnId, searchQuery) => {
+      try {
+        if (row.original) {
+          const cell = row.getAllCells().find(cell => cell.column.id === columnId);
+          const columnMeta = cell === null || cell === void 0 ? void 0 : cell.column.columnDef.meta;
+          if (cell && cell.column.getIsVisible() && columnMeta !== null && columnMeta !== void 0 && columnMeta.enableSearch) {
+            const cellValue = getCellValueAsString(row.original[columnId], columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.dataType);
+            if (cellValue !== undefined) {
+              return globalFilterFn(cellValue, searchQuery);
+            }
+          }
+          return false;
+        }
+      } catch {
+        //
       }
+      return false;
+    };
+    tableOptions.getFilteredRowModel = reactTable$1.getFilteredRowModel();
+    tableOptions.getColumnCanGlobalFilter = column => {
+      var _column$columnDef$met;
+      return (_column$columnDef$met = column.columnDef.meta.enableSearch) !== null && _column$columnDef$met !== void 0 ? _column$columnDef$met : true;
+    };
+  }
+  // sorting
+  if (options.enableSorting) {
+    if (props.onSort) {
+      tableOptions.manualSorting = true;
+      // onSort is called as a listener to let the consumer update their data, so we don't use onSortingChange
     } else {
-      previouslyHoveredIndex = index;
+      tableOptions.getSortedRowModel = reactTable$1.getSortedRowModel();
     }
-    setIsHovered(true);
-  };
-  const handleMouseLeave = () => {
-    if (previouslyHoveredIndex === index) {
-      previouslyHoveredIndex = undefined;
+  }
+  const [defaultSettings, setSettings] = useSettings(props.id, props.defaultSettings, props.onChangeSettings);
+  // custom features
+  const columnFreezing = useColumnFreezing( // temporarily see if deprecated frozenColumnCount is there
+  (_ref = (_defaultSettings$colu = defaultSettings.columnFreezingIndex) !== null && _defaultSettings$colu !== void 0 ? _defaultSettings$colu : defaultSettings === null || defaultSettings === void 0 ? void 0 : defaultSettings.frozenColumnCount) !== null && _ref !== void 0 ? _ref : props.defaultColumnFreezingIndex, options);
+  const columnOrdering = useColumnOrdering(options);
+  const currentRow = useCurrentRow(props.defaultCurrentRowIndex);
+  const validation = useValidation(props.onCellValidate, props.onRowValidate);
+  const editing = useEditing(options.enableEditing, validation, props.onSave);
+  const fontSize = useFontSize(options.enableFontSize, defaultSettings.fontSize);
+  const hoverState = usePauseHoverState();
+  const printing = usePrinting(options.enablePrinting, props.loadAll, defaultSettings.showWarningWhenPrintingLargeDataset);
+  const rowActions = useRowActions$1(props.actionsForRow, props.actionsForRowLength);
+  const rowClick = useRowClick(props.onRowClick);
+  const rowDrag = useRowDrag(options.enableRowDrag);
+  const rowDrop = useRowDrop(options.enableRowDrop, props.onRowDrop);
+  const rowGoto = useRowGoto(options.enableRowGoto, props.onRowGoto);
+  const rowHeight = useRowHeight(options.enableRowHeight, // temporarily see if deprecated rowDensity is there
+  (_defaultSettings$rowH = defaultSettings.rowHeight) !== null && _defaultSettings$rowH !== void 0 ? _defaultSettings$rowH : defaultSettings === null || defaultSettings === void 0 ? void 0 : defaultSettings.rowDensity);
+  const rowSelection = useRowSelection();
+  const search = useSearch(options.enableSearch, defaultSettings.excludeUnmatchedRecordsInSearch, props.loadAll);
+  const shortcutsState = usePauseShortcuts();
+  // columns
+  const {
+    columns,
+    defaultColumnSizing,
+    defaultColumnVisibility,
+    defaultSorting
+  } = useConvertChildrenToColumns(props, options, editing);
+  // built-in features
+  const initialState = React__default.useMemo(() => {
+    var _defaultSettings$colu2, _defaultSettings$colu3, _props$defaultSetting, _props$defaultSetting3;
+    const sanitizeSortedColumns = column => columns.find(definedColumn => definedColumn.id === column.id);
+    const state = {
+      columnOrder: ensureOrdering(columns, defaultSettings.columnOrder),
+      columnSizing: (_defaultSettings$colu2 = defaultSettings.columnSizing) !== null && _defaultSettings$colu2 !== void 0 ? _defaultSettings$colu2 : defaultColumnSizing,
+      columnVisibility: (_defaultSettings$colu3 = defaultSettings.columnVisibility) !== null && _defaultSettings$colu3 !== void 0 ? _defaultSettings$colu3 : defaultColumnVisibility,
+      sorting: defaultSettings.sorting ? defaultSettings.sorting.filter(sanitizeSortedColumns) : defaultSorting
+    };
+    // we don't save these outside the table, but they need to be here for print to inherit them - see PrintButton.tsx
+    if ((_props$defaultSetting = props.defaultSettings) !== null && _props$defaultSetting !== void 0 && _props$defaultSetting.columnFilters) {
+      var _props$defaultSetting2;
+      state.columnFilters = (_props$defaultSetting2 = props.defaultSettings) === null || _props$defaultSetting2 === void 0 ? void 0 : _props$defaultSetting2.columnFilters;
     }
-    setIsHovered(false);
+    if ((_props$defaultSetting3 = props.defaultSettings) !== null && _props$defaultSetting3 !== void 0 && _props$defaultSetting3.globalFilter) {
+      var _props$defaultSetting4;
+      state.globalFilter = (_props$defaultSetting4 = props.defaultSettings) === null || _props$defaultSetting4 === void 0 ? void 0 : _props$defaultSetting4.globalFilter;
+    }
+    return state;
+  }, []);
+  const getSettings = () => {
+    const state = table.getState();
+    return {
+      columnFreezingIndex: columnFreezing.frozenColumnIndex,
+      columnOrder: columnOrdering.isEnabled ? state.columnOrder : undefined,
+      columnSizing: table.options.enableColumnResizing ? state.columnSizing : undefined,
+      columnVisibility: table.options.enableHiding ? state.columnVisibility : undefined,
+      excludeUnmatchedRecordsInSearch: search.excludeUnmatchedResults,
+      fontSize: fontSize.isEnabled ? fontSize.size : undefined,
+      rowHeight: rowHeight.isEnabled ? rowHeight.height : undefined,
+      showWarningWhenPrintingLargeDataset: printing.printWarningDialogVisibility,
+      sorting: state.sorting
+    };
   };
-  const [isDraggedOver, dropTargetProps] = useDropTarget(event => onDrop === null || onDrop === void 0 ? void 0 : onDrop(event, row.original));
-  const className = cn('group/row contents',
-  // resizing column requires dragging, which means the mouse might (on rare occasions) move over rows and trigger hover state
-  // that in turn triggers rendering of e.g. row actions, which could cause janky ui - so don't allow mouse interaction when resizing
-  '[[role="table"][data-resizing="true"]_&]:pointer-events-none', {
-    'hover:cursor-pointer': typeof onClick === 'function'
+  const table = reactTable$1.useReactTable({
+    data: props.data,
+    columns,
+    getCoreRowModel: reactTable$1.getCoreRowModel(),
+    initialState,
+    ...tableOptions,
+    //debugAll: true,
+    meta: {
+      columnFreezing,
+      columnOrdering,
+      currentRow,
+      editing,
+      enableFooter: options.enableFooter,
+      fontSize,
+      getSettings,
+      hoverState,
+      isPrinting: props.id.endsWith('_print'),
+      isUsingServer: !!props.loadPage,
+      printing,
+      rowActions: rowActions,
+      rowClick: rowClick,
+      rowDrag,
+      rowDrop,
+      rowGoto,
+      rowHeight,
+      rowSelection,
+      search,
+      shortcutsState,
+      validation
+    }
   });
-  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, onDrop ? dropTargetProps : undefined, {
-    className: className,
-    "data-row-index": index,
-    "data-dragged-over": isDraggedOver,
-    onClick: handleClick,
-    onClickCapture: handleClickCapture,
-    onMouseEnter: handleMouseEnter,
-    onMouseLeave: handleMouseLeave,
-    role: "row",
-    ref: ref
-  }));
-});
+  // listeners
+  useCurrentRowListener(table);
+  useEditingStateListener(table);
+  useFilteringStateListener(table, props.onFilter);
+  useRowSelectionListener(table, props.onRowSelect);
+  useSettingsStateListener(table, setSettings);
+  useShortcutsListener(table, props.shortcuts);
+  useServerLoadingListener(table, props.loadPage);
+  useSortingStateListener(table, props.onSort);
+  return {
+    table,
+    length: (_props$length = props.length) !== null && _props$length !== void 0 ? _props$length : props.data.length
+  };
+}
 
 const ExpandedRow = /*#__PURE__*/React__default.memo(function ExpandedRow(props) {
   var _renderer;
@@ -15970,6 +16528,7 @@ function Search$2(props) {
   const tableMeta = table.options.meta;
   const [query, setQuery] = React__default.useState(tableMeta.search.query);
   const [loading, setLoading] = React__default.useState(LoadingState.Incomplete);
+  const [rowIdToNavigate, setRowIdToNavigate] = React__default.useState(null);
   const scrollTo = rowIndex => scrollToIndex(rowIndex, {
     align: 'center'
   });
@@ -15981,6 +16540,12 @@ function Search$2(props) {
       scrollTo(firstRowIndex);
     }
   }, [tableMeta.search.query, tableMeta.search.excludeUnmatchedResults, table.getRowModel().rows.length, JSON.stringify(table.getState().sorting), JSON.stringify(table.getState().columnVisibility), loading]);
+  // Reseting internal search state if search.query is changed from the outside.
+  React__default.useEffect(() => {
+    if (tableMeta.search.query !== query) {
+      setQuery(tableMeta.search.query);
+    }
+  }, [tableMeta.search.query]);
   // update the table search and filtering on a debounce
   useDebouncedEffect(() => {
     tableMeta.search.setQuery(query);
@@ -15994,6 +16559,9 @@ function Search$2(props) {
   }, [query]);
   const handleFocus = function () {
     try {
+      // While Search input is focused, we'll switch into searching mode
+      tableMeta.search.setIsSearching(true);
+      // load all data if that is possible
       const _temp = function () {
         if (tableMeta.search.loadAll && loading === LoadingState.Incomplete) {
           setLoading(LoadingState.Loading);
@@ -16003,15 +16571,48 @@ function Search$2(props) {
           });
         }
       }();
-      // load all data if that is possible
       return Promise.resolve(_temp && _temp.then ? _temp.then(function () {}) : void 0);
     } catch (e) {
       return Promise.reject(e);
     }
   };
+  const handleBlur = () => {
+    // As soon as search input loose a focus, we'll turn of searching mode.
+    tableMeta.search.setIsSearching(false);
+  };
   const handleChange = query => {
     setQuery(String(query !== null && query !== void 0 ? query : ''));
   };
+  const handleClear = () => {
+    var _rows$rowIndex;
+    const [rowIndex, cellIndex] = tableMeta.search.highlightedColumnIndexes[tableMeta.search.currentHighlightColumnIndex || 0];
+    const rows = table.getRowModel().rows;
+    const rowId = ((_rows$rowIndex = rows[rowIndex]) === null || _rows$rowIndex === void 0 ? void 0 : _rows$rowIndex.id) || null;
+    tableMeta.search.setQuery('');
+    // Need to save row id and cell index, to be able to find the row in the table with updated indexes, after global filter will be reset.
+    lastCellIndex.value = String(cellIndex);
+    setRowIdToNavigate(rowId);
+  };
+  const handleKeyDown = event => {
+    if (event.key === 'Escape') {
+      handleClear();
+      event.preventDefault();
+    }
+  };
+  const {
+    globalFilter
+  } = table.getState();
+  React__default.useEffect(() => {
+    // need to wait when table global filter will be reset and rows will be re-rendered
+    if (rowIdToNavigate !== null && !globalFilter) {
+      const rows = table.getRowModel().rows;
+      const rowIndex = rows.findIndex(row => row.id === rowIdToNavigate);
+      tableMeta.search.setIsSearching(false);
+      tableMeta.currentRow.setCurrentRowIndex(rowIndex);
+      scrollTo(rowIndex);
+      setRowIdToNavigate(null);
+    }
+  }, [rowIdToNavigate, globalFilter]);
   const handleToggleExcludeUnmatchedResults = enabled => {
     tableMeta.search.toggleExcludeUnmatchedResults(enabled);
     if (enabled) {
@@ -16061,6 +16662,9 @@ function Search$2(props) {
     onClickFindNext: handleNextResult,
     onChange: handleChange,
     onFocus: handleFocus,
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown,
+    onClear: handleClear,
     placeholder: texts.table3.search.placeholder,
     settingsContent: settings,
     ref: ref,
@@ -16513,7 +17117,7 @@ function FiltersButton(props) {
     (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.click();
   });
   // state, since we "apply" filters
-  const [filters, setFilters] = React__default.useState(table.getState().columnFilters);
+  const [filters, setFilters] = React__default.useState(appliedFilters);
   const [placeholderCount, setPlaceholderCount] = React__default.useState(1);
   // filters
   const handleChangeFilter = (currentId, filter) => {
@@ -16570,6 +17174,13 @@ function FiltersButton(props) {
     setFilters([]);
     setPlaceholderCount(1);
   };
+  // Because filters can be reset from outside
+  React__default.useEffect(() => {
+    if (appliedFilters.length === 0) {
+      setFilters([]);
+      setPlaceholderCount(1);
+    }
+  }, [appliedFilters]);
   const buttonProps = {
     'aria-label': texts.table3.filters.tooltip,
     className: cn({
@@ -16683,7 +17294,8 @@ const PRINT_STYLES = `
         overflow-y: hidden !important;
     }
 
-    [role="table"] [role="columnheader"] {
+    // all column headers except column group column header
+    [role="table"] [role="columnheader"]:not([data-taco='table3-column-group']) {
         border-bottom-width: 1px !important;
     }
 
@@ -17402,10 +18014,10 @@ function SettingsButton(props) {
     icon: "sliders",
     menu: popoverElement ? undefined : menuProps => /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, {
       align: "end"
-    }, table.options.enableHiding || tableMeta.columnOrdering.isEnabled ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Menu$1.Item, {
+    }, table.options.enableHiding || tableMeta.columnOrdering.isEnabled ? /*#__PURE__*/React__default.createElement(Menu$1.Item, {
       icon: "columns",
       onClick: () => setPopover('columnSettings')
-    }, texts.table3.columnSettings.button), /*#__PURE__*/React__default.createElement(Menu$1.Separator, null)) : null, tableMeta.rowHeight.isEnabled ? /*#__PURE__*/React__default.createElement(Menu$1.Item, {
+    }, texts.table3.columnSettings.button) : null, tableMeta.rowHeight.isEnabled || tableMeta.fontSize.isEnabled ? /*#__PURE__*/React__default.createElement(Menu$1.Separator, null) : null, tableMeta.rowHeight.isEnabled ? /*#__PURE__*/React__default.createElement(Menu$1.Item, {
       icon: `height-${tableMeta.rowHeight.height}`,
       subMenu: () => /*#__PURE__*/React__default.createElement(RowHeight, {
         table: table
@@ -17465,7 +18077,7 @@ function isSettingsVisible(props) {
     table
   } = props;
   const tableMeta = table.options.meta;
-  return tableMeta.fontSize.isEnabled || tableMeta.rowHeight.isEnabled;
+  return tableMeta.fontSize.isEnabled || tableMeta.rowHeight.isEnabled || tableMeta.columnOrdering.isEnabled;
 }
 function isToolbarVisible(props) {
   const {
@@ -17621,6 +18233,149 @@ function useHeaderOffsetStyle(tableId, table) {
   return style;
 }
 
+function ErrorAlert(props) {
+  var _column$columnDef$met;
+  const {
+    table,
+    tableRef,
+    scrollToIndex,
+    rowIdentifier
+  } = props;
+  const tableMeta = table.options.meta;
+  const errors = tableMeta.validation.errors;
+  const errorsRowIds = errors ? Object.keys(errors) : [];
+  const rows = table.getRowModel().rows;
+  const coreRows = table.getCoreRowModel().rows;
+  const {
+    texts
+  } = useLocalization();
+  const [resetFiltersConfirmationOpen, setResetFiltersConfirmationOpen] = React__default.useState(false);
+  const [internalRowId, setInternalRowId] = React__default.useState(null);
+  const [internalRowIndex, setInternalRowIndex] = React__default.useState(null);
+  const [isFiltersReset, setIsFiltersReset] = React__default.useState(false);
+  const columns = table.getAllFlatColumns();
+  const column = columns.find(column => column.id === rowIdentifier);
+  const rowIdentifierHeader = column === null || column === void 0 ? void 0 : (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.header;
+  // Find and focus first invalid cell
+  const navigateToFirstInvalidCell = () => {
+    var _tableRef$current;
+    const firstInvalidCell = (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.querySelector('[role="row"][data-current="true"] [role="cell"][data-invalid="true"]');
+    const firstInvalidElement = firstInvalidCell === null || firstInvalidCell === void 0 ? void 0 : firstInvalidCell.querySelector(focusableSelector);
+    if (firstInvalidElement) {
+      firstInvalidElement === null || firstInvalidElement === void 0 ? void 0 : firstInvalidElement.focus();
+      lastCellIndex.value = firstInvalidCell === null || firstInvalidCell === void 0 ? void 0 : firstInvalidCell.getAttribute('data-column-index');
+    }
+  };
+  // Navigate to row and focus first invalid cell
+  const navigateToRow = rowIndex => {
+    tableMeta.currentRow.setCurrentRowIndex(rowIndex);
+    scrollToIndex(rowIndex, {
+      align: 'center'
+    });
+    lastCellIndex.value = undefined;
+    // Need to request animation frame here, because newly selected row is not rendered yet.
+    requestAnimationFrame(() => {
+      navigateToFirstInvalidCell();
+    });
+  };
+  // When internal row index is changed after click on row link, we should navigate to the row.
+  React__default.useEffect(() => {
+    if (internalRowIndex !== null && internalRowIndex >= 0) {
+      navigateToRow(internalRowIndex);
+    }
+  }, [internalRowIndex]);
+  // When filters are reset, we're able to get the real row index by rowId
+  React__default.useEffect(() => {
+    if (isFiltersReset) {
+      const rowIndex = rows.findIndex(row => row.id === internalRowId);
+      if (rowIndex === -1) {
+        return;
+      }
+      setInternalRowIndex(rowIndex);
+    }
+  }, [isFiltersReset]);
+  const onRowNumberClick = React__default.useCallback(rowId => {
+    // When row is hidden due filtering it will not be present in rows (but it still will be present in coreRows)
+    const foundIndex = rows.findIndex(row => row.id === rowId);
+    if (foundIndex === -1) {
+      setIsFiltersReset(false);
+      setResetFiltersConfirmationOpen(true);
+      // Since row indexes changed due filtering, we need to save row id, so that we can find it when filters will be reset
+      setInternalRowId(rowId);
+      return;
+    }
+    // In cases when user clicked on a row link multiple times we still need to navigate to the row, and focus the cell,
+    // because row/cell will loose focus on next click, but row index will not change.
+    if (foundIndex === internalRowIndex) {
+      navigateToRow(foundIndex);
+    } else {
+      setInternalRowIndex(foundIndex);
+    }
+  }, [rows, internalRowIndex]);
+  const onResetFiltersConfirm = () => {
+    setIsFiltersReset(true);
+  };
+  // Getting the row from core rows (ignoring search and filtering)
+  const getCoreRow = React__default.useCallback(rowId => coreRows.find(coreRow => coreRow.id === rowId), [coreRows]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-4"
+  }, errorsRowIds.length ? /*#__PURE__*/React__default.createElement(Alert, {
+    state: "error",
+    className: "mb-1"
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("b", null, errorsRowIds.length, " ", texts.table3.validation.alert.unsavedEntries(errorsRowIds.length)), ' '), rowIdentifierHeader || texts.table3.validation.index, ' ', errorsRowIds.map((rowId, index) => {
+    const coreRow = getCoreRow(rowId);
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button$1, {
+      key: rowId,
+      className: "!min-h-[theme(spacing.2)] !min-w-[theme(spacing.2)] !px-1",
+      appearance: "discrete",
+      onClick: () => {
+        onRowNumberClick(rowId);
+      }
+    }, rowIdentifier ? coreRow === null || coreRow === void 0 ? void 0 : coreRow.original[rowIdentifier] : coreRow === null || coreRow === void 0 ? void 0 : coreRow.index), /*#__PURE__*/React__default.createElement("span", {
+      key: `${rowId}_comma`
+    }, index < errorsRowIds.length - 1 ? ',' : ''));
+  }), texts.table3.validation.alert.incompleteAndHavntBeenSaved(errorsRowIds.length)) : null, /*#__PURE__*/React__default.createElement(FilterResetDialog, {
+    open: resetFiltersConfirmationOpen,
+    onClose: () => {
+      setResetFiltersConfirmationOpen(false);
+    },
+    onConfirm: onResetFiltersConfirm,
+    table: table
+  }));
+}
+function FilterResetDialog(props) {
+  const {
+    open,
+    onClose,
+    onConfirm,
+    table
+  } = props;
+  const tableMeta = table.options.meta;
+  const {
+    texts
+  } = useLocalization();
+  const resetFilters = React__default.useCallback(() => {
+    tableMeta.search.setQuery('');
+    table.resetGlobalFilter();
+    table.resetColumnFilters();
+  }, [table, tableMeta.search]);
+  const handleConfirmClick = () => {
+    resetFilters();
+    onConfirm();
+    onClose();
+  };
+  return /*#__PURE__*/React__default.createElement(Dialog, {
+    open: open,
+    onClose: onClose,
+    size: "xs"
+  }, /*#__PURE__*/React__default.createElement(Dialog.Content, {
+    "aria-label": "Create a new account"
+  }, /*#__PURE__*/React__default.createElement(Dialog.Title, null, texts.table3.validation.resetFiltersDialog.title), /*#__PURE__*/React__default.createElement("p", null, texts.table3.validation.resetFiltersDialog.description), /*#__PURE__*/React__default.createElement(Dialog.Footer, null, /*#__PURE__*/React__default.createElement(Group, null, /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button$1, null, texts.table3.validation.resetFiltersDialog.cancel)), /*#__PURE__*/React__default.createElement(Button$1, {
+    appearance: "primary",
+    onClick: handleConfirmClick
+  }, texts.table3.validation.resetFiltersDialog.confirm)))));
+}
+
 function useTable3DataLoader(fetch, fetchAll, options = {
   pageSize: 100
 }) {
@@ -17761,7 +18516,8 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     emptyState: EmptyState,
     customSettings,
     toolbarLeft,
-    toolbarRight
+    toolbarRight,
+    defaultCurrentRowIndex
   } = props;
   const internalRef = useMergedRef(ref);
   const {
@@ -17782,6 +18538,20 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   const tableMeta = table.options.meta;
   const state = table.getState();
   const bodyRef = React__default.useRef(null);
+  React__default.useEffect(() => {
+    // On a very first render, the tanstack table rendered without any rows,
+    // so we delaying default row scrolling logic with using of requestAnimation frame
+    const animationFrameId = requestAnimationFrame(() => {
+      if (defaultCurrentRowIndex) {
+        scrollToIndex(defaultCurrentRowIndex, {
+          align: 'center'
+        });
+      }
+    });
+    return () => {
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, []);
   React__default.useEffect(() => {
     const handleKeyDown = event => {
       const target = event.target;
@@ -17789,7 +18559,7 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
       const eventOriginatedFromCombobox = !!target.closest('[role="combobox"]');
       // Don't trigger global shortcuts on the table if event originated from a combobox or if table is
       // outside the dialog
-      if (eventOriginatedFromCombobox || dialog && !(dialog !== null && dialog !== void 0 && dialog.contains(internalRef.current))) {
+      if (eventOriginatedFromCombobox || dialog && !(dialog !== null && dialog !== void 0 && dialog.contains(internalRef.current)) || tableMeta.shortcutsState.isPaused) {
         return;
       }
       tableMeta.hoverState.handleKeyDown(event);
@@ -17848,9 +18618,10 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   const columnFreezingStyle = useColumnFreezingStyle(props.id, table);
   const headerOffsetStyle = useHeaderOffsetStyle(props.id, table);
   const isServerLoadingAndNotReady = tableMeta.isUsingServer && props.length === undefined;
+  const isPrinting = tableMeta.isPrinting;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, columnFreezingStyle ? /*#__PURE__*/React__default.createElement("style", {
     "data-taco": "table3-column-freezing-styles"
-  }, columnFreezingStyle) : null, headerOffsetStyle ? /*#__PURE__*/React__default.createElement("style", {
+  }, columnFreezingStyle) : null, headerOffsetStyle && !isPrinting ? /*#__PURE__*/React__default.createElement("style", {
     "data-taco": "table3-column-header-offset-styles"
   }, headerOffsetStyle) : null, /*#__PURE__*/React__default.createElement(Toolbar, {
     table: table,
@@ -17860,6 +18631,11 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     right: toolbarRight,
     customSettings: customSettings,
     scrollToIndex: scrollToIndex
+  }), /*#__PURE__*/React__default.createElement(ErrorAlert, {
+    table: table,
+    tableRef: internalRef,
+    scrollToIndex: scrollToIndex,
+    rowIdentifier: props.rowIdentifier
   }), /*#__PURE__*/React__default.createElement("div", {
     className: className,
     id: props.id,
@@ -17910,7 +18686,9 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     className: "group/footer contents",
     "data-taco": "table2-footer",
     role: "rowgroup"
-  }, table.getFooterGroups().map(footerGroup => /*#__PURE__*/React__default.createElement("div", {
+  },
+  // Render the footer cell only for individual columns, excluding column groups.
+  table.getFooterGroups().slice(0, 1).map(footerGroup => /*#__PURE__*/React__default.createElement("div", {
     className: "contents",
     key: footerGroup.id,
     role: "row"