@economic/taco 2.15.0 → 2.17.0

package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/DisplayCell.js

@@ -1,25 +1,22 @@
 import React__default from 'react';
 import cn from 'classnames';
-import { RowContext } from '../../rows/RowContext.js';
-import { isCellHighlighted, scrollColumnIntoView } from '../../../util/columns.js';
+import { Highlight } from './Highlight.js';
 
 function DisplayCell(props) {
   const {
     cell,
     className,
     column,
-    getValue,
+    value,
     index,
     row,
     table,
-    tableRef
+    tableRef,
+    highlighted,
+    highlightedAsCurrent
   } = props;
   const columnMeta = React__default.useMemo(() => column.columnDef.meta, []);
   const tableMeta = table.options.meta;
-  const {
-    rowIndex
-  } = React__default.useContext(RowContext);
-  const value = getValue();
   // cells are heavily memoized because performance in our table is critical
   // be careful and selective about props that you pass to the cell
   const memoedProps = React__default.useMemo(() => {
@@ -37,29 +34,9 @@ function DisplayCell(props) {
       tableRef
     };
   }, [row.original, props.children, value, tableMeta.columnFreezing.frozenColumnIndex]);
-  const memoedHighlight = React__default.useMemo(() => {
-    var _tableMeta$search$que;
-    if (!tableMeta.search.isHighlightingEnabled || !columnMeta.enableSearch) {
-      return false;
-    }
-    if ((_tableMeta$search$que = tableMeta.search.query) !== null && _tableMeta$search$que !== void 0 && _tableMeta$search$que.length) {
-      return isCellHighlighted(tableMeta.search.query, value, columnMeta.dataType);
-    }
-    return false;
-  }, [value, tableMeta.search.isHighlightingEnabled, tableMeta.search.excludeUnmatchedResults, tableMeta.search.query]);
-  const memoedHighlightCurrent = React__default.useMemo(() => {
-    if (!tableMeta.search.isHighlightingEnabled || !memoedHighlight || tableMeta.search.currentHighlightColumnIndex === undefined) {
-      return false;
-    }
-    const [currentRowIndex, currentColumnIndex] = tableMeta.search.highlightedColumnIndexes[tableMeta.search.currentHighlightColumnIndex];
-    if (currentRowIndex === rowIndex && currentColumnIndex === index) {
-      return true;
-    }
-    return false;
-  }, [memoedHighlight, tableMeta.search.highlightedColumnIndexes.length, tableMeta.search.currentHighlightColumnIndex]);
   return /*#__PURE__*/React__default.createElement(MemoedDisplayCell, Object.assign({}, memoedProps, {
-    highlighted: memoedHighlight,
-    highlightedAsCurrent: memoedHighlightCurrent
+    highlighted: highlighted,
+    highlightedAsCurrent: highlightedAsCurrent
   }));
 }
 const MemoedDisplayCell = /*#__PURE__*/React__default.memo(function MemoedDisplayCell(props) {
@@ -92,39 +69,14 @@ const MemoedDisplayCell = /*#__PURE__*/React__default.memo(function MemoedDispla
     role: "cell",
     // cells must be focusable (but not included in tabbing - hence -1)
     tabIndex: -1
-  }, highlighted ? /*#__PURE__*/React__default.createElement(Highlight, {
+  }, highlighted ? ( /*#__PURE__*/React__default.createElement(Highlight, {
     className: layoutClassName,
     current: highlightedAsCurrent,
     frozenColumnIndex: frozenColumnIndex,
     index: index,
     tableRef: tableRef
-  }, content) : content);
+  }, content)) : content);
 });
-const Highlight = props => {
-  const {
-    current,
-    frozenColumnIndex,
-    index,
-    tableRef,
-    ...attributes
-  } = props;
-  const ref = React__default.useRef(null);
-  const className = cn('h-full flex [justify-content:inherit] [text-align:inherit]', props.className, {
-    // normal row
-    'bg-blue-200/25': !current,
-    // current row
-    'bg-blue-200/75': current
-  });
-  React__default.useEffect(() => {
-    if (ref.current && current) {
-      scrollColumnIntoView(index, frozenColumnIndex, ref.current, tableRef.current);
-    }
-  }, [current]);
-  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
-    className: className,
-    ref: ref
-  }));
-};
 
 export { DisplayCell };
 //# sourceMappingURL=DisplayCell.js.map

