@economic/taco 2.28.1 → 2.29.1

package/dist/esm/packages/taco/src/utils/date.js.map

@@ -1 +1 @@
-{"version":3,"file":"date.js","sources":["../../../../../../src/utils/date.ts"],"sourcesContent":["import { isDate, toDate, isValid } from 'date-fns';\n\nexport const isWeakEqual = (leftDate: Date, rightDate: Date) => {\n    return (\n        leftDate.getFullYear() === rightDate.getFullYear() &&\n        leftDate.getMonth() === rightDate.getMonth() &&\n        leftDate.getDay() === rightDate.getDay()\n    );\n};\n\nexport const format = (date: Date | undefined, mask = 'dd.mm.yy'): string | undefined => {\n    if (!date) {\n        return undefined;\n    }\n\n    const value = isDate(date) ? date : toDate(date);\n\n    if (!isValid(value)) {\n        return undefined;\n    }\n\n    const pad = (v: number): string => (String(v).length === 1 ? `0${v}` : v.toString());\n\n    return mask\n        .replace('dd', pad(value.getDate()))\n        .replace('mm', pad(value.getMonth() + 1))\n        .replace('yy', String(value.getFullYear()).slice(2));\n};\n\nexport const parseFromCustomString = (\n    date = '',\n    mask = 'dd.mm.yy',\n    defaultYear: number | undefined = undefined\n): Date | undefined => {\n    if (!date || !date.length) {\n        return undefined;\n    }\n\n    const sanitizedMask = mask.split(/[^dmy]/);\n    const dd = sanitizedMask.findIndex(x => x === 'dd');\n    const mm = sanitizedMask.findIndex(x => x === 'mm');\n    const yy = sanitizedMask.findIndex(x => x === 'yy' || x === 'yyyy');\n\n    let day;\n    let month;\n    let year;\n\n    const getFullYear = (y: string): string => {\n        if (y && y.length === 2) {\n            const z = Number.parseInt(y, 10);\n\n            return z > 50 ? `19${y}` : `20${y}`;\n        }\n\n        return y;\n    };\n\n    const inputParts = date.split(/\\D/);\n\n    if (inputParts.length === 1) {\n        const fullDate = inputParts[0];\n        const unseparatedMask = mask.replace(/[^dmy]/g, '');\n\n        day = fullDate.slice(unseparatedMask.indexOf('d'), unseparatedMask.lastIndexOf('d') + 1);\n        month = fullDate.slice(unseparatedMask.indexOf('m'), unseparatedMask.lastIndexOf('m') + 1);\n        year = getFullYear(fullDate.slice(unseparatedMask.indexOf('y'), unseparatedMask.lastIndexOf('y') + 3)); // account for full years\n    } else {\n        day = inputParts[dd];\n        month = inputParts[mm];\n        year = getFullYear(inputParts[yy]);\n    }\n\n    day = Number.parseInt(day, 10);\n    month = Number.parseInt(month, 10);\n    year = Number.parseInt(year, 10);\n\n    const currentDate = new Date();\n\n    return new Date(\n        /* year */ Object.is(year, NaN) ? defaultYear ?? currentDate.getFullYear() : year,\n        /* month */ Object.is(month, NaN) ? currentDate.getMonth() : month - 1, // months are zero based in javascript, so subtract a day\n        /* day */ Object.is(day, NaN) ? currentDate.getDate() : day,\n        /* hours */ 12,\n        /* minutes */ 0 // set to midday to avoid UTC offset causing dates to be mismatched server side\n    );\n};\n\nexport const parseFromISOString = (date: string): Date | undefined => {\n    const tempDate = new Date(date);\n    return isValid(tempDate) ? parseFromCustomString(format(new Date(date))) : undefined;\n};\n"],"names":["isWeakEqual","leftDate","rightDate","getFullYear","getMonth","getDay","format","date","mask","undefined","value","isDate","toDate","isValid","pad","v","String","length","toString","replace","getDate","slice","parseFromCustomString","defaultYear","sanitizedMask","split","dd","findIndex","x","mm","yy","day","month","year","y","z","Number","parseInt","inputParts","fullDate","unseparatedMask","indexOf","lastIndexOf","currentDate","Date","Object","is","NaN","parseFromISOString","tempDate"],"mappings":"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"}
+{"version":3,"file":"date.js","sources":["../../../../../../src/utils/date.ts"],"sourcesContent":["import { isDate, toDate, isValid } from 'date-fns';\n\nexport const isWeakEqual = (leftDate: Date, rightDate: Date) => {\n    return (\n        leftDate.getFullYear() === rightDate.getFullYear() &&\n        leftDate.getMonth() === rightDate.getMonth() &&\n        leftDate.getDate() === rightDate.getDate()\n    );\n};\n\nexport const format = (date: Date | undefined, mask = 'dd.mm.yy'): string | undefined => {\n    if (!date) {\n        return undefined;\n    }\n\n    const value = isDate(date) ? date : toDate(date);\n\n    if (!isValid(value)) {\n        return undefined;\n    }\n\n    const pad = (v: number): string => (String(v).length === 1 ? `0${v}` : v.toString());\n\n    return mask\n        .replace('dd', pad(value.getDate()))\n        .replace('mm', pad(value.getMonth() + 1))\n        .replace('yy', String(value.getFullYear()).slice(2));\n};\n\nexport const parseFromCustomString = (\n    date = '',\n    mask = 'dd.mm.yy',\n    defaultMonth: number | undefined = undefined,\n    defaultYear: number | undefined = undefined\n): Date | undefined => {\n    if (!date || !date.length) {\n        return undefined;\n    }\n\n    const sanitizedMask = mask.split(/[^dmy]/);\n    const dd = sanitizedMask.findIndex(x => x === 'dd');\n    const mm = sanitizedMask.findIndex(x => x === 'mm');\n    const yy = sanitizedMask.findIndex(x => x === 'yy' || x === 'yyyy');\n\n    let day;\n    let month;\n    let year;\n\n    const getFullYear = (y: string): string => {\n        if (y && y.length === 2) {\n            const z = Number.parseInt(y, 10);\n\n            return z > 50 ? `19${y}` : `20${y}`;\n        }\n\n        return y;\n    };\n\n    const inputParts = date.split(/\\D/);\n\n    if (inputParts.length === 1) {\n        const fullDate = inputParts[0];\n        const unseparatedMask = mask.replace(/[^dmy]/g, '');\n\n        day = fullDate.slice(unseparatedMask.indexOf('d'), unseparatedMask.lastIndexOf('d') + 1);\n        month = fullDate.slice(unseparatedMask.indexOf('m'), unseparatedMask.lastIndexOf('m') + 1);\n        year = getFullYear(fullDate.slice(unseparatedMask.indexOf('y'), unseparatedMask.lastIndexOf('y') + 3)); // account for full years\n    } else {\n        day = inputParts[dd];\n        month = inputParts[mm];\n        year = getFullYear(inputParts[yy]);\n    }\n\n    day = Number.parseInt(day, 10);\n    month = Number.parseInt(month, 10);\n    year = Number.parseInt(year, 10);\n\n    const currentDate = new Date();\n\n    return new Date(\n        /* year */ Object.is(year, NaN) ? defaultYear ?? currentDate.getFullYear() : year,\n        /* month */ Object.is(month, NaN) ? defaultMonth ?? currentDate.getMonth() : month - 1, // months are zero based in javascript, so subtract a day\n        /* day */ Object.is(day, NaN) ? currentDate.getDate() : day,\n        /* hours */ 12,\n        /* minutes */ 0 // set to midday to avoid UTC offset causing dates to be mismatched server side\n    );\n};\n\nexport const parseFromISOString = (date: string): Date | undefined => {\n    const tempDate = new Date(date);\n    return isValid(tempDate) ? parseFromCustomString(format(new Date(date))) : undefined;\n};\n"],"names":["isWeakEqual","leftDate","rightDate","getFullYear","getMonth","getDate","format","date","mask","undefined","value","isDate","toDate","isValid","pad","v","String","length","toString","replace","slice","parseFromCustomString","defaultMonth","defaultYear","sanitizedMask","split","dd","findIndex","x","mm","yy","day","month","year","y","z","Number","parseInt","inputParts","fullDate","unseparatedMask","indexOf","lastIndexOf","currentDate","Date","Object","is","NaN","parseFromISOString","tempDate"],"mappings":";;MAEaA,WAAW,GAAGA,CAACC,QAAc,EAAEC,SAAe;EACvD,OACID,QAAQ,CAACE,WAAW,EAAE,KAAKD,SAAS,CAACC,WAAW,EAAE,IAClDF,QAAQ,CAACG,QAAQ,EAAE,KAAKF,SAAS,CAACE,QAAQ,EAAE,IAC5CH,QAAQ,CAACI,OAAO,EAAE,KAAKH,SAAS,CAACG,OAAO,EAAE;AAElD;MAEaC,MAAM,GAAGA,CAACC,IAAsB,EAAEC,IAAI,GAAG,UAAU;EAC5D,IAAI,CAACD,IAAI,EAAE;IACP,OAAOE,SAAS;;EAGpB,MAAMC,KAAK,GAAGC,MAAM,CAACJ,IAAI,CAAC,GAAGA,IAAI,GAAGK,MAAM,CAACL,IAAI,CAAC;EAEhD,IAAI,CAACM,OAAO,CAACH,KAAK,CAAC,EAAE;IACjB,OAAOD,SAAS;;EAGpB,MAAMK,GAAG,GAAIC,CAAS,IAAcC,MAAM,CAACD,CAAC,CAAC,CAACE,MAAM,KAAK,CAAC,OAAOF,GAAG,GAAGA,CAAC,CAACG,QAAQ,EAAG;EAEpF,OAAOV,IAAI,CACNW,OAAO,CAAC,IAAI,EAAEL,GAAG,CAACJ,KAAK,CAACL,OAAO,EAAE,CAAC,CAAC,CACnCc,OAAO,CAAC,IAAI,EAAEL,GAAG,CAACJ,KAAK,CAACN,QAAQ,EAAE,GAAG,CAAC,CAAC,CAAC,CACxCe,OAAO,CAAC,IAAI,EAAEH,MAAM,CAACN,KAAK,CAACP,WAAW,EAAE,CAAC,CAACiB,KAAK,CAAC,CAAC,CAAC,CAAC;AAC5D;MAEaC,qBAAqB,GAAGA,CACjCd,IAAI,GAAG,EAAE,EACTC,IAAI,GAAG,UAAU,EACjBc,eAAmCb,SAAS,EAC5Cc,cAAkCd,SAAS;EAE3C,IAAI,CAACF,IAAI,IAAI,CAACA,IAAI,CAACU,MAAM,EAAE;IACvB,OAAOR,SAAS;;EAGpB,MAAMe,aAAa,GAAGhB,IAAI,CAACiB,KAAK,CAAC,QAAQ,CAAC;EAC1C,MAAMC,EAAE,GAAGF,aAAa,CAACG,SAAS,CAACC,CAAC,IAAIA,CAAC,KAAK,IAAI,CAAC;EACnD,MAAMC,EAAE,GAAGL,aAAa,CAACG,SAAS,CAACC,CAAC,IAAIA,CAAC,KAAK,IAAI,CAAC;EACnD,MAAME,EAAE,GAAGN,aAAa,CAACG,SAAS,CAACC,CAAC,IAAIA,CAAC,KAAK,IAAI,IAAIA,CAAC,KAAK,MAAM,CAAC;EAEnE,IAAIG,GAAG;EACP,IAAIC,KAAK;EACT,IAAIC,IAAI;EAER,MAAM9B,WAAW,GAAI+B,CAAS;IAC1B,IAAIA,CAAC,IAAIA,CAAC,CAACjB,MAAM,KAAK,CAAC,EAAE;MACrB,MAAMkB,CAAC,GAAGC,MAAM,CAACC,QAAQ,CAACH,CAAC,EAAE,EAAE,CAAC;MAEhC,OAAOC,CAAC,GAAG,EAAE,QAAQD,GAAG,QAAQA,GAAG;;IAGvC,OAAOA,CAAC;GACX;EAED,MAAMI,UAAU,GAAG/B,IAAI,CAACkB,KAAK,CAAC,IAAI,CAAC;EAEnC,IAAIa,UAAU,CAACrB,MAAM,KAAK,CAAC,EAAE;IACzB,MAAMsB,QAAQ,GAAGD,UAAU,CAAC,CAAC,CAAC;IAC9B,MAAME,eAAe,GAAGhC,IAAI,CAACW,OAAO,CAAC,SAAS,EAAE,EAAE,CAAC;IAEnDY,GAAG,GAAGQ,QAAQ,CAACnB,KAAK,CAACoB,eAAe,CAACC,OAAO,CAAC,GAAG,CAAC,EAAED,eAAe,CAACE,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACxFV,KAAK,GAAGO,QAAQ,CAACnB,KAAK,CAACoB,eAAe,CAACC,OAAO,CAAC,GAAG,CAAC,EAAED,eAAe,CAACE,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IAC1FT,IAAI,GAAG9B,WAAW,CAACoC,QAAQ,CAACnB,KAAK,CAACoB,eAAe,CAACC,OAAO,CAAC,GAAG,CAAC,EAAED,eAAe,CAACE,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;GAC1G,MAAM;IACHX,GAAG,GAAGO,UAAU,CAACZ,EAAE,CAAC;IACpBM,KAAK,GAAGM,UAAU,CAACT,EAAE,CAAC;IACtBI,IAAI,GAAG9B,WAAW,CAACmC,UAAU,CAACR,EAAE,CAAC,CAAC;;EAGtCC,GAAG,GAAGK,MAAM,CAACC,QAAQ,CAACN,GAAG,EAAE,EAAE,CAAC;EAC9BC,KAAK,GAAGI,MAAM,CAACC,QAAQ,CAACL,KAAK,EAAE,EAAE,CAAC;EAClCC,IAAI,GAAGG,MAAM,CAACC,QAAQ,CAACJ,IAAI,EAAE,EAAE,CAAC;EAEhC,MAAMU,WAAW,GAAG,IAAIC,IAAI,EAAE;EAE9B,OAAO,IAAIA,IAAI,YACAC,MAAM,CAACC,EAAE,CAACb,IAAI,EAAEc,GAAG,CAAC,GAAGxB,WAAW,aAAXA,WAAW,cAAXA,WAAW,GAAIoB,WAAW,CAACxC,WAAW,EAAE,GAAG8B,IAAI,aACrEY,MAAM,CAACC,EAAE,CAACd,KAAK,EAAEe,GAAG,CAAC,GAAGzB,YAAY,aAAZA,YAAY,cAAZA,YAAY,GAAIqB,WAAW,CAACvC,QAAQ,EAAE,GAAG4B,KAAK,GAAG,CAAC;;;EAC5Ea,MAAM,CAACC,EAAE,CAACf,GAAG,EAAEgB,GAAG,CAAC,GAAGJ,WAAW,CAACtC,OAAO,EAAE,GAAG0B,GAAG,aAC/C,EAAE,eACA,CAAC;GAClB;AACL;MAEaiB,kBAAkB,GAAIzC,IAAY;EAC3C,MAAM0C,QAAQ,GAAG,IAAIL,IAAI,CAACrC,IAAI,CAAC;EAC/B,OAAOM,OAAO,CAACoC,QAAQ,CAAC,GAAG5B,qBAAqB,CAACf,MAAM,CAAC,IAAIsC,IAAI,CAACrC,IAAI,CAAC,CAAC,CAAC,GAAGE,SAAS;AACxF;;;;"}

