@economic/taco 2.15.0 → 2.16.0

package/dist/esm/packages/taco/src/components/Table3/components/alert/ErrorAlert.js

@@ -0,0 +1,154 @@
+import React__default from 'react';
+import { Alert } from '../../../Alert/Alert.js';
+import { useLocalization } from '../../../Provider/Localization.js';
+import { Button } from '../../../Button/Button.js';
+import { Dialog } from '../../../Dialog/Dialog.js';
+import { Group } from '../../../Group/Group.js';
+import { focusableSelector } from '../../util/editing.js';
+import { lastCellIndex } from '../rows/Row.js';
+
+function ErrorAlert(props) {
+  var _column$columnDef$met;
+  const {
+    table,
+    tableRef,
+    scrollToIndex,
+    rowIdentifier
+  } = props;
+  const tableMeta = table.options.meta;
+  const errors = tableMeta.validation.errors;
+  const errorsRowIds = errors ? Object.keys(errors) : [];
+  const rows = table.getRowModel().rows;
+  const coreRows = table.getCoreRowModel().rows;
+  const {
+    texts
+  } = useLocalization();
+  const [resetFiltersConfirmationOpen, setResetFiltersConfirmationOpen] = React__default.useState(false);
+  const [internalRowId, setInternalRowId] = React__default.useState(null);
+  const [internalRowIndex, setInternalRowIndex] = React__default.useState(null);
+  const [isFiltersReset, setIsFiltersReset] = React__default.useState(false);
+  const columns = table.getAllFlatColumns();
+  const column = columns.find(column => column.id === rowIdentifier);
+  const rowIdentifierHeader = column === null || column === void 0 ? void 0 : (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.header;
+  // Find and focus first invalid cell
+  const navigateToFirstInvalidCell = () => {
+    var _tableRef$current;
+    const firstInvalidCell = (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.querySelector('[role="row"][data-current="true"] [role="cell"][data-invalid="true"]');
+    const firstInvalidElement = firstInvalidCell === null || firstInvalidCell === void 0 ? void 0 : firstInvalidCell.querySelector(focusableSelector);
+    if (firstInvalidElement) {
+      firstInvalidElement === null || firstInvalidElement === void 0 ? void 0 : firstInvalidElement.focus();
+      lastCellIndex.value = firstInvalidCell === null || firstInvalidCell === void 0 ? void 0 : firstInvalidCell.getAttribute('data-column-index');
+    }
+  };
+  // Navigate to row and focus first invalid cell
+  const navigateToRow = rowIndex => {
+    tableMeta.currentRow.setCurrentRowIndex(rowIndex);
+    scrollToIndex(rowIndex, {
+      align: 'center'
+    });
+    lastCellIndex.value = undefined;
+    // Need to request animation frame here, because newly selected row is not rendered yet.
+    requestAnimationFrame(() => {
+      navigateToFirstInvalidCell();
+    });
+  };
+  // When internal row index is changed after click on row link, we should navigate to the row.
+  React__default.useEffect(() => {
+    if (internalRowIndex !== null && internalRowIndex >= 0) {
+      navigateToRow(internalRowIndex);
+    }
+  }, [internalRowIndex]);
+  // When filters are reset, we're able to get the real row index by rowId
+  React__default.useEffect(() => {
+    if (isFiltersReset) {
+      const rowIndex = rows.findIndex(row => row.id === internalRowId);
+      if (rowIndex === -1) {
+        return;
+      }
+      setInternalRowIndex(rowIndex);
+    }
+  }, [isFiltersReset]);
+  const onRowNumberClick = React__default.useCallback(rowId => {
+    // When row is hidden due filtering it will not be present in rows (but it still will be present in coreRows)
+    const foundIndex = rows.findIndex(row => row.id === rowId);
+    if (foundIndex === -1) {
+      setIsFiltersReset(false);
+      setResetFiltersConfirmationOpen(true);
+      // Since row indexes changed due filtering, we need to save row id, so that we can find it when filters will be reset
+      setInternalRowId(rowId);
+      return;
+    }
+    // In cases when user clicked on a row link multiple times we still need to navigate to the row, and focus the cell,
+    // because row/cell will loose focus on next click, but row index will not change.
+    if (foundIndex === internalRowIndex) {
+      navigateToRow(foundIndex);
+    } else {
+      setInternalRowIndex(foundIndex);
+    }
+  }, [rows, internalRowIndex]);
+  const onResetFiltersConfirm = () => {
+    setIsFiltersReset(true);
+  };
+  // Getting the row from core rows (ignoring search and filtering)
+  const getCoreRow = React__default.useCallback(rowId => coreRows.find(coreRow => coreRow.id === rowId), [coreRows]);
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "mb-4"
+  }, errorsRowIds.length ? /*#__PURE__*/React__default.createElement(Alert, {
+    state: "error",
+    className: "mb-1"
+  }, /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("b", null, errorsRowIds.length, " ", texts.table3.validation.alert.unsavedEntries(errorsRowIds.length)), ' '), rowIdentifierHeader || texts.table3.validation.index, ' ', errorsRowIds.map((rowId, index) => {
+    const coreRow = getCoreRow(rowId);
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button, {
+      key: rowId,
+      className: "!min-h-[theme(spacing.2)] !min-w-[theme(spacing.2)] !px-1",
+      appearance: "discrete",
+      onClick: () => {
+        onRowNumberClick(rowId);
+      }
+    }, rowIdentifier ? coreRow === null || coreRow === void 0 ? void 0 : coreRow.original[rowIdentifier] : coreRow === null || coreRow === void 0 ? void 0 : coreRow.index), /*#__PURE__*/React__default.createElement("span", {
+      key: `${rowId}_comma`
+    }, index < errorsRowIds.length - 1 ? ',' : ''));
+  }), texts.table3.validation.alert.incompleteAndHavntBeenSaved(errorsRowIds.length)) : null, /*#__PURE__*/React__default.createElement(FilterResetDialog, {
+    open: resetFiltersConfirmationOpen,
+    onClose: () => {
+      setResetFiltersConfirmationOpen(false);
+    },
+    onConfirm: onResetFiltersConfirm,
+    table: table
+  }));
+}
+function FilterResetDialog(props) {
+  const {
+    open,
+    onClose,
+    onConfirm,
+    table
+  } = props;
+  const tableMeta = table.options.meta;
+  const {
+    texts
+  } = useLocalization();
+  const resetFilters = React__default.useCallback(() => {
+    tableMeta.search.setQuery('');
+    table.resetGlobalFilter();
+    table.resetColumnFilters();
+  }, [table, tableMeta.search]);
+  const handleConfirmClick = () => {
+    resetFilters();
+    onConfirm();
+    onClose();
+  };
+  return /*#__PURE__*/React__default.createElement(Dialog, {
+    open: open,
+    onClose: onClose,
+    size: "xs"
+  }, /*#__PURE__*/React__default.createElement(Dialog.Content, {
+    "aria-label": "Create a new account"
+  }, /*#__PURE__*/React__default.createElement(Dialog.Title, null, texts.table3.validation.resetFiltersDialog.title), /*#__PURE__*/React__default.createElement("p", null, texts.table3.validation.resetFiltersDialog.description), /*#__PURE__*/React__default.createElement(Dialog.Footer, null, /*#__PURE__*/React__default.createElement(Group, null, /*#__PURE__*/React__default.createElement(Dialog.Close, null, /*#__PURE__*/React__default.createElement(Button, null, texts.table3.validation.resetFiltersDialog.cancel)), /*#__PURE__*/React__default.createElement(Button, {
+    appearance: "primary",
+    onClick: handleConfirmClick
+  }, texts.table3.validation.resetFiltersDialog.confirm)))));
+}
+
+export { ErrorAlert };
+//# sourceMappingURL=ErrorAlert.js.map

