@economic/taco 1.21.7 → 1.21.9

package/dist/taco.cjs.development.js

@@ -11541,6 +11541,7 @@ const Cell = function Cell(props) {
       onSave: meta.editMode.onSave,
       rowIndex: rowIndex,
       table: table,
+      tableRef: tableRef,
       ref: controlRef,
       rowValues: rows[rowIndex].original,
       rowsLength: rows.length
@@ -11561,7 +11562,7 @@ const Cell = function Cell(props) {
   }, reactTable$1.flexRender(cell.column.columnDef.cell, cell.getContext())));
 };
 const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__default.forwardRef((props, ref) => {
-  var _cell$column$columnDe4, _cell$column$columnDe5, _cellRef$current, _cellRef$current$pare, _rowMoveReason$cellId;
+  var _cell$column$columnDe4, _cell$column$columnDe5, _cellRef$current2, _cellRef$current2$par, _rowMoveReason$cellId;
   const {
     cell,
     cellRef,
@@ -11571,7 +11572,8 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
     onSave: handleSave,
     rowIndex,
     rowValues,
-    table
+    table,
+    tableRef
   } = props;
   const {
     editMode: {
@@ -11653,14 +11655,32 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
       (_controlRef$current = controlRef.current) === null || _controlRef$current === void 0 ? void 0 : (_controlRef$current$f = _controlRef$current.focus) === null || _controlRef$current$f === void 0 ? void 0 : _controlRef$current$f.call(_controlRef$current);
     }
   }, [isEditingThisCell, controlRef.current]);
-  // make sure the cell becomes active if the field is focused
+  const pinnedColumnsWidth = React__default.useMemo(() => {
+    const pinnedColumns = table.getState().columnPinning.left;
+    if (Array.isArray(pinnedColumns) && pinnedColumns.length > 0) {
+      const lastPinnedColumn = pinnedColumns[pinnedColumns.length - 1];
+      const lastPinnedColumnOffset = meta.columnOffsets[lastPinnedColumn];
+      if (lastPinnedColumnOffset !== undefined) {
+        var _table$getState$colum;
+        return lastPinnedColumnOffset + ((_table$getState$colum = table.getState().columnSizing[lastPinnedColumn]) !== null && _table$getState$colum !== void 0 ? _table$getState$colum : 0);
+      }
+    }
+    return 0;
+  }, [meta.columnOffsets, table.getState().columnSizing]);
   const handleFocus = event => {
-    var _event$target;
+    var _event$target, _cellRef$current;
     meta.editMode.setColumn(columnIndex);
     if ((_event$target = event.target) !== null && _event$target !== void 0 && _event$target.select) {
       var _event$target2;
       (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.select();
     }
+    // ensure the field is always visible (e.g. not hidden behind the pinned columns)
+    const rect = (_cellRef$current = cellRef.current) === null || _cellRef$current === void 0 ? void 0 : _cellRef$current.getBoundingClientRect();
+    const leftOffset = meta.columnOffsets[cellId];
+    if (rect && leftOffset && rect.left < pinnedColumnsWidth) {
+      var _tableRef$current4;
+      (_tableRef$current4 = tableRef.current) === null || _tableRef$current4 === void 0 ? void 0 : _tableRef$current4.scrollTo(leftOffset - pinnedColumnsWidth, tableRef.current.scrollTop);
+    }
   };
   React__default.useEffect(() => {
     if (hasChanged(initialValue.current, state)) {
@@ -11716,7 +11736,7 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
     'data-inline-editing-component': 'true'
   };
   const className = cn(getCellAlignmentClasses((_cell$column$columnDe5 = cell.column.columnDef.meta) === null || _cell$column$columnDe5 === void 0 ? void 0 : _cell$column$columnDe5.align));
-  const indicatorMountNode = (_cellRef$current = cellRef.current) === null || _cellRef$current === void 0 ? void 0 : (_cellRef$current$pare = _cellRef$current.parentElement) === null || _cellRef$current$pare === void 0 ? void 0 : _cellRef$current$pare.querySelector(':first-child');
+  const indicatorMountNode = (_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.querySelector(':first-child');
   let controlComponent;
   if (cellControl) {
     if (typeof cellControl === 'function') {
@@ -12056,44 +12076,24 @@ const getSortingFn = dataType => {
   return 'auto';
 };
 
-const isResizingPinnedColumn = (columnId, table) => {
-  var _table$getState$colum, _table$getState$colum2;
-  return !!columnId && ((_table$getState$colum = table.getState().columnPinning.left) === null || _table$getState$colum === void 0 ? void 0 : _table$getState$colum.includes((_table$getState$colum2 = table.getState().columnSizingInfo) === null || _table$getState$colum2 === void 0 ? void 0 : _table$getState$colum2.isResizingColumn));
-};
-const getOffsetsFromSize = (pinning, visibility, sizing) => {
-  const pinned = pinning.left.filter(c => visibility[c] !== false);
-  const offsets = {};
-  let leftOffset = 0;
-  for (const k of pinned) {
-    if (!Number.isInteger(sizing[k])) {
-      break;
-    }
-    offsets[k] = leftOffset;
-    leftOffset += sizing[k];
-  }
-  return offsets;
-};
 // pinned columns have position sticky, and because we support more than one of them
 // we must set a 'left' css value. this hook listens to changes on state that will
 // affect the left offset (resize, visibility, pinning) and updates offsets based on width
 const useColumnOffsetStateListener = (table, setColumnOffsets) => {
   const {
-    columnPinning,
-    columnSizing,
+    columnOrder,
     columnSizingInfo,
     columnVisibility
   } = table.getState();
   React__default.useEffect(() => {
-    if (isResizingPinnedColumn(columnSizingInfo.isResizingColumn, table)) {
-      setColumnOffsets(getOffsetsFromSize(columnPinning, columnVisibility, columnSizing));
-    }
-  }, [columnSizingInfo]);
-  React__default.useEffect(() => {
-    setColumnOffsets(getOffsetsFromSize(columnPinning, columnVisibility, columnSizing));
-  }, [columnVisibility]);
-  React__default.useEffect(() => {
-    setColumnOffsets(getOffsetsFromSize(columnPinning, columnVisibility, columnSizing));
-  }, [columnPinning.left]);
+    const offsets = {};
+    // store left offsets for each visible column
+    table.getVisibleLeafColumns().reduce((offset, column) => {
+      offsets[column.id] = offset;
+      return offset + column.getSize();
+    }, 0);
+    setColumnOffsets(offsets);
+  }, [columnOrder, columnSizingInfo, columnVisibility]);
 };
 
 const useRowSelectionListener = (table, onRowSelect) => {
@@ -12257,7 +12257,7 @@ function useTable$1(children, props, ref) {
   const activeRow = useActiveRow(defaultActiveRowIndex);
   const [shouldPauseHoverState, setShouldPauseHoverState] = useShouldPauseHoverState();
   const editMode = useEditMode(onSave);
-  const [columnOffsets, setColumnOffsets] = React__default.useState(getOffsetsFromSize(initialState.columnPinning, initialState.columnVisibility, initialState.columnSizing));
+  const [columnOffsets, setColumnOffsets] = React__default.useState({});
   const [rowDensity, setRowDensity] = React__default.useState((_settings$rowDensity = settings === null || settings === void 0 ? void 0 : settings.rowDensity) !== null && _settings$rowDensity !== void 0 ? _settings$rowDensity : 'normal');
   const [dragging, setDragging] = React__default.useState({});
   const [shouldPauseSortingAndFiltering, setShouldPauseSortingAndFiltering] = React__default.useState(false);
@@ -13390,7 +13390,7 @@ const Search$2 = props => {
     (_props$onSearch3 = props.onSearch) === null || _props$onSearch3 === void 0 ? void 0 : _props$onSearch3.call(props, value);
   };
   useGlobalKeyboardShortcut(event => {
-    if (event.key === 'f' && (event.ctrlKey || event.metaKey)) {
+    if (event.key === 'f' && (event.ctrlKey || event.metaKey) && !event.shiftKey) {
       if (document.activeElement !== ref.current) {
         var _ref$current;
         event.preventDefault();