@economic/taco 2.25.1-alpha.13 → 2.25.1

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

@@ -0,0 +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';\nimport { isCellHighlighted } from '../../../util/columns';\nimport { getIndicatorCellClassName, isIndicatorVisible } from './Indicator';\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, rowIndex } = 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 rowActiveIndex = tableMeta.rowActive.rowActiveIndex;\n    const isActiveRow = rowActiveIndex !== undefined && rows[rowActiveIndex]?.id === row.id;\n    let value = getValue();\n\n    const allVisibleColumns = table.getVisibleLeafColumns();\n    const lastColumnIndex = allVisibleColumns.length > 0 ? allVisibleColumns.length - 1 : 0;\n    const className = isIndicatorVisible(rowIndex, rowActiveIndex, tableMeta.editing.rowMoveReason)\n        ? getIndicatorCellClassName(index, lastColumnIndex)\n        : undefined;\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 memoedHighlight = React.useMemo(() => {\n        // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel\n        if (!tableMeta.search.isHighlightingEnabled || !columnMeta.enableSearch) {\n            return false;\n        }\n        // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel\n        if (tableMeta.search.query?.length) {\n            // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel\n            return isCellHighlighted(tableMeta.search.query, value, columnMeta.dataType);\n        }\n\n        return false;\n        // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel\n    }, [value, tableMeta.search.isHighlightingEnabled, tableMeta.search.excludeUnmatchedResults, tableMeta.search.query]);\n\n    const memoedHighlightCurrent = React.useMemo(() => {\n        if (\n            // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel\n            !tableMeta.search.isHighlightingEnabled ||\n            !memoedHighlight ||\n            tableMeta.search.currentHighlightColumnIndex === undefined\n        ) {\n            return false;\n        }\n\n        const [rowActiveIndex, currentColumnIndex] =\n            tableMeta.search.highlightedColumnIndexes[tableMeta.search.currentHighlightColumnIndex];\n\n        if (rowActiveIndex === 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        (isActiveRow ||\n            (isHoveredRow && !tableMeta.rowActive.isHoverStatePaused) ||\n            // When cell has error, we renderimg it in edit mode (UX reqirement)\n            isColumnError)\n    ) {\n        return <EditingCell {...props} {...highlightProps} className={className} />;\n    }\n\n    return <DisplayCell {...props} {...highlightProps} value={value} className={className} />;\n}\n"],"names":["Cell","props","column","row","table","index","getValue","cell","isHovered","isHoveredRow","hasError","rowIndex","useRowContext","rows","getRowModel","tableMeta","options","meta","columnMeta","columnDef","rowErrors","validation","errors","id","isColumnError","rowActiveIndex","rowActive","isActiveRow","undefined","_rows$rowActiveIndex","value","allVisibleColumns","getVisibleLeafColumns","lastColumnIndex","length","className","isIndicatorVisible","editing","rowMoveReason","getIndicatorCellClassName","isEditing","editingValue","getCellValue","memoedHighlight","React","useMemo","search","isHighlightingEnabled","enableSearch","_tableMeta$search$que","query","isCellHighlighted","dataType","excludeUnmatchedResults","memoedHighlightCurrent","currentHighlightColumnIndex","currentColumnIndex","highlightedColumnIndexes","highlightProps","highlighted","highlightedAsCurrent","control","isHoverStatePaused","EditingCell","DisplayCell"],"mappings":"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"}

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

