@economic/taco 2.9.2 → 2.10.1

package/dist/taco.cjs.development.js

@@ -4024,10 +4024,14 @@ const getAppearanceClasses = (value, icon = false) => {
     case 'discrete':
       {
         if (icon) {
-          return `bg-transparent text-black enabled:hover:bg-grey-200/80 disabled:text-black/30`;
+          return `bg-transparent text-black enabled:hover:bg-[#000]/[0.08] disabled:text-black/30`;
         }
         return `bg-transparent text-blue-500 enabled:hover:text-blue-700 disabled:text-blue-500/50`;
       }
+    case 'transparent':
+      {
+        return `bg-transparent text-black enabled:hover:text-black enabled:hover:bg-[#000]/[0.08] disabled:text-black/30`;
+      }
     default:
       return `wcag-grey-200 enabled:hover:wcag-grey-300 disabled:bg-grey-200/50 disabled:text-black/30`;
   }
@@ -4321,7 +4325,13 @@ const defaultLocalisationTexts = {
         freezeColumns: (count = 1) => count === 1 ? 'Freeze the first column' : `Freeze first ${count} columns`,
         gotoRow: 'Go to',
         hideColumn: 'Hide column',
-        unfreezeColumns: 'Unfreeze all columns'
+        unfreezeColumns: 'Unfreeze all columns',
+        sorting: 'Sorting',
+        sortingOrder: {
+          ascending: 'Ascending order',
+          descending: 'Descending order',
+          unsorted: 'No sorting'
+        }
       },
       resize: {
         tooltip: 'Resize column'
@@ -7474,7 +7484,7 @@ const Content$8 = /*#__PURE__*/React.forwardRef(function MenuContent(props, ref)
     return () => {
       shortcuts.forEach(handler => document.removeEventListener('keydown', handler));
     };
-  }, []);
+  }, [childrenWithRefs]);
   return /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Portal, null, /*#__PURE__*/React.createElement(DropdownMenuPrimitive.Content, Object.assign({}, otherProps, {
     align: align,
     className: className,
@@ -15933,11 +15943,14 @@ function Menu$3(props) {
   const {
     canFreeze,
     canHide,
+    canSort,
     index,
     menu,
     onGoto: handleGoto,
     onHide: handleHide,
+    onSortToggle: handleSortToggle,
     scrollToIndex,
+    sortDirection,
     table
   } = props;
   const tableMeta = table.options.meta;
@@ -15945,6 +15958,11 @@ function Menu$3(props) {
     texts
   } = useLocalization();
   const [popover, setPopover] = React__default.useState(undefined);
+  const [sortDirectionState, setSortDirectionState] = React__default.useState(sortDirection);
+  const handleSortMenuRadioGroupChange = newSortDirection => {
+    setSortDirectionState(newSortDirection);
+    handleSortToggle(newSortDirection);
+  };
   let popoverElement;
   if (popover) {
     const handleClosePopover = () => setPopover(undefined);
@@ -15982,18 +16000,11 @@ function Menu$3(props) {
         }
     }
   }
-  const className = cn('-my-0.5 -mr-1 -ml-0.5 !h-6 !min-h-[theme(spacing.6)] !w-6 !min-w-[theme(spacing.6)] flex-shrink-0 justify-end', {
-    '!flex': !!popoverElement
+  const className = cn('-my-0.5 -mr-1 -ml-0.5 !h-6 !min-h-[theme(spacing.6)] flex-shrink-0 justify-end !w-0 !min-w-0 !overflow-hidden', 'aria-expanded:!min-w-[theme(spacing.6)] aria-expanded:!w-6 aria-expanded:!overflow-auto', 'focus:!min-w-[theme(spacing.6)] focus:!w-6 focus:!overflow-auto', 'group-hover/column:!min-w-[theme(spacing.6)] group-hover/column:!w-6 group-hover/column:!overflow-auto', {
+    '!w-6 !min-w-[theme(spacing.6)] !overflow-auto': !!popoverElement
   }, props.className);
   const memoedMenuItems = React__default.useMemo(() => {
     const menuItems = [];
-    if (handleGoto) {
-      menuItems.push( /*#__PURE__*/React__default.createElement(Menu$1.Item, {
-        icon: "move",
-        onClick: () => setPopover('goto'),
-        shortcut: "g"
-      }, texts.table3.columns.menu.gotoRow, "..."));
-    }
     if (canHide) {
       // we do this in the next tick, otherwise the menu closes and react throws a "state update on unmounted component" error
       const handleClick = event => setTimeout(() => handleHide(event), 1);
@@ -16002,6 +16013,30 @@ function Menu$3(props) {
         onClick: handleClick
       }, texts.table3.columns.menu.hideColumn));
     }
+    // We rely on canSort value instead of onSort function's value because some columns might have sorting disabled,
+    // so even though onSort is truthy, we don't want to show sorting menu.
+    if (canSort) {
+      menuItems.push( /*#__PURE__*/React__default.createElement(Menu$1.Item, {
+        icon: "sort-by",
+        subMenu: () => /*#__PURE__*/React__default.createElement(Menu$1.SubMenu, null, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup, {
+          onChange: handleSortMenuRadioGroupChange,
+          value: sortDirectionState
+        }, /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
+          value: SORT_DIRECTION.ASC
+        }, texts.table3.columns.menu.sortingOrder.ascending), /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
+          value: SORT_DIRECTION.DESC
+        }, texts.table3.columns.menu.sortingOrder.descending), /*#__PURE__*/React__default.createElement(Menu$1.RadioGroup.Item, {
+          value: false
+        }, texts.table3.columns.menu.sortingOrder.unsorted)))
+      }, texts.table3.columns.menu.sorting));
+    }
+    if (handleGoto) {
+      menuItems.push( /*#__PURE__*/React__default.createElement(Menu$1.Item, {
+        icon: "move",
+        onClick: () => setPopover('goto'),
+        shortcut: "g"
+      }, texts.table3.columns.menu.gotoRow, "..."));
+    }
     if (canFreeze) {
       const frozenIndex = index - tableMeta.columnFreezing.frozenInternalColumnCount;
       const handleClick = () => tableMeta.columnFreezing.setFrozenColumnIndex(frozenIndex);
@@ -16034,7 +16069,7 @@ function Menu$3(props) {
     return menuItems.map((item, key) => /*#__PURE__*/React__default.cloneElement(item, {
       key
     }));
-  }, [menu, index, canFreeze, canHide, handleGoto, tableMeta.columnFreezing.frozenColumnIndex]);
+  }, [menu, index, canFreeze, canHide, canSort, handleGoto, handleSortToggle, sortDirection, tableMeta.columnFreezing.frozenColumnIndex]);
   return /*#__PURE__*/React__default.createElement(IconButton, {
     className: className,
     icon: "more",
@@ -16112,6 +16147,10 @@ function getSortAttributes(toggleSorting, sortDirection) {
   };
 }
 
+const SORT_DIRECTION = {
+  ASC: 'asc',
+  DESC: 'desc'
+};
 function Header$2(props) {
   const {
     children,
@@ -16123,11 +16162,19 @@ function Header$2(props) {
   const tableMeta = table.options.meta;
   const columnMeta = React__default.useMemo(() => column.columnDef.meta, []);
   const canSort = column.getCanSort();
+  const hasGoto = isGotoAvailable(table, header);
   // passing header or column results in re-renders on scroll, so anything from those objects as memoed props
+  const handleHide = React__default.useMemo(() => header.column.getToggleVisibilityHandler(), []);
   const handleResize = React__default.useMemo(() => header.getResizeHandler(), []);
   const handleSort = React__default.useMemo(() => header.column.getToggleSortingHandler(), []);
-  const handleHide = React__default.useMemo(() => header.column.getToggleVisibilityHandler(), []);
-  const hasGoto = isGotoAvailable(table, header);
+  const handleSortToggle = React__default.useCallback(sortDirection => {
+    // When sorting is not applied, sortDirection is false.
+    if (sortDirection === false) {
+      header.column.clearSorting();
+    } else {
+      header.column.toggleSorting(sortDirection === SORT_DIRECTION.DESC);
+    }
+  }, []);
   const sorting = table.getState().sorting;
   const filters = table.getState().columnFilters;
   const search = table.getState().globalFilter;
@@ -16148,6 +16195,7 @@ function Header$2(props) {
     id: header.id,
     index: header.index,
     isFrozen: isFrozenColumn(header, table),
+    isPrinting: tableMeta.isPrinting,
     isResizing: column.getIsResizing(),
     length: table.getRowModel().rows.length,
     meta: columnMeta,
@@ -16155,6 +16203,7 @@ function Header$2(props) {
     onHide: handleHide,
     onResize: handleResize,
     onSort: handleSort,
+    onSortToggle: handleSortToggle,
     scrollToIndex,
     sortDirection: column.getIsSorted(),
     table
@@ -16174,6 +16223,7 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     id,
     index,
     isFrozen,
+    isPrinting,
     isResizing,
     length,
     meta,
@@ -16181,13 +16231,17 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     onHide: handleHide,
     onResize: handleResize,
     onSort: handleSort,
+    onSortToggle: handleSortToggle,
     scrollToIndex,
     sortDirection,
     table
   } = props;
-  const className = cn('sticky top-0 border-b-2 font-bold h-10 box-content items-center group/column relative', '[[role="table"][data-resizing="true"]_&]:pointer-events-none', {
+  const className = cn('sticky top-0 border-b-2 font-bold box-content group/column relative', '[[role="table"][data-resizing="true"]_&]:pointer-events-none', 'px-[var(--table3-cell-padding-x)]', {
+    'h-10 items-center': !isPrinting,
+    'pb-2': isPrinting,
     'cursor-pointer select-none': canSort,
     'hover:bg-grey-100': canSort || canResize || hasMenu,
+    'focus-within:bg-grey-100': hasMenu,
     '!pointer-events-all !bg-grey-100': isResizing,
     // z-indexes
     'z-10 hover:z-20': !isFrozen && !isResizing,
@@ -16221,13 +16275,16 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     title: String((_meta$tooltip = meta === null || meta === void 0 ? void 0 : meta.tooltip) !== null && _meta$tooltip !== void 0 ? _meta$tooltip : children),
     placement: "top"
   }, /*#__PURE__*/React__default.createElement("span", {
-    className: "truncate"
+    className: cn({
+      truncate: !isPrinting
+    })
   }, children)), canSort ? /*#__PURE__*/React__default.createElement(SortIndicator, {
     direction: sortDirection
   }) : null, hasMenu ? /*#__PURE__*/React__default.createElement(Menu$3, {
     canFreeze: canFreeze,
     canHide: canHide,
-    className: cn('hidden group-hover/column:flex aria-expanded:!flex', {
+    canSort: canSort,
+    className: cn({
       'ml-auto': align !== 'right',
       'ml-2': align === 'right'
     }),
@@ -16235,7 +16292,9 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     menu: meta.menu,
     onGoto: handleGoto,
     onHide: handleHide,
+    onSortToggle: handleSortToggle,
     scrollToIndex: scrollToIndex,
+    sortDirection: sortDirection,
     table: table
   }) : null, canResize ? /*#__PURE__*/React__default.createElement(Resizer, {
     isResizing: isResizing,
@@ -16328,7 +16387,7 @@ const MemoedDisplayCell = /*#__PURE__*/React__default.memo(function MemoedDispla
     index,
     tableRef
   } = props;
-  const layoutClassName = cn('py-[var(--table3-row-padding)]', customClassName);
+  const layoutClassName = cn('py-[var(--table3-cell-padding-y)] px-[var(--table3-cell-padding-x)] focus:outline-none', customClassName);
   const className = highlighted ? undefined : layoutClassName;
   const content = enableTruncate ? /*#__PURE__*/React__default.createElement("span", {
     className: "truncate"
@@ -16341,7 +16400,9 @@ const MemoedDisplayCell = /*#__PURE__*/React__default.memo(function MemoedDispla
     "data-align": align,
     "data-column-index": index,
     "data-highlighted": highlighted,
-    role: "cell"
+    role: "cell",
+    // cells must be focusable (but not included in tabbing - hence -1)
+    tabIndex: -1
   }, highlighted ? /*#__PURE__*/React__default.createElement(Highlight, {
     className: layoutClassName,
     current: highlightedAsCurrent,
@@ -16359,7 +16420,7 @@ const Highlight = props => {
     ...attributes
   } = props;
   const ref = React__default.useRef(null);
-  const className = cn('h-full flex px-4 [justify-content:inherit] [text-align:inherit]', props.className, {
+  const className = cn('h-full flex [justify-content:inherit] [text-align:inherit]', props.className, {
     // normal row
     'bg-blue-200/25': !current,
     // current row
@@ -16472,7 +16533,7 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
       var _ref, _button$props$tooltip;
       const tooltip = String((_ref = (_button$props$tooltip = button.props.tooltip) !== null && _button$props$tooltip !== void 0 ? _button$props$tooltip : button.props['aria-label']) !== null && _ref !== void 0 ? _ref : '');
       return /*#__PURE__*/React__default.cloneElement(button, {
-        appearance: 'discrete',
+        appearance: 'transparent',
         key: index,
         tabIndex: isCurrentRow ? 0 : -1,
         tooltip: button.props.shortcut ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, tooltip, /*#__PURE__*/React__default.createElement(Shortcut, {
@@ -16481,7 +16542,7 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
         })) : tooltip
       });
     }), actionsInMenu.length ? /*#__PURE__*/React__default.createElement(IconButton, {
-      appearance: "discrete",
+      appearance: "transparent",
       "aria-label": texts.table3.columns.actions.tooltip,
       icon: "more",
       tabIndex: isCurrentRow ? 0 : -1,
@@ -16517,7 +16578,7 @@ function createRowActionsColumn$1() {
     footer: Footer$4,
     meta: {
       align: 'right',
-      className: cn('!pt-[var(--table3-row-padding)] print:opacity-0 [[role="table"][data-editing="false"]_&]:group-[[data-current="true"]]/row:sticky [[role="table"][data-pause-hover="false"][data-editing="false"]_&]:group-hover/row:sticky right-0 !pl-1 !pr-1', 'shadow-[-6px_0px_6px_var(--table3-row-actions-shadow)]', 'group-[[data-current="true"][data-selected="false"]]/row:text-grey-200', 'group-[[data-selected="true"]]/row:text-blue-100', 'group-[[data-selected="false"]:hover]/row:text-grey-100'),
+      className: cn('!pt-[var(--table3-cell-padding-y)] print:opacity-0 [[role="table"][data-editing="false"]_&]:group-[[data-current="true"]]/row:sticky [[role="table"][data-pause-hover="false"][data-editing="false"]_&]:group-hover/row:sticky right-0 !pl-1 !pr-1', 'shadow-[-6px_0px_6px_var(--table3-row-actions-shadow)]', 'group-[[data-current="true"][data-selected="false"]]/row:text-grey-200', 'group-[[data-selected="true"]]/row:text-blue-100', 'group-[[data-selected="false"]:hover]/row:text-grey-100'),
       enableOrdering: false,
       enableSearch: false,
       enableTruncate: false,
@@ -16652,7 +16713,7 @@ const useCssGrid = (table, isPrintTable = false) => {
   };
 };
 
-function useCurrentRow(defaultCurrentRowIndex = 0) {
+function useCurrentRow(defaultCurrentRowIndex) {
   const [currentRowIndex, setCurrentRowIndex] = React__default.useState(defaultCurrentRowIndex);
   const move = (direction, length, scrollToIndex) => setCurrentRowIndex(currentIndex => {
     const nextIndex = currentIndex !== undefined ? getNextIndex$2(direction, currentIndex, length) : 0;
@@ -16661,7 +16722,13 @@ function useCurrentRow(defaultCurrentRowIndex = 0) {
   });
   const moveUp = (length, callback) => move(-1, length, callback);
   const moveDown = (length, callback) => move(1, length, callback);
-  const onKeyDown = React__default.useCallback((event, length, scrollToIndex) => {
+  const focusFirstElementInCurrentRow = tableRef => {
+    setTimeout(() => {
+      var _tableRef$current, _tableRef$current$que;
+      (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : (_tableRef$current$que = _tableRef$current.querySelector('[data-taco="table2-body"] [role="row"] [role="cell"]:first-child')) === null || _tableRef$current$que === void 0 ? void 0 : _tableRef$current$que.focus();
+    }, 1);
+  };
+  const onKeyDown = React__default.useCallback((event, length, scrollToIndex, isEditing, tableRef) => {
     if (event.defaultPrevented) {
       return;
     }
@@ -16674,6 +16741,9 @@ function useCurrentRow(defaultCurrentRowIndex = 0) {
       } else {
         moveUp(length, scrollToIndex);
       }
+      if (!isEditing) {
+        focusFirstElementInCurrentRow(tableRef);
+      }
       return;
     } else if (event.key === 'ArrowDown') {
       event.preventDefault();
@@ -16684,12 +16754,29 @@ function useCurrentRow(defaultCurrentRowIndex = 0) {
       } else {
         moveDown(length, scrollToIndex);
       }
+      if (!isEditing) {
+        focusFirstElementInCurrentRow(tableRef);
+      }
       return;
     }
   }, []);
+  const onFocus = React__default.useCallback((event, length, scrollToIndex) => {
+    if (event.isDefaultPrevented()) {
+      return;
+    }
+    if (currentRowIndex === undefined && length > 0) {
+      // do it in the next tick, otherwise it prevents internal focus from working
+      // meaning you have to tab twice to get to the first focusable element
+      setTimeout(() => {
+        setCurrentRowIndex(0);
+        scrollToIndex(0);
+      }, 1);
+    }
+  }, [currentRowIndex, length]);
   return {
     currentRowIndex,
     setCurrentRowIndex,
+    handleFocus: onFocus,
     handleKeyDown: onKeyDown
   };
 }
@@ -17072,7 +17159,8 @@ function useCurrentRowListener(table) {
   const meta = table.options.meta;
   const rows = table.getRowModel().rows;
   React__default.useEffect(() => {
-    if (meta.currentRow.currentRowIndex > rows.length) {
+    const currentRowIndex = meta.currentRow.currentRowIndex;
+    if (currentRowIndex !== undefined && currentRowIndex > rows.length) {
       meta.currentRow.setCurrentRowIndex(0);
     }
   }, [rows.length]);
@@ -17183,9 +17271,12 @@ function useRowSelection() {
     const rows = table.getRowModel().rows;
     const tableMeta = table.options.meta;
     if (event.key === ' ') {
-      var _rows$tableMeta$curre;
       event.preventDefault();
-      (_rows$tableMeta$curre = rows[tableMeta.currentRow.currentRowIndex]) === null || _rows$tableMeta$curre === void 0 ? void 0 : _rows$tableMeta$curre.toggleSelected();
+      const currentRowIndex = tableMeta.currentRow.currentRowIndex;
+      if (currentRowIndex !== undefined) {
+        var _rows$currentRowIndex;
+        (_rows$currentRowIndex = rows[currentRowIndex]) === null || _rows$currentRowIndex === void 0 ? void 0 : _rows$currentRowIndex.toggleSelected();
+      }
       return;
     } else if ((event.ctrlKey || event.metaKey) && event.key === 'a') {
       event.preventDefault();
@@ -17208,7 +17299,7 @@ function useRowClick(onRowClick) {
     const tableMeta = table.options.meta;
     if (event.key === 'Enter') {
       event.preventDefault();
-      if (onRowClick) {
+      if (onRowClick && tableMeta.currentRow.currentRowIndex !== undefined) {
         onRowClick(rows[tableMeta.currentRow.currentRowIndex].original);
       }
       return;
@@ -17462,7 +17553,7 @@ const MemoedCell$1 = /*#__PURE__*/React__default.memo(function MemoedCell(props)
   }
   if (isEditing && isCurrentRow) {
     content = /*#__PURE__*/React__default.createElement(React__default.Fragment, null, content, /*#__PURE__*/React__default.createElement(IconButton, {
-      appearance: "discrete",
+      appearance: "transparent",
       "aria-label": texts.table3.editing.actions.tooltip,
       icon: "more",
       menu: menuProps => /*#__PURE__*/React__default.createElement(Menu$1, Object.assign({}, menuProps), /*#__PURE__*/React__default.createElement(Menu$1.Content, null, /*#__PURE__*/React__default.createElement(Menu$1.Item, {
@@ -17780,7 +17871,7 @@ const TextareaControl = /*#__PURE__*/React__default.forwardRef(function Textarea
     resizeTextArea(e.target);
   };
   const textareaContainerClassName = cn('w-full', {
-    'focus-within:absolute focus-within:left-0 focus-within:top-0 focus-within:z-20 focus-within:px-2 focus-within:pt-[var(--table3-row-padding)]': columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate
+    'focus-within:absolute focus-within:left-0 focus-within:top-0 focus-within:z-20 focus-within:px-[var(--table3-cell-padding-x)] focus-within:pt-[var(--table3-cell-padding-y)]': columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate
   });
   const handleTextareaKeyDown = event => {
     // By default Shift + Enter in textarea makes a new line, we want to keep this behaviour
@@ -17948,7 +18039,6 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
     }));
   } else if (controlRenderer === 'switch') {
     return /*#__PURE__*/React__default.createElement(Switch, Object.assign({}, attributes, {
-      className: "mx-2 mt-1.5",
       checked: Boolean(value),
       onChange: handleChange,
       ref: refCallback
@@ -17987,7 +18077,7 @@ function EditingCell$1(props) {
   }));
 }
 const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditingCell(props) {
-  var _tableMeta$editing$ge, _tableMeta$editing$ro, _rows$tableMeta$curre, _column$columnDef$met;
+  var _tableMeta$editing$ge, _tableMeta$editing$ro, _rows$currentRowIndex, _column$columnDef$met;
   const {
     cell,
     column,
@@ -18039,7 +18129,8 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
   // row move indicator
   const moveReason = (_tableMeta$editing$ro = tableMeta.editing.rowMoveReason[cell.column.id]) !== null && _tableMeta$editing$ro !== void 0 ? _tableMeta$editing$ro : null;
   const rows = table.getRowModel().rows;
-  const isCurrentRow = ((_rows$tableMeta$curre = rows[tableMeta.currentRow.currentRowIndex]) === null || _rows$tableMeta$curre === void 0 ? void 0 : _rows$tableMeta$curre.id) === row.id;
+  const currentRowIndex = tableMeta.currentRow.currentRowIndex;
+  const isCurrentRow = currentRowIndex !== undefined && ((_rows$currentRowIndex = rows[currentRowIndex]) === null || _rows$currentRowIndex === void 0 ? void 0 : _rows$currentRowIndex.id) === row.id;
   const mountNode = React__default.useMemo(() => {
     if (moveReason) {
       var _cellRef$current2, _cellRef$current2$par;
@@ -18067,7 +18158,7 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     return removeMoveReason;
   }, [value]);
   const controlRenderer = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control;
-  const className = cn('!px-[0.4375rem] py-[calc(var(--table3-row-padding)_-_0.06rem)]', {
+  const className = cn('py-[calc(var(--table3-cell-padding-y)_-_0.06rem)]', {
     relative: (isCurrentRow || isHovered) && controlRenderer === 'textarea',
     // Need to set higher z-index, so that the current row textarea (in expanded state, when positioned absolute) overlaps rows below,
     // but at the same time it should not overlap the table headers which has z-10.
@@ -18087,6 +18178,7 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     className: className,
     "data-align": columnMeta.align,
     "data-column-index": index,
+    "data-editable": true,
     role: "cell",
     ref: cellRef
   }, /*#__PURE__*/React__default.createElement(EditingControl, {
@@ -18129,7 +18221,7 @@ function getRowMoveReason(table, rowIndex, rowValues, cell, newValue) {
 }
 
 function Cell$3(props) {
-  var _rows$tableMeta$curre;
+  var _rows$currentRowIndex;
   const {
     column,
     row,
@@ -18141,7 +18233,8 @@ function Cell$3(props) {
   const rows = table.getRowModel().rows;
   const tableMeta = table.options.meta;
   const columnMeta = column.columnDef.meta;
-  const isCurrentRow = ((_rows$tableMeta$curre = rows[tableMeta.currentRow.currentRowIndex]) === null || _rows$tableMeta$curre === void 0 ? void 0 : _rows$tableMeta$curre.id) === row.id;
+  const currentRowIndex = tableMeta.currentRow.currentRowIndex;
+  const isCurrentRow = currentRowIndex !== undefined && ((_rows$currentRowIndex = rows[currentRowIndex]) === null || _rows$currentRowIndex === void 0 ? void 0 : _rows$currentRowIndex.id) === row.id;
   if (tableMeta.editing.isEditing && columnMeta.control && (isCurrentRow || isHoveredRow && !tableMeta.hoverState.isPaused)) {
     return /*#__PURE__*/React__default.createElement(EditingCell$1, Object.assign({}, props));
   }
@@ -18249,7 +18342,7 @@ function createRowSelectionColumn$1(hasDrag, hasExpansion) {
     footer: Footer$4,
     meta: {
       align: 'center',
-      className: cn('!pt-[var(--table3-row-padding)] !justify-end !p-0', {
+      className: cn('!pt-[var(--table3-cell-padding-y)] !justify-end !p-0', {
         '!pr-0.5': hasExpansion,
         '!pr-3': !hasExpansion
       }),
@@ -18283,7 +18376,7 @@ function Header$4(context) {
   return /*#__PURE__*/React__default.createElement(Header$2, Object.assign({}, context), /*#__PURE__*/React__default.createElement(Tooltip, {
     title: title
   }, /*#__PURE__*/React__default.createElement(IconButton, {
-    appearance: "discrete",
+    appearance: "transparent",
     icon: isSomeRowsExpanded ? 'chevron-down-double' : 'chevron-right-double',
     onClick: handleClick,
     tabIndex: -1,
@@ -18349,7 +18442,7 @@ function createRowExpansionColumn$1(expandedRowRenderer) {
     footer: Footer$4,
     meta: {
       align: 'center',
-      className: '!p-0 !pt-[var(--table3-row-padding)]',
+      className: '!p-0 !pt-[var(--table3-cell-padding-y)]',
       enableOrdering: false,
       enableSearch: false,
       enableTruncate: false,
@@ -18425,7 +18518,7 @@ function createRowDragColumn(onRowDrag) {
     footer: Footer$4,
     meta: {
       align: 'center',
-      className: '!p-0 !pt-[var(--table3-row-padding)]',
+      className: '!p-0 !pt-[var(--table3-cell-padding-y)]',
       enableOrdering: false,
       enableSearch: false,
       enableTruncate: false,
@@ -18467,7 +18560,7 @@ function useConvertChildrenToColumns(props, options, editing) {
     React__default.Children.toArray(props.children).filter(child => !!child) // remove falsey children
     .forEach(child => {
       if ( /*#__PURE__*/React__default.isValidElement(child) && child.props.accessor) {
-        var _child$props$enableRe, _child$props$enableFi, _child$props$enableSo, _child$props$enableHi, _child$props$enableOr, _child$props$enableSe, _child$props$enableTr;
+        var _child$props$enableRe, _child$props$enableFi, _child$props$enableSo, _child$props$enableHi, _child$props$enableOr, _child$props$enablePr, _child$props$enableSe, _child$props$enableTr;
         if (child.props.defaultWidth) {
           defaultColumnSizing[child.props.accessor] = child.props.defaultWidth === 'grow' ? '1fr' : child.props.defaultWidth;
         }
@@ -18506,6 +18599,7 @@ function useConvertChildrenToColumns(props, options, editing) {
             control: child.props.control,
             dataType: child.props.dataType,
             enableOrdering: (_child$props$enableOr = child.props.enableOrdering) !== null && _child$props$enableOr !== void 0 ? _child$props$enableOr : true,
+            enablePrinting: (_child$props$enablePr = child.props.enablePrinting) !== null && _child$props$enablePr !== void 0 ? _child$props$enablePr : true,
             enableSearch: (_child$props$enableSe = child.props.enableSearch) !== null && _child$props$enableSe !== void 0 ? _child$props$enableSe : true,
             enableTruncate: (_child$props$enableTr = child.props.enableTruncate) !== null && _child$props$enableTr !== void 0 ? _child$props$enableTr : false,
             filters: child.props.filters,
@@ -18560,7 +18654,7 @@ function useShortcutsListener(table, shortcuts) {
     const shortcutKeys = Object.keys(shortcuts !== null && shortcuts !== void 0 ? shortcuts : {});
     const globalHandlers = [];
     // convert the shortcut into the correct format to register it
-    if (shortcuts && shortcutKeys.length) {
+    if (shortcuts && shortcutKeys.length && meta.currentRow.currentRowIndex !== undefined) {
       const currentRow = rows[meta.currentRow.currentRowIndex];
       shortcutKeys.forEach(key => {
         const handler = shortcuts[key];
@@ -18628,10 +18722,14 @@ function useEditingStateListener(table) {
   }, [meta.currentRow.currentRowIndex]);
   // save if editing gets toggled off
   React__default.useEffect(() => {
-    if (meta.editing.isEnabled && !meta.editing.isEditing) {
-      requestAnimationFrame(() => {
-        meta.editing.saveChangesIfNeeded();
-      });
+    if (meta.editing.isEnabled) {
+      if (!meta.editing.isEditing) {
+        requestAnimationFrame(() => {
+          meta.editing.saveChangesIfNeeded();
+        });
+      } else if (meta.currentRow.currentRowIndex === undefined) {
+        meta.currentRow.setCurrentRowIndex(0);
+      }
     }
   }, [meta.editing.isEditing]);
 }
@@ -18855,6 +18953,7 @@ function useTable$2(props) {
       enableFooter: options.enableFooter,
       fontSize,
       hoverState,
+      isPrinting: props.id.endsWith('_print'),
       isUsingServer: !!props.loadPage,
       printing,
       rowActions: rowActions,
@@ -18882,12 +18981,56 @@ function useTable$2(props) {
   };
 }
 
+const FOCUS_MANAGER_OPTIONS = {
+  tabbable: true
+};
 function Row$2(props) {
+  const focusManager = focus.useFocusManager();
   const tableMeta = props.table.options.meta;
   const isCurrentRow = tableMeta.currentRow.currentRowIndex === props.index;
   const isDraggingRow = tableMeta.rowDrag.dragging[props.row.id];
+  const isFirstRow = props.index === 0;
   // we use non-css hovered state to determine whether to render actions or not, for performance
   const [isHovered, setIsHovered] = React__default.useState(false);
+  // tab behaviour is consistent across normal mode and edit mode, handle it here
+  const handleKeyDown = event => {
+    if (event.isDefaultPrevented() || event.isPropagationStopped()) {
+      return;
+    }
+    if (event.key === 'Tab') {
+      tableMeta.hoverState.pause(true);
+      let focusedElement;
+      if (event.shiftKey) {
+        // looping backwards
+        focusedElement = focusManager.focusPrevious(FOCUS_MANAGER_OPTIONS);
+        if (focusedElement) {
+          // override default behaviour, since we're handling focus internally now
+          event.preventDefault();
+        } else {
+          // there are no previous elements to focus, go up a row or go outside the table
+          if (!isFirstRow) {
+            event.preventDefault();
+            tableMeta.currentRow.setCurrentRowIndex(props.index - 1);
+            setTimeout(() => focusManager.focusLast(FOCUS_MANAGER_OPTIONS), 1);
+          }
+        }
+      } else {
+        // looping forwards
+        focusedElement = focusManager.focusNext(FOCUS_MANAGER_OPTIONS);
+        if (focusedElement) {
+          // override default behaviour, since we're handling focus internally now
+          event.preventDefault();
+        } else {
+          // there are no next elements to focus, go down a row or go outside the table
+          if (!props.isLastRow) {
+            event.preventDefault();
+            tableMeta.currentRow.setCurrentRowIndex(props.index + 1);
+            setTimeout(() => focusManager.focusFirst(FOCUS_MANAGER_OPTIONS), 1);
+          }
+        }
+      }
+    }
+  };
   // rows are heavily memoized because performance in our table is critical
   // be careful and selective about props that you pass to the row
   const memoedProps = {
@@ -18898,12 +19041,13 @@ function Row$2(props) {
     draggable: tableMeta.rowDrag.isEnabled,
     index: props.index,
     onClick: tableMeta.rowClick.handleClick,
-    onDrop: tableMeta.rowDrop.isEnabled ? tableMeta.rowDrop.handleDrop : undefined
+    onDrop: tableMeta.rowDrop.isEnabled ? tableMeta.rowDrop.handleDrop : undefined,
+    onKeyDown: handleKeyDown
   };
   let output = /*#__PURE__*/React__default.createElement(MemoedRow, Object.assign({}, props, memoedProps));
   if (tableMeta.editing.isEditing && (isCurrentRow || isHovered && !tableMeta.hoverState.isPaused)) {
     output = /*#__PURE__*/React__default.createElement(EditingRow, Object.assign({}, props, memoedProps, {
-      isLastRow: props.isLastRow,
+      isFirstRow: isFirstRow,
       setCurrentRowIndex: tableMeta.currentRow.setCurrentRowIndex
     }));
   }
@@ -18943,79 +19087,80 @@ const unhoverPreviousRow = tableRef => {
 };
 function EditingRow(props) {
   const {
+    isFirstRow,
     isLastRow,
+    onKeyDown,
     setCurrentRowIndex,
     virtualiser,
     ...attributes
   } = props;
   const focusManager = focus.useFocusManager();
-  const focusManagerOptions = {
-    tabbable: true
-  };
   const tableMeta = props.table.options.meta;
   const handleClickCapture = event => {
     lastIndex = getColumnIndex(event.target);
   };
   const handleArrowLeftKey = event => {
     let focusedElement;
-    if (event.key === 'ArrowLeft' || event.key === 'Tab' && event.shiftKey) {
-      // Need to stop propagation because "Tab" will be handled twice(default browser and programmatic one)
-      // and will lead to looping focus. Also we still need to perform special behaviour when focus reaches the end of the row,
+    if (event.key === 'ArrowLeft') {
+      // We need to perform special behaviour when focus reaches the end of the row,
       // so we don't need default browser behaviour.
       event.stopPropagation();
       event.preventDefault();
       // "CTRL + ArrowLeft" or "META + ArrowLeft" should focus first focusable element of the row
       if (event.ctrlKey || event.metaKey) {
         event.target.blur();
-        focusedElement = focusManager.focusFirst(focusManagerOptions);
+        focusedElement = focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);
         lastIndex = getColumnIndex(focusedElement);
       } else {
-        // Should focus previous focusable element, if there is one
-        focusedElement = focusManager.focusPrevious(focusManagerOptions);
-        // Should move to prevoius row and select last focusable element in that row,
-        // if there is no previous focusable element in current row
-        if (props.index !== 0 && (!focusedElement || !event.currentTarget.contains(focusedElement))) {
-          tableMeta.hoverState.pause(true);
-          setCurrentRowIndex(props.index - 1);
-          setTimeout(() => {
-            focusedElement = focusManager.focusLast(focusManagerOptions);
-            // Need to update lastIndex when row got changed and last element got selected.
-            lastIndex = getColumnIndex(focusedElement);
-          }, 1);
-        } else {
+        // looping backwards
+        focusedElement = focusManager.focusPrevious(FOCUS_MANAGER_OPTIONS);
+        if (focusedElement) {
           lastIndex = getColumnIndex(focusedElement);
+        } else {
+          // there are no previous elements to focus, go up a row (if there are rows above)
+          if (!isFirstRow) {
+            event.preventDefault();
+            tableMeta.hoverState.pause(true);
+            tableMeta.currentRow.setCurrentRowIndex(props.index - 1);
+            setTimeout(() => {
+              focusManager.focusLast(FOCUS_MANAGER_OPTIONS);
+              // Need to update lastIndex when row got changed and last element got selected.
+              lastIndex = getColumnIndex(focusedElement);
+            }, 1);
+          }
         }
       }
     }
   };
   const handleArrowRightKey = event => {
     let focusedElement;
-    if (event.key === 'ArrowRight' || event.key === 'Tab' && !event.shiftKey) {
-      // Need to stop propagation because "Tab" will be handled twice(default browser and programmatic one)
-      // and will lead to looping focus. Also we still need to perform special behaviour when focus reaches the end of the row,
+    if (event.key === 'ArrowRight') {
+      // We need to perform special behaviour when focus reaches the end of the row,
       // so we don't need default browser behaviour.
       event.stopPropagation();
       event.preventDefault();
       // "CTRL + ArrowRight" or "META + ArrowRight" should focus last focusable element of the row
       if (event.ctrlKey || event.metaKey) {
         event.target.blur();
-        focusedElement = focusManager.focusLast(focusManagerOptions);
+        focusedElement = focusManager.focusLast(FOCUS_MANAGER_OPTIONS);
         lastIndex = getColumnIndex(focusedElement);
       } else {
-        // Should focus next focusable element, if there is one
-        focusedElement = focusManager.focusNext(focusManagerOptions);
-        // Should move to next row and select first focusable element in that row,
-        // if there is no next focusable element in current row
-        if (!isLastRow && (!focusedElement || !event.currentTarget.contains(focusedElement))) {
-          tableMeta.hoverState.pause(true);
-          setCurrentRowIndex(props.index + 1);
-          setTimeout(() => {
-            focusedElement = focusManager.focusFirst(focusManagerOptions);
-            // Need to update lastIndex when row got changed and first element got selected.
-            lastIndex = getColumnIndex(focusedElement);
-          }, 1);
-        } else {
+        // looping forwards
+        focusedElement = focusManager.focusNext(FOCUS_MANAGER_OPTIONS);
+        if (focusedElement) {
           lastIndex = getColumnIndex(focusedElement);
+        } else {
+          // there are no next elements to focus, go down a row or go outside the table
+          if (!props.isLastRow) {
+            event.preventDefault();
+            tableMeta.hoverState.pause(true);
+            tableMeta.currentRow.setCurrentRowIndex(props.index + 1);
+            setTimeout(() => {
+              focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);
+              // Need to update lastIndex when row got changed and last element got selected.
+              lastIndex = getColumnIndex(focusedElement);
+            }, 1);
+          }
         }
       }
     }
@@ -19030,6 +19175,7 @@ function EditingRow(props) {
     if (event.isDefaultPrevented() || event.isPropagationStopped() || tableMeta.editing.detailModeEditing) {
       return;
     }
+    onKeyDown(event); // handles tab behaviour
     handleArrowLeftKey(event);
     handleArrowRightKey(event);
   };
@@ -19041,7 +19187,7 @@ function EditingRow(props) {
         const lastIndexCell = (_props$tableRef$curre = props.tableRef.current) === null || _props$tableRef$curre === void 0 ? void 0 : _props$tableRef$curre.querySelector(`[role="row"][data-current="true"] [data-column-index="${lastIndex}"]`);
         lastIndexCell === null || lastIndexCell === void 0 ? void 0 : (_lastIndexCell$queryS = lastIndexCell.querySelector(focusableSelector)) === null || _lastIndexCell$queryS === void 0 ? void 0 : _lastIndexCell$queryS.focus();
       } else {
-        focusManager.focusFirst(focusManagerOptions);
+        focusManager.focusFirst(FOCUS_MANAGER_OPTIONS);
       }
     }
     // Need to subscribe to current row index and check is it a current row,
@@ -20333,8 +20479,18 @@ function PrintButton(props) {
     columnFilters: state.columnFilters,
     globalFilter: state.globalFilter
   }), [tableMeta.columnFreezing.frozenColumnIndex, state.columnOrder, state.columnSizing, state.columnVisibility, excludeUnmatchedResults, tableMeta.fontSize.size, tableMeta.rowHeight.height, state.sorting, state.columnFilters, state.globalFilter]);
+  const iframeTableChildren = React__default.useMemo(() => React__default.Children.toArray(tableProps.children).filter(child => {
+    var _child$props;
+    const enableColumnInPrinting = (_child$props = child.props) === null || _child$props === void 0 ? void 0 : _child$props.enablePrinting;
+    // For table children, only include columns doesn't have 'false' value for enablePrinting prop.
+    if ( /*#__PURE__*/React__default.isValidElement(child) && enableColumnInPrinting === false) {
+      return false;
+    }
+    return true;
+  }), [tableProps.children]);
   const iframeTableProps = {
     ...tableProps,
+    children: iframeTableChildren,
     defaultSettings,
     id: printTableId
   };
@@ -20767,7 +20923,7 @@ function Summary$1(props) {
 }
 
 // we cannot just use a fixed height because our rows need to grow in height (images, edit mode validation etc)
-const getRowHeightSizing = (height, fontSize) => {
+const getCellHeightPadding = (height, fontSize) => {
   // TODO: can we get the rem values from tailwind
   switch (height) {
     case 'short':
@@ -20816,9 +20972,22 @@ const getRowHeightSizing = (height, fontSize) => {
       }
   }
 };
+const getCellWidthPadding = fontSize => {
+  switch (fontSize) {
+    case 'small':
+      return '8px';
+    case 'medium':
+      return '12px';
+    default:
+      return '16px';
+    // py-1.5
+  }
+};
+
 const useCssVars = (height, fontSize) => {
   const style = {
-    '--table3-row-padding': getRowHeightSizing(height, fontSize)
+    '--table3-cell-padding-x': getCellWidthPadding(fontSize),
+    '--table3-cell-padding-y': getCellHeightPadding(height, fontSize)
   };
   return {
     style
@@ -20991,7 +21160,7 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
         return;
       }
       tableMeta.hoverState.handleKeyDown(event);
-      tableMeta.currentRow.handleKeyDown(event, table.getRowModel().rows.length, scrollToIndex);
+      tableMeta.currentRow.handleKeyDown(event, table.getRowModel().rows.length, scrollToIndex, tableMeta.editing.isEditing, internalRef);
       tableMeta.rowClick.handleKeyDown(event, table);
       tableMeta.rowSelection.handleKeyDown(event, table);
       tableMeta.editing.handleKeyDown(event);
@@ -21004,10 +21173,13 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   // See https://github.com/e-conomic/taco/blob/dev/packages/taco/src/components/Table3/strategies/virtualised.tsx#L143
   // scrollToIndex function changes when row count changes, so it is important to update handlers with new
   // scrollToIndex function.
-  [scrollToIndex, internalRef.current]);
+  [scrollToIndex, tableMeta.editing.isEditing, internalRef.current]);
   const handleBlur = event => {
     tableMeta.editing.handleBlur(event);
   };
+  const handleFocus = event => {
+    tableMeta.currentRow.handleFocus(event, table.getRowModel().rows.length, scrollToIndex);
+  };
   const handleScroll = function (event) {
     try {
       tableMeta.columnFreezing.handleScroll(event);
@@ -21016,7 +21188,7 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
       return Promise.reject(e);
     }
   };
-  const className = cn('border-grey-300 relative grid h-full w-full flex-grow overflow-auto rounded border bg-white scroll-mt-[41px]', '[&[data-resizing="true"]]:select-none', {
+  const className = cn('border-grey-300 relative grid h-full w-full flex-grow overflow-auto rounded border bg-white scroll-mt-[41px] focus-visible:outline-none', '[&[data-resizing="true"]]:select-none', {
     'text-xs': tableMeta.fontSize.size === 'small',
     'text-sm': tableMeta.fontSize.size === 'medium',
     'text-base': tableMeta.fontSize.size === 'large'
@@ -21025,7 +21197,7 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   // if the table is a print table or not.
   const {
     style: cssGridStyle
-  } = useCssGrid(table, props.id.endsWith('_print'));
+  } = useCssGrid(table, tableMeta.isPrinting);
   const {
     style: cssVars
   } = useCssVars(tableMeta.rowHeight.height, tableMeta.fontSize.size);
@@ -21057,10 +21229,12 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     "data-resizing": !!state.columnSizingInfo.isResizingColumn,
     "data-taco": "table2",
     onBlur: handleBlur,
+    onFocus: handleFocus,
     onScroll: handleScroll,
     ref: internalRef,
     role: "table",
-    style: style
+    style: style,
+    tabIndex: -1
   }, isServerLoadingAndNotReady ? null : /*#__PURE__*/React__default.createElement("div", {
     className: "group/header contents",
     "data-taco": "table2-header",
@@ -21074,7 +21248,9 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   }, reactTable$1.flexRender(header.column.columnDef.header, {
     ...header.getContext(),
     scrollToIndex
-  })))))), table.getRowModel().rows.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(focus.FocusScope, null, /*#__PURE__*/React__default.createElement("div", {
+  })))))), table.getRowModel().rows.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(focus.FocusScope, {
+    autoFocus: tableMeta.editing.isEditing
+  }, /*#__PURE__*/React__default.createElement("div", {
     className: "group/body contents",
     "data-taco": "table2-body",
     role: "rowgroup",