package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/DisplayCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"DisplayCell.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/DisplayCell.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { ColumnMeta, CellContext, TableMeta } from '@tanstack/react-table';\nimport { Table3ColumnAlignment } from '../../../types';\nimport { RowContext } from '../../rows/RowContext';\nimport { isCellHighlighted, scrollColumnIntoView } from '../../../util/columns';\n\nexport type DisplayCellProps<TType = unknown> = CellContext<TType, unknown> & {\n    children?: string | JSX.Element;\n    className?: string;\n};\n\nexport function DisplayCell<TType = unknown>(props: DisplayCellProps<TType>) {\n    const { cell, className, column, getValue, index, row, table, tableRef } = props;\n    const columnMeta = React.useMemo(() => column.columnDef.meta as ColumnMeta<TType, unknown>, []);\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const { rowIndex } = React.useContext(RowContext);\n\n    const value = getValue();\n\n    // cells are heavily memoized because performance in our table is critical\n    // be careful and selective about props that you pass to the cell\n    const memoedProps = React.useMemo(() => {\n        return {\n            align: columnMeta.align,\n            children: (props.children ?? columnMeta.renderer?.(value, row.original) ?? value ?? null) as\n                | JSX.Element\n                | string\n                | null,\n            className: cn(\n                className,\n                typeof columnMeta.className === 'function' ? columnMeta.className(row.original) : columnMeta.className\n            ),\n            data: row.original,\n            debug: table.options.debugAll,\n            enableTruncate: columnMeta.enableTruncate,\n            frozenColumnIndex: tableMeta.columnFreezing.frozenColumnIndex,\n            id: cell.id,\n            index,\n            tableRef,\n        };\n    }, [row.original, props.children, value, tableMeta.columnFreezing.frozenColumnIndex]);\n\n    const memoedHighlight = React.useMemo(() => {\n        if (!tableMeta.search.isHighlightingEnabled || !columnMeta.enableSearch) {\n            return false;\n        }\n\n        if (tableMeta.search.query?.length) {\n            return isCellHighlighted(tableMeta.search.query, value, columnMeta.dataType);\n        }\n\n        return false;\n    }, [value, tableMeta.search.isHighlightingEnabled, tableMeta.search.excludeUnmatchedResults, tableMeta.search.query]);\n\n    const memoedHighlightCurrent = React.useMemo(() => {\n        if (\n            !tableMeta.search.isHighlightingEnabled ||\n            !memoedHighlight ||\n            tableMeta.search.currentHighlightColumnIndex === undefined\n        ) {\n            return false;\n        }\n\n        const [currentRowIndex, currentColumnIndex] =\n            tableMeta.search.highlightedColumnIndexes[tableMeta.search.currentHighlightColumnIndex];\n\n        if (currentRowIndex === rowIndex && currentColumnIndex === index) {\n            return true;\n        }\n\n        return false;\n    }, [memoedHighlight, tableMeta.search.highlightedColumnIndexes.length, tableMeta.search.currentHighlightColumnIndex]);\n\n    return (\n        <MemoedDisplayCell<TType> {...memoedProps} highlighted={memoedHighlight} highlightedAsCurrent={memoedHighlightCurrent} />\n    );\n}\n\n// Memoization\nexport type MemoedDisplayCellProps<TType = unknown> = {\n    align?: Table3ColumnAlignment;\n    children: JSX.Element | string | null;\n    className?: string;\n    data: TType;\n    debug?: boolean;\n    enableTruncate?: boolean;\n    frozenColumnIndex?: number;\n    highlighted: boolean;\n    highlightedAsCurrent: boolean;\n    id: string;\n    index: number;\n    tableRef: React.RefObject<HTMLDivElement>;\n};\n\nconst MemoedDisplayCell = React.memo(function MemoedDisplayCell<TType = unknown>(props: MemoedDisplayCellProps<TType>) {\n    const {\n        align = 'left',\n        children,\n        className: customClassName,\n        debug,\n        enableTruncate,\n        frozenColumnIndex,\n        highlighted,\n        highlightedAsCurrent = false,\n        id,\n        index,\n        tableRef,\n    } = props;\n\n    const layoutClassName = cn(\n        'py-[var(--table3-cell-padding-y)] px-[var(--table3-cell-padding-x)] focus:outline-none break-word hyphens-auto',\n        customClassName\n    );\n\n    const className = highlighted ? undefined : layoutClassName;\n    const content = enableTruncate ? <span className=\"truncate\">{children}</span> : children;\n\n    if (debug) {\n        console.log('cell render', id);\n    }\n\n    return (\n        <div\n            className={className}\n            data-align={align}\n            data-column-index={index}\n            data-highlighted={highlighted}\n            role=\"cell\"\n            // cells must be focusable (but not included in tabbing - hence -1)\n            tabIndex={-1}>\n            {highlighted ? (\n                <Highlight\n                    className={layoutClassName}\n                    current={highlightedAsCurrent}\n                    frozenColumnIndex={frozenColumnIndex}\n                    index={index}\n                    tableRef={tableRef}>\n                    {content}\n                </Highlight>\n            ) : (\n                content\n            )}\n        </div>\n    );\n}) as <TType = unknown>(props: MemoedDisplayCellProps<TType>) => JSX.Element;\n\nconst Highlight = props => {\n    const { current, frozenColumnIndex, index, tableRef, ...attributes } = props;\n    const ref = React.useRef<HTMLDivElement | null>(null);\n    const className = cn('h-full flex [justify-content:inherit] [text-align:inherit]', props.className, {\n        // normal row\n        'bg-blue-200/25': !current,\n        // current row\n        'bg-blue-200/75': current,\n    });\n\n    React.useEffect(() => {\n        if (ref.current && current) {\n            scrollColumnIntoView(index, frozenColumnIndex, ref.current, tableRef.current);\n        }\n    }, [current]);\n\n    return <div {...attributes} className={className} ref={ref} />;\n};\n"],"names":["DisplayCell","props","cell","className","column","getValue","index","row","table","tableRef","columnMeta","React","useMemo","columnDef","meta","tableMeta","options","rowIndex","useContext","RowContext","value","memoedProps","align","children","_ref","_ref2","_props$children","_columnMeta$renderer","renderer","call","original","cn","data","debug","debugAll","enableTruncate","frozenColumnIndex","columnFreezing","id","memoedHighlight","search","isHighlightingEnabled","enableSearch","_tableMeta$search$que","query","length","isCellHighlighted","dataType","excludeUnmatchedResults","memoedHighlightCurrent","currentHighlightColumnIndex","undefined","currentRowIndex","currentColumnIndex","highlightedColumnIndexes","MemoedDisplayCell","highlighted","highlightedAsCurrent","memo","customClassName","layoutClassName","content","console","log","role","tabIndex","Highlight","current","attributes","ref","useRef","useEffect","scrollColumnIntoView"],"mappings":"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"}
+{"version":3,"file":"DisplayCell.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/DisplayCell.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { ColumnMeta, CellContext, TableMeta } from '@tanstack/react-table';\nimport { Table3ColumnAlignment } from '../../../types';\nimport { Highlight } from './Highlight';\n\nexport type DisplayCellProps<TType = unknown> = CellContext<TType, unknown> & {\n    highlighted?: boolean;\n    highlightedAsCurrent?: boolean;\n    children?: string | JSX.Element;\n    className?: string;\n    value?: any;\n};\n\nexport function DisplayCell<TType = unknown>(props: DisplayCellProps<TType>) {\n    const { cell, className, column, value, index, row, table, tableRef, highlighted, highlightedAsCurrent } = props;\n    const columnMeta = React.useMemo(() => column.columnDef.meta as ColumnMeta<TType, unknown>, []);\n    const tableMeta = table.options.meta as TableMeta<TType>;\n\n    // cells are heavily memoized because performance in our table is critical\n    // be careful and selective about props that you pass to the cell\n    const memoedProps = React.useMemo(() => {\n        return {\n            align: columnMeta.align,\n            children: (props.children ?? columnMeta.renderer?.(value, row.original) ?? value ?? null) as\n                | JSX.Element\n                | string\n                | null,\n            className: cn(\n                className,\n                typeof columnMeta.className === 'function' ? columnMeta.className(row.original) : columnMeta.className\n            ),\n            data: row.original,\n            debug: table.options.debugAll,\n            enableTruncate: columnMeta.enableTruncate,\n            frozenColumnIndex: tableMeta.columnFreezing.frozenColumnIndex,\n            id: cell.id,\n            index,\n            tableRef,\n        };\n    }, [row.original, props.children, value, tableMeta.columnFreezing.frozenColumnIndex]);\n\n    return <MemoedDisplayCell<TType> {...memoedProps} highlighted={highlighted} highlightedAsCurrent={highlightedAsCurrent} />;\n}\n\n// Memoization\nexport type MemoedDisplayCellProps<TType = unknown> = {\n    align?: Table3ColumnAlignment;\n    children: JSX.Element | string | null;\n    className?: string;\n    data: TType;\n    debug?: boolean;\n    enableTruncate?: boolean;\n    frozenColumnIndex?: number;\n    highlighted?: boolean;\n    highlightedAsCurrent?: boolean;\n    id: string;\n    index: number;\n    tableRef: React.RefObject<HTMLDivElement>;\n};\n\nconst MemoedDisplayCell = React.memo(function MemoedDisplayCell<TType = unknown>(props: MemoedDisplayCellProps<TType>) {\n    const {\n        align = 'left',\n        children,\n        className: customClassName,\n        debug,\n        enableTruncate,\n        frozenColumnIndex,\n        highlighted,\n        highlightedAsCurrent = false,\n        id,\n        index,\n        tableRef,\n    } = props;\n\n    const layoutClassName = cn(\n        'py-[var(--table3-cell-padding-y)] px-[var(--table3-cell-padding-x)] focus:outline-none break-word hyphens-auto',\n        customClassName\n    );\n\n    const className = highlighted ? undefined : layoutClassName;\n    const content = enableTruncate ? <span className=\"truncate\">{children}</span> : children;\n\n    if (debug) {\n        console.log('cell render', id);\n    }\n\n    return (\n        <div\n            className={className}\n            data-align={align}\n            data-column-index={index}\n            data-highlighted={highlighted}\n            role=\"cell\"\n            // cells must be focusable (but not included in tabbing - hence -1)\n            tabIndex={-1}>\n            {highlighted ? (\n                <Highlight\n                    className={layoutClassName}\n                    current={highlightedAsCurrent}\n                    frozenColumnIndex={frozenColumnIndex}\n                    index={index}\n                    tableRef={tableRef}>\n                    {content}\n                </Highlight>\n            ) : (\n                content\n            )}\n        </div>\n    );\n}) as <TType = unknown>(props: MemoedDisplayCellProps<TType>) => JSX.Element;\n"],"names":["DisplayCell","props","cell","className","column","value","index","row","table","tableRef","highlighted","highlightedAsCurrent","columnMeta","React","useMemo","columnDef","meta","tableMeta","options","memoedProps","align","children","_ref","_ref2","_props$children","_columnMeta$renderer","renderer","call","original","cn","data","debug","debugAll","enableTruncate","frozenColumnIndex","columnFreezing","id","MemoedDisplayCell","memo","customClassName","layoutClassName","undefined","content","console","log","role","tabIndex","Highlight","current"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingCell.js

@@ -1,26 +1,34 @@
 import React__default from 'react';
 import cn from 'classnames';
+import { Field } from '../../../../Field/Field.js';
 import { useRowContext } from '../../rows/RowContext.js';
+import { Highlight } from './Highlight.js';
 import { getCurrentRowCellElement } from '../../../util/columns.js';
 import { globalFilterFn, columnFilterFn } from '../../../util/filtering.js';
-import { EDITING_ACTIONS_WIDTH } from '../internal/EditingActions.js';
 import { Indicator, IndicatorReason } from './Indicator.js';
 import { hasChanged, willRowMoveAfterSorting } from '../../../util/editing.js';
+import { EDITING_ACTIONS_WIDTH } from '../internal/EditingActions.js';
 import { EditingControl } from './EditingControl.js';
 
 function EditingCell(props) {
+  const {
+    cell,
+    table
+  } = props;
   const {
     isHovered
   } = useRowContext();
   // 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;
+  const tableMeta = table.options.meta;
+  const error = tableMeta.validation.getCellError(cell);
   return /*#__PURE__*/React__default.createElement(MemoedEditingCell, Object.assign({}, props, {
+    error: error,
     isHovered: isHovered,
     tableMeta: tableMeta
   }));
 }
 const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditingCell(props) {
-  var _tableMeta$editing$ge, _tableMeta$editing$ro, _rows$currentRowIndex, _column$columnDef$met;
+  var _tableMeta$editing$ge, _tableMeta$editing$ro, _rows$tableMeta$rowAc, _column$columnDef$met;
   const {
     cell,
     column,
@@ -29,8 +37,10 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     table,
     tableRef,
     row,
-    isHovered,
-    tableMeta
+    tableMeta,
+    error,
+    highlighted,
+    highlightedAsCurrent
   } = props;
   const columnMeta = column.columnDef.meta;
   const cellRef = React__default.useRef(null);
@@ -67,31 +77,37 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     }
   };
   const handleBlur = () => {
+    var _tableMeta$editing$ch;
     tableMeta.editing.setDetailModeEditing(false);
+    if ((_tableMeta$editing$ch = tableMeta.editing.changes) !== null && _tableMeta$editing$ch !== void 0 && _tableMeta$editing$ch[cell.row.id]) {
+      tableMeta.validation.validate(cell.row.id, tableMeta.editing.changes[cell.row.id], cell.column.id);
+    }
   };
   // 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 moveReason = ((_tableMeta$editing$ro = tableMeta.editing.rowMoveReason) === null || _tableMeta$editing$ro === void 0 ? void 0 : _tableMeta$editing$ro[cell.column.id]) || null;
   const rows = table.getRowModel().rows;