@@ -0,0 +1,84 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { Highlight } from './Highlight.js';
+
+function DisplayCell(props) {
+  const {
+    cell,
+    className,
+    column,
+    value,
+    index,
+    row,
+    table,
+    tableRef,
+    highlighted,
+    highlightedAsCurrent
+  } = props;
+  const columnMeta = React__default.useMemo(() => column.columnDef.meta, []);
+  const tableMeta = table.options.meta;
+  // 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(() => {
+    var _ref, _ref2, _props$children, _columnMeta$renderer;
+    return {
+      align: columnMeta.align,
+      children: (_ref = (_ref2 = (_props$children = props.children) !== null && _props$children !== void 0 ? _props$children : (_columnMeta$renderer = columnMeta.renderer) === null || _columnMeta$renderer === void 0 ? void 0 : _columnMeta$renderer.call(columnMeta, value, row.original)) !== null && _ref2 !== void 0 ? _ref2 : value) !== null && _ref !== void 0 ? _ref : null,
+      className: cn(className, typeof columnMeta.className === 'function' ? columnMeta.className(row.original) : columnMeta.className),
+      data: row.original,
+      debug: table.options.debugAll,
+      enableTruncate: columnMeta.enableTruncate,
+      // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel
+      frozenColumnIndex: tableMeta.columnFreezing.frozenColumnIndex,
+      id: cell.id,
+      index,
+      tableRef
+    };
+    // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel
+  }, [row.original, props.children, value, tableMeta.columnFreezing.frozenColumnIndex, className]);
+  return /*#__PURE__*/React__default.createElement(MemoedDisplayCell, Object.assign({}, memoedProps, {
+    highlighted: highlighted,
+    highlightedAsCurrent: highlightedAsCurrent
+  }));
+}
+const MemoedDisplayCell = /*#__PURE__*/React__default.memo(function MemoedDisplayCell(props) {
+  const {
+    align = 'left',
+    children,
+    className: customClassName,
+    debug,
+    enableTruncate,
+    frozenColumnIndex,
+    highlighted,
+    highlightedAsCurrent = false,
+    id,
+    index,
+    tableRef
+  } = props;
+  const layoutClassName = cn('py-[var(--table3-cell-padding-y)] px-[var(--table3-cell-padding-x)] focus:outline-none break-word hyphens-auto', customClassName);
+  const className = highlighted ? undefined : layoutClassName;
+  const content = enableTruncate ? /*#__PURE__*/React__default.createElement("span", {
+    className: "truncate"
+  }, children) : children;
+  if (debug) {
+    console.log('cell render', id);
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: className,
+    "data-align": align,
+    "data-column-index": index,
+    "data-highlighted": highlighted,
+    role: "cell",
+    // cells must be focusable (but not included in tabbing - hence -1)
+    tabIndex: -1
+  }, highlighted ? ( /*#__PURE__*/React__default.createElement(Highlight, {
+    className: layoutClassName,
+    current: highlightedAsCurrent,
+    frozenColumnIndex: frozenColumnIndex,
+    index: index,
+    tableRef: tableRef
+  }, content)) : content);
+});
+
+export { DisplayCell };
+//# sourceMappingURL=DisplayCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DisplayCell.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/DisplayCell.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\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            // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel\n            frozenColumnIndex: tableMeta.columnFreezing.frozenColumnIndex,\n            id: cell.id,\n            index,\n            tableRef,\n        };\n        // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel\n    }, [row.original, props.children, value, tableMeta.columnFreezing.frozenColumnIndex, className]);\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

