@economic/taco 2.5.0 → 2.7.0

package/dist/taco.cjs.development.js

@@ -318,6 +318,21 @@ function IconAttachCancel(props, svgRef) {
 }
 var AttachCancel = /*#__PURE__*/React.forwardRef(IconAttachCancel);
 
+function IconAttachWarning(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", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M12.38 3.688a3.75 3.75 0 015.44 5.16l-.137.144-9.132 9.131a2.25 2.25 0 01-3.287-3.069l.105-.113 6.657-6.656a.75.75 0 011.128.983l-.068.077-6.656 6.657a.75.75 0 00.984 1.128l.076-.067 9.132-9.132a2.25 2.25 0 00-3.07-3.287l-.112.105-9.132 9.132a3.75 3.75 0 005.16 5.44l.144-.137 1.934-1.935a6.062 6.062 0 00.09 2.031l-.964.965a5.25 5.25 0 01-7.574-7.269l.15-.156 9.131-9.132zM22 18a4.5 4.5 0 10-9 0 4.5 4.5 0 009 0zm-5.243-2.852a.75.75 0 011.493.102v3.5l-.007.102a.75.75 0 01-1.493-.102v-3.5l.007-.102zM17.5 20a.75.75 0 100 1.5.75.75 0 000-1.5z",
+    fill: "currentColor"
+  }));
+}
+var AttachWarning = /*#__PURE__*/React.forwardRef(IconAttachWarning);
+
 function IconAttach(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -473,6 +488,79 @@ function IconCashReports(props, svgRef) {
 }
 var CashReports = /*#__PURE__*/React.forwardRef(IconCashReports);
 
+function IconChartArea(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", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3.5 4.75a.75.75 0 00-1.5 0v14.5c0 .414.336.75.75.75h18.5a.75.75 0 000-1.5h-1.5V6a.75.75 0 00-1.14-.64l-6.88 4.188-3.045-2.682a.75.75 0 00-.921-.055L3.5 9.745V4.75zm0 6.816V18.5h14.75V7.335l-6.211 3.782a.75.75 0 01-.886-.078l-3.02-2.66L3.5 11.565z",
+    fill: "currentColor"
+  }));
+}
+var ChartArea = /*#__PURE__*/React.forwardRef(IconChartArea);
+
+function IconChartBar(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", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M11 17.75A1.75 1.75 0 009.25 16h-4.5A1.75 1.75 0 003 17.75v1.5c0 .966.784 1.75 1.75 1.75h4.5A1.75 1.75 0 0011 19.25v-1.5zm6-6.5a1.75 1.75 0 00-1.75-1.75H4.75A1.75 1.75 0 003 11.25v1.5c0 .966.784 1.75 1.75 1.75h10.5A1.75 1.75 0 0017 12.75v-1.5zm4-6.5A1.75 1.75 0 0019.25 3H4.75A1.75 1.75 0 003 4.75v1.5C3 7.216 3.784 8 4.75 8h14.5A1.75 1.75 0 0021 6.25v-1.5zm-11.5 13v1.5a.25.25 0 01-.193.243l-.057.007h-4.5a.25.25 0 01-.243-.193L4.5 19.25v-1.5a.25.25 0 01.193-.243l.057-.007h4.5a.25.25 0 01.243.193l.007.057zm6-6.5v1.5a.25.25 0 01-.193.243L15.25 13H4.75a.25.25 0 01-.243-.193L4.5 12.75v-1.5a.25.25 0 01.193-.243L4.75 11h10.5a.25.25 0 01.243.193l.007.057zm4-6.5v1.5a.25.25 0 01-.193.243l-.057.007H4.75a.25.25 0 01-.243-.193L4.5 6.25v-1.5a.25.25 0 01.193-.243L4.75 4.5h14.5a.25.25 0 01.243.193l.007.057z",
+    fill: "currentColor"
+  }));
+}
+var ChartBar = /*#__PURE__*/React.forwardRef(IconChartBar);
+
+function IconChartLine(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", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M3.5 4.75a.75.75 0 00-1.5 0v14.5c0 .414.336.75.75.75h18.5a.75.75 0 000-1.5H3.5V4.75zm18.06 2.53a.75.75 0 10-1.06-1.06l-5.97 5.97-3.47-3.47a.75.75 0 00-1.06 0l-4.47 4.47a.75.75 0 001.061 1.06l3.94-3.94L14 13.78a.75.75 0 001.06 0l6.5-6.5z",
+    fill: "currentColor"
+  }));
+}
+var ChartLine = /*#__PURE__*/React.forwardRef(IconChartLine);
+
+function IconChartPie(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: "M10.25 4.25A.75.75 0 0111 5v8h8a.75.75 0 01.743.648l.007.102c0 4.97-4.03 8.5-9 8.5a9 9 0 01-9-9c0-4.97 3.53-9 8.5-9zM9.5 5.787l-.209.024c-3.69.47-6.041 3.622-6.041 7.439a7.5 7.5 0 007.5 7.5c3.817 0 6.968-2.352 7.44-6.041l.022-.209H10.25a.75.75 0 01-.743-.648L9.5 13.75V5.787zm3.75-4.037a9 9 0 019 9 .75.75 0 01-.75.75h-8.25a.75.75 0 01-.75-.75V2.5a.75.75 0 01.75-.75zM14 3.287V10h6.712l-.023-.209a7.504 7.504 0 00-6.48-6.48L14 3.287z",
+    fill: "currentColor"
+  }));
+}
+var ChartPie = /*#__PURE__*/React.forwardRef(IconChartPie);
+
+function IconChartTable(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", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M4.5 4.5h15v3.75h-15V4.5zM3 9.75V4.5A1.5 1.5 0 014.5 3h15A1.5 1.5 0 0121 4.5v15a1.5 1.5 0 01-1.5 1.5h-15A1.5 1.5 0 013 19.5V9.75zM4.5 14V9.75h4V14h-4zm0 1.5v4h4v-4h-4zm5.5 4h4v-4h-4v4zm5.5 0h4v-4h-4v4zm4-5.5V9.75h-4V14h4zM10 9.75h4V14h-4V9.75z",
+    fill: "currentColor"
+  }));
+}
+var ChartTable = /*#__PURE__*/React.forwardRef(IconChartTable);
+
 function IconChatSolid(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3128,6 +3216,7 @@ const icons = {
   'arrow-up': ArrowUp,
   'attach-auto': AttachAuto,
   'attach-cancel': AttachCancel,
+  'attach-warning': AttachWarning,
   attach: Attach,
   'autotext-insert': AutotextInsert,
   autotext: Autotext,
@@ -3140,6 +3229,11 @@ const icons = {
   calendar: Calendar,
   'cash-account': CashAccount,
   'cash-reports': CashReports,
+  'chart-area': ChartArea,
+  'chart-bar': ChartBar,
+  'chart-line': ChartLine,
+  'chart-pie': ChartPie,
+  'chart-table': ChartTable,
   'chat-solid': ChatSolid,
   chat: Chat,
   'chevron-down-double': ChevronDownDouble,
@@ -9875,7 +9969,7 @@ const Multiple = /*#__PURE__*/React__default.forwardRef(function Select2TriggerM
     }, /*#__PURE__*/React__default.createElement("div", {
       className: "flex flex-wrap gap-1"
     }, valuesAsChildren.map(child => /*#__PURE__*/React__default.createElement(Tag$1, {
-      key: child.props.value,
+      key: String(child.props.value),
       className: "truncate",
       color: tags ? child.props.color : undefined,
       disabled: disabled,
@@ -12992,9 +13086,14 @@ const Cell = function Cell(props) {
   };
   if (meta.editMode.onSave && hasCellControl && (canEditThisCell || isHoveringThisRowWhileEditing && isDataColumn)) {
     attributes.onMouseDown = event => {
-      handleMouseDown(event);
       const target = event.target;
       const isTargetInput = target !== null && target.nodeName === 'INPUT';
+      // In Edit mode, If mouse click is happening outside of cell (in case of any dropdowns like date picker or select),
+      // then it should not be processed as a click on a cell.
+      if (!event.currentTarget.contains(target)) {
+        return;
+      }
+      handleMouseDown(event);
       // event.target?.select is only truthy for input elements
       // if event.target is active element, then that means we should select the text
       if (isTargetInput && target !== document.activeElement) {
@@ -16211,7 +16310,7 @@ const MemoedFooter = /*#__PURE__*/React__default.memo(function MemoedFooter(prop
     className: className,
     "data-align": align,
     "data-column-index": index,
-    role: "cell"
+    role: "columnheader"
   }, typeof meta.footer === 'function' ? /*#__PURE__*/React__default.createElement("span", {
     className: "flex-grow truncate"
   }, meta.footer(table.getRowModel().rows.map(row => row.original[id]))) : null);
@@ -16257,7 +16356,7 @@ const MemoedCell = /*#__PURE__*/React__default.memo(function MemoedCell(props) {
     const actionsOnRow = visibleActions.length === actionsLength ? visibleActions : visibleActions.slice(0, actionsLength - 1);
     const actionsInMenu = visibleActions.slice(visibleActions.length === actionsLength ? actionsLength : actionsLength - 1);
     content = /*#__PURE__*/React__default.createElement("span", {
-      className: "-mb-2 -mt-2 flex justify-end pl-2 text-right",
+      className: "-mb-2 -mt-1.5 flex justify-end pl-2 text-right",
       ref: ref
     }, actionsOnRow.map((button, index) => {
       var _ref, _button$props$tooltip;
@@ -16307,7 +16406,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', '[[role="table"][data-editing="false"]_&]:group-[[data-current="true"]]/row:shadow-[-6px_0px_6px_theme(colors.grey.200)] [[role="table"][data-pause-hover="false"][data-editing="false"]_&]:group-hover/row:shadow-[-6px_0px_6px_theme(colors.grey.100)]', '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-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'),
       enableOrdering: false,
       enableSearch: false,
       enableTruncate: false,
@@ -16401,6 +16500,8 @@ const useCssGrid = table => {
         if (column.id === COLUMN_ID) {
           size = 'minmax(max-content, auto)';
         } else {
+          // getSize method is used instead of columnSizing state because columnSizing state doesn't have
+          // sizes of internal columns.
           size = `${column.getSize()}px`;
         }
       } else if (width !== undefined) {
@@ -16909,17 +17010,26 @@ function useColumnFreezingStyle(tableId, table) {
     columnVisibility
   } = table.getState();
   const tableMeta = table.options.meta;
-  const frozenColumnIndex = ((_tableMeta$columnFree = tableMeta.columnFreezing.frozenColumnIndex) !== null && _tableMeta$columnFree !== void 0 ? _tableMeta$columnFree : -1) + tableMeta.columnFreezing.frozenInternalColumnCount;
+  const frozenColumnIndex =
+  // If column freezing is not enabled then only internal frozen column should be frozen.
+  (tableMeta.columnFreezing.isEnabled ? (_tableMeta$columnFree = tableMeta.columnFreezing.frozenColumnIndex) !== null && _tableMeta$columnFree !== void 0 ? _tableMeta$columnFree : -1 : -1) + tableMeta.columnFreezing.frozenInternalColumnCount;
   const style = React__default.useMemo(() => {
     if (tableMeta.columnFreezing.frozenInternalColumnCount > 0 || tableMeta.columnFreezing.isEnabled && frozenColumnIndex !== undefined) {
-      const visibleFrozenColumns = table.getVisibleLeafColumns().slice(0, frozenColumnIndex + 1).map(column => column.id);
+      var _visibleFrozenColumns;
+      const visibleFrozenColumns = table.getVisibleLeafColumns().slice(0, frozenColumnIndex + 1);
       // if all frozen columns haven't had their size set yet, then abort
-      if (visibleFrozenColumns.every(id => columnSizing[id] === undefined)) {
+      if (visibleFrozenColumns.every(column => columnSizing[column.id] === undefined)) {
         return undefined;
       }
       const offsets = {};
-      visibleFrozenColumns.reduce((offset, columnId) => {
+      visibleFrozenColumns.reduce((offset, column) => {
+        const columnId = column.id;
         offsets[columnId] = offset;
+        if (isInternalColumn$1(columnId)) {
+          // getSize method is used instead of columnSizing state because columnSizing state doesn't have
+          // sizes of internal columns.
+          return offset + column.getSize();
+        }
         return offset + columnSizing[columnId];
       }, 0);
       const styles = [Object.values(offsets).map((offset, index) => `#${tableId} [role="row"] > :nth-child(${index + 1}) { left: ${offset}px }`).join('\n'), `#${tableId} [role="row"] > :not(:nth-child(n+${frozenColumnIndex + 2})) {
@@ -16928,7 +17038,7 @@ function useColumnFreezingStyle(tableId, table) {
                 }`, `#${tableId}[data-horizontally-scrolled="true"] [role="row"] > :nth-child(${frozenColumnIndex + 1}) {
                     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%), 1px 0px 0px #DDDDDD;
                 }`];
-      const columnId = visibleFrozenColumns[frozenColumnIndex];
+      const columnId = (_visibleFrozenColumns = visibleFrozenColumns[frozenColumnIndex]) === null || _visibleFrozenColumns === void 0 ? void 0 : _visibleFrozenColumns.id;
       // frozenColumnIndex could not be in the visible frozen column so it is important to check if columnId
       // exists before checking if it is internal.
       //
@@ -17435,121 +17545,133 @@ const willRowMoveAfterSorting$1 = (value, cell, rowIndex, rows, desc) => {
   return ((_resortedRows$index = resortedRows[index]) === null || _resortedRows$index === void 0 ? void 0 : _resortedRows$index.id) !== cell.row.id;
 };
 
-function EditingCell$1(props) {
-  return /*#__PURE__*/React__default.createElement(MemoedEditingCell, Object.assign({}, props));
-}
-const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditingCell(props) {
-  var _tableMeta$editing$ge, _tableMeta$editing$ro, _rows$tableMeta$curre;
+const Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
   const {
-    cell,
+    defaultValue: _,
+    highlighted,
+    invalid,
+    onKeyDown,
+    ...otherProps
+  } = props;
+  const classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className);
+  // home and end keys only navigate to the start/end of textarea value if the textarea container does not scroll
+  // if it has scroll height then the browser reverts to native scrolling behaviour only
+  // so we manually override it to ensure _our_ desired behaviour remains intact
+  const handleKeyDown = event => {
+    if (event.key === 'Home' || event.key === 'End') {
+      event.preventDefault();
+      const position = event.key === 'End' ? event.currentTarget.value.length : 0;
+      event.currentTarget.setSelectionRange(position, position);
+      event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;
+    }
+    if (onKeyDown) {
+      onKeyDown(event);
+    }
+  };
+  return /*#__PURE__*/React.createElement("textarea", Object.assign({}, otherProps, {
+    className: classNames,
+    "data-taco": "textarea",
+    onKeyDown: handleKeyDown,
+    ref: ref
+  }));
+});
+
+const TextAreaControl = /*#__PURE__*/React__default.forwardRef(function TextAreaControl(props, externalRef) {
+  const {
+    onKeyDown: handleKeyDown,
+    onChange: handleChange,
     column,
-    index,
-    getValue,
-    table,
-    tableRef,
-    row
+    isCellInDetailMode,
+    align,
+    isCurrentRow,
+    value,
+    ...attributes
   } = props;
-  const tableMeta = table.options.meta;
+  const textareaMaxHeight = 120;
+  const textareaMinHeight = 32;
   const columnMeta = column.columnDef.meta;
-  const cellRef = React__default.useRef(null);
-  const controlRef = React__default.useRef(null);
-  const handleChange = value => tableMeta.editing.setCellValue(cell, value);
-  const value = (_tableMeta$editing$ge = tableMeta.editing.getCellValue(cell)) !== null && _tableMeta$editing$ge !== void 0 ? _tableMeta$editing$ge : getValue();
-  const handleFocus = event => {
-    var _event$target;
-    // Check if cell is hidden behind pinned columns or edititng actions, and scroll to it.
-    const frozenColumnIndex = tableMeta.columnFreezing.frozenColumnIndex;
-    const tableElement = tableRef.current;
-    if (tableElement && frozenColumnIndex !== undefined && index > frozenColumnIndex) {
-      var _cellRef$current;
-      const lastFrozenColumnElement = getCurrentRowCellElement(frozenColumnIndex, tableElement);
-      const cellRect = (_cellRef$current = cellRef.current) === null || _cellRef$current === void 0 ? void 0 : _cellRef$current.getBoundingClientRect();
-      const lastFrozenRect = lastFrozenColumnElement === null || lastFrozenColumnElement === void 0 ? void 0 : lastFrozenColumnElement.getBoundingClientRect();
-      const tableRect = tableElement.getBoundingClientRect();
-      // Check for pinned columns overlap
-      if (cellRect && lastFrozenRect && cellRect.left < lastFrozenRect.left + lastFrozenRect.width) {
-        const pinnedColumnsWidth = lastFrozenRect.left + lastFrozenRect.width;
-        tableElement.scrollTo(cellRect.left - pinnedColumnsWidth, tableElement.scrollTop);
-        // Check for editing actions overlap
-      } else if (cellRect && tableRect && cellRect.right > tableRect.right - EDITING_ACTIONS_WIDTH) {
-        const spaceBetweenCellAndEditingActions = 10;
-        tableElement.scrollTo(
-        // Need to take into account if table has been already scrolled.
-        tableElement.scrollLeft + EDITING_ACTIONS_WIDTH + spaceBetweenCellAndEditingActions, tableElement.scrollTop);
+  const ref = useMergedRef(externalRef);
+  React__default.useEffect(() => {
+    // If truncation is not enabled, then textarea should re-calculate it's height to fit with it's own content, when initialized.
+    if (ref !== null && ref !== void 0 && ref.current && !(columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate)) {
+      const textareaElement = ref === null || ref === void 0 ? void 0 : ref.current;
+      resizeTextArea(textareaElement);
+    }
+  }, []);
+  React__default.useEffect(() => {
+    // If truncation is enabled, then textarea should only adjust to it's own content, when in detail mode.
+    // Otherwise it should collapse to minimal height.
+    if (ref !== null && ref !== void 0 && ref.current && columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
+      const textareaElement = ref === null || ref === void 0 ? void 0 : ref.current;
+      if (isCellInDetailMode) {
+        resizeTextArea(textareaElement);
+      } else {
+        textareaElement.style.height = `${textareaMinHeight}px`;
       }
     }
-    if ((_event$target = event.target) !== null && _event$target !== void 0 && _event$target.select) {
-      requestAnimationFrame(() => {
-        event.target.select();
-      });
+  }, [isCellInDetailMode]);
+  const resizeTextArea = textareaElement => {
+    // Need to set inherit before calculating height, so that browser sets the scrollHeight properly,
+    // depending on text inside.
+    const textareaRect = textareaElement.getBoundingClientRect();
+    const prevHeight = textareaRect.height;
+    if (columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
+      if (prevHeight < textareaMaxHeight) {
+        textareaElement.style.height = 'inherit';
+        textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, textareaMaxHeight)}px`;
+      }
+    } else {
+      textareaElement.style.height = 'inherit';
+      textareaElement.style.height = `${textareaElement.scrollHeight}px`;
     }
   };
-  const handleBlur = () => {
-    tableMeta.editing.setDetailModeEditing(false);
-  };
-  // 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 mountNode = React__default.useMemo(() => {
-    if (moveReason) {
-      var _cellRef$current2, _cellRef$current2$par;
-      return (_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.firstChild;
-    }
-    return null;
-  }, [moveReason, cellRef]);
-  const removeMoveReason = () => {
-    tableMeta.editing.removeRowMoveReason(cell.column.id);
+  const handleTextareaChange = e => {
+    resizeTextArea(e.target);
   };
-  React__default.useEffect(() => {
-    // To avoid reseting move reason on another row hover,
-    // we need to check for changes only if value got changed in the current row.
-    if (!isCurrentRow) {
+  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
+  });
+  const handleTextareaKeyDown = event => {
+    // By default Shift + Enter in textarea makes a new line, we want to keep this behaviour
+    if (event.shiftKey && event.key === 'Enter') {
       return;
-    }
-    if (hasChanged$1(getValue(), value)) {
-      const moveReason = getRowMoveReason(table, row.index, row.original, cell, value);
-      tableMeta.editing.setRowMoveReason({
-        [cell.column.id]: moveReason
-      });
     } else {
-      removeMoveReason();
+      handleKeyDown(event);
     }
-    return removeMoveReason;
-  }, [value]);
-  const className = cn('!px-2 py-[var(--table3-row-padding)]',
-  // component overrides - grayscale for editing hover
-  '[[role="row"][data-current="false"]:hover_&>*]:!grayscale [[role="row"][data-current="false"]:hover_&_.bg-white]:!bg-grey-100',
-  // we alias to any because className conflicts with the Table2 definition,
-  // when Table2 is gone, remove this as any
-  typeof columnMeta.className === 'function' ? columnMeta.className(row.original) : columnMeta.className);
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, moveReason !== null && mountNode && /*#__PURE__*/React__default.createElement(Indicator$1, {
-    reason: moveReason,
-    columnName: String(cell.column.columnDef.header),
-    mountNode: mountNode,
-    validationErrors: []
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: className,
-    "data-column-index": index,
-    role: "cell",
-    ref: cellRef
-  }, /*#__PURE__*/React__default.createElement(Control, {
-    align: columnMeta.align,
-    column: cell.column,
-    data: cell.row.original,
-    initialValue: getValue(),
-    onBlur: handleBlur,
-    onFocus: handleFocus,
-    onChange: handleChange,
-    ref: controlRef,
-    table: table,
-    tableRef: tableRef,
-    value: value,
-    cell: cell
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: textareaContainerClassName,
+    "data-taco": "input-container"
+  }, /*#__PURE__*/React__default.createElement(Textarea, Object.assign({}, attributes, {
+    onChange: event => {
+      handleChange(event.target.value);
+      handleTextareaChange(event);
+    },
+    rows: 1,
+    onKeyDown: e => {
+      handleTextareaKeyDown(e);
+    },
+    onBlur: event => {
+      // If truncation is enabled, then textarea should shring back to min height, when loosing focus.
+      if (columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
+        const textareaElement = event.currentTarget;
+        textareaElement.style.height = `${textareaMinHeight}px`;
+      }
+    },
+    className: cn(getCellAlignmentClasses$1(align), `z-20 h-fit resize-none`, {
+      [`!min-h-[${textareaMinHeight}px]`]: columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate,
+      '!yt-focus-dark': isCellInDetailMode,
+      [`h-[${textareaMinHeight}px]`]: !isCellInDetailMode && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate),
+      // Only allow resizing when focused and truncation enabled
+      'focus:resize-y': isCurrentRow && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate)
+    }),
+    ref: ref,
+    value: String(value !== null && value !== void 0 ? value : '')
   })));
 });
-const Control = /*#__PURE__*/React__default.forwardRef(function Control(props, ref) {
-  var _column$columnDef$met, _ref$current;
+
+const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(props, externalRef) {
+  var _ref$current;
   const {
     align,
     column,
@@ -17560,11 +17682,16 @@ const Control = /*#__PURE__*/React__default.forwardRef(function Control(props, r
     tableRef,
     value,
     cell,
+    isCurrentRow,
     ...attributes
   } = props;
   const tableMeta = table.options.meta;
-  const controlRenderer = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control;
+  const ref = React__default.useRef();
+  const refCallback = mergeRefs([ref, externalRef]);
+  const columnMeta = column.columnDef.meta;
+  const controlRenderer = columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.control;
   const isCellInDetailMode = tableMeta.editing.detailModeEditing && (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.contains(document.activeElement));
+  // Revert to initial value if escape was pressed
   const handleKeyDown = event => {
     const target = event.target;
     if (target.readOnly) {
@@ -17572,12 +17699,10 @@ const Control = /*#__PURE__*/React__default.forwardRef(function Control(props, r
     }
     // prevent row arrow shortcuts triggering when in detail mode
     if (tableMeta.editing.detailModeEditing && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
-      event.preventDefault();
       event.stopPropagation();
     }
     if (event.key === 'Escape') {
       event.preventDefault();
-      // Revert to initial value if escape was pressed in detail mode.
       if (tableMeta.editing.detailModeEditing) {
         tableMeta.editing.setDetailModeEditing(false);
         if (value !== initialValue) {
@@ -17595,7 +17720,9 @@ const Control = /*#__PURE__*/React__default.forwardRef(function Control(props, r
           }
         }
       } else {
+        var _tableRef$current;
         tableMeta.editing.toggleEditing(false);
+        (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.focus();
       }
       return;
     }
@@ -17613,6 +17740,15 @@ const Control = /*#__PURE__*/React__default.forwardRef(function Control(props, r
       return;
     }
   };
+  const isNumber = typeof value === 'number';
+  const handleInputKeyDown = event => {
+    handleKeyDown(event);
+    // Switching to editing mode, when key pressed any alphabetical character or number
+    if (/^[a-z0-9]$/i.test(event.key)) {
+      tableMeta.editing.setDetailModeEditing(true);
+      return;
+    }
+  };
   const handleDatepickerChange = event => {
     // When datepicker looses focus, it triggers change event, even if date wasn't changed,
     // so adding additional check here to prevent adding change to the edititng state.
@@ -17625,7 +17761,7 @@ const Control = /*#__PURE__*/React__default.forwardRef(function Control(props, r
   if (typeof controlRenderer === 'function') {
     return controlRenderer({
       ...attributes,
-      ref,
+      ref: ref,
       setValue: nextValue => {
         if (nextValue !== value) {
           handleChange(nextValue);
@@ -17647,7 +17783,7 @@ const Control = /*#__PURE__*/React__default.forwardRef(function Control(props, r
       }),
       onChange: handleDatepickerChange,
       onKeyDown: handleDatepickerKeyDown,
-      ref: ref,
+      ref: refCallback,
       value: value
     }));
   } else if (controlRenderer === 'switch') {
@@ -17655,18 +17791,15 @@ const Control = /*#__PURE__*/React__default.forwardRef(function Control(props, r
       className: "mx-2 mt-1.5",
       checked: Boolean(value),
       onChange: handleChange,
-      ref: ref
+      ref: refCallback
+    }));
+  } else if (controlRenderer === 'textarea') {
+    return /*#__PURE__*/React__default.createElement(TextAreaControl, Object.assign({}, props, {
+      isCellInDetailMode: isCellInDetailMode,
+      onKeyDown: handleInputKeyDown,
+      ref: refCallback
     }));
   }
-  const isNumber = typeof value === 'number';
-  const handleInputKeyDown = event => {
-    handleKeyDown(event);
-    // Switching to editing mode, when key pressed any alphabetical character or number
-    if (/^[a-z0-9]$/i.test(event.key)) {
-      tableMeta.editing.setDetailModeEditing(true);
-      return;
-    }
-  };
   return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, attributes, {
     className: cn(getInputAppearanceClassnames(), getCellAlignmentClasses$1(align), {
       '!yt-focus-dark': isCellInDetailMode
@@ -17675,11 +17808,143 @@ const Control = /*#__PURE__*/React__default.forwardRef(function Control(props, r
       handleChange(event.target.value);
     },
     onKeyDown: handleInputKeyDown,
-    ref: ref,
+    ref: refCallback,
     type: isNumber ? 'number' : undefined,
     value: isNumber ? value : String(value !== null && value !== void 0 ? value : '')
   }));
 });
+
+function EditingCell$1(props) {
+  const {
+    isHovered
+  } = useRowContext$1();
+  // Need to explicitly pass tableMeta, because just passing the table object will not trigger editing change since table object is not mutatable.
+  const tableMeta = props.table.options.meta;
+  return /*#__PURE__*/React__default.createElement(MemoedEditingCell, Object.assign({}, props, {
+    isHovered: isHovered,
+    tableMeta: tableMeta
+  }));
+}
+const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditingCell(props) {
+  var _tableMeta$editing$ge, _tableMeta$editing$ro, _rows$tableMeta$curre, _column$columnDef$met;
+  const {
+    cell,
+    column,
+    index,
+    getValue,
+    table,
+    tableRef,
+    row,
+    isHovered,
+    tableMeta
+  } = props;
+  const columnMeta = column.columnDef.meta;
+  const cellRef = React__default.useRef(null);
+  const controlRef = React__default.useRef(null);
+  const handleChange = value => tableMeta.editing.setCellValue(cell, value);
+  const value = (_tableMeta$editing$ge = tableMeta.editing.getCellValue(cell)) !== null && _tableMeta$editing$ge !== void 0 ? _tableMeta$editing$ge : getValue();
+  const handleFocus = event => {
+    var _event$target;
+    // Check if cell is hidden behind pinned columns or edititng actions, and scroll to it.
+    const frozenColumnIndex = tableMeta.columnFreezing.frozenColumnIndex;
+    const tableElement = tableRef.current;
+    if (tableElement && frozenColumnIndex !== undefined && index > frozenColumnIndex) {
+      var _cellRef$current;
+      const lastFrozenColumnElement = getCurrentRowCellElement(frozenColumnIndex, tableElement);
+      const cellRect = (_cellRef$current = cellRef.current) === null || _cellRef$current === void 0 ? void 0 : _cellRef$current.getBoundingClientRect();
+      const lastFrozenRect = lastFrozenColumnElement === null || lastFrozenColumnElement === void 0 ? void 0 : lastFrozenColumnElement.getBoundingClientRect();
+      const tableRect = tableElement.getBoundingClientRect();
+      // Check for pinned columns overlap
+      if (cellRect && lastFrozenRect && cellRect.left < lastFrozenRect.left + lastFrozenRect.width) {
+        const pinnedColumnsWidth = lastFrozenRect.left + lastFrozenRect.width;
+        tableElement.scrollTo(cellRect.left - pinnedColumnsWidth, tableElement.scrollTop);
+        // Check for editing actions overlap
+      } else if (cellRect && tableRect && cellRect.right > tableRect.right - EDITING_ACTIONS_WIDTH) {
+        const spaceBetweenCellAndEditingActions = 10;
+        tableElement.scrollTo(
+        // Need to take into account if table has been already scrolled.
+        tableElement.scrollLeft + EDITING_ACTIONS_WIDTH + spaceBetweenCellAndEditingActions, tableElement.scrollTop);
+      }
+    }
+    if ((_event$target = event.target) !== null && _event$target !== void 0 && _event$target.select) {
+      requestAnimationFrame(() => {
+        event.target.select();
+      });
+    }
+  };
+  const handleBlur = () => {
+    tableMeta.editing.setDetailModeEditing(false);
+  };
+  // 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 mountNode = React__default.useMemo(() => {
+    if (moveReason) {
+      var _cellRef$current2, _cellRef$current2$par;
+      return (_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.firstChild;
+    }
+    return null;
+  }, [moveReason, cellRef]);
+  const removeMoveReason = () => {
+    tableMeta.editing.removeRowMoveReason(cell.column.id);
+  };
+  React__default.useEffect(() => {
+    // To avoid reseting move reason on another row hover,
+    // we need to check for changes only if value got changed in the current row.
+    if (!isCurrentRow) {
+      return;
+    }
+    if (hasChanged$1(getValue(), value)) {
+      const moveReason = getRowMoveReason(table, row.index, row.original, cell, value);
+      tableMeta.editing.setRowMoveReason({
+        [cell.column.id]: moveReason
+      });
+    } else {
+      removeMoveReason();
+    }
+    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-2 py-[var(--table3-row-padding)]', {
+    relative: (isCurrentRow || isHovered) && controlRenderer === 'textarea',
+    // Need to set higher z-index, so that the current row textarea (in expanded state) overlaps rows below
+    'z-10': isCurrentRow,
+    // When row is hovered and located below, then the hovered textarea overlaps the current row textarea(if the current row textarea is expanded to support multiple lines),
+    // as result we need to set lower z-index for the hovered row -> cell.
+    'z-0': isHovered
+  },
+  // component overrides - grayscale for editing hover
+  '[[role="row"][data-current="false"]:hover_&>*]:!grayscale [[role="row"][data-current="false"]:hover_&_.bg-white]:!bg-grey-100',
+  // we alias to any because className conflicts with the Table2 definition,
+  // when Table2 is gone, remove this as any
+  typeof columnMeta.className === 'function' ? columnMeta.className(row.original) : columnMeta.className);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, moveReason !== null && mountNode && /*#__PURE__*/React__default.createElement(Indicator$1, {
+    reason: moveReason,
+    columnName: String(cell.column.columnDef.header),
+    mountNode: mountNode,
+    validationErrors: []
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: className,
+    "data-column-index": index,
+    role: "cell",
+    ref: cellRef
+  }, /*#__PURE__*/React__default.createElement(EditingControl, {
+    align: columnMeta.align,
+    column: cell.column,
+    data: cell.row.original,
+    initialValue: getValue(),
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onChange: handleChange,
+    ref: controlRef,
+    table: table,
+    tableRef: tableRef,
+    value: value,
+    cell: cell,
+    isCurrentRow: isCurrentRow
+  })));
+});
 function getRowMoveReason(table, rowIndex, rowValues, cell, newValue) {
   var _table$getState$sorti;
   let rowMoveReason = null;
@@ -17816,7 +18081,7 @@ const Cell$4 = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
   return newTableMeta.currentRow.currentRowIndex === oldTableMeta.currentRow.currentRowIndex && newProps.row.getIsSelected() !== oldProps.row.getIsSelected();
 });
 function createRowSelectionColumn$1(hasDrag, hasExpansion) {
-  const size = hasDrag ? 22 : 40;
+  const size = hasDrag && hasExpansion ? 22 : 4;
   return {
     id: COLUMN_ID$2,
     header: Header$3,
@@ -17826,7 +18091,7 @@ function createRowSelectionColumn$1(hasDrag, hasExpansion) {
       align: 'center',
       className: cn('!pt-[var(--table3-row-padding)] !justify-end !p-0', {
         '!pr-0.5': hasExpansion,
-        '!pr-2.5': !hasExpansion
+        '!pr-3': !hasExpansion
       }),
       enableOrdering: false,
       enableSearch: false,
@@ -17834,7 +18099,7 @@ function createRowSelectionColumn$1(hasDrag, hasExpansion) {
       header: '',
       headerClassName: cn('items-center !justify-end !p-0', {
         '!pr-0.5': hasExpansion,
-        '!pr-2.5': !hasExpansion
+        '!pr-3': !hasExpansion
       })
     },
     // options
@@ -18009,8 +18274,8 @@ function createRowDragColumn(onRowDrag) {
     },
     // options
     enableResizing: false,
-    size: 15,
-    minSize: 15
+    size: 20,
+    minSize: 20
   };
 }
 
@@ -18030,88 +18295,92 @@ function getSortingFn$1(dataType, customFnOrBuiltIn) {
   return 'auto';
 }
 function useConvertChildrenToColumns(props, options, editing) {
-  var _props$actionsForRow;
-  const columnHelper = reactTable$1.createColumnHelper();
-  const columns = [];
-  const defaultColumnSizing = {};
-  const defaultColumnVisibility = {};
-  const defaultSorting = [];
-  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;
-      if (child.props.defaultWidth) {
-        defaultColumnSizing[child.props.accessor] = child.props.defaultWidth === 'grow' ? '1fr' : child.props.defaultWidth;
-      }
-      if (child.props.defaultHidden && options.enableColumnHiding) {
-        defaultColumnVisibility[child.props.accessor] = false;
-      }
-      if (child.props.sort !== undefined) {
-        defaultSorting.push({
+  // It's important to memoise column definitions, because it prevents columns like "Drag column" to re-render on every state change,
+  // and break dragging at the moment it happens.
+  return React__default.useMemo(() => {
+    var _props$actionsForRow;
+    const columnHelper = reactTable$1.createColumnHelper();
+    const columns = [];
+    const defaultColumnSizing = {};
+    const defaultColumnVisibility = {};
+    const defaultSorting = [];
+    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;
+        if (child.props.defaultWidth) {
+          defaultColumnSizing[child.props.accessor] = child.props.defaultWidth === 'grow' ? '1fr' : child.props.defaultWidth;
+        }
+        if (child.props.defaultHidden && options.enableColumnHiding) {
+          defaultColumnVisibility[child.props.accessor] = false;
+        }
+        if (child.props.sort !== undefined) {
+          defaultSorting.push({
+            id: child.props.accessor,
+            desc: child.props.sort === 'desc'
+          });
+        }
+        columns.push({
+          accessorKey: child.props.accessor,
           id: child.props.accessor,
-          desc: child.props.sort === 'desc'
+          header: Header$2,
+          cell: Cell$3,
+          footer: Footer$4,
+          // sizing
+          minSize: MIN_COLUMN_SIZE$1,
+          enableResizing: (_child$props$enableRe = child.props.enableResizing) !== null && _child$props$enableRe !== void 0 ? _child$props$enableRe : true,
+          // filtering
+          enableColumnFilter: (_child$props$enableFi = child.props.enableFiltering) !== null && _child$props$enableFi !== void 0 ? _child$props$enableFi : true,
+          filterFn: 'tacoFilter',
+          // sorting
+          enableSorting: (_child$props$enableSo = child.props.enableSorting) !== null && _child$props$enableSo !== void 0 ? _child$props$enableSo : true,
+          sortingFn: getSortingFn$1(child.props.dataType, child.props.sortFn),
+          sortDescFirst: false,
+          sortUndefined: 1,
+          // visibility
+          enableHiding: (_child$props$enableHi = child.props.enableHiding) !== null && _child$props$enableHi !== void 0 ? _child$props$enableHi : true,
+          // custom options
+          meta: {
+            align: child.props.align,
+            className: child.props.className,
+            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,
+            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,
+            footer: child.props.footer,
+            header: child.props.header,
+            headerClassName: child.props.headerClassName,
+            menu: child.props.menu,
+            renderer: child.props.renderer,
+            tooltip: child.props.tooltip
+          }
         });
       }
-      columns.push({
-        accessorKey: child.props.accessor,
-        id: child.props.accessor,
-        header: Header$2,
-        cell: Cell$3,
-        footer: Footer$4,
-        // sizing
-        minSize: MIN_COLUMN_SIZE$1,
-        enableResizing: (_child$props$enableRe = child.props.enableResizing) !== null && _child$props$enableRe !== void 0 ? _child$props$enableRe : true,
-        // filtering
-        enableColumnFilter: (_child$props$enableFi = child.props.enableFiltering) !== null && _child$props$enableFi !== void 0 ? _child$props$enableFi : true,
-        filterFn: 'tacoFilter',
-        // sorting
-        enableSorting: (_child$props$enableSo = child.props.enableSorting) !== null && _child$props$enableSo !== void 0 ? _child$props$enableSo : true,
-        sortingFn: getSortingFn$1(child.props.dataType, child.props.sortFn),
-        sortDescFirst: false,
-        sortUndefined: 1,
-        // visibility
-        enableHiding: (_child$props$enableHi = child.props.enableHiding) !== null && _child$props$enableHi !== void 0 ? _child$props$enableHi : true,
-        // custom options
-        meta: {
-          align: child.props.align,
-          className: child.props.className,
-          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,
-          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,
-          footer: child.props.footer,
-          header: child.props.header,
-          headerClassName: child.props.headerClassName,
-          menu: child.props.menu,
-          renderer: child.props.renderer,
-          tooltip: child.props.tooltip
-        }
-      });
+    });
+    if (options.enableRowExpansion && props.expandedRowRenderer) {
+      columns.unshift(columnHelper.display(createRowExpansionColumn$1(props.expandedRowRenderer)));
     }
-  });
-  if (options.enableRowExpansion && props.expandedRowRenderer) {
-    columns.unshift(columnHelper.display(createRowExpansionColumn$1(props.expandedRowRenderer)));
-  }
-  if (options.enableRowSelection) {
-    columns.unshift(columnHelper.display(createRowSelectionColumn$1(!!(options.enableRowDrag && props.onRowDrag), !!props.expandedRowRenderer)));
-  }
-  if (options.enableRowDrag && props.onRowDrag) {
-    columns.unshift(columnHelper.display(createRowDragColumn(props.onRowDrag)));
-  }
-  if ((_props$actionsForRow = props.actionsForRow) !== null && _props$actionsForRow !== void 0 && _props$actionsForRow.length) {
-    columns.push(columnHelper.display(createRowActionsColumn$1()));
-  }
-  if (editing.isEnabled && editing.isEditing) {
-    columns.push(columnHelper.display(createRowEditingActionsColumn()));
-  }
-  return {
-    columns,
-    defaultColumnSizing,
-    defaultColumnVisibility,
-    defaultSorting
-  };
+    if (options.enableRowSelection) {
+      columns.unshift(columnHelper.display(createRowSelectionColumn$1(!!(options.enableRowDrag && props.onRowDrag), !!props.expandedRowRenderer)));
+    }
+    if (options.enableRowDrag && props.onRowDrag) {
+      columns.unshift(columnHelper.display(createRowDragColumn(props.onRowDrag)));
+    }
+    if ((_props$actionsForRow = props.actionsForRow) !== null && _props$actionsForRow !== void 0 && _props$actionsForRow.length) {
+      columns.push(columnHelper.display(createRowActionsColumn$1()));
+    }
+    if (editing.isEnabled && editing.isEditing) {
+      columns.push(columnHelper.display(createRowEditingActionsColumn()));
+    }
+    return {
+      columns,
+      defaultColumnSizing,
+      defaultColumnVisibility,
+      defaultSorting
+    };
+  }, []);
 }
 
 function usePrinting(isEnabled, loadAll, showWarningWhenPrintingLargeDataset = true) {
@@ -18240,6 +18509,9 @@ function useRowActions$1(actionsForRow, actionsForRowLength = ACTIONS_ON_ROW_LEN
 
 const useLocalStorage = (key, initialValue) => {
   const [state, setState] = React__default.useState(() => {
+    if (!key) {
+      return initialValue;
+    }
     try {
       const localStorageValue = localStorage.getItem(key);
       if (typeof localStorageValue !== 'string') {
@@ -18256,6 +18528,9 @@ const useLocalStorage = (key, initialValue) => {
     }
   });
   React__default.useEffect(() => {
+    if (!key) {
+      return;
+    }
     try {
       const serializedState = JSON.stringify(state);
       localStorage.setItem(key, serializedState);
@@ -18264,7 +18539,11 @@ const useLocalStorage = (key, initialValue) => {
       // localStorage can throw. Also JSON.stringify can throw.
     }
   }, [key, state]);
-  const clear = () => localStorage.removeItem(key);
+  const clear = () => {
+    if (key) {
+      localStorage.removeItem(key);
+    }
+  };
   return [state, setState, clear];
 };
 
@@ -18278,7 +18557,10 @@ function useUniqueTableId(tableId) {
 }
 function useSettings(id, defaultSettings = {}, onChangeSettings) {
   const uniqueId = useUniqueTableId(id);
-  const [persistedSettings, setPersistedSettings] = useLocalStorage(uniqueId, defaultSettings);
+  // If the onChangeSettings prop is provided, we intend to handle settings changes externally rather than saving them
+  // to local storage.
+  const key = !onChangeSettings ? uniqueId : undefined;
+  const [persistedSettings, setPersistedSettings] = useLocalStorage(key, defaultSettings);
   return React__default.useMemo(() => {
     if (onChangeSettings) {
       return [defaultSettings, onChangeSettings];
@@ -19245,11 +19527,11 @@ function FilterValue(props) {
     if (((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.dataType) === 'datetime') {
       return /*#__PURE__*/React__default.createElement("div", {
         className: "flex flex-grow items-center gap-2"
-      }, /*#__PURE__*/React__default.createElement(Control$1, {
+      }, /*#__PURE__*/React__default.createElement(Control, {
         column: column,
         onChange: value => handleChange([value, toValue]),
         value: fromValue
-      }), /*#__PURE__*/React__default.createElement(Control$1, {
+      }), /*#__PURE__*/React__default.createElement(Control, {
         column: column,
         onChange: value => handleChange([fromValue, value]),
         value: toValue
@@ -19257,26 +19539,26 @@ function FilterValue(props) {
     }
     return /*#__PURE__*/React__default.createElement("div", {
       className: "flex flex-grow items-center gap-2"
-    }, /*#__PURE__*/React__default.createElement(Control$1, {
+    }, /*#__PURE__*/React__default.createElement(Control, {
       column: column,
       onChange: value => handleChange([isNaN(value) ? undefined : value, toValue]),
       placeholder: "from",
       value: fromValue !== null && fromValue !== void 0 ? fromValue : ''
-    }), /*#__PURE__*/React__default.createElement(Control$1, {
+    }), /*#__PURE__*/React__default.createElement(Control, {
       column: column,
       onChange: value => handleChange([fromValue, isNaN(value) ? undefined : value]),
       placeholder: "to",
       value: toValue !== null && toValue !== void 0 ? toValue : ''
     }));
   }
-  return /*#__PURE__*/React__default.createElement(Control$1, {
+  return /*#__PURE__*/React__default.createElement(Control, {
     comparator: comparator,
     column: column,
     onChange: handleChange,
     value: value
   });
 }
-function Control$1(props) {
+function Control(props) {
   var _column$columnDef$met2, _column$columnDef$met3;
   const {
     column,
@@ -19867,7 +20149,9 @@ function PrintIFrame({
     enableRowDrag: false,
     enableRowDrop: false,
     enableRowSelectionSingle: false,
-    preset: undefined
+    preset: undefined,
+    // The presence of the onChangeSettings prop ensures that settings won't be stored in local storage.
+    onChangeSettings: () => undefined
   };
   // -top-60 -left-60 styles make sure that iframe is added outside of the viewport
   return /*#__PURE__*/React__default.createElement("iframe", {
@@ -19944,7 +20228,6 @@ function PrintButton(props) {
     printWarningDialogVisibility
   } = tableMeta.printing;
   const printTableId = `${tableProps.id}_print`;
-  const printTableLocalStorageKey = useUniqueTableId(printTableId);
   const defaultSettings = React__default.useMemo(() => ({
     columnFreezingIndex: tableMeta.columnFreezing.frozenColumnIndex,
     columnOrder: state.columnOrder,
@@ -19977,9 +20260,6 @@ function PrintButton(props) {
     var _loadingToastRef$curr;
     setIsPrinting(false);
     (_loadingToastRef$curr = loadingToastRef.current) === null || _loadingToastRef$curr === void 0 ? void 0 : _loadingToastRef$curr.close();
-    // Remove print table settings after printing. Doing this will not only remove unwanted localstorage space, but
-    // will also make sure that the table that is getting printed will always have the fresh table settings
-    localStorage.removeItem(printTableLocalStorageKey);
   };
   const handleBeforePrint = () => {
     var _loadingToastRef$curr2;
@@ -20408,10 +20688,12 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   } = useTableRenderStrategy$1(props, table, internalRef);
   const tableMeta = table.options.meta;
   const state = table.getState();
+  const bodyRef = React__default.useRef(null);
   React__default.useEffect(() => {
     const handleKeyDown = event => {
+      var _bodyRef$current;
       // prevent global shortcuts activating while active in other elements, like inputs or buttons
-      if (isEventTriggeredOnInteractiveElement(event.target)) {
+      if (isEventTriggeredOnInteractiveElement(event.target) && !(bodyRef !== null && bodyRef !== void 0 && (_bodyRef$current = bodyRef.current) !== null && _bodyRef$current !== void 0 && _bodyRef$current.contains(event.target))) {
         return;
       }
       tableMeta.hoverState.handleKeyDown(event);
@@ -20424,7 +20706,11 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     return () => {
       document.removeEventListener('keydown', handleKeyDown);
     };
-  }, []);
+  },
+  // 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]);
   const handleBlur = event => {
     tableMeta.editing.handleBlur(event);
   };
@@ -20495,7 +20781,8 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   })))))), table.getRowModel().rows.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(focus.FocusScope, null, /*#__PURE__*/React__default.createElement("div", {
     className: "group/body contents",
     "data-taco": "table2-body",
-    role: "rowgroup"
+    role: "rowgroup",
+    ref: bodyRef
   }, renderBody())), /*#__PURE__*/React__default.createElement("div", {
     className: "border-grey-300 col-span-full -mt-px border-t"
   }), tableMeta.enableFooter ? /*#__PURE__*/React__default.createElement("div", {
@@ -20609,37 +20896,6 @@ Tabs.List = TabList;
 Tabs.Trigger = TabTrigger;
 Tabs.Content = TabContent;
 
-const Textarea = /*#__PURE__*/React.forwardRef(function Textarea(props, ref) {
-  const {
-    defaultValue: _,
-    highlighted,
-    invalid,
-    onKeyDown,
-    ...otherProps
-  } = props;
-  const classNames = cn(getInputClasses(props), 'py-1 min-h-[75px] disabled:resize-none', props.className);
-  // home and end keys only navigate to the start/end of textarea value if the textarea container does not scroll
-  // if it has scroll height then the browser reverts to native scrolling behaviour only
-  // so we manually override it to ensure _our_ desired behaviour remains intact
-  const handleKeyDown = event => {
-    if (event.key === 'Home' || event.key === 'End') {
-      event.preventDefault();
-      const position = event.key === 'End' ? event.currentTarget.value.length : 0;
-      event.currentTarget.setSelectionRange(position, position);
-      event.currentTarget.scrollTop = event.key === 'End' ? event.currentTarget.scrollHeight : 0;
-    }
-    if (onKeyDown) {
-      onKeyDown(event);
-    }
-  };
-  return /*#__PURE__*/React.createElement("textarea", Object.assign({}, otherProps, {
-    className: classNames,
-    "data-taco": "textarea",
-    onKeyDown: handleKeyDown,
-    ref: ref
-  }));
-});
-
 const Tooltip$1 = ({
   continuous,
   index,