package/dist/esm/packages/taco/src/components/Table3/components/alert/ErrorAlert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ErrorAlert.js","sources":["../../../../../../../../../src/components/Table3/components/alert/ErrorAlert.tsx"],"sourcesContent":["import { Table as RTable, TableMeta } from '@tanstack/react-table';\nimport { TableStrategy } from '../../types';\nimport React from 'react';\nimport { Alert } from '../../../Alert/Alert';\nimport { Button } from '../../../Button/Button';\nimport { useLocalization } from '../../../Provider/Localization';\nimport { focusableSelector } from '../../util/editing';\nimport { lastCellIndex } from '../rows/Row';\nimport { Dialog } from '../../../Dialog/Dialog';\nimport { Group } from '../../../Group/Group';\n\nexport type ErrorAlertProps<TType = unknown> = {\n    table: RTable<TType>;\n    tableRef: React.RefObject<HTMLDivElement>;\n    scrollToIndex: TableStrategy['scrollToIndex'];\n    rowIdentifier?: string;\n};\n\nexport function ErrorAlert<TType = unknown>(props: ErrorAlertProps<TType>) {\n    const { table, tableRef, scrollToIndex, rowIdentifier } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const errors = tableMeta.validation.errors;\n    const errorsRowIds = errors ? Object.keys(errors) : [];\n    const rows = table.getRowModel().rows;\n    const coreRows = table.getCoreRowModel().rows;\n    const { texts } = useLocalization();\n    const [resetFiltersConfirmationOpen, setResetFiltersConfirmationOpen] = React.useState(false);\n    const [internalRowId, setInternalRowId] = React.useState<string | null>(null);\n    const [internalRowIndex, setInternalRowIndex] = React.useState<number | null>(null);\n    const [isFiltersReset, setIsFiltersReset] = React.useState(false);\n    const columns = table.getAllFlatColumns();\n    const column = columns.find(column => column.id === rowIdentifier);\n    const rowIdentifierHeader = column?.columnDef.meta?.header;\n\n    // Find and focus first invalid cell\n    const navigateToFirstInvalidCell = () => {\n        const firstInvalidCell = tableRef.current?.querySelector(\n            '[role=\"row\"][data-current=\"true\"] [role=\"cell\"][data-invalid=\"true\"]'\n        );\n        const firstInvalidElement = firstInvalidCell?.querySelector(focusableSelector);\n\n        if (firstInvalidElement) {\n            (firstInvalidElement as HTMLElement)?.focus();\n            lastCellIndex.value = firstInvalidCell?.getAttribute('data-column-index');\n        }\n    };\n\n    // Navigate to row and focus first invalid cell\n    const navigateToRow = rowIndex => {\n        tableMeta.currentRow.setCurrentRowIndex(rowIndex);\n        scrollToIndex(rowIndex, { align: 'center' });\n        lastCellIndex.value = undefined;\n\n        // Need to request animation frame here, because newly selected row is not rendered yet.\n        requestAnimationFrame(() => {\n            navigateToFirstInvalidCell();\n        });\n    };\n\n    // When internal row index is changed after click on row link, we should navigate to the row.\n    React.useEffect(() => {\n        if (internalRowIndex !== null && internalRowIndex >= 0) {\n            navigateToRow(internalRowIndex);\n        }\n    }, [internalRowIndex]);\n\n    // When filters are reset, we're able to get the real row index by rowId\n    React.useEffect(() => {\n        if (isFiltersReset) {\n            const rowIndex = rows.findIndex(row => row.id === internalRowId);\n            if (rowIndex === -1) {\n                return;\n            }\n            setInternalRowIndex(rowIndex);\n        }\n    }, [isFiltersReset]);\n\n    const onRowNumberClick = React.useCallback(\n        (rowId: string) => {\n            // When row is hidden due filtering it will not be present in rows (but it still will be present in coreRows)\n            const foundIndex = rows.findIndex(row => row.id === rowId);\n            if (foundIndex === -1) {\n                setIsFiltersReset(false);\n                setResetFiltersConfirmationOpen(true);\n\n                // Since row indexes changed due filtering, we need to save row id, so that we can find it when filters will be reset\n                setInternalRowId(rowId);\n                return;\n            }\n\n            // In cases when user clicked on a row link multiple times we still need to navigate to the row, and focus the cell,\n            // because row/cell will loose focus on next click, but row index will not change.\n            if (foundIndex === internalRowIndex) {\n                navigateToRow(foundIndex);\n            } else {\n                setInternalRowIndex(foundIndex);\n            }\n        },\n        [rows, internalRowIndex]\n    );\n\n    const onResetFiltersConfirm = () => {\n        setIsFiltersReset(true);\n    };\n\n    // Getting the row from core rows (ignoring search and filtering)\n    const getCoreRow = React.useCallback((rowId: string) => coreRows.find(coreRow => coreRow.id === rowId), [coreRows]);\n\n    return (\n        <div className=\"mb-4\">\n            {errorsRowIds.length ? (\n                <Alert state=\"error\" className=\"mb-1\">\n                    <>\n                        <b>\n                            {errorsRowIds.length} {texts.table3.validation.alert.unsavedEntries(errorsRowIds.length)}\n                        </b>{' '}\n                    </>\n                    {rowIdentifierHeader || texts.table3.validation.index}{' '}\n                    {errorsRowIds.map((rowId: string, index) => {\n                        const coreRow = getCoreRow(rowId);\n                        return (\n                            <>\n                                <Button\n                                    key={rowId}\n                                    className=\"!min-h-[theme(spacing.2)] !min-w-[theme(spacing.2)] !px-1\"\n                                    appearance=\"discrete\"\n                                    onClick={() => {\n                                        onRowNumberClick(rowId);\n                                    }}>\n                                    {/* Getting row from core rows, because 'table.getRow' will fail if row is hidden due filtering */}\n                                    {rowIdentifier ? coreRow?.original[rowIdentifier] : coreRow?.index}\n                                </Button>\n                                <span key={`${rowId}_comma`}>{index < errorsRowIds.length - 1 ? ',' : ''}</span>\n                            </>\n                        );\n                    })}\n                    {texts.table3.validation.alert.incompleteAndHavntBeenSaved(errorsRowIds.length)}\n                </Alert>\n            ) : null}\n            <FilterResetDialog\n                open={resetFiltersConfirmationOpen}\n                onClose={() => {\n                    setResetFiltersConfirmationOpen(false);\n                }}\n                onConfirm={onResetFiltersConfirm}\n                table={table}\n            />\n        </div>\n    );\n}\n\ntype FilterResetDialogProps<TType = unknown> = {\n    open: boolean;\n    onClose: () => void;\n    onConfirm: () => void;\n    table: RTable<TType>;\n};\nfunction FilterResetDialog<TType = unknown>(props: FilterResetDialogProps<TType>) {\n    const { open, onClose, onConfirm, table } = props;\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const { texts } = useLocalization();\n\n    const resetFilters = React.useCallback(() => {\n        tableMeta.search.setQuery('');\n        table.resetGlobalFilter();\n        table.resetColumnFilters();\n    }, [table, tableMeta.search]);\n\n    const handleConfirmClick = () => {\n        resetFilters();\n        onConfirm();\n        onClose();\n    };\n\n    return (\n        <Dialog open={open} onClose={onClose} size=\"xs\">\n            <Dialog.Content aria-label=\"Create a new account\">\n                <Dialog.Title>{texts.table3.validation.resetFiltersDialog.title}</Dialog.Title>\n\n                <p>{texts.table3.validation.resetFiltersDialog.description}</p>\n\n                <Dialog.Footer>\n                    <Group>\n                        <Dialog.Close>\n                            <Button>{texts.table3.validation.resetFiltersDialog.cancel}</Button>\n                        </Dialog.Close>\n                        <Button appearance=\"primary\" onClick={handleConfirmClick}>\n                            {texts.table3.validation.resetFiltersDialog.confirm}\n                        </Button>\n                    </Group>\n                </Dialog.Footer>\n            </Dialog.Content>\n        </Dialog>\n    );\n}\n"],"names":["ErrorAlert","props","table","tableRef","scrollToIndex","rowIdentifier","tableMeta","options","meta","errors","validation","errorsRowIds","Object","keys","rows","getRowModel","coreRows","getCoreRowModel","texts","useLocalization","resetFiltersConfirmationOpen","setResetFiltersConfirmationOpen","React","useState","internalRowId","setInternalRowId","internalRowIndex","setInternalRowIndex","isFiltersReset","setIsFiltersReset","columns","getAllFlatColumns","column","find","id","rowIdentifierHeader","_column$columnDef$met","columnDef","header","navigateToFirstInvalidCell","firstInvalidCell","_tableRef$current","current","querySelector","firstInvalidElement","focusableSelector","focus","lastCellIndex","value","getAttribute","navigateToRow","rowIndex","currentRow","setCurrentRowIndex","align","undefined","requestAnimationFrame","useEffect","findIndex","row","onRowNumberClick","useCallback","rowId","foundIndex","onResetFiltersConfirm","getCoreRow","coreRow","className","length","Alert","state","table3","alert","unsavedEntries","index","map","Button","key","appearance","onClick","original","incompleteAndHavntBeenSaved","FilterResetDialog","open","onClose","onConfirm","resetFilters","search","setQuery","resetGlobalFilter","resetColumnFilters","handleConfirmClick","Dialog","size","Content","Title","resetFiltersDialog","title","description","Footer","Group","Close","cancel","confirm"],"mappings":"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"}

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

@@ -1,6 +1,7 @@
 import React__default from 'react';
-import { useRowContext } from '../../rows/RowContext.js';
+import { useRowContext, RowContext } from '../../rows/RowContext.js';
 import { DisplayCell } from './DisplayCell.js';
+import { isCellHighlighted } from '../../../util/columns.js';
 import { EditingCell } from './EditingCell.js';
 
 function Cell(props) {
@@ -8,20 +9,64 @@ function Cell(props) {
   const {
     column,
     row,
-    table
+    table,
+    index,
+    getValue,
+    cell
   } = props;
   const {
-    isHovered: isHoveredRow
+    isHovered: isHoveredRow,
+    hasError
   } = useRowContext();
   const rows = table.getRowModel().rows;
   const tableMeta = table.options.meta;
   const columnMeta = column.columnDef.meta;
+  const rowErrors = tableMeta.validation.errors ? tableMeta.validation.errors[row.id] : null;
+  const isColumnError = hasError && rowErrors && !!rowErrors[column.id];
   const currentRowIndex = tableMeta.currentRow.currentRowIndex;
   const isCurrentRow = currentRowIndex !== undefined && ((_rows$currentRowIndex = rows[currentRowIndex]) === null || _rows$currentRowIndex === void 0 ? void 0 : _rows$currentRowIndex.id) === row.id;
-  if (tableMeta.editing.isEditing && columnMeta.control && (isCurrentRow || isHoveredRow && !tableMeta.hoverState.isPaused)) {
-    return /*#__PURE__*/React__default.createElement(EditingCell, Object.assign({}, props));
+  let value = getValue();
+  // When row has changes we always need to show the editing state value, end revert it to original value only when row got saved successfully.
+  // Otherwise it might confuse user because it will look like display value is getting reverted everytime user leaves the row.
+  if (tableMeta.editing.isEditing) {
+    const editingValue = tableMeta.editing.getCellValue(cell);
+    value = editingValue !== null && editingValue !== void 0 ? editingValue : value;
   }
-  return /*#__PURE__*/React__default.createElement(DisplayCell, Object.assign({}, props));
+  const {
+    rowIndex
+  } = React__default.useContext(RowContext);
+  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]);
+  const highlightProps = {
+    highlighted: memoedHighlight,
+    highlightedAsCurrent: memoedHighlightCurrent
+  };
+  if (tableMeta.editing.isEditing && columnMeta.control && (isCurrentRow || isHoveredRow && !tableMeta.hoverState.isPaused ||
+  // When cell has error, we renderimg it in edit mode (UX reqirement)
+  isColumnError)) {
+    return /*#__PURE__*/React__default.createElement(EditingCell, Object.assign({}, props, highlightProps));
+  }
+  return /*#__PURE__*/React__default.createElement(DisplayCell, Object.assign({}, props, highlightProps, {
+    value: value
+  }));
 }
 
 export { Cell };

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

@@ -1 +1 @@
-{"version":3,"file":"Cell.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/Cell.tsx"],"sourcesContent":["import React from 'react';\nimport { CellContext, ColumnMeta, TableMeta } from '@tanstack/react-table';\nimport { DisplayCell } from './DisplayCell';\nimport { EditingCell } from './EditingCell';\nimport { useRowContext } from '../../rows/RowContext';\n\nexport type CellProps<TType = unknown> = CellContext<TType, unknown> & {\n    children?: string | JSX.Element;\n};\n\nexport function Cell<TType = unknown>(props: CellProps<TType>) {\n    const { column, row, table } = props;\n    const { isHovered: isHoveredRow } = useRowContext();\n    const rows = table.getRowModel().rows;\n    const tableMeta = table.options.meta as TableMeta<unknown>;\n    const columnMeta = column.columnDef.meta as ColumnMeta<TType, unknown>;\n\n    const currentRowIndex = tableMeta.currentRow.currentRowIndex;\n    const isCurrentRow =\n        currentRowIndex !== undefined && rows[currentRowIndex]?.id === row.id;\n\n    if (tableMeta.editing.isEditing && columnMeta.control && (isCurrentRow || (isHoveredRow && !tableMeta.hoverState.isPaused))) {\n        return <EditingCell {...props} />;\n    }\n\n    return <DisplayCell {...props} />;\n}\n"],"names":["Cell","props","column","row","table","isHovered","isHoveredRow","useRowContext","rows","getRowModel","tableMeta","options","meta","columnMeta","columnDef","currentRowIndex","currentRow","isCurrentRow","undefined","_rows$currentRowIndex","id","editing","isEditing","control","hoverState","isPaused","React","EditingCell","DisplayCell"],"mappings":";;;;;SAUgBA,IAAIA,CAAkBC,KAAuB;;EACzD,MAAM;IAAEC,MAAM;IAAEC,GAAG;IAAEC;GAAO,GAAGH,KAAK;EACpC,MAAM;IAAEI,SAAS,EAAEC;GAAc,GAAGC,aAAa,EAAE;EACnD,MAAMC,IAAI,GAAGJ,KAAK,CAACK,WAAW,EAAE,CAACD,IAAI;EACrC,MAAME,SAAS,GAAGN,KAAK,CAACO,OAAO,CAACC,IAA0B;EAC1D,MAAMC,UAAU,GAAGX,MAAM,CAACY,SAAS,CAACF,IAAkC;EAEtE,MAAMG,eAAe,GAAGL,SAAS,CAACM,UAAU,CAACD,eAAe;EAC5D,MAAME,YAAY,GACdF,eAAe,KAAKG,SAAS,IAAI,EAAAC,qBAAA,GAAAX,IAAI,CAACO,eAAe,CAAC,cAAAI,qBAAA,uBAArBA,qBAAA,CAAuBC,EAAE,MAAKjB,GAAG,CAACiB,EAAE;EAEzE,IAAIV,SAAS,CAACW,OAAO,CAACC,SAAS,IAAIT,UAAU,CAACU,OAAO,KAAKN,YAAY,IAAKX,YAAY,IAAI,CAACI,SAAS,CAACc,UAAU,CAACC,QAAS,CAAC,EAAE;IACzH,oBAAOC,6BAACC,WAAW,oBAAK1B,KAAK,EAAI;;EAGrC,oBAAOyB,6BAACE,WAAW,oBAAK3B,KAAK,EAAI;AACrC;;;;"}
+{"version":3,"file":"Cell.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/Cell.tsx"],"sourcesContent":["import React from 'react';\nimport { CellContext, ColumnMeta, TableMeta } from '@tanstack/react-table';\nimport { DisplayCell } from './DisplayCell';\nimport { EditingCell } from './EditingCell';\nimport { RowContext, useRowContext } from '../../rows/RowContext';\nimport { isCellHighlighted } from '../../../util/columns';\n\nexport type CellProps<TType = unknown> = CellContext<TType, unknown> & {\n    children?: string | JSX.Element;\n};\n\nexport function Cell<TType = unknown>(props: CellProps<TType>) {\n    const { column, row, table, index, getValue, cell } = props;\n    const { isHovered: isHoveredRow, hasError } = useRowContext();\n    const rows = table.getRowModel().rows;\n    const tableMeta = table.options.meta as TableMeta<unknown>;\n    const columnMeta = column.columnDef.meta as ColumnMeta<TType, unknown>;\n    const rowErrors = tableMeta.validation.errors ? tableMeta.validation.errors[row.id] : null;\n    const isColumnError = hasError && rowErrors && !!rowErrors[column.id];\n\n    const currentRowIndex = tableMeta.currentRow.currentRowIndex;\n    const isCurrentRow =\n        currentRowIndex !== undefined && rows[currentRowIndex]?.id === row.id;\n    let value = getValue();\n\n    // When row has changes we always need to show the editing state value, end revert it to original value only when row got saved successfully.\n    // Otherwise it might confuse user because it will look like display value is getting reverted everytime user leaves the row.\n    if (tableMeta.editing.isEditing) {\n        const editingValue = tableMeta.editing.getCellValue(cell);\n        value = editingValue ?? value;\n    }\n\n    const { rowIndex } = React.useContext(RowContext);\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    const highlightProps = {\n        highlighted: memoedHighlight,\n        highlightedAsCurrent: memoedHighlightCurrent,\n    };\n\n    if (\n        tableMeta.editing.isEditing &&\n        columnMeta.control &&\n        (isCurrentRow ||\n            (isHoveredRow && !tableMeta.hoverState.isPaused) ||\n            // When cell has error, we renderimg it in edit mode (UX reqirement)\n            isColumnError)\n    ) {\n        return <EditingCell {...props} {...highlightProps} />;\n    }\n\n    return <DisplayCell {...props} {...highlightProps} value={value} />;\n}\n"],"names":["Cell","props","column","row","table","index","getValue","cell","isHovered","isHoveredRow","hasError","useRowContext","rows","getRowModel","tableMeta","options","meta","columnMeta","columnDef","rowErrors","validation","errors","id","isColumnError","currentRowIndex","currentRow","isCurrentRow","undefined","_rows$currentRowIndex","value","editing","isEditing","editingValue","getCellValue","rowIndex","React","useContext","RowContext","memoedHighlight","useMemo","search","isHighlightingEnabled","enableSearch","_tableMeta$search$que","query","length","isCellHighlighted","dataType","excludeUnmatchedResults","memoedHighlightCurrent","currentHighlightColumnIndex","currentColumnIndex","highlightedColumnIndexes","highlightProps","highlighted","highlightedAsCurrent","control","hoverState","isPaused","EditingCell","DisplayCell"],"mappings":"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"}

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) {
@@ -100,31 +77,6 @@ const MemoedDisplayCell = /*#__PURE__*/React__default.memo(function MemoedDispla
     tableRef: tableRef
   }, 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,20 +1,28 @@
 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 { hasChanged, willRowMoveAfterSorting } from '../../../util/editing.js';
 import { EDITING_ACTIONS_WIDTH } from '../internal/EditingActions.js';
 import { Indicator, IndicatorReason } from './Indicator.js';
-import { hasChanged, willRowMoveAfterSorting } from '../../../util/editing.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
   }));
@@ -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,38 @@ 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 mountNode = React__default.useMemo(() => {
-    if (moveReason) {
+    if (moveReason !== null && isCurrentRow && !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, isCurrentRow, 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 (!isCurrentRow || 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 +116,19 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
       removeMoveReason();
     }
     return removeMoveReason;
-  }, [value]);
+  }, [value, tableMeta.currentRow.currentRowIndex, 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 +142,46 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     tableRef: tableRef,
     value: value,
     cell: cell,
+    error: error,
+    tabIndex: isCurrentRow ? 0 : -1,
     isCurrentRow: isCurrentRow
-  })));
+  }));
+  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())) {