-  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 isActiveRow = tableMeta.rowActive.rowActiveIndex !== undefined && ((_rows$tableMeta$rowAc = rows[tableMeta.rowActive.rowActiveIndex]) === null || _rows$tableMeta$rowAc === void 0 ? void 0 : _rows$tableMeta$rowAc.id) === row.id;
   const mountNode = React__default.useMemo(() => {
-    if (moveReason) {
+    if (moveReason !== null && isActiveRow && !error) {
       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]);
+  }, [moveReason, isActiveRow, error, cellRef]);
   const removeMoveReason = () => {
-    tableMeta.editing.removeRowMoveReason(cell.column.id);
+    tableMeta.editing.removeRowMoveReason();
   };
   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) {
+    if (!isActiveRow || error) {
+      if (tableMeta.editing.rowMoveReason) {
+        removeMoveReason();
+      }
       return;
     }
     if (hasChanged(getValue(), value)) {
-      const moveReason = getRowMoveReason(table, row.index, row.original, cell, value);
+      const moveReason = getRowMoveReason(table, row.index, row.original, cell, value, tableMeta.search.excludeUnmatchedResults);
       tableMeta.editing.setRowMoveReason({
         [cell.column.id]: moveReason
       });
@@ -99,28 +115,19 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
       removeMoveReason();
     }
     return removeMoveReason;
-  }, [value]);
+  }, [value, tableMeta.rowActive.rowActiveIndex, tableMeta.search.excludeUnmatchedResults, error]);
   const controlRenderer = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control;
   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.
