@economic/taco 1.20.0 → 1.21.0

package/dist/taco.cjs.development.js

@@ -3635,11 +3635,27 @@ const defaultLocalisationTexts = {
     loading: 'Loading...'
   },
   table2: {
-    rowWillMove: 'Row will move',
-    rowWillBeFiltered: 'Row will be filtered',
-    searchFilterMovementReason: 'Due to global search filter applied on the table, this row will be hidden after editing',
-    tableFilterMovementReason: 'Due to a filter applied on the [COLUMN] column, this row will be hidden after editing',
-    sortingMovementReason: 'Due to sorting applied on the [COLUMN] column, this row will move position after editing'
+    shortcuts: {
+      search: 'Search',
+      filter: 'Filter',
+      previousRow: 'Previous row',
+      nextRow: 'Next row',
+      editCell: 'Edit cell',
+      previousColumn: 'Previous column',
+      nextColumn: 'Next column',
+      rowClick: 'Activate current row',
+      selectRow: 'Select current row',
+      selectAllRows: 'Select all rows',
+      expandRow: 'Expand current row',
+      collapseRow: 'Collapse current row'
+    },
+    rowIndicator: {
+      rowWillMove: 'Row will move due to sorting',
+      rowWillBeFiltered: 'Row will hide due to filtering',
+      searchFilterMovementReason: 'Due to a search filter applied to this table, this row will be hidden as soon as you select another row',
+      tableFilterMovementReason: "Due to a filter applied to the column '[COLUMN]', this row will be hidden as soon as you select another row",
+      sortingMovementReason: "Due to sorting applied to the column '[COLUMN]', this row will move position as soon as you select another row"
+    }
   },
   select: {
     allOptionsSelected: 'All'
@@ -10562,31 +10578,34 @@ function createRowExpansionColumn() {
 const getActionPropertyValue = (property, row) => typeof property === 'function' ? property(row) : property;
 function RowActionCell({
   row,
-  table,
   actions,
   moreActions
 }) {
   const isVisible = action => typeof action.visible !== 'undefined' ? typeof action.visible === 'function' ? action.visible(row.original) : action.visible : true;
   const visibleActions = actions.filter(isVisible);
   const visibleMoreActions = moreActions.filter(isVisible);
-  if (table.options.meta.activeRowIndex !== row.index && table.options.meta.hoveredRowIndex !== row.index) {
+  const rowActionCellWidth = React__default.useMemo(() => {
     const totalButtons = visibleActions.length + (visibleMoreActions.length ? 1 : 0);
     // this is necessary because row actions is has this mount hover delay, which makes the
     // size calculation in the header get set before rendering - meaning the size doesn't include the buttons
     // when we cache icons this can go
     const paddingSize = 8;
     const buttonSize = 32;
-    return /*#__PURE__*/React__default.createElement("span", {
-      className: "flex",
-      style: {
-        width: paddingSize + totalButtons * buttonSize
-      }
-    });
-  }
+    return paddingSize + totalButtons * buttonSize;
+  }, [visibleActions.length, visibleMoreActions.length]);
+  // Instead of relying on row.index to figure out whether the row is being hovered or is active. We should rely on a
+  // CSS fix. The reason behind this is that row data or index is the initial data or index that is passed to the
+  // table on the first render, the indexes of row changes when sorting or filtering is applied.
+  // If the row is not the active row or the hovered row then actions are hidden.
+  const actionClassName = 'group-hover/row:flex group-[[aria-current]]/row:flex hidden';
   return /*#__PURE__*/React__default.createElement("span", {
-    className: "-mb-2 -mt-1.5 text-right"
+    className: "-mb-2 -mt-1.5 flex justify-end text-right",
+    style: {
+      width: rowActionCellWidth
+    }
   }, visibleActions.map((action, i) => /*#__PURE__*/React__default.createElement(IconButton, {
     key: i,
+    className: actionClassName,
     "aria-label": getActionPropertyValue(action.ariaLabel, row.original),
     appearance: "discrete",
     dialog: action.dialog ? action.dialog(row.original) : undefined,
@@ -10600,6 +10619,7 @@ function RowActionCell({
     },
     tooltip: getActionPropertyValue(action.text, row.original)
   })), visibleMoreActions.length ? /*#__PURE__*/React__default.createElement(IconButton, {
+    className: actionClassName,
     "aria-label": "View other actions",
     appearance: "discrete",
     icon: "more",
@@ -10626,11 +10646,9 @@ function createRowActionsColumn(rowActions) {
   return {
     id: COLUMN_ID_FOR_ACTIONS,
     cell: ({
-      row,
-      table
+      row
     }) => /*#__PURE__*/React__default.createElement(RowActionCell, {
       row: row,
-      table: table,
       actions: actions,
       moreActions: moreActions
     }),
@@ -10966,8 +10984,8 @@ const getNextIndex = (direction, currentIndex, focussableColumnIndexes) => {
 const RowContext = /*#__PURE__*/React__default.createContext({
   validationErrors: null,
   setValidationErrors: () => undefined,
-  isRowIndicatorVisible: false,
-  setIsRowIndicatorVisible: () => undefined
+  rowMoveReason: {},
+  setRowMoveReason: () => undefined
 });
 const useRowContext = () => {
   const context = React__default.useContext(RowContext);
@@ -11001,16 +11019,16 @@ const useIndicatorText = reason => {
   } = useLocalization();
   switch (reason) {
     case IndicatorReason.SEARCH:
-      title = tableTexts.rowWillBeFiltered;
-      description = tableTexts.searchFilterMovementReason;
+      title = tableTexts.rowIndicator.rowWillBeFiltered;
+      description = tableTexts.rowIndicator.searchFilterMovementReason;
       break;
     case IndicatorReason.SORTING:
-      title = tableTexts.rowWillMove;
-      description = tableTexts.sortingMovementReason;
+      title = tableTexts.rowIndicator.rowWillMove;
+      description = tableTexts.rowIndicator.sortingMovementReason;
       break;
     case IndicatorReason.FILTER:
-      title = tableTexts.rowWillBeFiltered;
-      description = tableTexts.tableFilterMovementReason;
+      title = tableTexts.rowIndicator.rowWillBeFiltered;
+      description = tableTexts.rowIndicator.tableFilterMovementReason;
       break;
   }
   return {
@@ -11025,7 +11043,7 @@ const Indicator = ({
 }) => {
   const container = React__default.useMemo(() => {
     const element = document.createElement('div');
-    element.className += '-translate-y-1/2 z-[13] rounded-full items-center wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap px-1 py-0.5 text-xs font-bold shadow-sm';
+    element.className += '-translate-y-1/2 z-[3] rounded-full items-center wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap px-1 py-0.5 text-xs font-bold shadow-sm';
     return element;
   }, []);
   const indicatorText = useIndicatorText(reason);
@@ -11147,7 +11165,7 @@ const Cell = function Cell(props) {
   } = meta;
   const {
     validationErrors,
-    isRowIndicatorVisible
+    rowMoveReason
   } = useRowContext();
   const hasValidationErrorsInRow = !!validationErrors;
   const internalRef = React__default.useRef(null);
@@ -11168,19 +11186,10 @@ const Cell = function Cell(props) {
   const canEditThisCell = isEditingThisRow && isDataColumn;
   const isEditingThisCell = canEditThisCell && meta.editMode.columnIndex === index;
   const isHoveringThisRowWhileEditing = meta.editMode.isEditing && isHoveredRow;
-  // ensure the active row is always visible
-  React__default.useEffect(() => {
-    if (isActiveRow && internalRef.current) {
-      internalRef.current.scrollIntoView({
-        behavior: 'smooth',
-        block: 'nearest',
-        inline: 'nearest'
-      });
-    }
-  }, [isActiveRow, hasValidationErrorsInRow]);
+  const isIndicatorVisible = Object.keys(rowMoveReason).length > 0;
   React__default.useEffect(() => {
     // Adds padding to the table so that indicator doesn't get cropped
-    if (isRowIndicatorVisible && meta.activeRowIndex === rows.length - 1) {
+    if (isIndicatorVisible && isLastRow) {
       var _tableRef$current;
       (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.classList.add('pb-4');
     }
@@ -11188,10 +11197,10 @@ const Cell = function Cell(props) {
       var _tableRef$current2;
       return (_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : _tableRef$current2.classList.remove('pb-4');
     };
-  }, [isRowIndicatorVisible]);
+  }, [isIndicatorVisible, isLastRow]);
   const className = cn({
     'border-b': !isLastRow,
-    'sticky z-10': isPinned,
+    'sticky z-[1]': isPinned,
     // use isHoveredRow rather than css group-hover/row because we want to hide hover state when keyboard navigating
     'bg-white': !isActiveRow && !isSelected && !isHoveredRow,
     'bg-grey-100': !isActiveRow && !isSelected && isHoveredRow,
@@ -11200,11 +11209,13 @@ const Cell = function Cell(props) {
     '!wcag-blue-500': isDragging,
     '[&>*]:!grayscale [&_.bg-white]:!bg-grey-100': !isEditingThisRow && isHoveringThisRowWhileEditing,
     '!bg-red-100': hasValidationErrorsInRow,
-    'z-[11]': isPinned && isActiveRow,
-    'z-[12]': isPinned && isActiveRow && index === 0,
-    'border-blue !border-y-2 border-x-0': isRowIndicatorVisible,
-    'border-l-2 rounded-l': isRowIndicatorVisible && index === 0,
-    'border-r-2 rounded-r': isRowIndicatorVisible && index === lastColumnIndex
+    'z-[1]': isPinned && isActiveRow,
+    // First column should have higher z-index so that row indicator always show on top of the cell
+    // control components.
+    'z-[2]': isPinned && isActiveRow && index === 0,
+    'border-blue !border-y-2 border-x-0': isIndicatorVisible,
+    'border-l-2 rounded-l': isIndicatorVisible && index === 0,
+    'border-r-2 rounded-r': isIndicatorVisible && index === lastColumnIndex
   }, getCellSizingClasses((_table$options$meta = table.options.meta) === null || _table$options$meta === void 0 ? void 0 : _table$options$meta.rowDensity, (isEditingThisRow || isHoveringThisRowWhileEditing) && hasCellControl), typeof cellClassName === 'function' ? cellClassName(cell.row) : cellClassName);
   const handleMouseDown = event => {
     // only detect left clicks
@@ -11241,6 +11252,9 @@ const Cell = function Cell(props) {
     role: 'cell'
   };
   const [detailModeEditing, setDetailModeEditing] = React__default.useState(false);
+  const detailModeClassName = cn({
+    '!shadow-[0_0_0_4px_rgba(0,99,255,0.25)]': detailModeEditing
+  });
   // reset the editing state when we move column
   React__default.useEffect(() => {
     if (meta.editMode.columnIndex !== index) {
@@ -11295,11 +11309,7 @@ const Cell = function Cell(props) {
           if (event.key === 'Enter') {
             event.preventDefault();
             const input = control;
-            if (detailModeEditing) {
-              var _input$select;
-              input === null || input === void 0 ? void 0 : (_input$select = input.select) === null || _input$select === void 0 ? void 0 : _input$select.call(input);
-              setDetailModeEditing(false);
-            } else {
+            if (!detailModeEditing) {
               var _input$setSelectionRa, _input$value, _input$value2;
               (_input$setSelectionRa = input.setSelectionRange) === null || _input$setSelectionRa === void 0 ? void 0 : _input$setSelectionRa.call(input, (_input$value = input.value) === null || _input$value === void 0 ? void 0 : _input$value.length, (_input$value2 = input.value) === null || _input$value2 === void 0 ? void 0 : _input$value2.length);
               setDetailModeEditing(true);
@@ -11309,10 +11319,17 @@ const Cell = function Cell(props) {
         }
         // Don't exit edit mode if the target of the escape isn't a child of the cell (e.g. if its a popover).
         if (event.key === 'Escape' && event.currentTarget.contains(control)) {
-          var _tableRef$current3;
           event.preventDefault();
-          meta.editMode.toggleEditing(false);
-          (_tableRef$current3 = tableRef.current) === null || _tableRef$current3 === void 0 ? void 0 : _tableRef$current3.focus();
+          const input = control;
+          if (detailModeEditing) {
+            var _input$select;
+            input === null || input === void 0 ? void 0 : (_input$select = input.select) === null || _input$select === void 0 ? void 0 : _input$select.call(input);
+            setDetailModeEditing(false);
+          } else {
+            var _tableRef$current3;
+            meta.editMode.toggleEditing(false);
+            (_tableRef$current3 = tableRef.current) === null || _tableRef$current3 === void 0 ? void 0 : _tableRef$current3.focus();
+          }
           return;
         }
         if (!detailModeEditing && event.key === 'ArrowLeft' || event.key === 'Tab' && event.shiftKey) {
@@ -11337,7 +11354,6 @@ const Cell = function Cell(props) {
         }
         if (!detailModeEditing && event.key === 'ArrowRight' || event.key === 'Tab' && !event.shiftKey) {
           event.preventDefault();
-          const isLastRow = rowIndex === rows.length - 1;
           const isLastColumn = index === lastDataColumnIndex;
           if (event.ctrlKey || event.metaKey) {
             // If the current active column is the last column then we don't do any thing so that focus
@@ -11390,6 +11406,7 @@ const Cell = function Cell(props) {
       };
     }
     return /*#__PURE__*/React__default.createElement(ColumnBase, Object.assign({}, attributes), /*#__PURE__*/React__default.createElement(EditingCell, {
+      detailModeClassName: detailModeClassName,
       cell: cell,
       cellRef: internalRef,
       columnIndex: index,
@@ -11414,11 +11431,12 @@ 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;
+  var _cell$column$columnDe4, _cell$column$columnDe5, _cellRef$current, _cellRef$current$pare, _rowMoveReason$cellId;
   const {
     cell,
     cellRef,
     columnIndex,
+    detailModeClassName,
     isEditingThisCell = false,
     onSave: handleSave,
     rowIndex,
@@ -11428,7 +11446,8 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
   const {
     validationErrors,
     setValidationErrors,
-    setIsRowIndicatorVisible
+    rowMoveReason,
+    setRowMoveReason
   } = useRowContext();
   const controlRef = useMergedRef(ref);
   const cellId = cell.column.id;
@@ -11440,7 +11459,6 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
     globalFilter
   } = table.getState();
   const [state, setState] = React__default.useState(value);
-  const [rowMoveReason, setRowMoveReason] = React__default.useState(null);
   const isHoveringAnotherRowWhileEditing = meta.editMode.isEditing && meta.activeRowIndex !== rowIndex && meta.hoveredRowIndex === rowIndex;
   const showValidationError = !isHoveringAnotherRowWhileEditing && !!cellValidationError;
   // On each save, the initialValue will be set to the new value of the cell
@@ -11463,6 +11481,15 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
               [cellId]: newValue
             };
             return Promise.resolve(handleSave(updatedRow, cellId)).then(function () {
+              // If sorting is paused then update the last sorted or filtered rows to store the newly updated row
+              if (meta.shouldPauseSortingAndFiltering) {
+                meta.lastSortedOrFilteredRows.current = meta.lastSortedOrFilteredRows.current.map(row => {
+                  if (row.id === cell.row.id) {
+                    row.original = updatedRow;
+                  }
+                  return row;
+                });
+              }
               // Reset error if save was successful
               setValidationErrors(null);
             });
@@ -11509,7 +11536,7 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
   }, [state]);
   const showIndicator = () => {
     var _table$getState$sorti;
-    let willRowMoveReason = undefined;
+    let willRowMoveReason = null;
     const isFilteredByGlobalFilter = Object.values({
       ...rowValues,
       [cellId]: state
@@ -11524,15 +11551,21 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
     } else if (!willRowMoveReason && cell.column.getIsSorted() && willRowMoveAfterSorting(state, cell, rowIndex, table.getRowModel().rows, !!((_table$getState$sorti = table.getState().sorting.find(s => s.id === cell.column.id)) !== null && _table$getState$sorti !== void 0 && _table$getState$sorti.desc))) {
       willRowMoveReason = IndicatorReason.SORTING;
     }
-    if (willRowMoveReason !== undefined) {
+    if (willRowMoveReason !== null) {
       meta.setShouldPauseSortingAndFiltering(true);
-      setRowMoveReason(willRowMoveReason);
-      setIsRowIndicatorVisible(true);
+      setRowMoveReason({
+        [cellId]: willRowMoveReason
+      });
     }
   };
   const hideIndicator = () => {
-    setRowMoveReason(null);
-    setIsRowIndicatorVisible(false);
+    setRowMoveReason(prevState => {
+      const newState = {
+        ...prevState
+      };
+      delete newState[cellId];
+      return newState;
+    });
   };
   const cellControl = (_cell$column$columnDe4 = cell.column.columnDef.meta) === null || _cell$column$columnDe4 === void 0 ? void 0 : _cell$column$columnDe4.control;
   const attributes = {
@@ -11557,12 +11590,14 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
         ref: controlRef,
         setValue: setState,
         value: state,
-        'data-inline-editing-component': 'true'
+        'data-inline-editing-component': 'true',
+        className: detailModeClassName
       }, cell.row.original);
     } else {
       switch (cellControl) {
         case 'datepicker':
           controlComponent = /*#__PURE__*/React__default.createElement(Datepicker, Object.assign({}, attributes, {
+            className: detailModeClassName,
             onBlur: event => {
               const newDate = event.detail;
               saveIfChanged(newDate);
@@ -11576,7 +11611,7 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
           break;
         case 'switch':
           controlComponent = /*#__PURE__*/React__default.createElement(Switch, Object.assign({}, attributes, {
-            className: "mx-2",
+            className: cn('mx-2', detailModeClassName),
             checked: Boolean(state),
             onChange: setState,
             ref: controlRef
@@ -11584,7 +11619,7 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
           break;
         default:
           controlComponent = /*#__PURE__*/React__default.createElement(Input, Object.assign({}, attributes, {
-            className: className,
+            className: cn(className, detailModeClassName),
             onChange: event => {
               setState(event.target.value);
             },
@@ -11595,8 +11630,9 @@ const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__defaul
       }
     }
   }
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, !!rowMoveReason && /*#__PURE__*/React__default.createElement(Indicator, {
-    reason: rowMoveReason,
+  const indicatorReason = (_rowMoveReason$cellId = rowMoveReason[cellId]) !== null && _rowMoveReason$cellId !== void 0 ? _rowMoveReason$cellId : null;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, indicatorReason !== null && /*#__PURE__*/React__default.createElement(Indicator, {
+    reason: indicatorReason,
     columnName: String(cell.column.columnDef.header),
     mountNode: indicatorMountNode
   }), /*#__PURE__*/React__default.createElement("span", {
@@ -11617,9 +11653,9 @@ const Header$1 = function Header(props) {
   const textRef = React__default.useRef(null);
   const pinned = !!header.column.getIsPinned();
   const isOtherColumnBeingResized = table.getState().columnSizingInfo.isResizingColumn && table.getState().columnSizingInfo.isResizingColumn !== header.id;
-  const className = cn('group/header sticky top-0 bg-white border-b-2 relative font-bold z-[15] hover:z-[16]', {
-    'z-[16]': header.column.getIsResizing(),
-    'z-[17]': pinned,
+  const className = cn('group/header sticky top-0 bg-white border-b-2 relative font-bold z-[5] hover:z-[6]', {
+    'z-[6]': header.column.getIsResizing(),
+    'z-[7]': pinned,
     'cursor-pointer select-none': header.column.getCanSort(),
     'hover:bg-grey-100': header.column.getCanSort() || header.column.getCanResize() || ((_header$column$column = header.column.columnDef.meta) === null || _header$column$column === void 0 ? void 0 : _header$column$column.menu),
     'pointer-events-none': isOtherColumnBeingResized
@@ -11808,10 +11844,13 @@ function useColumnDefinitions(children, options, tableRef) {
           accessorKey: child.props.accessor,
           id: child.props.accessor,
           cell: props => {
+            var _props$getValue;
             if (typeof child.props.renderer === 'function') {
               return child.props.renderer(props.getValue(), props.row.original);
             }
-            return props.getValue();
+            // If value is undefined then return null because cell is a react component, and undefined is not
+            // a valid child value.
+            return (_props$getValue = props.getValue()) !== null && _props$getValue !== void 0 ? _props$getValue : null;
           },
           header: child.props.header,
           meta: {
@@ -12039,6 +12078,7 @@ function useTable$1(children, props, ref) {
     enableMultipleRowSelection,
     onRowDrag
   }, ref);
+  const lastSortedOrFilteredRows = React__default.useRef(null);
   // defaults
   const initialState = {
     columnOrder: (_settings$columnOrder = settings === null || settings === void 0 ? void 0 : settings.columnOrder) !== null && _settings$columnOrder !== void 0 ? _settings$columnOrder : columns.map(column => column.id),
@@ -12155,11 +12195,12 @@ function useTable$1(children, props, ref) {
         focussableColumnIndexes.current = [];
       },
       // table ref
-      tableRef: ref
+      tableRef: ref,
+      // last sorted or filtered rows
+      lastSortedOrFilteredRows
     }
   });
   const tableRows = table.getRowModel().rows;
-  const lastSortedOrFilteredRows = React__default.useRef(tableRows);
   if (!shouldPauseSortingAndFiltering) {
     lastSortedOrFilteredRows.current = tableRows;
   }
@@ -12221,7 +12262,10 @@ const useVirtualiser = ({
 };
 
 const useGridTemplate = table => {
+  var _table$options$meta$t, _table$options$meta, _table$options$meta$t2, _table$options$meta$t3, _table$options$meta2, _table$options$meta2$;
   const allVisibleColumns = table.getVisibleLeafColumns();
+  let scrollbarWidth = ((_table$options$meta$t = (_table$options$meta = table.options.meta) === null || _table$options$meta === void 0 ? void 0 : (_table$options$meta$t2 = _table$options$meta.tableRef.current) === null || _table$options$meta$t2 === void 0 ? void 0 : _table$options$meta$t2.offsetWidth) !== null && _table$options$meta$t !== void 0 ? _table$options$meta$t : 0) - ((_table$options$meta$t3 = (_table$options$meta2 = table.options.meta) === null || _table$options$meta2 === void 0 ? void 0 : (_table$options$meta2$ = _table$options$meta2.tableRef.current) === null || _table$options$meta2$ === void 0 ? void 0 : _table$options$meta2$.clientWidth) !== null && _table$options$meta$t3 !== void 0 ? _table$options$meta$t3 : 0);
+  scrollbarWidth = scrollbarWidth < 0 ? 0 : scrollbarWidth;
   return allVisibleColumns.reduce((accum, column, index) => {
     let size;
     const isLastColumn = index === allVisibleColumns.length - 1;
@@ -12232,7 +12276,8 @@ const useGridTemplate = table => {
       size = `${column.getSize()}px`;
     } else if (width) {
       if (isLastColumn) {
-        size = `minmax(${width}px, auto)`;
+        // Remove the scrollbar width from the last column
+        size = `minmax(${width - scrollbarWidth}px, auto)`;
       } else if (column.columnDef.minSize && width < column.columnDef.minSize) {
         // react-table is supposed to handle minSize itself but it is really buggy
         size = `${column.columnDef.minSize}px`;
@@ -12647,7 +12692,8 @@ const useSeparatedChildren$1 = initialChildren => {
   return React__default.useMemo(() => {
     const columns = [];
     let toolbar;
-    React__default.Children.toArray(initialChildren).forEach(child => {
+    React__default.Children.toArray(initialChildren).filter(child => !!child) // skip falsey columns
+    .forEach(child => {
       var _child$type, _child$type2;
       if (((_child$type = child.type) === null || _child$type === void 0 ? void 0 : _child$type.displayName) === 'Table2Column') {
         columns.push(child);
@@ -12754,7 +12800,7 @@ const Row$1 = ({
   const isActiveRow = meta.activeRowIndex === rowIndex;
   const isDragging = meta.dragging[row.id];
   const [validationErrors, setValidationErrors] = React__default.useState(null);
-  const [isRowIndicatorVisible, setIsRowIndicatorVisible] = React__default.useState(false);
+  const [rowMoveReason, setRowMoveReason] = React__default.useState({});
   // This effect aims to focus the first focussable cell when edit mode is turned on.
   React__default.useEffect(() => {
     var _meta$tableRef$curren;
@@ -12784,8 +12830,8 @@ const Row$1 = ({
   return /*#__PURE__*/React__default.createElement(RowProvider, {
     validationErrors: validationErrors,
     setValidationErrors: handleSetValidationErrors,
-    isRowIndicatorVisible: isRowIndicatorVisible,
-    setIsRowIndicatorVisible: setIsRowIndicatorVisible
+    rowMoveReason: rowMoveReason,
+    setRowMoveReason: setRowMoveReason
   }, /*#__PURE__*/React__default.createElement("div", Object.assign({}, props, {
     role: "row",
     draggable: true,
@@ -13210,63 +13256,68 @@ const ShortcutsGuideButton = ({
   table
 }) => {
   const meta = table.options.meta;
+  const {
+    texts: {
+      table2: tableTexts
+    }
+  } = useLocalization();
   const shortcuts = [];
   if (table.options.enableGlobalFilter) {
     shortcuts.push({
-      feature: 'Search',
+      feature: tableTexts.shortcuts.search,
       keys: ['Ctrl', 'F']
     });
   }
   if (table.options.enableColumnFilters) {
     shortcuts.push({
-      feature: 'Filter',
+      feature: tableTexts.shortcuts.filter,
       keys: ['Ctrl', 'Shift', 'F']
     });
   }
   shortcuts.push({
-    feature: 'Previous row',
+    feature: tableTexts.shortcuts.previousRow,
     keys: ['Up']
   });
   shortcuts.push({
-    feature: 'Next row',
+    feature: tableTexts.shortcuts.nextRow,
     keys: ['Down']
   });
   if (meta.editMode.enableEditMode) {
     shortcuts.push({
-      feature: 'Edit cell',
+      feature: tableTexts.shortcuts.editCell,
       keys: ['Enter']
     });
     shortcuts.push({
-      feature: 'Previous column',
-      keys: ['Left']
+      feature: tableTexts.shortcuts.previousColumn,
+      keys: ['Arrow-Left']
     });
     shortcuts.push({
-      feature: 'Next column',
-      keys: ['Right']
+      feature: tableTexts.shortcuts.nextColumn,
+      keys: ['Arrow-Right']
     });
   } else if (meta.onRowClick) {
     shortcuts.push({
-      feature: 'Activate current row',
+      feature: tableTexts.shortcuts.rowClick,
       keys: ['Enter']
     });
   }
   if (table.options.enableRowSelection) {
     shortcuts.push({
-      feature: 'Select current row',
+      feature: tableTexts.shortcuts.selectRow,
       keys: ['Space']
     });
     shortcuts.push({
-      feature: 'Select all rows',
+      feature: tableTexts.shortcuts.selectAllRows,
       keys: ['Ctrl', 'A']
     });
   }
   if (table.options.enableExpanding) {
     shortcuts.push({
-      feature: 'Expand current row',
+      feature: tableTexts.shortcuts.expandRow,
       keys: ['Ctrl', 'Right']
     });
     shortcuts.push({
-      feature: 'Collapse current row',
+      feature: tableTexts.shortcuts.collapseRow,
       keys: ['Ctrl', 'Left']
     });
   }