@@ -0,0 +1,212 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { Field } from '../../../../Field/Field.js';
+import { useRowContext, RowContext } from '../../rows/RowContext.js';
+import { Highlight } from './Highlight.js';
+import { Indicator, IndicatorReason } from './Indicator.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 { 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 = 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$tableMeta$rowAc, _column$columnDef$met, _column$columnDef$met2;
+  const {
+    cell,
+    column,
+    index,
+    getValue,
+    table,
+    tableRef,
+    row,
+    tableMeta,
+    error,
+    highlighted,
+    highlightedAsCurrent
+  } = props;
+  const {
+    rowIndex
+  } = React__default.useContext(RowContext);
+  const columnMeta = column.columnDef.meta;
+  const cellRef = React__default.useRef(null);
+  const controlRef = React__default.useRef(null);
+  const handleChange = value => tableMeta.editing.setCellValue(cell, value);
+  const value = (_tableMeta$editing$ge = tableMeta.editing.getCellValue(cell)) !== null && _tableMeta$editing$ge !== void 0 ? _tableMeta$editing$ge : getValue();
+  const handleFocus = event => {
+    var _event$target;
+    // Check if cell is hidden behind pinned columns or edititng actions, and scroll to it.
+    // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel
+    const frozenColumnIndex = tableMeta.columnFreezing.frozenColumnIndex;
+    const tableElement = tableRef.current;
+    if (tableElement && frozenColumnIndex !== undefined && index > frozenColumnIndex) {
+      var _cellRef$current;
+      const lastFrozenColumnElement = getCurrentRowCellElement(frozenColumnIndex, tableElement);
+      const cellRect = (_cellRef$current = cellRef.current) === null || _cellRef$current === void 0 ? void 0 : _cellRef$current.getBoundingClientRect();
+      const lastFrozenRect = lastFrozenColumnElement === null || lastFrozenColumnElement === void 0 ? void 0 : lastFrozenColumnElement.getBoundingClientRect();
+      const tableRect = tableElement.getBoundingClientRect();
+      // Check for pinned columns overlap
+      if (cellRect && lastFrozenRect && cellRect.left < lastFrozenRect.left + lastFrozenRect.width) {
+        const pinnedColumnsWidth = lastFrozenRect.left + lastFrozenRect.width;
+        tableElement.scrollTo(cellRect.left - pinnedColumnsWidth, tableElement.scrollTop);
+        // Check for editing actions overlap
+      } else if (cellRect && tableRect && cellRect.right > tableRect.right - EDITING_ACTIONS_WIDTH) {
+        const spaceBetweenCellAndEditingActions = 10;
+        tableElement.scrollTo(
+        // Need to take into account if table has been already scrolled.
+        tableElement.scrollLeft + EDITING_ACTIONS_WIDTH + spaceBetweenCellAndEditingActions, tableElement.scrollTop);
+      }
+    }
+    if ((_event$target = event.target) !== null && _event$target !== void 0 && _event$target.select) {
+      requestAnimationFrame(() => {
+        event.target.select();
+      });
+    }
+  };
+  const handleBlur = () => {
+    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) === null || _tableMeta$editing$ro === void 0 ? void 0 : _tableMeta$editing$ro[cell.column.id]) || null;
+  const rows = table.getRowModel().rows;
+  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 !== 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, isActiveRow, error, cellRef]);
+  const removeMoveReason = () => {
+    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 (!isActiveRow) {
+      return;
+    }
+    if (error) {
+      if (tableMeta.editing.rowMoveReason) {
+        removeMoveReason();
+      }
+      return;
+    }
+    if (hasChanged(getValue(), value)) {
+      const moveReason = getRowMoveReason(table, rowIndex,
+      // cannot use row.index, as this is not kept in sync once a column is sorted.
+      row.original, cell, value,
+      // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel
+      tableMeta.search.excludeUnmatchedResults);
+      if (moveReason) {
+        tableMeta.editing.setRowMoveReason({
+          [cell.column.id]: moveReason
+        });
+      }
+    } else {
+      removeMoveReason();
+    }
+    return removeMoveReason;
+    // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel
+  }, [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(
+  // Removing a pixel border width in the padding to avoid a pixel jump when control element is rendered.
+  'py-[calc(var(--table3-cell-padding-y)_-_0.06rem_-_1px)]', {
+    // Textarea control is positioned absolute, when column is in enableTruncate mode, so the cell need to be positioned relative
+    relative: controlRenderer === 'textarea' && columnMeta.enableTruncate
+  }, props.className, 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,
+    data: cell.row.original,
+    initialValue: getValue(),
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onChange: handleChange,
+    ref: controlRef,
+    table: table,
+    tableRef: tableRef,
+    value: value,
+    cell: cell,
+    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((_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.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,
+    // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel
+    frozenColumnIndex: tableMeta.columnFreezing.frozenColumnIndex,
+    index: index,
+    tableRef: tableRef
+  }, content)) : content));
+});
+function getRowMoveReason(table, rowIndex, rowValues, cell, newValue, excludeUnmatchedResults) {
+  var _table$getState$sorti;
+  let rowMoveReason = null;
+  const {
+    globalFilter
+  } = table.getState();
+  const isFilteredByGlobalFilter = excludeUnmatchedResults ? Object.values({
+    ...rowValues,
+    [cell.id]: newValue
+  }).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())) {
+    rowMoveReason = IndicatorReason.FILTER;
+  } else if (!rowMoveReason && cell.column.getIsSorted() && willRowMoveAfterSorting(newValue, cell, rowIndex, table.getRowModel().rows, !!((_table$getState$sorti = table.getState().sorting.find(s => s.id === cell.column.id)) !== null && _table$getState$sorti !== void 0 && _table$getState$sorti.desc))) {
+    rowMoveReason = IndicatorReason.SORTING;
+  }
+  return rowMoveReason;
+}
+
+export { EditingCell };
+//# sourceMappingURL=EditingCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditingCell.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/EditingCell.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\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 { RowContext, 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    className?: string;\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    const { rowIndex } = React.useContext(RowContext);\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        // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel\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) {\n            return;\n        }\n\n        if (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                rowIndex, // cannot use row.index, as this is not kept in sync once a column is sorted.\n                row.original,\n                cell,\n                value,\n                // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel\n                tableMeta.search.excludeUnmatchedResults\n            );\n            if (moveReason) {\n                tableMeta.editing.setRowMoveReason({ [cell.column.id]: moveReason });\n            }\n        } else {\n            removeMoveReason();\n        }\n        return removeMoveReason;\n        // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel\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        // Removing a pixel border width in the padding to avoid a pixel jump when control element is rendered.\n        'py-[calc(var(--table3-cell-padding-y)_-_0.06rem_-_1px)]',\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        props.className,\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(column.columnDef.meta?.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                        // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel\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","rowIndex","useContext","RowContext","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","_column$columnDef$met2","header","validationErrors","role","Highlight","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