-    'z-[9]': isCurrentRow && controlRenderer === 'textarea'
-  },
-  // component overrides - grayscale for editing hover
-  '[[role="row"][data-current="false"]:hover_&>*]:!grayscale [[role="row"][data-current="false"]:hover_&_.bg-white]:!bg-grey-100', 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, {
-    reason: moveReason,
-    columnName: String(cell.column.columnDef.header),
-    mountNode: mountNode,
-    validationErrors: []
-  }), /*#__PURE__*/React__default.createElement("div", {
-    className: className,
-    "data-align": columnMeta.align,
-    "data-column-index": index,
-    "data-editable": true,
-    role: "cell",
-    ref: cellRef
+    // Textarea control is positioned absolute, when column is in enableTruncate mode, so the cell need to be positioned relative
+    relative: controlRenderer === 'textarea' && columnMeta.enableTruncate
+  }, typeof columnMeta.className === 'function' ? columnMeta.className(row.original) : columnMeta.className);
+  const fieldClassName = cn('!min-h-0 w-full !pb-0', {
+    '!pb-3': !!error
+  });
+  const content = /*#__PURE__*/React__default.createElement(Field, {
+    message: error,
+    invalid: !!error,
+    className: fieldClassName
   }, /*#__PURE__*/React__default.createElement(EditingControl, {
     align: columnMeta.align,
     column: cell.column,
@@ -134,22 +141,46 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     tableRef: tableRef,
     value: value,
     cell: cell,
-    isCurrentRow: isCurrentRow
-  })));
+    error: error,
+    tabIndex: isActiveRow ? 0 : -1,
+    isActiveRow: isActiveRow
+  }));
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, moveReason !== null && mountNode && !error ? ( /*#__PURE__*/React__default.createElement(Indicator, {
+    reason: moveReason,
+    columnName: String(cell.column.columnDef.header),
+    mountNode: mountNode,
+    validationErrors: []
+  })) : null, /*#__PURE__*/React__default.createElement("div", {
+    className: !highlighted ? className : undefined,
+    "data-align": columnMeta.align,
+    "data-column-index": index,
+    role: "cell",
+    "data-editable": true,
+    ref: cellRef,
+    "data-invalid": !!error,
+    "data-highlighted": highlighted
+  }, highlighted ? ( /*#__PURE__*/React__default.createElement(Highlight, {
+    current: highlightedAsCurrent,
+    className: className,
+    frozenColumnIndex: tableMeta.columnFreezing.frozenColumnIndex,
+    index: index,
+    tableRef: tableRef
+  }, content)) : content));
 });
