@economic/taco 2.28.0 → 2.29.0

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,
@@ -5810,57 +5824,59 @@ const useCombobox = ({
   };
   const handleInputKeyDown = event => {
     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') {
+    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':
+        case 'Enter':
+          {
+            if (event.key !== 'Tab') {
+              event.preventDefault();
+            }
+            setCurrentValue(currentIndex);
+            setOpen(false);
+            return;
           }
-        }
-        break;
-      case 'ArrowUp':
-      case 'Home':
-      case 'End':
-        {
+        case 'ArrowDown':
           if (open) {
             event.preventDefault();
+          } else {
+            if (!inline && buttonRef.current) {
+              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') {
+          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 +6023,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 +6036,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 +6070,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 +6108,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 +9603,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 +9639,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 +9889,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 +10000,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 +10081,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 +11245,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 +11255,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 +11278,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 +11325,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 +11334,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%);
                 }`);
@@ -11471,11 +11500,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 +11526,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,7 +11576,7 @@ 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;
@@ -11618,7 +11649,7 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
   let content = null;
   if (rows.length) {
     style = {
-      height: `${virtualiser.getTotalSize()}px`,
+      height: `${virtualiser.getTotalSize() - HEADER_OFFSET_TOTAL}px`,
       paddingBottom,
       paddingTop
     };
@@ -11697,7 +11728,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 +12443,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 +13172,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 +17773,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 +18309,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 +18486,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);
       }
     };