package/dist/index.css

@@ -550,6 +550,8 @@ table[data-taco^='table'] {
     @apply grid;
     /* print */
     @apply print:float-left print:h-max print:w-full print:overflow-visible print:border-0;
+    /* resolves a virtualisation resizing issue */
+    overflow-anchor: none;
 }
 
 table[data-taco^='table'] thead {
@@ -639,6 +641,10 @@ table[data-taco^='table'] tr:first-child td {
         @apply !border-t-0;
     }
 
+table[data-taco^='table'] tr:last-child td {
+        @apply !border-b-0;
+    }
+
 table[data-taco^='table'] tr[aria-grabbed='true'] td {
         @apply !wcag-blue-500;
     }
@@ -715,12 +721,15 @@ table[data-taco^='table'] td:not([data-cell-truncate='true']) {
 
 /* FOOTER */
 table[data-taco^='table'] tfoot td {
-    /* 
+    /*
      * Since footer has sticky position, the top and bottom padding ensures that the inner content doesn't come over
      * the border of the footer row.
      */
     @apply border-b-0 !py-1 font-bold;
 }
+table[data-taco^='table'] tfoot td:first-child {
+        @apply z-30 !pb-0 !pt-[2px];
+    }
 
 table[data-taco^='table'] tfoot td:before {
     @apply bg-grey-300 absolute left-0 right-0 top-0 h-[2px] content-[''];
@@ -983,7 +992,7 @@ table[data-taco^='table'][data-table-font-size='large'] td [data-taco='textarea'
 }
 
 table[data-taco^='table'][data-table-font-size='large'] td [data-taco='input-container'] [data-affix-type='postfix'] button {
-    @apply !-mr-[19px] !h-10 !w-10;
+    @apply z-10 !-mr-[19px] !h-10 !w-10;
 }
 
 table[data-taco^='table'][data-table-font-size='large']
@@ -1085,11 +1094,6 @@ table[data-taco^='table'] tbody tr[data-row-meta-layout='item']:not([data-row-gr
     @apply !border-b-0;
 }
 
-/* printing */
-table[data-taco^='table'] [data-cell-id^='__'] {
-    @apply print:hidden;
-}
-
 /* rows */
 .yt-table__row {
     @apply border-grey-300 flex border-b;

package/dist/primitives/Table/Core/components/Row/BuiltIns/SkeletonRow.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { Table as ReactTable, Row as ReactTableRow } from '@tanstack/react-table';
 export declare type RowProps<TType = unknown> = {
     index: number;
@@ -6,5 +6,3 @@ export declare type RowProps<TType = unknown> = {
     table: ReactTable<TType>;
 };
 export declare function SkeletonRow<TType = unknown>(props: RowProps<TType>): JSX.Element;
-export declare function RowWithServerLoading<TType = unknown>(props: RowProps<TType>): JSX.Element;
-export declare const Skeleton: React.ForwardRefExoticComponent<Pick<any, string | number | symbol> & React.RefAttributes<HTMLTableRowElement>>;

package/dist/primitives/Table/Core/util/rows.d.ts

@@ -4,4 +4,4 @@ export declare const ROW_HEIGHT_ESTIMATES: {
     tall: number;
     'extra-tall': number;
 };
-export declare const HEADER_ROW_HEIGHT_ESTIMATE: number;
+export declare const HEADER_FOOTER_ROW_HEIGHT_ESTIMATE: number;

package/dist/primitives/Table/useTableManager/util/columns.d.ts

@@ -5,6 +5,6 @@ export declare function isInternalColumn(id: string | undefined): boolean | unde
 export declare const getCellMinWidth: (fontSize?: FontSize) => 57 | 83 | 72;
 export declare function isCellHighlighted(query: string, value: unknown, dataType?: TableColumnDataType): boolean;
 export declare function getCellValueAsString(value: unknown, dataType?: TableColumnDataType): string;
-export declare function ensureOrdering<TType = unknown>(columns: ReactTableColumnDef<TType>[], settingsOrder: string[] | undefined, internalColumnsPinnedToTheRight?: string[]): string[];
+export declare function ensureOrdering<TType = unknown>(columns: ReactTableColumnDef<TType>[], settingsOrder: string[] | undefined, pinnedOrder?: string[] | undefined, internalColumnsPinnedToTheRight?: string[]): string[];
 export declare function unfreezeAllExternalColumns(leftPinnedState?: string[]): string[];
 export declare function freezeUptoExternalColumn(index: number, columns: string[]): string[];

package/dist/taco.cjs.development.js

@@ -2569,6 +2569,19 @@ function IconPhoneSolid(props, svgRef) {
 }
 var PhoneSolid = /*#__PURE__*/React.forwardRef(IconPhoneSolid);
 
+function IconPhone(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: "M4.742 3.998l1.036-.641a2.75 2.75 0 013.58.6l1.39 1.703a2.75 2.75 0 01.2 3.196l-1.082 1.732a.25.25 0 00-.035.17c.06.396.52 1.073 1.397 1.95.638.638 1.174 1.062 1.59 1.27.289.144.43.154.48.123l1.783-1.114a2.75 2.75 0 013.195.201l1.696 1.383a2.75 2.75 0 01.606 3.57l-.639 1.04a3.75 3.75 0 01-3.234 1.788c-2.86-.03-5.846-1.636-8.974-4.763-3.133-3.133-4.739-6.124-4.764-8.986a3.75 3.75 0 011.775-3.222zm.79 1.276a2.25 2.25 0 00-1.065 1.932c.021 2.408 1.445 5.06 4.324 7.939 2.876 2.876 5.524 4.3 7.93 4.324a2.25 2.25 0 001.94-1.072l.639-1.04a1.25 1.25 0 00-.276-1.623l-1.696-1.383a1.25 1.25 0 00-1.452-.092l-1.787 1.117c-1.04.64-2.31.005-3.922-1.607-1.086-1.087-1.698-1.988-1.82-2.786a1.75 1.75 0 01.247-1.19l1.083-1.732a1.25 1.25 0 00-.092-1.453l-1.39-1.704a1.25 1.25 0 00-1.627-.272l-1.036.642z",
+    fill: "currentColor"
+  }));
+}
+var Phone = /*#__PURE__*/React.forwardRef(IconPhone);
+
 function IconPlay(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3572,6 +3585,7 @@ const icons = {
   'person-plus': PersonPlus,
   'person-tick': PersonTick,
   'phone-solid': PhoneSolid,
+  phone: Phone,
   play: Play,
   'plus-minus': PlusMinus,
   print: Print,
@@ -5809,58 +5823,74 @@ const useCombobox = ({
     }
   };
   const handleInputKeyDown = event => {
+    var _inputRef$current;
     event.persist();
-    switch (event.key) {
-      case 'Backspace':
-        {
-          return;
-        }
-      case 'Escape':
-        {
-          event.preventDefault();
-          setInputValue(convertToInputValue(value));
-          setOpen(false);
-          return;
-        }
-      case 'Tab':
-      case 'Enter':
-        {
-          if (event.key !== 'Tab') {
+    const insideTheTable = !!((_inputRef$current = inputRef.current) !== null && _inputRef$current !== void 0 && _inputRef$current.closest('table, [role="rowgroup"]'));
+    if (!event.ctrlKey && !event.metaKey) {
+      switch (event.key) {
+        case 'Backspace':
+          {
+            return;
+          }
+        case 'Escape':
+          {
             event.preventDefault();
+            setInputValue(convertToInputValue(value));
+            setOpen(false);
+            return;
           }
-          setCurrentValue(currentIndex);
-          setOpen(false);
-          return;
-        }
-      case 'ArrowDown':
-        if (open) {
-          event.preventDefault();
-        } else {
-          if (!inline && buttonRef.current) {
-            buttonRef.current.click();
+        case 'Tab':
+          {
+            setCurrentValue(currentIndex);
+            setOpen(false);
+            return;
           }
-        }
-        break;
-      case 'ArrowUp':
-      case 'Home':
-      case 'End':
-        {
+        case 'Enter':
+          {
+            if (insideTheTable) {
+              event.preventDefault();
+              if (inline && !open) {
+                setOpen(true);
+              } else if (buttonRef.current && !open) {
+                buttonRef.current.click();
+              }
+            }
+            if (open) {
+              setCurrentValue(currentIndex);
+              setOpen(false);
+            }
+            return;
+          }
+        case 'ArrowDown':
           if (open) {
             event.preventDefault();
+          } else {
+            if (!inline && buttonRef.current && !insideTheTable) {
+              buttonRef.current.click();
+            }
           }
           break;
+        case 'ArrowUp':
+        case 'Home':
+        case 'End':
+          {
+            if (open) {
+              event.preventDefault();
+            }
+            break;
+          }
+      }
+      // we aren't focused on the list, so manually forward the keydown event to it
+      if (listRef.current) {
+        listRef.current.dispatchEvent(createCustomKeyboardEvent(event));
+      }
+      if (inline && !open) {
+        if ((event.key === 'ArrowUp' || event.key === 'ArrowDown') && !insideTheTable) {
+          event.preventDefault();
+          const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;
+          setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);
+          setOpen(true);
         }
-    }
-    // we aren't focused on the list, so manually forward the keydown event to it
-    if (listRef.current) {
-      listRef.current.dispatchEvent(createCustomKeyboardEvent(event));
-    }
-    if (inline && !open) {
-      if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
-        event.preventDefault();
-        const initialIndex = event.key === 'ArrowUp' ? data.length - 1 : 0;
-        setCurrentIndex(currentIndex !== undefined ? currentIndex : initialIndex);
-        setOpen(true);
       }
     }
     if (!event.isDefaultPrevented() && onKeyDown) {
@@ -6007,7 +6037,7 @@ const Combobox = /*#__PURE__*/React.forwardRef(function Combobox(props, ref) {
 });
 
 const isWeakEqual = (leftDate, rightDate) => {
-  return leftDate.getFullYear() === rightDate.getFullYear() && leftDate.getMonth() === rightDate.getMonth() && leftDate.getDay() === rightDate.getDay();
+  return leftDate.getFullYear() === rightDate.getFullYear() && leftDate.getMonth() === rightDate.getMonth() && leftDate.getDate() === rightDate.getDate();
 };
 const format = (date, mask = 'dd.mm.yy') => {
   if (!date) {
@@ -6020,7 +6050,7 @@ const format = (date, mask = 'dd.mm.yy') => {
   const pad = v => String(v).length === 1 ? `0${v}` : v.toString();
   return mask.replace('dd', pad(value.getDate())).replace('mm', pad(value.getMonth() + 1)).replace('yy', String(value.getFullYear()).slice(2));
 };
-const parseFromCustomString = (date = '', mask = 'dd.mm.yy', defaultYear = undefined) => {
+const parseFromCustomString = (date = '', mask = 'dd.mm.yy', defaultMonth = undefined, defaultYear = undefined) => {
   if (!date || !date.length) {
     return undefined;
   }
@@ -6054,7 +6084,7 @@ const parseFromCustomString = (date = '', mask = 'dd.mm.yy', defaultYear = undef
   month = Number.parseInt(month, 10);
   year = Number.parseInt(year, 10);
   const currentDate = new Date();
-  return new Date( /* year */Object.is(year, NaN) ? defaultYear !== null && defaultYear !== void 0 ? defaultYear : currentDate.getFullYear() : year, /* month */Object.is(month, NaN) ? currentDate.getMonth() : month - 1,
+  return new Date( /* year */Object.is(year, NaN) ? defaultYear !== null && defaultYear !== void 0 ? defaultYear : currentDate.getFullYear() : year, /* month */Object.is(month, NaN) ? defaultMonth !== null && defaultMonth !== void 0 ? defaultMonth : currentDate.getMonth() : month - 1,
   // months are zero based in javascript, so subtract a day
   /* day */
   Object.is(day, NaN) ? currentDate.getDate() : day, /* hours */12, /* minutes */0 // set to midday to avoid UTC offset causing dates to be mismatched server side
@@ -6092,7 +6122,7 @@ const useDatepicker = ({
   // event handlers
   const handleInputBlur = event => {
     event.persist();
-    const valueAsDate = parseFromCustomString(event.target.value, 'dd.mm.yy', value === null || value === void 0 ? void 0 : value.getFullYear());
+    const valueAsDate = parseFromCustomString(event.target.value, 'dd.mm.yy', value === null || value === void 0 ? void 0 : value.getMonth(), value === null || value === void 0 ? void 0 : value.getFullYear());
     const formattedValue = valueAsDate ? format(valueAsDate) || '' : '';
     event.target.value = formattedValue;
     if (onChange) {
@@ -9587,7 +9617,7 @@ function orderColumn(column, {
   }
 }
 // ordering
-function ensureOrdering(columns, settingsOrder, internalColumnsPinnedToTheRight = ['__actions']) {
+function ensureOrdering(columns, settingsOrder, pinnedOrder = [], internalColumnsPinnedToTheRight = ['__actions']) {
   // internal columns come with a defined order
   const internalColumns = columns.filter(column => isInternalColumn(column.id) && !internalColumnsPinnedToTheRight.includes(String(column.id))).map(column => column.id);
   // columns with ordering disabled should be moved to the front
@@ -9623,6 +9653,12 @@ function ensureOrdering(columns, settingsOrder, internalColumnsPinnedToTheRight
     // Append absent columns at the end
     .concat(columnsAbsentInSettingsOrder);
   }
+  // if pinned columns are defined, make sure they are sorted first, this ensures state matches the freezing "upto" behaviour
+  if (Array.isArray(pinnedOrder)) {
+    orderingEnabled.sort(
+    // the magic >>> 0 here ensures that columns that aren't found in settings, but are children, are pushed to the end
+    (a, b) => (pinnedOrder.indexOf(a) >>> 0) - (pinnedOrder.indexOf(b) >>> 0));
+  }
   const order = [...internalColumns, ...orderingDisabled, ...orderingEnabled];
   // actions should always be last, enforce that
   internalColumnsPinnedToTheRight.forEach(id => {
@@ -9867,16 +9903,18 @@ function processChildren(child, columns, defaultSizing, defaultSorting, defaultV
     if (defaultWidth) {
       defaultSizing[id] = defaultWidth;
     }
-    if (child.props.sort !== undefined) {
+    const isGrouped = defaultRowGroupColumnId === id;
+    if (child.props.sort !== undefined || isGrouped) {
       defaultSorting.push({
         id,
         desc: sort === 'desc'
       });
     }
-    const isGrouped = defaultRowGroupColumnId === id;
     const column = {
       id,
       accessorKey,
+      // To avoid errors caused by undefined row data values, we pass accessorFn as a preventive measure
+      accessorFn: row => row === null || row === void 0 ? void 0 : row[accessorKey],
       header: header,
       // features
       enableColumnFilter,
@@ -9976,14 +10014,14 @@ function mapTableChildrenToColumns(props, settings, options, internalColumns) {
       const column = createInternalColumn('__select', internalColumns.rowSelection, defaultSizing);
       columns.unshift(column);
     }
-    if (options.enableRowActions && (_props$rowActions = props.rowActions) !== null && _props$rowActions !== void 0 && _props$rowActions.length && internalColumns.rowActions) {
-      const column = createInternalColumn('__actions', internalColumns.rowActions, defaultSizing);
-      columns.push(column);
-    }
     if (options.enableRowDrag && props.onRowDrag && internalColumns.rowDrag) {
       const column = createInternalColumn('__drag', internalColumns.rowDrag, defaultSizing);
       columns.unshift(column);
     }
+    if (options.enableRowActions && (_props$rowActions = props.rowActions) !== null && _props$rowActions !== void 0 && _props$rowActions.length && internalColumns.rowActions) {
+      const column = createInternalColumn('__actions', internalColumns.rowActions, defaultSizing);
+      columns.push(column);
+    }
   }
   return {
     columns,
@@ -10057,12 +10095,14 @@ function configureReactTableOptions(options, props) {
 }
 function useReactTableInitialState(props, columns, persistedSettings, defaults) {
   return React__default.useMemo(() => {
-    var _persistedSettings$co, _props$defaultSetting, _ref, _persistedSettings$co2, _props$defaultSetting2, _columnPinning$left, _ref2, _persistedSettings$co3, _props$defaultSetting3, _ref3, _ref4, _persistedSettings$co4, _props$defaultSetting4, _ref5, _ref6, _persistedSettings$co5, _props$defaultSetting5, _persistedSettings$se, _props$defaultSetting6, _props$defaultSetting7, _props$defaultSetting8;
+    var _ref, _persistedSettings$co, _props$defaultSetting, _persistedSettings$co2, _props$defaultSetting2, _columnPinning$left, _ref2, _persistedSettings$co3, _props$defaultSetting3, _ref3, _ref4, _persistedSettings$co4, _props$defaultSetting4, _ref5, _ref6, _persistedSettings$co5, _props$defaultSetting5, _persistedSettings$se, _props$defaultSetting6, _props$defaultSetting7, _props$defaultSetting8;
     const ignoreNotDefinedColumns = column => columns.find(definedColumn => definedColumn.id === column.id);
-    const columnOrder = ensureOrdering(columns, (_persistedSettings$co = persistedSettings.columnOrder) !== null && _persistedSettings$co !== void 0 ? _persistedSettings$co : (_props$defaultSetting = props.defaultSettings) === null || _props$defaultSetting === void 0 ? void 0 : _props$defaultSetting.columnOrder);
-    const columnPinning = (_ref = (_persistedSettings$co2 = persistedSettings.columnPinning) !== null && _persistedSettings$co2 !== void 0 ? _persistedSettings$co2 : (_props$defaultSetting2 = props.defaultSettings) === null || _props$defaultSetting2 === void 0 ? void 0 : _props$defaultSetting2.columnPinning) !== null && _ref !== void 0 ? _ref : {};
-    // ensure internal columns are pinned
-    if (!(columnPinning !== null && columnPinning !== void 0 && (_columnPinning$left = columnPinning.left) !== null && _columnPinning$left !== void 0 && _columnPinning$left.length)) {
+    const columnPinning = (_ref = (_persistedSettings$co = persistedSettings.columnPinning) !== null && _persistedSettings$co !== void 0 ? _persistedSettings$co : (_props$defaultSetting = props.defaultSettings) === null || _props$defaultSetting === void 0 ? void 0 : _props$defaultSetting.columnPinning) !== null && _ref !== void 0 ? _ref : {};
+    const columnOrder = ensureOrdering(columns, (_persistedSettings$co2 = persistedSettings.columnOrder) !== null && _persistedSettings$co2 !== void 0 ? _persistedSettings$co2 : (_props$defaultSetting2 = props.defaultSettings) === null || _props$defaultSetting2 === void 0 ? void 0 : _props$defaultSetting2.columnOrder, columnPinning.left);
+    // ensure internal columns are pinned, and are pinned in the correct order
+    if (columnPinning !== null && columnPinning !== void 0 && (_columnPinning$left = columnPinning.left) !== null && _columnPinning$left !== void 0 && _columnPinning$left.length) {
+      columnPinning.left = freezeUptoExternalColumn(columnOrder.indexOf(columnPinning.left[columnPinning.left.length - 1]), columnOrder);
+    } else {
       if (props.defaultColumnFreezingIndex) {
         columnPinning.left = freezeUptoExternalColumn(props.defaultColumnFreezingIndex, columnOrder);
       } else {
@@ -11219,7 +11259,7 @@ function useTableStyleGrid(tableId, table, fontSize) {
   // header body ?footer
   const gridTemplateRows = table.getRowModel().rows.length ? 'min-content 1fr min-content' : 'min-content 1fr';
   return React__default.useMemo(() => {
-    let printGridTemplateColumns = '';
+    let printGridTemplateColumns = 0;
     const printHiddenColumns = [];
     const gridTemplateColumns = allVisibleColumns.reduce((accum, column, index) => {
       var _column$columnDef$min, _column$columnDef$met;
@@ -11229,7 +11269,6 @@ function useTableStyleGrid(tableId, table, fontSize) {
       const minSize = (_column$columnDef$min = column.columnDef.minSize) !== null && _column$columnDef$min !== void 0 ? _column$columnDef$min : globalMinSize;
       const width = columnSizing[column.id];
       let size;
-      let printSize;
       if (isInternalColumn(column.id)) {
         if (column.id === '__actions') {
           const minWidth = tableMeta.rowActions.rowActionsLength * 32 + 8; /* button margins l+r */
@@ -11253,22 +11292,24 @@ function useTableStyleGrid(tableId, table, fontSize) {
       } else {
         size = `minmax(max-content, auto)`;
       }
+      // printing
       if (((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.enablePrinting) === false) {
-        printSize = '';
         printHiddenColumns.push(column.id);
       } else {
-        printSize = 'auto';
+        printGridTemplateColumns++;
       }
-      printGridTemplateColumns = `${printGridTemplateColumns} ${printSize}`.trim();
       return `${accum} ${size}`.trim();
     }, '');
-    // we have to be specific so that nested tables don't inherit the same css
-    const hiddenColumns = printHiddenColumns.map(id => `table[data-taco^='table']#${tableId} > thead > tr > th[data-cell-id='${id}']\n,table[data-taco^='table']#${tableId} > tbody > tr > td[data-cell-id='${id}']\n`).join(',');
+    // normal grid
     const style = {
       gridTemplateColumns,
       gridTemplateRows
     };
-    const stylesheet = `@media print { table[data-taco^='table']#${tableId} { grid-template-columns: ${printGridTemplateColumns}; } ${hiddenColumns ? `${hiddenColumns} { display: none; }` : ''}}`;
+    // printing grid
+    // we have to be specific so that nested tables don't inherit the same css
+    const hiddenColumns = printHiddenColumns.map(id => `table[data-taco^='table']#${tableId} > thead > tr > th[data-cell-id='${id}']\n,table[data-taco^='table']#${tableId} > tbody > tr > td[data-cell-id='${id}']\n`).join(',');
+    const stylesheet = `@media print { table[data-taco^='table']#${tableId} { grid-template-columns: repeat(${printGridTemplateColumns}, auto) !important; }
+        table[data-taco^='table']#${tableId} [data-cell-id^='__']${hiddenColumns ? `, ${hiddenColumns}` : ''} { display: none; }}`;
     return {
       style,
       stylesheet
@@ -11298,7 +11339,8 @@ function useTableStyleColumnFreezing(tableId, table) {
       // add right border, hide the header seperator and add shadow when scrolled
       // we have to be specific so that nested tables don't inherit the same css
       styles.push(`table[data-taco^='table']#${tableId} > thead > tr > th:nth-child(${index + 1}),
-                table[data-taco^='table']#${tableId} > tbody > tr  > td:nth-child(${index + 1}) {
+                table[data-taco^='table']#${tableId} > tbody > tr  > td:nth-child(${index + 1}),
+                table[data-taco^='table']#${tableId} > tfoot > tr  > td:nth-child(${index + 1}):not([data-cell-id^="__"]) {
                     border-right-width: 1px;
                 }\ntable[data-taco^='table']#${tableId} > thead > tr  > th:nth-child(${index + 1})[data-cell-id^="__"],
                 table[data-taco^='table']#${tableId} > tbody > tr  > td:nth-child(${index + 1})[data-cell-id^="__"] {
@@ -11306,7 +11348,8 @@ function useTableStyleColumnFreezing(tableId, table) {
                 }\ntable[data-taco^='table']#${tableId} > thead > tr  > th:nth-child(${index + 1}):after {
                     content: none;
                 }\ntable[data-taco^='table'][data-table-horizontally-scrolled="true"]#${tableId} > thead > tr  > th:nth-child(${index + 1}),
-                table[data-taco^='table'][data-table-horizontally-scrolled="true"]#${tableId} > tbody > tr  > td:nth-child(${index + 1}) {
+                table[data-taco^='table'][data-table-horizontally-scrolled="true"]#${tableId} > tbody > tr  > td:nth-child(${index + 1}),
+                table[data-taco^='table'][data-table-horizontally-scrolled="true"]#${tableId} > tfoot > tr  > td:nth-child(${index + 1}) {
                     border-right-color: rgb(221, 221, 221);
                     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), 6px 0px 6px rgb(0 0 0/8%);
                 }`);
@@ -11456,7 +11499,7 @@ const ROW_HEIGHT_ESTIMATES = {
   tall: 49,
   'extra-tall': 57
 };
-const HEADER_ROW_HEIGHT_ESTIMATE = ROW_HEIGHT_ESTIMATES.medium + 2; // header includes 2px border
+const HEADER_FOOTER_ROW_HEIGHT_ESTIMATE = ROW_HEIGHT_ESTIMATES.medium + 2; // header includes 2px border
 
 function SkeletonRow(props) {
   const {
@@ -11471,11 +11514,11 @@ function SkeletonRow(props) {
     }));
   }
   return /*#__PURE__*/React__default.createElement(Skeleton, {
-    id: row.id,
-    cells: row.getVisibleCells()
+    cellsCount: row.getVisibleCells().length
   });
 }
 function RowWithServerLoading(props) {
+  var _table$getState$group, _table$getState;
   const {
     index,
     row,
@@ -11497,22 +11540,24 @@ function RowWithServerLoading(props) {
       (_tableMeta$server$loa = (_tableMeta$server = tableMeta.server).loadPage) === null || _tableMeta$server$loa === void 0 ? void 0 : _tableMeta$server$loa.call(_tableMeta$server, pageIndex, table.getState().sorting, table.getState().columnFilters, table.getState().globalFilter);
     }
   }, [inView]);
+  const groupedCellCount = (_table$getState$group = (_table$getState = table.getState()) === null || _table$getState === void 0 ? void 0 : _table$getState.grouping.length) !== null && _table$getState$group !== void 0 ? _table$getState$group : 0;
+  const ungroupedCellCount = row.getVisibleCells().length - groupedCellCount;
   return /*#__PURE__*/React__default.createElement(Skeleton, {
-    cells: row.getVisibleCells(),
+    cellsCount: ungroupedCellCount,
     ref: ref
   });
 }
 const Skeleton = /*#__PURE__*/React__default.forwardRef(function Skeleton(props, ref) {
   const {
-    cells
+    cellsCount
   } = props;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("tr", {
+  return /*#__PURE__*/React__default.createElement("tr", {
     ref: ref
-  }, cells.map(cell => ( /*#__PURE__*/React__default.createElement("td", {
-    key: cell.id
+  }, Array(cellsCount).fill(null).map((_, index) => ( /*#__PURE__*/React__default.createElement("td", {
+    key: index
   }, /*#__PURE__*/React__default.createElement("span", {
     className: "bg-grey-100 text-grey-700 h-4 w-full text-center text-xs"
-  }))))));
+  })))));
 });
 
 const RowContext = /*#__PURE__*/React__default.createContext({
@@ -11545,13 +11590,14 @@ function Row(props) {
 }
 
 const TABLE_SCROLL_PADDING_BOTTOM = 36;
-const TABLE_PADDING_BOTTOM = 120;
+const TABLE_PADDING_BOTTOM = 0;
 function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
   var _table$getState$group, _ref, _virtualItems$padding, _virtualItems$padding2, _ref2, _virtualItems;
   const tableMeta = table.options.meta;
   const rows = table.getRowModel().rows;
-  const HEADER_OFFSET_TOTAL = HEADER_ROW_HEIGHT_ESTIMATE * table.getHeaderGroups().length;
+  const HEADER_OFFSET_TOTAL = HEADER_FOOTER_ROW_HEIGHT_ESTIMATE * table.getHeaderGroups().length;
   const isTableGrouped = !!((_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length);
+  const FOOTER_OFFSET_TOTAL = tableMeta.footer.isEnabled ? HEADER_FOOTER_ROW_HEIGHT_ESTIMATE : 0;
   // expanded rows
   const {
     createRowMeasurer,
@@ -11565,7 +11611,7 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
     getScrollElement: () => tableRef.current,
     overscan: tableMeta.printing.isPrinting ? rows.length : undefined,
     rangeExtractor,
-    scrollPaddingStart: isTableGrouped ? HEADER_ROW_HEIGHT_ESTIMATE : undefined,
+    scrollPaddingStart: isTableGrouped ? HEADER_FOOTER_ROW_HEIGHT_ESTIMATE : undefined,
     scrollPaddingEnd: HEADER_OFFSET_TOTAL + TABLE_SCROLL_PADDING_BOTTOM,
     paddingEnd: TABLE_PADDING_BOTTOM
   });
@@ -11618,7 +11664,7 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
   let content = null;
   if (rows.length) {
     style = {
-      height: `${virtualiser.getTotalSize()}px`,
+      height: `${virtualiser.getTotalSize() - HEADER_OFFSET_TOTAL + FOOTER_OFFSET_TOTAL}px`,
       paddingBottom,
       paddingTop
     };
@@ -11697,7 +11743,7 @@ function useRowGroupVirtualisation(table) {
       });
     }
     return indexes;
-  }, []);
+  }, [rows]);
   // this is taken from the react-virtual docs/examples
   const rangeExtractor = React__default.useCallback(range => {
     var _reverse$find;
@@ -12412,23 +12458,20 @@ function DisplayCell(props) {
     isHighlighted,
     ...cellAttributes
   } = props;
-  const {
-    isHovered
-  } = React__default.useContext(RowContext);
   const columnMeta = cell.column.columnDef.meta;
   const attributes = getCellAttributes(cell, index, isHighlighted);
   const isTruncated = !!columnMeta.enableTruncate;
+  const value = cell.getValue();
   let content;
   if (isInternalColumn(cell.column.id)) {
     content = reactTable.flexRender(cell.column.columnDef.cell, cell.getContext());
   } else {
     var _ref, _columnMeta$renderer, _columnMeta$renderer2;
-    content = (_ref = (_columnMeta$renderer = (_columnMeta$renderer2 = columnMeta.renderer) === null || _columnMeta$renderer2 === void 0 ? void 0 : _columnMeta$renderer2.call(columnMeta, cell.getValue(), cell.row.original)) !== null && _columnMeta$renderer !== void 0 ? _columnMeta$renderer : cell.getValue()) !== null && _ref !== void 0 ? _ref : null;
+    content = (_ref = (_columnMeta$renderer = (_columnMeta$renderer2 = columnMeta.renderer) === null || _columnMeta$renderer2 === void 0 ? void 0 : _columnMeta$renderer2.call(columnMeta, value, cell.row.original)) !== null && _columnMeta$renderer !== void 0 ? _columnMeta$renderer : value) !== null && _ref !== void 0 ? _ref : null;
   }
   return /*#__PURE__*/React__default.createElement(MemoedDisplayCell, Object.assign({}, cellAttributes, attributes, {
     cellRef: cellRef,
-    isTruncated: isTruncated,
-    key: `${cell.id}_${isHovered}`
+    isTruncated: isTruncated
   }), content);
 }
 const MemoedDisplayCell = /*#__PURE__*/React__default.memo(function MemoedDisplayCell(props) {
@@ -13144,7 +13187,7 @@ const MemoedFooter = /*#__PURE__*/React__default.memo(function MemoedFooter(prop
   const style = {};
   if (isPinned) {
     // pinned columns should be offset from either the left or right
-    style[isPinned] = `${footer.column.getStart(isPinned) - 1}px`;
+    style[isPinned] = `${footer.column.getStart(isPinned)}px`;
   }
   let content;
   let align;
@@ -17745,7 +17788,9 @@ function useTableEditing(isEnabled = false, handleSave, validator) {
   const pendingChangesFns = usePendingChanges(isEnabled, handleSave, validator);
   // if focus leaves the table in any way, trigger a save
   const handleBlur = React__default.useCallback(event => {
-    if (event.relatedTarget !== event.currentTarget && !isElementInsideOrTriggeredFromContainer(event.relatedTarget, event.currentTarget)) {
+    // custom event from datepicker, and it doesn't have the relatedTarget property set.
+    const isClosingDatepicker = dateFns.isDate(event.detail);
+    if (event.relatedTarget !== event.currentTarget && !isElementInsideOrTriggeredFromContainer(event.relatedTarget, event.currentTarget) && !isClosingDatepicker) {
       pendingChangesFns.saveChanges();
     }
   }, [pendingChangesFns.saveChanges]);
@@ -18279,8 +18324,15 @@ function useEditingCellAutofocus(props) {
     const tableElement = (_props$cellRef$curren3 = props.cellRef.current) === null || _props$cellRef$curren3 === void 0 ? void 0 : _props$cellRef$curren3.closest('table');
     if (tableElement && table.getIsSomeColumnsPinned() && !props.cell.column.getIsPinned()) {
       const columnFreezingOffset = table.getLeftTotalSize();
-      const leftOffsetFromScrollContainer = event.currentTarget.getBoundingClientRect().left - tableElement.getBoundingClientRect().left;
-      if (leftOffsetFromScrollContainer < columnFreezingOffset) {
+      const targetRect = event.currentTarget.getBoundingClientRect();
+      const tableRect = tableElement.getBoundingClientRect();
+      const leftOffsetFromScrollContainer = targetRect.left - tableRect.left;
+      const scrollbarWidth = tableElement.offsetWidth - tableElement.clientWidth; // the width of table vertical scrollbar
+      if (
+      // When pinned column overlaps the focused cell
+      leftOffsetFromScrollContainer < columnFreezingOffset ||
+      // When focused cell goes behidn the edge of the table
+      leftOffsetFromScrollContainer + targetRect.width > tableRect.width - scrollbarWidth) {
         tableElement.scrollTo(props.cell.column.getStart() - columnFreezingOffset, tableElement.scrollTop);
       }
     }
@@ -18449,7 +18501,7 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
   if (type === 'datepicker') {
     const handleChange = event => {
       const newDate = event.detail;
-      if (dateFns.isDate(value) && dateFns.isDate(newDate) && !isWeakEqual(value, newDate)) {
+      if (!value || dateFns.isDate(value) && dateFns.isDate(newDate) && !isWeakEqual(value, newDate)) {
         props.onChange(event.detail);
       }
     };