-function getRowMoveReason(table, rowIndex, rowValues, cell, newValue) {
+function getRowMoveReason(table, rowIndex, rowValues, cell, newValue, excludeUnmatchedResults) {
   var _table$getState$sorti;
   let rowMoveReason = null;
   const {
     globalFilter
   } = table.getState();
-  const isFilteredByGlobalFilter = Object.values({
+  const isFilteredByGlobalFilter = excludeUnmatchedResults ? Object.values({
     ...rowValues,
     [cell.id]: newValue
-  }).some(cellValue =>
-  // Global filter can be undefined when there is no text being searched so we pass an empty string to
-  // globalFilterFn as query in that case.
-  globalFilterFn(String(cellValue), globalFilter ? String(globalFilter) : ''));
+  }).some(() => {
+    // Global filter can be undefined when there is no text being searched so we pass an empty string to
+    // globalFilterFn as query in that case.
+    return globalFilterFn(String(newValue), globalFilter ? String(globalFilter) : '');
+  }) : true;
   if (!isFilteredByGlobalFilter) {
     rowMoveReason = IndicatorReason.SEARCH;
   } else if (cell.column.getIsFiltered() && !columnFilterFn(newValue, cell.column.getFilterValue())) {

package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditingCell.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/EditingCell.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport _ from 'lodash';\nimport { TableMeta, CellContext, ColumnMeta, Cell as RTCell, Table as RTTable } from '@tanstack/react-table';\nimport { Indicator, IndicatorReason } from './Indicator';\nimport { columnFilterFn, globalFilterFn } from '../../../util/filtering';\nimport { Table3FilterValue } from '../../../types';\nimport { hasChanged, willRowMoveAfterSorting } from '../../../util/editing';\nimport { getCurrentRowCellElement } from '../../../util/columns';\nimport { EDITING_ACTIONS_WIDTH } from '../internal/EditingActions';\nimport { EditingControl } from './EditingControl';\nimport { useRowContext } from '../../rows/RowContext';\n\nexport type EditingCellProps<TType = unknown> = CellContext<TType, unknown> & {\n    children?: string | JSX.Element;\n};\n\nexport function EditingCell<TType = unknown>(props: EditingCellProps<TType>) {\n    const { isHovered } = useRowContext();\n    // Need to explicitly pass tableMeta, because just passing the table object will not trigger editing change since table object is not mutatable.\n    const tableMeta = props.table.options.meta as TableMeta<TType>;\n    return <MemoedEditingCell<TType> {...props} isHovered={isHovered} tableMeta={tableMeta} />;\n}\n\n// Memoization\nexport type MemoedEditingCellProps<TType = unknown> = EditingCellProps<TType> & {\n    isHovered: boolean;\n    tableMeta: TableMeta<TType>;\n};\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n    const { cell, column, index, getValue, table, tableRef, row, isHovered, tableMeta } = props;\n    const columnMeta = column.columnDef.meta as ColumnMeta<TType, unknown>;\n\n    const cellRef = React.useRef<HTMLDivElement>(null);\n    const controlRef = React.useRef<HTMLElement>(null);\n\n    const handleChange = (value: unknown) => tableMeta.editing.setCellValue(cell, value);\n    const value = tableMeta.editing.getCellValue(cell) ?? getValue();\n\n    const handleFocus = event => {\n        // Check if cell is hidden behind pinned columns or edititng actions, and scroll to it.\n        const frozenColumnIndex = tableMeta.columnFreezing.frozenColumnIndex;\n        const tableElement = tableRef.current;\n\n        if (tableElement && frozenColumnIndex !== undefined && index > frozenColumnIndex) {\n            const lastFrozenColumnElement = getCurrentRowCellElement(frozenColumnIndex, tableElement);\n            const cellRect = cellRef.current?.getBoundingClientRect();\n            const lastFrozenRect = lastFrozenColumnElement?.getBoundingClientRect();\n            const tableRect = tableElement.getBoundingClientRect();\n\n            // Check for pinned columns overlap\n            if (cellRect && lastFrozenRect && cellRect.left < lastFrozenRect.left + lastFrozenRect.width) {\n                const pinnedColumnsWidth = lastFrozenRect.left + lastFrozenRect.width;\n                tableElement.scrollTo(cellRect.left - pinnedColumnsWidth, tableElement.scrollTop);\n                // Check for editing actions overlap\n            } else if (cellRect && tableRect && cellRect.right > tableRect.right - EDITING_ACTIONS_WIDTH) {\n                const spaceBetweenCellAndEditingActions = 10;\n                tableElement.scrollTo(\n                    // Need to take into account if table has been already scrolled.\n                    tableElement.scrollLeft + EDITING_ACTIONS_WIDTH + spaceBetweenCellAndEditingActions,\n                    tableElement.scrollTop\n                );\n            }\n        }\n\n        if (event.target?.select) {\n            requestAnimationFrame(() => {\n                event.target.select();\n            });\n        }\n    };\n\n    const handleBlur = () => {\n        tableMeta.editing.setDetailModeEditing(false);\n    };\n\n    // row move indicator\n    const moveReason = tableMeta.editing.rowMoveReason[cell.column.id] ?? null;\n    const rows = table.getRowModel().rows;\n    const currentRowIndex = tableMeta.currentRow.currentRowIndex;\n    const isCurrentRow = currentRowIndex !== undefined && rows[currentRowIndex]?.id === row.id;\n    const mountNode = React.useMemo(() => {\n        if (moveReason) {\n            return cellRef.current?.parentElement?.firstChild as Element | null;\n        }\n        return null;\n    }, [moveReason, cellRef]);\n\n    const removeMoveReason = () => {\n        tableMeta.editing.removeRowMoveReason(cell.column.id);\n    };\n\n    React.useEffect(() => {\n        // To avoid reseting move reason on another row hover,\n        // we need to check for changes only if value got changed in the current row.\n        if (!isCurrentRow) {\n            return;\n        }\n\n        if (hasChanged(getValue(), value)) {\n            const moveReason = getRowMoveReason(table, row.index, row.original, cell, value);\n            tableMeta.editing.setRowMoveReason({ [cell.column.id]: moveReason });\n        } else {\n            removeMoveReason();\n        }\n        return removeMoveReason;\n    }, [value]);\n\n    const controlRenderer = column.columnDef.meta?.control;\n\n    const className = cn(\n        'py-[calc(var(--table3-cell-padding-y)_-_0.06rem)]',\n        {\n            relative: (isCurrentRow || isHovered) && controlRenderer === 'textarea',\n            // Need to set higher z-index, so that the current row textarea (in expanded state, when positioned absolute) overlaps rows below,\n            // but at the same time it should not overlap the table headers which has z-10.\n            'z-[9]': isCurrentRow && controlRenderer === 'textarea',\n        },\n\n        // component overrides - grayscale for editing hover\n        '[[role=\"row\"][data-current=\"false\"]:hover_&>*]:!grayscale [[role=\"row\"][data-current=\"false\"]:hover_&_.bg-white]:!bg-grey-100',\n        typeof columnMeta.className === 'function' ? columnMeta.className(row.original) : columnMeta.className\n    );\n\n    return (\n        <>\n            {moveReason !== null && mountNode && (\n                <Indicator\n                    reason={moveReason}\n                    columnName={String(cell.column.columnDef.header)}\n                    mountNode={mountNode}\n                    validationErrors={[]}\n                />\n            )}\n            <div\n                className={className}\n                data-align={columnMeta.align}\n                data-column-index={index}\n                data-editable\n                role=\"cell\"\n                ref={cellRef}>\n                <EditingControl\n                    align={columnMeta.align}\n                    column={cell.column}\n                    data={cell.row.original}\n                    initialValue={getValue()}\n                    onBlur={handleBlur}\n                    onFocus={handleFocus}\n                    onChange={handleChange}\n                    ref={controlRef}\n                    table={table}\n                    tableRef={tableRef}\n                    value={value}\n                    cell={cell}\n                    isCurrentRow={isCurrentRow}\n                />\n            </div>\n        </>\n    );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => JSX.Element;\n\nfunction getRowMoveReason<TType>(\n    table: RTTable<any>,\n    rowIndex: number,\n    rowValues: TType,\n    cell: RTCell<any, unknown>,\n    newValue: any\n) {\n    let rowMoveReason: IndicatorReason | null = null;\n    const { globalFilter } = table.getState();\n\n    const isFilteredByGlobalFilter = Object.values<unknown>({ ...rowValues, [cell.id]: newValue }).some(cellValue =>\n        // Global filter can be undefined when there is no text being searched so we pass an empty string to\n        // globalFilterFn as query in that case.\n        globalFilterFn(String(cellValue), globalFilter ? String(globalFilter) : '')\n    );\n\n    if (!isFilteredByGlobalFilter) {\n        rowMoveReason = IndicatorReason.SEARCH;\n    } else if (cell.column.getIsFiltered() && !columnFilterFn(newValue, cell.column.getFilterValue() as Table3FilterValue)) {\n        rowMoveReason = IndicatorReason.FILTER;\n    } else if (\n        !rowMoveReason &&\n        cell.column.getIsSorted() &&\n        willRowMoveAfterSorting(\n            newValue,\n            cell,\n            rowIndex,\n            table.getRowModel().rows,\n            !!table.getState().sorting.find(s => s.id === cell.column.id)?.desc\n        )\n    ) {\n        rowMoveReason = IndicatorReason.SORTING;\n    }\n\n    return rowMoveReason;\n}\n"],"names":["EditingCell","props","isHovered","useRowContext","tableMeta","table","options","meta","React","MemoedEditingCell","memo","cell","column","index","getValue","tableRef","row","columnMeta","columnDef","cellRef","useRef","controlRef","handleChange","value","editing","setCellValue","_tableMeta$editing$ge","getCellValue","handleFocus","event","frozenColumnIndex","columnFreezing","tableElement","current","undefined","_cellRef$current","lastFrozenColumnElement","getCurrentRowCellElement","cellRect","getBoundingClientRect","lastFrozenRect","tableRect","left","width","pinnedColumnsWidth","scrollTo","scrollTop","right","EDITING_ACTIONS_WIDTH","spaceBetweenCellAndEditingActions","scrollLeft","_event$target","target","select","requestAnimationFrame","handleBlur","setDetailModeEditing","moveReason","_tableMeta$editing$ro","rowMoveReason","id","rows","getRowModel","currentRowIndex","currentRow","isCurrentRow","_rows$currentRowIndex","mountNode","useMemo","_cellRef$current2","_cellRef$current2$par","parentElement","firstChild","removeMoveReason","removeRowMoveReason","useEffect","hasChanged","getRowMoveReason","original","setRowMoveReason","controlRenderer","_column$columnDef$met","control","className","cn","relative","Indicator","reason","columnName","String","header","validationErrors","align","role","ref","EditingControl","data","initialValue","onBlur","onFocus","onChange","rowIndex","rowValues","newValue","globalFilter","getState","isFilteredByGlobalFilter","Object","values","some","cellValue","globalFilterFn","IndicatorReason","SEARCH","getIsFiltered","columnFilterFn","getFilterValue","FILTER","getIsSorted","willRowMoveAfterSorting","_table$getState$sorti","sorting","find","s","desc","SORTING"],"mappings":"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"}
+{"version":3,"file":"EditingCell.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/EditingCell.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport _ from 'lodash';\nimport { TableMeta, CellContext, ColumnMeta, Cell as RTCell, Table as RTTable } from '@tanstack/react-table';\nimport { Indicator, IndicatorReason } from './Indicator';\nimport { columnFilterFn, globalFilterFn } from '../../../util/filtering';\nimport { Table3ColumnControlRenderer, Table3FilterValue } from '../../../types';\nimport { hasChanged, willRowMoveAfterSorting } from '../../../util/editing';\nimport { getCurrentRowCellElement } from '../../../util/columns';\nimport { EDITING_ACTIONS_WIDTH } from '../internal/EditingActions';\nimport { EditingControl } from './EditingControl';\nimport { useRowContext } from '../../rows/RowContext';\nimport { Field } from '../../../../Field/Field';\nimport { Highlight } from './Highlight';\n\nexport type EditingCellProps<TType = unknown> = CellContext<TType, unknown> & {\n    highlighted?: boolean;\n    highlightedAsCurrent?: boolean;\n    children?: string | JSX.Element;\n};\n\nexport function EditingCell<TType = unknown>(props: EditingCellProps<TType>) {\n    const { cell, table } = props;\n    const { isHovered } = useRowContext();\n    // Need to explicitly pass tableMeta, because just passing the table object will not trigger editing change since table object is not mutatable.\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const error = tableMeta.validation.getCellError(cell);\n    return <MemoedEditingCell<TType> {...props} error={error} isHovered={isHovered} tableMeta={tableMeta} />;\n}\n\n// Memoization\nexport type MemoedEditingCellProps<TType = unknown> = EditingCellProps<TType> & {\n    isHovered: boolean;\n    tableMeta: TableMeta<TType>;\n    error?: string;\n};\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n    const { cell, column, index, getValue, table, tableRef, row, tableMeta, error, highlighted, highlightedAsCurrent } = props;\n\n    const columnMeta = column.columnDef.meta as ColumnMeta<TType, unknown>;\n\n    const cellRef = React.useRef<HTMLDivElement>(null);\n    const controlRef = React.useRef<HTMLElement>(null);\n\n    const handleChange = (value: unknown) => tableMeta.editing.setCellValue(cell, value);\n    const value = tableMeta.editing.getCellValue(cell) ?? getValue();\n\n    const handleFocus = event => {\n        // Check if cell is hidden behind pinned columns or edititng actions, and scroll to it.\n        const frozenColumnIndex = tableMeta.columnFreezing.frozenColumnIndex;\n        const tableElement = tableRef.current;\n\n        if (tableElement && frozenColumnIndex !== undefined && index > frozenColumnIndex) {\n            const lastFrozenColumnElement = getCurrentRowCellElement(frozenColumnIndex, tableElement);\n            const cellRect = cellRef.current?.getBoundingClientRect();\n            const lastFrozenRect = lastFrozenColumnElement?.getBoundingClientRect();\n            const tableRect = tableElement.getBoundingClientRect();\n\n            // Check for pinned columns overlap\n            if (cellRect && lastFrozenRect && cellRect.left < lastFrozenRect.left + lastFrozenRect.width) {\n                const pinnedColumnsWidth = lastFrozenRect.left + lastFrozenRect.width;\n                tableElement.scrollTo(cellRect.left - pinnedColumnsWidth, tableElement.scrollTop);\n                // Check for editing actions overlap\n            } else if (cellRect && tableRect && cellRect.right > tableRect.right - EDITING_ACTIONS_WIDTH) {\n                const spaceBetweenCellAndEditingActions = 10;\n                tableElement.scrollTo(\n                    // Need to take into account if table has been already scrolled.\n                    tableElement.scrollLeft + EDITING_ACTIONS_WIDTH + spaceBetweenCellAndEditingActions,\n                    tableElement.scrollTop\n                );\n            }\n        }\n\n        if (event.target?.select) {\n            requestAnimationFrame(() => {\n                event.target.select();\n            });\n        }\n    };\n\n    const handleBlur = () => {\n        tableMeta.editing.setDetailModeEditing(false);\n        if (tableMeta.editing.changes?.[cell.row.id]) {\n            tableMeta.validation.validate(cell.row.id, tableMeta.editing.changes[cell.row.id] as TType, cell.column.id);\n        }\n    };\n\n    // row move indicator\n    const moveReason = tableMeta.editing.rowMoveReason?.[cell.column.id] || null;\n    const rows = table.getRowModel().rows;\n    const isActiveRow =\n        tableMeta.rowActive.rowActiveIndex !== undefined && rows[tableMeta.rowActive.rowActiveIndex]?.id === row.id;\n    const mountNode = React.useMemo(() => {\n        if (moveReason !== null && isActiveRow && !error) {\n            return cellRef.current?.parentElement?.firstChild as Element | null;\n        }\n        return null;\n    }, [moveReason, isActiveRow, error, cellRef]);\n\n    const removeMoveReason = () => {\n        tableMeta.editing.removeRowMoveReason();\n    };\n\n    React.useEffect(() => {\n        // To avoid reseting move reason on another row hover,\n        // we need to check for changes only if value got changed in the current row.\n        if (!isActiveRow || error) {\n            if (tableMeta.editing.rowMoveReason) {\n                removeMoveReason();\n            }\n            return;\n        }\n\n        if (hasChanged(getValue(), value)) {\n            const moveReason = getRowMoveReason(\n                table,\n                row.index,\n                row.original,\n                cell,\n                value,\n                tableMeta.search.excludeUnmatchedResults\n            );\n            tableMeta.editing.setRowMoveReason({ [cell.column.id]: moveReason });\n        } else {\n            removeMoveReason();\n        }\n        return removeMoveReason;\n    }, [value, tableMeta.rowActive.rowActiveIndex, tableMeta.search.excludeUnmatchedResults, error]);\n\n    const controlRenderer = column.columnDef.meta?.control as Table3ColumnControlRenderer;\n\n    const className = cn(\n        'py-[calc(var(--table3-cell-padding-y)_-_0.06rem)]',\n        {\n            // Textarea control is positioned absolute, when column is in enableTruncate mode, so the cell need to be positioned relative\n            relative: controlRenderer === 'textarea' && columnMeta.enableTruncate,\n        },\n        typeof columnMeta.className === 'function' ? columnMeta.className(row.original) : columnMeta.className\n    );\n\n    const fieldClassName = cn('!min-h-0 w-full !pb-0', {\n        '!pb-3': !!error,\n    });\n\n    const content = (\n        <Field message={error} invalid={!!error} className={fieldClassName}>\n            <EditingControl\n                align={columnMeta.align}\n                column={cell.column}\n                data={cell.row.original}\n                initialValue={getValue()}\n                onBlur={handleBlur}\n                onFocus={handleFocus}\n                onChange={handleChange}\n                ref={controlRef}\n                table={table}\n                tableRef={tableRef}\n                value={value}\n                cell={cell}\n                error={error}\n                tabIndex={isActiveRow ? 0 : -1}\n                isActiveRow={isActiveRow}\n            />\n        </Field>\n    );\n\n    return (\n        <>\n            {moveReason !== null && mountNode && !error ? (\n                <Indicator\n                    reason={moveReason}\n                    columnName={String(cell.column.columnDef.header)}\n                    mountNode={mountNode}\n                    validationErrors={[]}\n                />\n            ) : null}\n            <div\n                className={!highlighted ? className : undefined}\n                data-align={columnMeta.align}\n                data-column-index={index}\n                role=\"cell\"\n                data-editable\n                ref={cellRef}\n                data-invalid={!!error}\n                data-highlighted={highlighted}>\n                {highlighted ? (\n                    <Highlight\n                        current={highlightedAsCurrent}\n                        className={className}\n                        frozenColumnIndex={tableMeta.columnFreezing.frozenColumnIndex}\n                        index={index}\n                        tableRef={tableRef}>\n                        {content}\n                    </Highlight>\n                ) : (\n                    content\n                )}\n            </div>\n        </>\n    );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => JSX.Element;\n\nfunction getRowMoveReason<TType>(\n    table: RTTable<any>,\n    rowIndex: number,\n    rowValues: TType,\n    cell: RTCell<any, unknown>,\n    newValue: any,\n    excludeUnmatchedResults: boolean\n) {\n    let rowMoveReason: IndicatorReason | null = null;\n    const { globalFilter } = table.getState();\n\n    const isFilteredByGlobalFilter = excludeUnmatchedResults\n        ? Object.values<unknown>({ ...rowValues, [cell.id]: newValue }).some(() => {\n              // Global filter can be undefined when there is no text being searched so we pass an empty string to\n              // globalFilterFn as query in that case.\n              return globalFilterFn(String(newValue), globalFilter ? String(globalFilter) : '');\n          })\n        : true;\n\n    if (!isFilteredByGlobalFilter) {\n        rowMoveReason = IndicatorReason.SEARCH;\n    } else if (cell.column.getIsFiltered() && !columnFilterFn(newValue, cell.column.getFilterValue() as Table3FilterValue)) {\n        rowMoveReason = IndicatorReason.FILTER;\n    } else if (\n        !rowMoveReason &&\n        cell.column.getIsSorted() &&\n        willRowMoveAfterSorting(\n            newValue,\n            cell,\n            rowIndex,\n            table.getRowModel().rows,\n            !!table.getState().sorting.find(s => s.id === cell.column.id)?.desc\n        )\n    ) {\n        rowMoveReason = IndicatorReason.SORTING;\n    }\n\n    return rowMoveReason;\n}\n"],"names":["EditingCell","props","cell","table","isHovered","useRowContext","tableMeta","options","meta","error","validation","getCellError","React","MemoedEditingCell","memo","column","index","getValue","tableRef","row","highlighted","highlightedAsCurrent","columnMeta","columnDef","cellRef","useRef","controlRef","handleChange","value","editing","setCellValue","_tableMeta$editing$ge","getCellValue","handleFocus","event","frozenColumnIndex","columnFreezing","tableElement","current","undefined","_cellRef$current","lastFrozenColumnElement","getCurrentRowCellElement","cellRect","getBoundingClientRect","lastFrozenRect","tableRect","left","width","pinnedColumnsWidth","scrollTo","scrollTop","right","EDITING_ACTIONS_WIDTH","spaceBetweenCellAndEditingActions","scrollLeft","_event$target","target","select","requestAnimationFrame","handleBlur","setDetailModeEditing","_tableMeta$editing$ch","changes","id","validate","moveReason","_tableMeta$editing$ro","rowMoveReason","rows","getRowModel","isActiveRow","rowActive","rowActiveIndex","_rows$tableMeta$rowAc","mountNode","useMemo","_cellRef$current2","_cellRef$current2$par","parentElement","firstChild","removeMoveReason","removeRowMoveReason","useEffect","hasChanged","getRowMoveReason","original","search","excludeUnmatchedResults","setRowMoveReason","controlRenderer","_column$columnDef$met","control","className","cn","relative","enableTruncate","fieldClassName","content","Field","message","invalid","EditingControl","align","data","initialValue","onBlur","onFocus","onChange","ref","tabIndex","Indicator","reason","columnName","String","header","validationErrors","role","Highlight","rowIndex","rowValues","newValue","globalFilter","getState","isFilteredByGlobalFilter","Object","values","some","globalFilterFn","IndicatorReason","SEARCH","getIsFiltered","columnFilterFn","getFilterValue","FILTER","getIsSorted","willRowMoveAfterSorting","_table$getState$sorti","sorting","find","s","desc","SORTING"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/columns/cell/EditingControl.js

@@ -6,9 +6,10 @@ import { Input } from '../../../../Input/Input.js';
 import { deselectInputValue } from '../../../../../utils/input.js';
 import { Datepicker } from '../../../../Datepicker/Datepicker.js';
 import { Switch } from '../../../../Switch/Switch.js';
+import { getTableLeftScrollDistance } from '../../../util/scrolling.js';
 import { getInputAppearanceClassnames, getCellAlignmentClasses } from '../styles.js';
-import _ from 'lodash-es';
 import { hasChanged } from '../../../util/editing.js';
+import _ from 'lodash-es';
 import { TextareaControl } from './controls/TextareaControl.js';
 
 const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(props, externalRef) {
@@ -23,7 +24,8 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
     tableRef,
     value,
     cell,
-    isCurrentRow,
+    error,
+    isActiveRow,
     ...attributes
   } = props;
   const tableMeta = table.options.meta;
@@ -32,6 +34,8 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
   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));
+  const originalRow = cell.row.original;
+  // Revert to initial value if escape was pressed
   const handleKeyDown = event => {
     // For some reason keydown event handler is not propogated to the table when input or other control element is
     // in focus so we need to check for shortcut that toggles the editing.
@@ -91,7 +95,7 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
       return;
     }
   };
-  const isNumber = typeof value === 'number';
+  const isNumber = (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.dataType) === 'number';
   const handleInputKeyDown = event => {
     handleKeyDown(event);
     // Switching to editing mode, when key pressed any alphabetical character or number
@@ -99,19 +103,30 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
       tableMeta.editing.setDetailModeEditing(true);
     }
   };
-  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.
-    const originalDate = cell.row.original[cell.column.id];
-    const changedDate = event.detail;
-    if (hasChanged(originalDate, changedDate)) {
-      handleChange(changedDate);
+  const handleFocus = event => {
+    var _event$target;
+    const {
+      frozenColumnIndex: externalFrozenColumnIndex = -1,
+      frozenInternalColumnCount = 0
+    } = tableMeta.columnFreezing;
+    const tableElement = tableMeta.tableRef.current;
+    const frozenColumnIndex = externalFrozenColumnIndex > -1 ? externalFrozenColumnIndex + frozenInternalColumnCount : frozenInternalColumnCount - 1;
+    const cell = (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.closest('[role="cell"]');
+    if (!tableElement || !cell) {
+      return;
+    }
+    const isEditing = true;
+    const leftScrollDistance = getTableLeftScrollDistance(tableElement, cell, frozenColumnIndex, isEditing);
+    if (leftScrollDistance !== null) {
+      tableElement.scrollLeft = leftScrollDistance;
     }
   };
   if (typeof controlRenderer === 'function') {
     return controlRenderer({
       ...attributes,
-      ref: ref,
+      invalid: !!error,
+      onFocus: handleFocus,
+      ref: refCallback,
       setValue: nextValue => {
         if (nextValue !== value) {
           handleChange(nextValue);
@@ -120,19 +135,23 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
       value
     }, data);
   } else if (controlRenderer === 'datepicker') {
-    const handleDatepickerKeyDown = event => {
-      handleKeyDown(event);
-      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.
+      const originalDate = originalRow[cell.column.id];
+      const changedDate = event.detail;
+      if (hasChanged(originalDate, changedDate)) {
+        handleChange(changedDate);
       }
     };
     return /*#__PURE__*/React__default.createElement(Datepicker, Object.assign({}, attributes, {
+      invalid: !!error,
       className: cn({
         '[&_input]:!yt-focus-dark': isCellInDetailMode
       }),
       onChange: handleDatepickerChange,
-      onKeyDown: handleDatepickerKeyDown,
+      onFocus: handleFocus,
+      onKeyDown: handleInputKeyDown,
       ref: refCallback,
       value: value
     }));
@@ -140,23 +159,28 @@ const EditingControl = /*#__PURE__*/React__default.forwardRef(function Control(p
     return /*#__PURE__*/React__default.createElement(Switch, Object.assign({}, attributes, {
       checked: Boolean(value),
       onChange: handleChange,
+      onFocus: handleFocus,
       ref: refCallback
     }));
   } else if (controlRenderer === 'textarea') {
     return /*#__PURE__*/React__default.createElement(TextareaControl, Object.assign({}, props, {
+      invalid: !!error,
       isCellInDetailMode: isCellInDetailMode,
+      onFocus: handleFocus,
       onKeyDown: handleInputKeyDown,
       ref: refCallback,
       fontSize: tableMeta.fontSize.size
     }));
   }
   return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, attributes, {
+    invalid: !!error,
     className: cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {
       '!yt-focus-dark': isCellInDetailMode
     }),
     onChange: event => {
       handleChange(event.target.value);
     },
+    onFocus: handleFocus,
     onKeyDown: handleInputKeyDown,
     ref: refCallback,
     type: isNumber ? 'number' : undefined,