@@ -0,0 +1,194 @@
+import React__default from 'react';
+import cn from 'clsx';
+import { mergeRefs } from '../../../../../utils/mergeRefs.js';
+import { shouldTriggerShortcut } from '../../../../../utils/keyboard.js';
+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 { 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) {
+  var _ref$current;
+  const {
+    align,
+    column,
+    data,
+    initialValue,
+    onChange: handleChange,
+    table,
+    tableRef,
+    value,
+    cell,
+    error,
+    isActiveRow,
+    ...attributes
+  } = props;
+  const tableMeta = table.options.meta;
+  const ref = React__default.useRef();
+  const refCallback = mergeRefs([ref, externalRef]);
+  const columnMeta = column.columnDef.meta;
+  const controlRenderer = columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.control;
+  const isCellInDetailMode = tableMeta.editing.detailModeEditing && (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.contains(document.activeElement));
+  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.
+    if (shouldTriggerShortcut(event, {
+      key: 'e',
+      meta: true,
+      shift: false
+    })) {
+      tableMeta.editing.toggleEditing(false);
+      return;
+    }
+    const target = event.target;
+    if (target.readOnly) {
+      return;
+    }
+    // Prevent row arrow shortcuts triggering when in detail mode
+    if (tableMeta.editing.detailModeEditing && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+      event.stopPropagation();
+    }
+    // Revert to initial value if escape was pressed
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      if (tableMeta.editing.detailModeEditing) {
+        tableMeta.editing.setDetailModeEditing(false);
+        if (value !== initialValue) {
+          // Before reseting to initial value, we need to check if edited row with cell initial value is the same as original row,
+          // and in this case we need to completely remove row from editing state to avoid saving the same data as original.
+          const changedRow = tableMeta.editing.changes ? tableMeta.editing.changes[cell.row.id] : {};
+          const rowEdtitingDataWithInitialValue = {
+            ...changedRow,
+            [cell.column.id]: initialValue
+          };
+          if (_.isEqual(cell.row.original, rowEdtitingDataWithInitialValue)) {
+            tableMeta.editing.resetChange(cell.row.id);
+          } else {
+            handleChange(initialValue);
+          }
+        }
+      } else {
+        var _tableRef$current;
+        tableMeta.editing.toggleEditing(false);
+        (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.focus();
+      }
+      return;
+    }
+    // Should enable/disable editing mode if Enter was clicked
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      if (!tableMeta.editing.detailModeEditing) {
+        deselectInputValue(target);
+      } else {
+        var _target$select;
+        target === null || target === void 0 ? void 0 : (_target$select = target.select) === null || _target$select === void 0 ? void 0 : _target$select.call(target);
+      }
+      // Ketydown "Enter" should toggle edititng mode
+      tableMeta.editing.setDetailModeEditing(!tableMeta.editing.detailModeEditing);
+      return;
+    }
+  };
+  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
+    if (/^[a-z0-9]$/i.test(event.key)) {
+      tableMeta.editing.setDetailModeEditing(true);
+    }
+  };
+  const handleFocus = event => {
+    var _event$target;
+    // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel
+    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,
+      invalid: !!error,
+      onFocus: handleFocus,
+      ref: refCallback,
+      setValue: nextValue => {
+        if (nextValue !== value) {
+          handleChange(nextValue);
+        }
+      },
+      fontSize: tableMeta.fontSize.size,
+      value
+    }, data);
+  } else if (controlRenderer === 'datepicker') {
+    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,
+      onFocus: handleFocus,
+      onKeyDown: handleInputKeyDown,
+      ref: refCallback,
+      value: value
+    }));
+  } else if (controlRenderer === 'switch') {
+    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,
+    value: isNumber ? value : String(value !== null && value !== void 0 ? value : '')
+  }));
+});
+
+export { EditingControl };
+//# sourceMappingURL=EditingControl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"EditingControl.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/EditingControl.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'clsx';\nimport { Cell as RTCell, Column as RTColumn, Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport _ from 'lodash';\n\nimport { deselectInputValue } from '../../../../../utils/input';\nimport { hasChanged } from '../../../util/editing';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Input } from '../../../../Input/Input';\nimport { getCellAlignmentClasses, getInputAppearanceClassnames } from '../styles';\nimport { mergeRefs } from '../../../../../utils/mergeRefs';\nimport { Table3ColumnAlignment, Table3ColumnDataType } from '../../../types';\nimport { TextareaControl } from './controls/TextareaControl';\nimport { shouldTriggerShortcut } from '../../../../../utils/keyboard';\nimport { getTableLeftScrollDistance } from '../../../util/scrolling';\n\nexport type EditingControlProps<TType = unknown> = {\n    align?: Table3ColumnAlignment;\n    column: RTColumn<TType, unknown>;\n    data: TType;\n    initialValue: any;\n    value: any;\n    onBlur: (event: React.FocusEvent) => void;\n    onFocus: (event: React.FocusEvent) => void;\n    onChange: (value: any) => void;\n    ref: React.Ref<HTMLElement>;\n    table: RTTable<TType>;\n    tableRef: React.RefObject<HTMLDivElement>;\n    cell: RTCell<TType, unknown>;\n    error?: string;\n    tabIndex?: number;\n    isActiveRow?: boolean;\n};\n\nexport const EditingControl = React.forwardRef<HTMLElement, any>(function Control<TType = unknown>(\n    props: EditingControlProps<TType>,\n    externalRef: React.Ref<HTMLElement>\n) {\n    const {\n        align,\n        column,\n        data,\n        initialValue,\n        onChange: handleChange,\n        table,\n        tableRef,\n        value,\n        cell,\n        error,\n        isActiveRow,\n        ...attributes\n    } = props;\n\n    const tableMeta = table.options.meta as TableMeta<unknown>;\n    const ref = React.useRef<HTMLElement>();\n    const refCallback = mergeRefs([ref, externalRef]);\n\n    const columnMeta = column.columnDef.meta;\n    const controlRenderer = columnMeta?.control;\n\n    const isCellInDetailMode =\n        tableMeta.editing.detailModeEditing && (ref as React.RefObject<HTMLElement>)?.current?.contains(document.activeElement);\n\n    const originalRow = cell.row.original as TType;\n\n    // Revert to initial value if escape was pressed\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        // For some reason keydown event handler is not propogated to the table when input or other control element is\n        // in focus so we need to check for shortcut that toggles the editing.\n        if (shouldTriggerShortcut(event, { key: 'e', meta: true, shift: false })) {\n            tableMeta.editing.toggleEditing(false);\n            return;\n        }\n\n        const target = event.target as HTMLInputElement;\n\n        if (target.readOnly) {\n            return;\n        }\n\n        // Prevent row arrow shortcuts triggering when in detail mode\n        if (tableMeta.editing.detailModeEditing && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {\n            event.stopPropagation();\n        }\n\n        // Revert to initial value if escape was pressed\n        if (event.key === 'Escape') {\n            event.preventDefault();\n\n            if (tableMeta.editing.detailModeEditing) {\n                tableMeta.editing.setDetailModeEditing(false);\n\n                if (value !== initialValue) {\n                    // Before reseting to initial value, we need to check if edited row with cell initial value is the same as original row,\n                    // and in this case we need to completely remove row from editing state to avoid saving the same data as original.\n                    const changedRow: any = tableMeta.editing.changes ? tableMeta.editing.changes[cell.row.id] : {};\n                    const rowEdtitingDataWithInitialValue = { ...changedRow, [cell.column.id]: initialValue };\n                    if (_.isEqual(cell.row.original, rowEdtitingDataWithInitialValue)) {\n                        tableMeta.editing.resetChange(cell.row.id);\n                    } else {\n                        handleChange(initialValue);\n                    }\n                }\n            } else {\n                tableMeta.editing.toggleEditing(false);\n                tableRef.current?.focus();\n            }\n\n            return;\n        }\n\n        // Should enable/disable editing mode if Enter was clicked\n        if (event.key === 'Enter') {\n            event.preventDefault();\n\n            if (!tableMeta.editing.detailModeEditing) {\n                deselectInputValue(target);\n            } else {\n                target?.select?.();\n            }\n\n            // Ketydown \"Enter\" should toggle edititng mode\n            tableMeta.editing.setDetailModeEditing(!tableMeta.editing.detailModeEditing);\n\n            return;\n        }\n    };\n\n    const isNumber = columnMeta?.dataType === ('number' as Table3ColumnDataType);\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        handleKeyDown(event);\n\n        // Switching to editing mode, when key pressed any alphabetical character or number\n        if (/^[a-z0-9]$/i.test(event.key)) {\n            tableMeta.editing.setDetailModeEditing(true);\n        }\n    };\n\n    const handleFocus = (event: React.FocusEvent) => {\n        // @ts-expect-error: fixing type issue while report and table3 TableMeta definitions live in parallel\n        const { frozenColumnIndex: externalFrozenColumnIndex = -1, frozenInternalColumnCount = 0 } = tableMeta.columnFreezing;\n        const tableElement = tableMeta.tableRef.current;\n        const frozenColumnIndex =\n            externalFrozenColumnIndex > -1\n                ? externalFrozenColumnIndex + frozenInternalColumnCount\n                : frozenInternalColumnCount - 1;\n        const cell = event.target?.closest('[role=\"cell\"]');\n\n        if (!tableElement || !cell) {\n            return;\n        }\n\n        const isEditing = true;\n        const leftScrollDistance = getTableLeftScrollDistance(tableElement, cell, frozenColumnIndex, isEditing);\n\n        if (leftScrollDistance !== null) {\n            tableElement.scrollLeft = leftScrollDistance;\n        }\n    };\n\n    if (typeof controlRenderer === 'function') {\n        return controlRenderer(\n            {\n                ...attributes,\n                invalid: !!error,\n                onFocus: handleFocus,\n                ref: refCallback,\n                setValue: nextValue => {\n                    if (nextValue !== value) {\n                        handleChange(nextValue);\n                    }\n                },\n                fontSize: tableMeta.fontSize.size,\n                value,\n            },\n            data\n        );\n    } else if (controlRenderer === 'datepicker') {\n        const handleDatepickerChange = event => {\n            // When datepicker looses focus, it triggers change event, even if date wasn't changed,\n            // so adding additional check here to prevent adding change to the edititng state.\n            const originalDate = originalRow[cell.column.id];\n            const changedDate = (event as any).detail;\n            if (hasChanged(originalDate, changedDate)) {\n                handleChange(changedDate);\n            }\n        };\n\n        return (\n            <Datepicker\n                {...attributes}\n                invalid={!!error}\n                className={cn({\n                    '[&_input]:!yt-focus-dark': isCellInDetailMode,\n                })}\n                onChange={handleDatepickerChange}\n                onFocus={handleFocus}\n                onKeyDown={handleInputKeyDown}\n                ref={refCallback}\n                value={value as Date}\n            />\n        );\n    } else if (controlRenderer === 'switch') {\n        return (\n            <Switch {...attributes} checked={Boolean(value)} onChange={handleChange} onFocus={handleFocus} ref={refCallback} />\n        );\n    } else if (controlRenderer === 'textarea') {\n        return (\n            <TextareaControl\n                {...props}\n                invalid={!!error}\n                isCellInDetailMode={isCellInDetailMode}\n                onFocus={handleFocus}\n                onKeyDown={handleInputKeyDown}\n                ref={refCallback}\n                fontSize={tableMeta.fontSize.size}\n            />\n        );\n    }\n\n    return (\n        <Input\n            {...attributes}\n            invalid={!!error}\n            className={cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {\n                '!yt-focus-dark': isCellInDetailMode,\n            })}\n            onChange={event => {\n                handleChange(event.target.value);\n            }}\n            onFocus={handleFocus}\n            onKeyDown={handleInputKeyDown}\n            ref={refCallback}\n            type={isNumber ? 'number' : undefined}\n            value={isNumber ? value : String(value ?? '')}\n        />\n    );\n});\n"],"names":["EditingControl","React","forwardRef","Control","props","externalRef","align","column","data","initialValue","onChange","handleChange","table","tableRef","value","cell","error","isActiveRow","attributes","tableMeta","options","meta","ref","useRef","refCallback","mergeRefs","columnMeta","columnDef","controlRenderer","control","isCellInDetailMode","editing","detailModeEditing","_ref$current","current","contains","document","activeElement","originalRow","row","original","handleKeyDown","event","shouldTriggerShortcut","key","shift","toggleEditing","target","readOnly","stopPropagation","preventDefault","setDetailModeEditing","changedRow","changes","id","rowEdtitingDataWithInitialValue","_","isEqual","resetChange","_tableRef$current","focus","deselectInputValue","_target$select","select","call","isNumber","dataType","handleInputKeyDown","test","handleFocus","frozenColumnIndex","externalFrozenColumnIndex","frozenInternalColumnCount","columnFreezing","tableElement","_event$target","closest","isEditing","leftScrollDistance","getTableLeftScrollDistance","scrollLeft","invalid","onFocus","setValue","nextValue","fontSize","size","handleDatepickerChange","originalDate","changedDate","detail","hasChanged","Datepicker","className","cn","onKeyDown","Switch","checked","Boolean","TextareaControl","Input","getInputAppearanceClassnames","getCellAlignmentClasses","type","undefined","String"],"mappings":"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"}