@economic/taco 2.6.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",
@@ -3201,6 +3216,7 @@ const icons = {
   'arrow-up': ArrowUp,
   'attach-auto': AttachAuto,
   'attach-cancel': AttachCancel,
+  'attach-warning': AttachWarning,
   attach: Attach,
   'autotext-insert': AutotextInsert,
   autotext: Autotext,
@@ -9953,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,
@@ -16294,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);
@@ -16340,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;
@@ -16390,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,
@@ -17529,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,
@@ -17654,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) {
@@ -17666,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) {
@@ -17689,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;
     }
@@ -17707,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.
@@ -17719,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);
@@ -17741,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') {
@@ -17749,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
@@ -17769,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;
@@ -17910,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 && hasExpansion ? 22 : 40;
+  const size = hasDrag && hasExpansion ? 22 : 4;
   return {
     id: COLUMN_ID$2,
     header: Header$3,
@@ -18209,7 +18380,7 @@ function useConvertChildrenToColumns(props, options, editing) {
       defaultColumnVisibility,
       defaultSorting
     };
-  }, [props.children]);
+  }, []);
 }
 
 function usePrinting(isEnabled, loadAll, showWarningWhenPrintingLargeDataset = true) {
@@ -19356,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
@@ -19368,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,
@@ -20517,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);
@@ -20533,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);
   };
@@ -20604,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", {
@@ -20718,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,