@economic/taco 2.6.0 → 2.7.0

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

@@ -1,22 +1,26 @@
 import React__default from 'react';
 import cn from 'classnames';
-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 { useRowContext } from '../../rows/RowContext.js';
 import { getCurrentRowCellElement } from '../../../util/columns.js';
-import { getInputAppearanceClassnames, getCellAlignmentClasses } from '../styles.js';
 import { globalFilterFn, columnFilterFn } from '../../../util/filtering.js';
-import _ from 'lodash-es';
 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) {
-  return /*#__PURE__*/React__default.createElement(MemoedEditingCell, Object.assign({}, 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;
+  return /*#__PURE__*/React__default.createElement(MemoedEditingCell, Object.assign({}, props, {
+    isHovered: isHovered,
+    tableMeta: tableMeta
+  }));
 }
 const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditingCell(props) {
-  var _tableMeta$editing$ge, _tableMeta$editing$ro, _rows$tableMeta$curre;
+  var _tableMeta$editing$ge, _tableMeta$editing$ro, _rows$tableMeta$curre, _column$columnDef$met;
   const {
     cell,
     column,
@@ -24,9 +28,10 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     getValue,
     table,
     tableRef,
-    row
+    row,
+    isHovered,
+    tableMeta
   } = props;
-  const tableMeta = table.options.meta;
   const columnMeta = column.columnDef.meta;
   const cellRef = React__default.useRef(null);
   const controlRef = React__default.useRef(null);
@@ -94,7 +99,15 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     }
     return removeMoveReason;
   }, [value]);
-  const className = cn('!px-2 py-[var(--table3-row-padding)]',
+  const controlRenderer = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control;
+  const className = cn('!px-2 py-[var(--table3-row-padding)]', {
+    relative: (isCurrentRow || isHovered) && controlRenderer === 'textarea',
+    // Need to set higher z-index, so that the current row textarea (in expanded state) overlaps rows below
+    'z-10': isCurrentRow,
+    // When row is hovered and located below, then the hovered textarea overlaps the current row textarea(if the current row textarea is expanded to support multiple lines),
+    // as result we need to set lower z-index for the hovered row -> cell.
+    'z-0': isHovered
+  },
   // component overrides - grayscale for editing hover
   '[[role="row"][data-current="false"]:hover_&>*]:!grayscale [[role="row"][data-current="false"]:hover_&_.bg-white]:!bg-grey-100',
   // we alias to any because className conflicts with the Table2 definition,
@@ -110,7 +123,7 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     "data-column-index": index,
     role: "cell",
     ref: cellRef
-  }, /*#__PURE__*/React__default.createElement(Control, {
+  }, /*#__PURE__*/React__default.createElement(EditingControl, {
     align: columnMeta.align,
     column: cell.column,
     data: cell.row.original,
@@ -122,141 +135,10 @@ const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditin
     table: table,
     tableRef: tableRef,
     value: value,
-    cell: cell
+    cell: cell,
+    isCurrentRow: isCurrentRow
   })));
 });
-const Control = /*#__PURE__*/React__default.forwardRef(function Control(props, ref) {
-  var _column$columnDef$met, _ref$current;
-  const {
-    align,
-    column,
-    data,
-    initialValue,
-    onChange: handleChange,
-    table,
-    tableRef,
-    value,
-    cell,
-    ...attributes
-  } = props;
-  const tableMeta = table.options.meta;
-  const controlRenderer = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control;
-  const 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 handleKeyDown = event => {
-    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.preventDefault();
-      event.stopPropagation();
-    }
-    if (event.key === 'Escape') {
-      event.preventDefault();
-      // Revert to initial value if escape was pressed in detail mode.
-      if (tableMeta.editing.detailModeEditing) {
-        tableMeta.editing.setDetailModeEditing(false);
-        if (value !== initialValue) {
-          // 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 {
-        tableMeta.editing.toggleEditing(false);
-      }
-      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 handleDatepickerChange = event => {
-    // When datepicker looses focus, it triggers change event, even if date wasn't changed,
-    // so adding additional check here to prevent adding change to the edititng state.
-    const originalDate = cell.row.original[cell.column.id];
-    const changedDate = event.detail;
-    if (hasChanged(originalDate, changedDate)) {
-      handleChange(changedDate);
-    }
-  };
-  if (typeof controlRenderer === 'function') {
-    return controlRenderer({
-      ...attributes,
-      ref,
-      setValue: nextValue => {
-        if (nextValue !== value) {
-          handleChange(nextValue);
-        }
-      },
-      value
-    }, data);
-  } else if (controlRenderer === 'datepicker') {
-    const handleDatepickerKeyDown = event => {
-      handleKeyDown(event);
-      if (/^[a-z0-9]$/i.test(event.key)) {
-        tableMeta.editing.setDetailModeEditing(true);
-        return;
-      }
-    };
-    return /*#__PURE__*/React__default.createElement(Datepicker, Object.assign({}, attributes, {
-      className: cn({
-        '[&_input]:!yt-focus-dark': isCellInDetailMode
-      }),
-      onChange: handleDatepickerChange,
-      onKeyDown: handleDatepickerKeyDown,
-      ref: ref,
-      value: value
-    }));
-  } else if (controlRenderer === 'switch') {
-    return /*#__PURE__*/React__default.createElement(Switch, Object.assign({}, attributes, {
-      className: "mx-2 mt-1.5",
-      checked: Boolean(value),
-      onChange: handleChange,
-      ref: ref
-    }));
-  }
-  const isNumber = typeof value === 'number';
-  const handleInputKeyDown = event => {
-    handleKeyDown(event);
-    // Switching to editing mode, when key pressed any alphabetical character or number
-    if (/^[a-z0-9]$/i.test(event.key)) {
-      tableMeta.editing.setDetailModeEditing(true);
-      return;
-    }
-  };
-  return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, attributes, {
-    className: cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {
-      '!yt-focus-dark': isCellInDetailMode
-    }),
-    onChange: event => {
-      handleChange(event.target.value);
-    },
-    onKeyDown: handleInputKeyDown,
-    ref: ref,
-    type: isNumber ? 'number' : undefined,
-    value: isNumber ? value : String(value !== null && value !== void 0 ? value : '')
-  }));
-});
 function getRowMoveReason(table, rowIndex, rowValues, cell, newValue) {
   var _table$getState$sorti;
   let rowMoveReason = null;

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

@@ -1 +1 @@
-{"version":3,"file":"EditingCell.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/EditingCell.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport _ from 'lodash';\nimport { TableMeta, CellContext, ColumnMeta, Cell as RTCell, Table as RTTable } from '@tanstack/react-table';\nimport { Input } from '../../../../Input/Input';\nimport { Switch } from '../../../../Switch/Switch';\nimport { Datepicker } from '../../../../Datepicker/Datepicker';\nimport { getCellAlignmentClasses, getInputAppearanceClassnames } from '../styles';\nimport { Indicator, IndicatorReason } from './Indicator';\nimport { columnFilterFn, globalFilterFn } from '../../../util/filtering';\nimport { Table3FilterValue } from '../../../types';\nimport { hasChanged, willRowMoveAfterSorting } from '../../../util/editing';\nimport { getCurrentRowCellElement } from '../../../util/columns';\nimport { deselectInputValue } from '../../../../../utils/input';\nimport { EDITING_ACTIONS_WIDTH } from '../internal/EditingActions';\n\nexport type EditingCellProps<TType = unknown> = CellContext<TType, unknown> & {\n    children?: string | JSX.Element;\n};\n\nexport function EditingCell<TType = unknown>(props: EditingCellProps<TType>) {\n    return <MemoedEditingCell<TType> {...props} />;\n}\n\n// Memoization\nexport type MemoedEditingCellProps<TType = unknown> = EditingCellProps<TType>;\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n    const { cell, column, index, getValue, table, tableRef, row } = props;\n    const tableMeta = table.options.meta as TableMeta<unknown>;\n    const columnMeta = column.columnDef.meta as ColumnMeta<TType, unknown>;\n\n    const cellRef = React.useRef<HTMLDivElement>(null);\n    const controlRef = React.useRef<HTMLElement>(null);\n\n    const handleChange = (value: unknown) => tableMeta.editing.setCellValue(cell, value);\n    const value = tableMeta.editing.getCellValue(cell) ?? getValue();\n\n    const handleFocus = event => {\n        // Check if cell is hidden behind pinned columns or edititng actions, and scroll to it.\n        const frozenColumnIndex = tableMeta.columnFreezing.frozenColumnIndex;\n        const tableElement = tableRef.current;\n\n        if (tableElement && frozenColumnIndex !== undefined && index > frozenColumnIndex) {\n            const lastFrozenColumnElement = getCurrentRowCellElement(frozenColumnIndex, tableElement);\n            const cellRect = cellRef.current?.getBoundingClientRect();\n            const lastFrozenRect = lastFrozenColumnElement?.getBoundingClientRect();\n            const tableRect = tableElement.getBoundingClientRect();\n\n            // Check for pinned columns overlap\n            if (cellRect && lastFrozenRect && cellRect.left < lastFrozenRect.left + lastFrozenRect.width) {\n                const pinnedColumnsWidth = lastFrozenRect.left + lastFrozenRect.width;\n                tableElement.scrollTo(cellRect.left - pinnedColumnsWidth, tableElement.scrollTop);\n                // Check for editing actions overlap\n            } else if (cellRect && tableRect && cellRect.right > tableRect.right - EDITING_ACTIONS_WIDTH) {\n                const spaceBetweenCellAndEditingActions = 10;\n                tableElement.scrollTo(\n                    // Need to take into account if table has been already scrolled.\n                    tableElement.scrollLeft + EDITING_ACTIONS_WIDTH + spaceBetweenCellAndEditingActions,\n                    tableElement.scrollTop\n                );\n            }\n        }\n\n        if (event.target?.select) {\n            requestAnimationFrame(() => {\n                event.target.select();\n            });\n        }\n    };\n\n    const handleBlur = () => {\n        tableMeta.editing.setDetailModeEditing(false);\n    };\n\n    // row move indicator\n    const moveReason = tableMeta.editing.rowMoveReason[cell.column.id] ?? null;\n    const rows = table.getRowModel().rows;\n    const isCurrentRow = rows[tableMeta.currentRow.currentRowIndex]?.id === row.id;\n    const mountNode = React.useMemo(() => {\n        if (moveReason) {\n            return cellRef.current?.parentElement?.firstChild as Element | null;\n        }\n        return null;\n    }, [moveReason, cellRef]);\n\n    const removeMoveReason = () => {\n        tableMeta.editing.removeRowMoveReason(cell.column.id);\n    };\n\n    React.useEffect(() => {\n        // To avoid reseting move reason on another row hover,\n        // we need to check for changes only if value got changed in the current row.\n        if (!isCurrentRow) {\n            return;\n        }\n\n        if (hasChanged(getValue(), value)) {\n            const moveReason = getRowMoveReason(table, row.index, row.original, cell, value);\n            tableMeta.editing.setRowMoveReason({ [cell.column.id]: moveReason });\n        } else {\n            removeMoveReason();\n        }\n        return removeMoveReason;\n    }, [value]);\n\n    const className = cn(\n        '!px-2 py-[var(--table3-row-padding)]',\n        // component overrides - grayscale for editing hover\n        '[[role=\"row\"][data-current=\"false\"]:hover_&>*]:!grayscale [[role=\"row\"][data-current=\"false\"]:hover_&_.bg-white]:!bg-grey-100',\n        // we alias to any because className conflicts with the Table2 definition,\n        // when Table2 is gone, remove this as any\n        typeof columnMeta.className === 'function' ? (columnMeta.className as any)(row.original) : columnMeta.className\n    );\n\n    return (\n        <>\n            {moveReason !== null && mountNode && (\n                <Indicator\n                    reason={moveReason}\n                    columnName={String(cell.column.columnDef.header)}\n                    mountNode={mountNode}\n                    validationErrors={[]}\n                />\n            )}\n            <div className={className} data-column-index={index} role=\"cell\" ref={cellRef}>\n                <Control\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                />\n            </div>\n        </>\n    );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => JSX.Element;\n\nconst Control = React.forwardRef<HTMLElement, any>(function Control(props, ref) {\n    const { align, column, data, initialValue, onChange: handleChange, table, tableRef, value, cell, ...attributes } = props;\n    const tableMeta = table.options.meta as TableMeta<unknown>;\n\n    const controlRenderer = column.columnDef.meta?.control;\n\n    const isCellInDetailMode =\n        tableMeta.editing.detailModeEditing && (ref as React.RefObject<HTMLElement>)?.current?.contains(document.activeElement);\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\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.preventDefault();\n            event.stopPropagation();\n        }\n\n        if (event.key === 'Escape') {\n            event.preventDefault();\n\n            // Revert to initial value if escape was pressed in detail mode.\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            }\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 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 = cell.row.original[cell.column.id];\n        const changedDate = (event as any).detail;\n        if (hasChanged(originalDate, changedDate)) {\n            handleChange(changedDate);\n        }\n    };\n\n    if (typeof controlRenderer === 'function') {\n        return controlRenderer(\n            {\n                ...attributes,\n                ref,\n                setValue: nextValue => {\n                    if (nextValue !== value) {\n                        handleChange(nextValue);\n                    }\n                },\n                value,\n            },\n            data\n        );\n    } else if (controlRenderer === 'datepicker') {\n        const handleDatepickerKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n            handleKeyDown(event);\n\n            if (/^[a-z0-9]$/i.test(event.key)) {\n                tableMeta.editing.setDetailModeEditing(true);\n                return;\n            }\n        };\n\n        return (\n            <Datepicker\n                {...attributes}\n                className={cn({\n                    '[&_input]:!yt-focus-dark': isCellInDetailMode,\n                })}\n                onChange={handleDatepickerChange}\n                onKeyDown={handleDatepickerKeyDown}\n                ref={ref}\n                value={value as Date}\n            />\n        );\n    } else if (controlRenderer === 'switch') {\n        return <Switch {...attributes} className=\"mx-2 mt-1.5\" checked={Boolean(value)} onChange={handleChange} ref={ref} />;\n    }\n\n    const isNumber = typeof value === 'number';\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\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            return;\n        }\n    };\n\n    return (\n        <Input\n            {...attributes}\n            className={cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {\n                '!yt-focus-dark': isCellInDetailMode,\n            })}\n            onChange={event => {\n                handleChange(event.target.value);\n            }}\n            onKeyDown={handleInputKeyDown}\n            ref={ref as React.Ref<HTMLInputElement>}\n            type={isNumber ? 'number' : undefined}\n            value={isNumber ? value : String(value ?? '')}\n        />\n    );\n});\n\nfunction getRowMoveReason<TType>(\n    table: RTTable<any>,\n    rowIndex: number,\n    rowValues: TType,\n    cell: RTCell<any, unknown>,\n    newValue: any\n) {\n    let rowMoveReason: IndicatorReason | null = null;\n    const { globalFilter } = table.getState();\n\n    const isFilteredByGlobalFilter = Object.values<unknown>({ ...rowValues, [cell.id]: newValue }).some(cellValue =>\n        // Global filter can be undefined when there is no text being searched so we pass an empty string to\n        // globalFilterFn as query in that case.\n        globalFilterFn(String(cellValue), globalFilter ? String(globalFilter) : '')\n    );\n\n    if (!isFilteredByGlobalFilter) {\n        rowMoveReason = IndicatorReason.SEARCH;\n    } else if (cell.column.getIsFiltered() && !columnFilterFn(newValue, cell.column.getFilterValue() as Table3FilterValue)) {\n        rowMoveReason = IndicatorReason.FILTER;\n    } else if (\n        !rowMoveReason &&\n        cell.column.getIsSorted() &&\n        willRowMoveAfterSorting(\n            newValue,\n            cell,\n            rowIndex,\n            table.getRowModel().rows,\n            !!table.getState().sorting.find(s => s.id === cell.column.id)?.desc\n        )\n    ) {\n        rowMoveReason = IndicatorReason.SORTING;\n    }\n\n    return rowMoveReason;\n}\n"],"names":["EditingCell","props","React","MemoedEditingCell","memo","cell","column","index","getValue","table","tableRef","row","tableMeta","options","meta","columnMeta","columnDef","cellRef","useRef","controlRef","handleChange","value","editing","setCellValue","_tableMeta$editing$ge","getCellValue","handleFocus","event","frozenColumnIndex","columnFreezing","tableElement","current","undefined","_cellRef$current","lastFrozenColumnElement","getCurrentRowCellElement","cellRect","getBoundingClientRect","lastFrozenRect","tableRect","left","width","pinnedColumnsWidth","scrollTo","scrollTop","right","EDITING_ACTIONS_WIDTH","spaceBetweenCellAndEditingActions","scrollLeft","_event$target","target","select","requestAnimationFrame","handleBlur","setDetailModeEditing","moveReason","_tableMeta$editing$ro","rowMoveReason","id","rows","getRowModel","isCurrentRow","_rows$tableMeta$curre","currentRow","currentRowIndex","mountNode","useMemo","_cellRef$current2","_cellRef$current2$par","parentElement","firstChild","removeMoveReason","removeRowMoveReason","useEffect","hasChanged","getRowMoveReason","original","setRowMoveReason","className","cn","Indicator","reason","columnName","String","header","validationErrors","role","ref","Control","align","data","initialValue","onBlur","onFocus","onChange","forwardRef","attributes","controlRenderer","_column$columnDef$met","control","isCellInDetailMode","detailModeEditing","_ref$current","contains","document","activeElement","handleKeyDown","readOnly","key","preventDefault","stopPropagation","changedRow","changes","rowEdtitingDataWithInitialValue","_","isEqual","resetChange","toggleEditing","deselectInputValue","_target$select","call","handleDatepickerChange","originalDate","changedDate","detail","setValue","nextValue","handleDatepickerKeyDown","test","Datepicker","onKeyDown","Switch","checked","Boolean","isNumber","handleInputKeyDown","Input","getInputAppearanceClassnames","getCellAlignmentClasses","type","rowIndex","rowValues","newValue","globalFilter","getState","isFilteredByGlobalFilter","Object","values","some","cellValue","globalFilterFn","IndicatorReason","SEARCH","getIsFiltered","columnFilterFn","getFilterValue","FILTER","getIsSorted","willRowMoveAfterSorting","_table$getState$sorti","sorting","find","s","desc","SORTING"],"mappings":";;;;;;;;;;;;;;SAoBgBA,WAAWA,CAAkBC,KAA8B;EACvE,oBAAOC,6BAACC,iBAAiB,oBAAYF,KAAK,EAAI;AAClD;AAKA,MAAME,iBAAiB,gBAAGD,cAAK,CAACE,IAAI,CAAC,SAASD,iBAAiBA,CAAkBF,KAAoC;;EACjH,MAAM;IAAEI,IAAI;IAAEC,MAAM;IAAEC,KAAK;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,QAAQ;IAAEC;GAAK,GAAGV,KAAK;EACrE,MAAMW,SAAS,GAAGH,KAAK,CAACI,OAAO,CAACC,IAA0B;EAC1D,MAAMC,UAAU,GAAGT,MAAM,CAACU,SAAS,CAACF,IAAkC;EAEtE,MAAMG,OAAO,GAAGf,cAAK,CAACgB,MAAM,CAAiB,IAAI,CAAC;EAClD,MAAMC,UAAU,GAAGjB,cAAK,CAACgB,MAAM,CAAc,IAAI,CAAC;EAElD,MAAME,YAAY,GAAIC,KAAc,IAAKT,SAAS,CAACU,OAAO,CAACC,YAAY,CAAClB,IAAI,EAAEgB,KAAK,CAAC;EACpF,MAAMA,KAAK,IAAAG,qBAAA,GAAGZ,SAAS,CAACU,OAAO,CAACG,YAAY,CAACpB,IAAI,CAAC,cAAAmB,qBAAA,cAAAA,qBAAA,GAAIhB,QAAQ,EAAE;EAEhE,MAAMkB,WAAW,GAAGC,KAAK;;;IAErB,MAAMC,iBAAiB,GAAGhB,SAAS,CAACiB,cAAc,CAACD,iBAAiB;IACpE,MAAME,YAAY,GAAGpB,QAAQ,CAACqB,OAAO;IAErC,IAAID,YAAY,IAAIF,iBAAiB,KAAKI,SAAS,IAAIzB,KAAK,GAAGqB,iBAAiB,EAAE;MAAA,IAAAK,gBAAA;MAC9E,MAAMC,uBAAuB,GAAGC,wBAAwB,CAACP,iBAAiB,EAAEE,YAAY,CAAC;MACzF,MAAMM,QAAQ,IAAAH,gBAAA,GAAGhB,OAAO,CAACc,OAAO,cAAAE,gBAAA,uBAAfA,gBAAA,CAAiBI,qBAAqB,EAAE;MACzD,MAAMC,cAAc,GAAGJ,uBAAuB,aAAvBA,uBAAuB,uBAAvBA,uBAAuB,CAAEG,qBAAqB,EAAE;MACvE,MAAME,SAAS,GAAGT,YAAY,CAACO,qBAAqB,EAAE;;MAGtD,IAAID,QAAQ,IAAIE,cAAc,IAAIF,QAAQ,CAACI,IAAI,GAAGF,cAAc,CAACE,IAAI,GAAGF,cAAc,CAACG,KAAK,EAAE;QAC1F,MAAMC,kBAAkB,GAAGJ,cAAc,CAACE,IAAI,GAAGF,cAAc,CAACG,KAAK;QACrEX,YAAY,CAACa,QAAQ,CAACP,QAAQ,CAACI,IAAI,GAAGE,kBAAkB,EAAEZ,YAAY,CAACc,SAAS,CAAC;;OAEpF,MAAM,IAAIR,QAAQ,IAAIG,SAAS,IAAIH,QAAQ,CAACS,KAAK,GAAGN,SAAS,CAACM,KAAK,GAAGC,qBAAqB,EAAE;QAC1F,MAAMC,iCAAiC,GAAG,EAAE;QAC5CjB,YAAY,CAACa,QAAQ;;QAEjBb,YAAY,CAACkB,UAAU,GAAGF,qBAAqB,GAAGC,iCAAiC,EACnFjB,YAAY,CAACc,SAAS,CACzB;;;IAIT,KAAAK,aAAA,GAAItB,KAAK,CAACuB,MAAM,cAAAD,aAAA,eAAZA,aAAA,CAAcE,MAAM,EAAE;MACtBC,qBAAqB,CAAC;QAClBzB,KAAK,CAACuB,MAAM,CAACC,MAAM,EAAE;OACxB,CAAC;;GAET;EAED,MAAME,UAAU,GAAGA;IACfzC,SAAS,CAACU,OAAO,CAACgC,oBAAoB,CAAC,KAAK,CAAC;GAChD;;EAGD,MAAMC,UAAU,IAAAC,qBAAA,GAAG5C,SAAS,CAACU,OAAO,CAACmC,aAAa,CAACpD,IAAI,CAACC,MAAM,CAACoD,EAAE,CAAC,cAAAF,qBAAA,cAAAA,qBAAA,GAAI,IAAI;EAC1E,MAAMG,IAAI,GAAGlD,KAAK,CAACmD,WAAW,EAAE,CAACD,IAAI;EACrC,MAAME,YAAY,GAAG,EAAAC,qBAAA,GAAAH,IAAI,CAAC/C,SAAS,CAACmD,UAAU,CAACC,eAAe,CAAC,cAAAF,qBAAA,uBAA1CA,qBAAA,CAA4CJ,EAAE,MAAK/C,GAAG,CAAC+C,EAAE;EAC9E,MAAMO,SAAS,GAAG/D,cAAK,CAACgE,OAAO,CAAC;IAC5B,IAAIX,UAAU,EAAE;MAAA,IAAAY,iBAAA,EAAAC,qBAAA;MACZ,QAAAD,iBAAA,GAAOlD,OAAO,CAACc,OAAO,cAAAoC,iBAAA,wBAAAC,qBAAA,GAAfD,iBAAA,CAAiBE,aAAa,cAAAD,qBAAA,uBAA9BA,qBAAA,CAAgCE,UAA4B;;IAEvE,OAAO,IAAI;GACd,EAAE,CAACf,UAAU,EAAEtC,OAAO,CAAC,CAAC;EAEzB,MAAMsD,gBAAgB,GAAGA;IACrB3D,SAAS,CAACU,OAAO,CAACkD,mBAAmB,CAACnE,IAAI,CAACC,MAAM,CAACoD,EAAE,CAAC;GACxD;EAEDxD,cAAK,CAACuE,SAAS,CAAC;;;IAGZ,IAAI,CAACZ,YAAY,EAAE;MACf;;IAGJ,IAAIa,UAAU,CAAClE,QAAQ,EAAE,EAAEa,KAAK,CAAC,EAAE;MAC/B,MAAMkC,UAAU,GAAGoB,gBAAgB,CAAClE,KAAK,EAAEE,GAAG,CAACJ,KAAK,EAAEI,GAAG,CAACiE,QAAQ,EAAEvE,IAAI,EAAEgB,KAAK,CAAC;MAChFT,SAAS,CAACU,OAAO,CAACuD,gBAAgB,CAAC;QAAE,CAACxE,IAAI,CAACC,MAAM,CAACoD,EAAE,GAAGH;OAAY,CAAC;KACvE,MAAM;MACHgB,gBAAgB,EAAE;;IAEtB,OAAOA,gBAAgB;GAC1B,EAAE,CAAClD,KAAK,CAAC,CAAC;EAEX,MAAMyD,SAAS,GAAGC,EAAE,CAChB,sCAAsC;;EAEtC,+HAA+H;;;EAG/H,OAAOhE,UAAU,CAAC+D,SAAS,KAAK,UAAU,GAAI/D,UAAU,CAAC+D,SAAiB,CAACnE,GAAG,CAACiE,QAAQ,CAAC,GAAG7D,UAAU,CAAC+D,SAAS,CAClH;EAED,oBACI5E,4DACKqD,UAAU,KAAK,IAAI,IAAIU,SAAS,iBAC7B/D,6BAAC8E,SAAS;IACNC,MAAM,EAAE1B,UAAU;IAClB2B,UAAU,EAAEC,MAAM,CAAC9E,IAAI,CAACC,MAAM,CAACU,SAAS,CAACoE,MAAM,CAAC;IAChDnB,SAAS,EAAEA,SAAS;IACpBoB,gBAAgB,EAAE;IAEzB,eACDnF;IAAK4E,SAAS,EAAEA,SAAS;yBAAqBvE,KAAK;IAAE+E,IAAI,EAAC,MAAM;IAACC,GAAG,EAAEtE;kBAClEf,6BAACsF,OAAO;IACJC,KAAK,EAAE1E,UAAU,CAAC0E,KAAK;IACvBnF,MAAM,EAAED,IAAI,CAACC,MAAM;IACnBoF,IAAI,EAAErF,IAAI,CAACM,GAAG,CAACiE,QAAQ;IACvBe,YAAY,EAAEnF,QAAQ,EAAE;IACxBoF,MAAM,EAAEvC,UAAU;IAClBwC,OAAO,EAAEnE,WAAW;IACpBoE,QAAQ,EAAE1E,YAAY;IACtBmE,GAAG,EAAEpE,UAAU;IACfV,KAAK,EAAEA,KAAK;IACZC,QAAQ,EAAEA,QAAQ;IAClBW,KAAK,EAAEA,KAAK;IACZhB,IAAI,EAAEA;IACR,CACA,CACP;AAEX,CAAC,CAA2E;AAE5E,MAAMmF,OAAO,gBAAGtF,cAAK,CAAC6F,UAAU,CAAmB,SAASP,OAAOA,CAACvF,KAAK,EAAEsF,GAAG;;EAC1E,MAAM;IAAEE,KAAK;IAAEnF,MAAM;IAAEoF,IAAI;IAAEC,YAAY;IAAEG,QAAQ,EAAE1E,YAAY;IAAEX,KAAK;IAAEC,QAAQ;IAAEW,KAAK;IAAEhB,IAAI;IAAE,GAAG2F;GAAY,GAAG/F,KAAK;EACxH,MAAMW,SAAS,GAAGH,KAAK,CAACI,OAAO,CAACC,IAA0B;EAE1D,MAAMmF,eAAe,IAAAC,qBAAA,GAAG5F,MAAM,CAACU,SAAS,CAACF,IAAI,cAAAoF,qBAAA,uBAArBA,qBAAA,CAAuBC,OAAO;EAEtD,MAAMC,kBAAkB,GACpBxF,SAAS,CAACU,OAAO,CAAC+E,iBAAiB,KAAKd,GAAoC,aAApCA,GAAoC,wBAAAe,YAAA,GAApCf,GAAoC,CAAExD,OAAO,cAAAuE,YAAA,uBAA7CA,YAAA,CAA+CC,QAAQ,CAACC,QAAQ,CAACC,aAAa,CAAC;EAE3H,MAAMC,aAAa,GAAI/E,KAA0B;IAC7C,MAAMuB,MAAM,GAAGvB,KAAK,CAACuB,MAA0B;IAE/C,IAAIA,MAAM,CAACyD,QAAQ,EAAE;MACjB;;;IAIJ,IAAI/F,SAAS,CAACU,OAAO,CAAC+E,iBAAiB,KAAK1E,KAAK,CAACiF,GAAG,KAAK,SAAS,IAAIjF,KAAK,CAACiF,GAAG,KAAK,WAAW,CAAC,EAAE;MAC/FjF,KAAK,CAACkF,cAAc,EAAE;MACtBlF,KAAK,CAACmF,eAAe,EAAE;;IAG3B,IAAInF,KAAK,CAACiF,GAAG,KAAK,QAAQ,EAAE;MACxBjF,KAAK,CAACkF,cAAc,EAAE;;MAGtB,IAAIjG,SAAS,CAACU,OAAO,CAAC+E,iBAAiB,EAAE;QACrCzF,SAAS,CAACU,OAAO,CAACgC,oBAAoB,CAAC,KAAK,CAAC;QAE7C,IAAIjC,KAAK,KAAKsE,YAAY,EAAE;;;UAGxB,MAAMoB,UAAU,GAAQnG,SAAS,CAACU,OAAO,CAAC0F,OAAO,GAAGpG,SAAS,CAACU,OAAO,CAAC0F,OAAO,CAAC3G,IAAI,CAACM,GAAG,CAAC+C,EAAE,CAAC,GAAG,EAAE;UAC/F,MAAMuD,+BAA+B,GAAG;YAAE,GAAGF,UAAU;YAAE,CAAC1G,IAAI,CAACC,MAAM,CAACoD,EAAE,GAAGiC;WAAc;UACzF,IAAIuB,CAAC,CAACC,OAAO,CAAC9G,IAAI,CAACM,GAAG,CAACiE,QAAQ,EAAEqC,+BAA+B,CAAC,EAAE;YAC/DrG,SAAS,CAACU,OAAO,CAAC8F,WAAW,CAAC/G,IAAI,CAACM,GAAG,CAAC+C,EAAE,CAAC;WAC7C,MAAM;YACHtC,YAAY,CAACuE,YAAY,CAAC;;;OAGrC,MAAM;QACH/E,SAAS,CAACU,OAAO,CAAC+F,aAAa,CAAC,KAAK,CAAC;;MAG1C;;;IAIJ,IAAI1F,KAAK,CAACiF,GAAG,KAAK,OAAO,EAAE;MACvBjF,KAAK,CAACkF,cAAc,EAAE;MAEtB,IAAI,CAACjG,SAAS,CAACU,OAAO,CAAC+E,iBAAiB,EAAE;QACtCiB,kBAAkB,CAACpE,MAAM,CAAC;OAC7B,MAAM;QAAA,IAAAqE,cAAA;QACHrE,MAAM,aAANA,MAAM,wBAAAqE,cAAA,GAANrE,MAAM,CAAEC,MAAM,cAAAoE,cAAA,uBAAdA,cAAA,CAAAC,IAAA,CAAAtE,OAAkB;;;MAItBtC,SAAS,CAACU,OAAO,CAACgC,oBAAoB,CAAC,CAAC1C,SAAS,CAACU,OAAO,CAAC+E,iBAAiB,CAAC;MAE5E;;GAEP;EAED,MAAMoB,sBAAsB,GAAG9F,KAAK;;;IAGhC,MAAM+F,YAAY,GAAGrH,IAAI,CAACM,GAAG,CAACiE,QAAQ,CAACvE,IAAI,CAACC,MAAM,CAACoD,EAAE,CAAC;IACtD,MAAMiE,WAAW,GAAIhG,KAAa,CAACiG,MAAM;IACzC,IAAIlD,UAAU,CAACgD,YAAY,EAAEC,WAAW,CAAC,EAAE;MACvCvG,YAAY,CAACuG,WAAW,CAAC;;GAEhC;EAED,IAAI,OAAO1B,eAAe,KAAK,UAAU,EAAE;IACvC,OAAOA,eAAe,CAClB;MACI,GAAGD,UAAU;MACbT,GAAG;MACHsC,QAAQ,EAAEC,SAAS;QACf,IAAIA,SAAS,KAAKzG,KAAK,EAAE;UACrBD,YAAY,CAAC0G,SAAS,CAAC;;OAE9B;MACDzG;KACH,EACDqE,IAAI,CACP;GACJ,MAAM,IAAIO,eAAe,KAAK,YAAY,EAAE;IACzC,MAAM8B,uBAAuB,GAAIpG,KAA4C;MACzE+E,aAAa,CAAC/E,KAAK,CAAC;MAEpB,IAAI,aAAa,CAACqG,IAAI,CAACrG,KAAK,CAACiF,GAAG,CAAC,EAAE;QAC/BhG,SAAS,CAACU,OAAO,CAACgC,oBAAoB,CAAC,IAAI,CAAC;QAC5C;;KAEP;IAED,oBACIpD,6BAAC+H,UAAU,oBACHjC,UAAU;MACdlB,SAAS,EAAEC,EAAE,CAAC;QACV,0BAA0B,EAAEqB;OAC/B,CAAC;MACFN,QAAQ,EAAE2B,sBAAsB;MAChCS,SAAS,EAAEH,uBAAuB;MAClCxC,GAAG,EAAEA,GAAG;MACRlE,KAAK,EAAEA;OACT;GAET,MAAM,IAAI4E,eAAe,KAAK,QAAQ,EAAE;IACrC,oBAAO/F,6BAACiI,MAAM,oBAAKnC,UAAU;MAAElB,SAAS,EAAC,aAAa;MAACsD,OAAO,EAAEC,OAAO,CAAChH,KAAK,CAAC;MAAEyE,QAAQ,EAAE1E,YAAY;MAAEmE,GAAG,EAAEA;OAAO;;EAGxH,MAAM+C,QAAQ,GAAG,OAAOjH,KAAK,KAAK,QAAQ;EAC1C,MAAMkH,kBAAkB,GAAI5G,KAA4C;IACpE+E,aAAa,CAAC/E,KAAK,CAAC;;IAGpB,IAAI,aAAa,CAACqG,IAAI,CAACrG,KAAK,CAACiF,GAAG,CAAC,EAAE;MAC/BhG,SAAS,CAACU,OAAO,CAACgC,oBAAoB,CAAC,IAAI,CAAC;MAC5C;;GAEP;EAED,oBACIpD,6BAACsI,KAAK,oBACExC,UAAU;IACdlB,SAAS,EAAEC,EAAE,CAAC0D,4BAA4B,EAAE,EAAEC,uBAAuB,CAACjD,KAAK,CAAC,EAAE;MAC1E,gBAAgB,EAAEW;KACrB,CAAC;IACFN,QAAQ,EAAEnE,KAAK;MACXP,YAAY,CAACO,KAAK,CAACuB,MAAM,CAAC7B,KAAK,CAAC;KACnC;IACD6G,SAAS,EAAEK,kBAAkB;IAC7BhD,GAAG,EAAEA,GAAkC;IACvCoD,IAAI,EAAEL,QAAQ,GAAG,QAAQ,GAAGtG,SAAS;IACrCX,KAAK,EAAEiH,QAAQ,GAAGjH,KAAK,GAAG8D,MAAM,CAAC9D,KAAK,aAALA,KAAK,cAALA,KAAK,GAAI,EAAE;KAC9C;AAEV,CAAC,CAAC;AAEF,SAASsD,gBAAgBA,CACrBlE,KAAmB,EACnBmI,QAAgB,EAChBC,SAAgB,EAChBxI,IAA0B,EAC1ByI,QAAa;;EAEb,IAAIrF,aAAa,GAA2B,IAAI;EAChD,MAAM;IAAEsF;GAAc,GAAGtI,KAAK,CAACuI,QAAQ,EAAE;EAEzC,MAAMC,wBAAwB,GAAGC,MAAM,CAACC,MAAM,CAAU;IAAE,GAAGN,SAAS;IAAE,CAACxI,IAAI,CAACqD,EAAE,GAAGoF;GAAU,CAAC,CAACM,IAAI,CAACC,SAAS;;;EAGzGC,cAAc,CAACnE,MAAM,CAACkE,SAAS,CAAC,EAAEN,YAAY,GAAG5D,MAAM,CAAC4D,YAAY,CAAC,GAAG,EAAE,CAAC,CAC9E;EAED,IAAI,CAACE,wBAAwB,EAAE;IAC3BxF,aAAa,GAAG8F,eAAe,CAACC,MAAM;GACzC,MAAM,IAAInJ,IAAI,CAACC,MAAM,CAACmJ,aAAa,EAAE,IAAI,CAACC,cAAc,CAACZ,QAAQ,EAAEzI,IAAI,CAACC,MAAM,CAACqJ,cAAc,EAAuB,CAAC,EAAE;IACpHlG,aAAa,GAAG8F,eAAe,CAACK,MAAM;GACzC,MAAM,IACH,CAACnG,aAAa,IACdpD,IAAI,CAACC,MAAM,CAACuJ,WAAW,EAAE,IACzBC,uBAAuB,CACnBhB,QAAQ,EACRzI,IAAI,EACJuI,QAAQ,EACRnI,KAAK,CAACmD,WAAW,EAAE,CAACD,IAAI,EACxB,CAAC,GAAAoG,qBAAA,GAACtJ,KAAK,CAACuI,QAAQ,EAAE,CAACgB,OAAO,CAACC,IAAI,CAACC,CAAC,IAAIA,CAAC,CAACxG,EAAE,KAAKrD,IAAI,CAACC,MAAM,CAACoD,EAAE,CAAC,cAAAqG,qBAAA,eAA3DA,qBAAA,CAA6DI,IAAI,EACtE,EACH;IACE1G,aAAa,GAAG8F,eAAe,CAACa,OAAO;;EAG3C,OAAO3G,aAAa;AACxB;;;;"}
+{"version":3,"file":"EditingCell.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/EditingCell.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport _ from 'lodash';\nimport { TableMeta, CellContext, ColumnMeta, Cell as RTCell, Table as RTTable } from '@tanstack/react-table';\nimport { Indicator, IndicatorReason } from './Indicator';\nimport { columnFilterFn, globalFilterFn } from '../../../util/filtering';\nimport { Table3FilterValue } from '../../../types';\nimport { hasChanged, willRowMoveAfterSorting } from '../../../util/editing';\nimport { getCurrentRowCellElement } from '../../../util/columns';\nimport { EDITING_ACTIONS_WIDTH } from '../internal/EditingActions';\nimport { EditingControl } from './EditingControl';\nimport { useRowContext } from '../../rows/RowContext';\n\nexport type EditingCellProps<TType = unknown> = CellContext<TType, unknown> & {\n    children?: string | JSX.Element;\n};\n\nexport function EditingCell<TType = unknown>(props: EditingCellProps<TType>) {\n    const { isHovered } = useRowContext();\n    // Need to explicitly pass tableMeta, because just passing the table object will not trigger editing change since table object is not mutatable.\n    const tableMeta = props.table.options.meta as TableMeta<TType>;\n    return <MemoedEditingCell<TType> {...props} isHovered={isHovered} tableMeta={tableMeta} />;\n}\n\n// Memoization\nexport type MemoedEditingCellProps<TType = unknown> = EditingCellProps<TType> & {\n    isHovered: boolean;\n    tableMeta: TableMeta<TType>;\n};\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n    const { cell, column, index, getValue, table, tableRef, row, isHovered, tableMeta } = props;\n    const columnMeta = column.columnDef.meta as ColumnMeta<TType, unknown>;\n\n    const cellRef = React.useRef<HTMLDivElement>(null);\n    const controlRef = React.useRef<HTMLElement>(null);\n\n    const handleChange = (value: unknown) => tableMeta.editing.setCellValue(cell, value);\n    const value = tableMeta.editing.getCellValue(cell) ?? getValue();\n\n    const handleFocus = event => {\n        // Check if cell is hidden behind pinned columns or edititng actions, and scroll to it.\n        const frozenColumnIndex = tableMeta.columnFreezing.frozenColumnIndex;\n        const tableElement = tableRef.current;\n\n        if (tableElement && frozenColumnIndex !== undefined && index > frozenColumnIndex) {\n            const lastFrozenColumnElement = getCurrentRowCellElement(frozenColumnIndex, tableElement);\n            const cellRect = cellRef.current?.getBoundingClientRect();\n            const lastFrozenRect = lastFrozenColumnElement?.getBoundingClientRect();\n            const tableRect = tableElement.getBoundingClientRect();\n\n            // Check for pinned columns overlap\n            if (cellRect && lastFrozenRect && cellRect.left < lastFrozenRect.left + lastFrozenRect.width) {\n                const pinnedColumnsWidth = lastFrozenRect.left + lastFrozenRect.width;\n                tableElement.scrollTo(cellRect.left - pinnedColumnsWidth, tableElement.scrollTop);\n                // Check for editing actions overlap\n            } else if (cellRect && tableRect && cellRect.right > tableRect.right - EDITING_ACTIONS_WIDTH) {\n                const spaceBetweenCellAndEditingActions = 10;\n                tableElement.scrollTo(\n                    // Need to take into account if table has been already scrolled.\n                    tableElement.scrollLeft + EDITING_ACTIONS_WIDTH + spaceBetweenCellAndEditingActions,\n                    tableElement.scrollTop\n                );\n            }\n        }\n\n        if (event.target?.select) {\n            requestAnimationFrame(() => {\n                event.target.select();\n            });\n        }\n    };\n\n    const handleBlur = () => {\n        tableMeta.editing.setDetailModeEditing(false);\n    };\n\n    // row move indicator\n    const moveReason = tableMeta.editing.rowMoveReason[cell.column.id] ?? null;\n    const rows = table.getRowModel().rows;\n    const isCurrentRow = rows[tableMeta.currentRow.currentRowIndex]?.id === row.id;\n    const mountNode = React.useMemo(() => {\n        if (moveReason) {\n            return cellRef.current?.parentElement?.firstChild as Element | null;\n        }\n        return null;\n    }, [moveReason, cellRef]);\n\n    const removeMoveReason = () => {\n        tableMeta.editing.removeRowMoveReason(cell.column.id);\n    };\n\n    React.useEffect(() => {\n        // To avoid reseting move reason on another row hover,\n        // we need to check for changes only if value got changed in the current row.\n        if (!isCurrentRow) {\n            return;\n        }\n\n        if (hasChanged(getValue(), value)) {\n            const moveReason = getRowMoveReason(table, row.index, row.original, cell, value);\n            tableMeta.editing.setRowMoveReason({ [cell.column.id]: moveReason });\n        } else {\n            removeMoveReason();\n        }\n        return removeMoveReason;\n    }, [value]);\n\n    const controlRenderer = column.columnDef.meta?.control;\n\n    const className = cn(\n        '!px-2 py-[var(--table3-row-padding)]',\n        {\n            relative: (isCurrentRow || isHovered) && controlRenderer === 'textarea',\n            // Need to set higher z-index, so that the current row textarea (in expanded state) overlaps rows below\n            'z-10': isCurrentRow,\n            // When row is hovered and located below, then the hovered textarea overlaps the current row textarea(if the current row textarea is expanded to support multiple lines),\n            // as result we need to set lower z-index for the hovered row -> cell.\n            'z-0': isHovered,\n        },\n\n        // component overrides - grayscale for editing hover\n        '[[role=\"row\"][data-current=\"false\"]:hover_&>*]:!grayscale [[role=\"row\"][data-current=\"false\"]:hover_&_.bg-white]:!bg-grey-100',\n        // we alias to any because className conflicts with the Table2 definition,\n        // when Table2 is gone, remove this as any\n        typeof columnMeta.className === 'function' ? (columnMeta.className as any)(row.original) : columnMeta.className\n    );\n\n    return (\n        <>\n            {moveReason !== null && mountNode && (\n                <Indicator\n                    reason={moveReason}\n                    columnName={String(cell.column.columnDef.header)}\n                    mountNode={mountNode}\n                    validationErrors={[]}\n                />\n            )}\n            <div className={className} data-column-index={index} role=\"cell\" ref={cellRef}>\n                <EditingControl\n                    align={columnMeta.align}\n                    column={cell.column}\n                    data={cell.row.original}\n                    initialValue={getValue()}\n                    onBlur={handleBlur}\n                    onFocus={handleFocus}\n                    onChange={handleChange}\n                    ref={controlRef}\n                    table={table}\n                    tableRef={tableRef}\n                    value={value}\n                    cell={cell}\n                    isCurrentRow={isCurrentRow}\n                />\n            </div>\n        </>\n    );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => JSX.Element;\n\nfunction getRowMoveReason<TType>(\n    table: RTTable<any>,\n    rowIndex: number,\n    rowValues: TType,\n    cell: RTCell<any, unknown>,\n    newValue: any\n) {\n    let rowMoveReason: IndicatorReason | null = null;\n    const { globalFilter } = table.getState();\n\n    const isFilteredByGlobalFilter = Object.values<unknown>({ ...rowValues, [cell.id]: newValue }).some(cellValue =>\n        // Global filter can be undefined when there is no text being searched so we pass an empty string to\n        // globalFilterFn as query in that case.\n        globalFilterFn(String(cellValue), globalFilter ? String(globalFilter) : '')\n    );\n\n    if (!isFilteredByGlobalFilter) {\n        rowMoveReason = IndicatorReason.SEARCH;\n    } else if (cell.column.getIsFiltered() && !columnFilterFn(newValue, cell.column.getFilterValue() as Table3FilterValue)) {\n        rowMoveReason = IndicatorReason.FILTER;\n    } else if (\n        !rowMoveReason &&\n        cell.column.getIsSorted() &&\n        willRowMoveAfterSorting(\n            newValue,\n            cell,\n            rowIndex,\n            table.getRowModel().rows,\n            !!table.getState().sorting.find(s => s.id === cell.column.id)?.desc\n        )\n    ) {\n        rowMoveReason = IndicatorReason.SORTING;\n    }\n\n    return rowMoveReason;\n}\n"],"names":["EditingCell","props","isHovered","useRowContext","tableMeta","table","options","meta","React","MemoedEditingCell","memo","cell","column","index","getValue","tableRef","row","columnMeta","columnDef","cellRef","useRef","controlRef","handleChange","value","editing","setCellValue","_tableMeta$editing$ge","getCellValue","handleFocus","event","frozenColumnIndex","columnFreezing","tableElement","current","undefined","_cellRef$current","lastFrozenColumnElement","getCurrentRowCellElement","cellRect","getBoundingClientRect","lastFrozenRect","tableRect","left","width","pinnedColumnsWidth","scrollTo","scrollTop","right","EDITING_ACTIONS_WIDTH","spaceBetweenCellAndEditingActions","scrollLeft","_event$target","target","select","requestAnimationFrame","handleBlur","setDetailModeEditing","moveReason","_tableMeta$editing$ro","rowMoveReason","id","rows","getRowModel","isCurrentRow","_rows$tableMeta$curre","currentRow","currentRowIndex","mountNode","useMemo","_cellRef$current2","_cellRef$current2$par","parentElement","firstChild","removeMoveReason","removeRowMoveReason","useEffect","hasChanged","getRowMoveReason","original","setRowMoveReason","controlRenderer","_column$columnDef$met","control","className","cn","relative","Indicator","reason","columnName","String","header","validationErrors","role","ref","EditingControl","align","data","initialValue","onBlur","onFocus","onChange","rowIndex","rowValues","newValue","globalFilter","getState","isFilteredByGlobalFilter","Object","values","some","cellValue","globalFilterFn","IndicatorReason","SEARCH","getIsFiltered","columnFilterFn","getFilterValue","FILTER","getIsSorted","willRowMoveAfterSorting","_table$getState$sorti","sorting","find","s","desc","SORTING"],"mappings":"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"}

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

@@ -0,0 +1,158 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { mergeRefs } from '../../../../../utils/mergeRefs.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 { getInputAppearanceClassnames, getCellAlignmentClasses } from '../styles.js';
+import _ from 'lodash-es';
+import { hasChanged } from '../../../util/editing.js';
+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,
+    isCurrentRow,
+    ...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));
+  // Revert to initial value if escape was pressed
+  const handleKeyDown = event => {
+    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();
+    }
+    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 = typeof value === 'number';
+  const handleInputKeyDown = event => {
+    handleKeyDown(event);
+    // Switching to editing mode, when key pressed any alphabetical character or number
+    if (/^[a-z0-9]$/i.test(event.key)) {
+      tableMeta.editing.setDetailModeEditing(true);
+      return;
+    }
+  };
+  const handleDatepickerChange = event => {
+    // When datepicker looses focus, it triggers change event, even if date wasn't changed,
+    // so adding additional check here to prevent adding change to the edititng state.
+    const originalDate = cell.row.original[cell.column.id];
+    const changedDate = event.detail;
+    if (hasChanged(originalDate, changedDate)) {
+      handleChange(changedDate);
+    }
+  };
+  if (typeof controlRenderer === 'function') {
+    return controlRenderer({
+      ...attributes,
+      ref: ref,
+      setValue: nextValue => {
+        if (nextValue !== value) {
+          handleChange(nextValue);
+        }
+      },
+      value
+    }, data);
+  } else if (controlRenderer === 'datepicker') {
+    const handleDatepickerKeyDown = event => {
+      handleKeyDown(event);
+      if (/^[a-z0-9]$/i.test(event.key)) {
+        tableMeta.editing.setDetailModeEditing(true);
+        return;
+      }
+    };
+    return /*#__PURE__*/React__default.createElement(Datepicker, Object.assign({}, attributes, {
+      className: cn({
+        '[&_input]:!yt-focus-dark': isCellInDetailMode
+      }),
+      onChange: handleDatepickerChange,
+      onKeyDown: handleDatepickerKeyDown,
+      ref: refCallback,
+      value: value
+    }));
+  } else if (controlRenderer === 'switch') {
+    return /*#__PURE__*/React__default.createElement(Switch, Object.assign({}, attributes, {
+      className: "mx-2 mt-1.5",
+      checked: Boolean(value),
+      onChange: handleChange,
+      ref: refCallback
+    }));
+  } else if (controlRenderer === 'textarea') {
+    return /*#__PURE__*/React__default.createElement(TextAreaControl, Object.assign({}, props, {
+      isCellInDetailMode: isCellInDetailMode,
+      onKeyDown: handleInputKeyDown,
+      ref: refCallback
+    }));
+  }
+  return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, attributes, {
+    className: cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {
+      '!yt-focus-dark': isCellInDetailMode
+    }),
+    onChange: event => {
+      handleChange(event.target.value);
+    },
+    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 'classnames';\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 } from '../../../types';\nimport { TextAreaControl } from './controls/TextAreaControl';\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    isCurrentRow?: 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        isCurrentRow,\n        ...attributes\n    } = props;\n\n    const tableMeta = table.options.meta as TableMeta<unknown>;\n\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    // Revert to initial value if escape was pressed\n    const handleKeyDown = (event: React.KeyboardEvent) => {\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        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 = typeof value === 'number';\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            return;\n        }\n    };\n\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 = cell.row.original[cell.column.id];\n        const changedDate = (event as any).detail;\n        if (hasChanged(originalDate, changedDate)) {\n            handleChange(changedDate);\n        }\n    };\n\n    if (typeof controlRenderer === 'function') {\n        return controlRenderer(\n            {\n                ...attributes,\n                ref: ref,\n                setValue: nextValue => {\n                    if (nextValue !== value) {\n                        handleChange(nextValue);\n                    }\n                },\n                value,\n            },\n            data\n        );\n    } else if (controlRenderer === 'datepicker') {\n        const handleDatepickerKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n            handleKeyDown(event);\n\n            if (/^[a-z0-9]$/i.test(event.key)) {\n                tableMeta.editing.setDetailModeEditing(true);\n                return;\n            }\n        };\n\n        return (\n            <Datepicker\n                {...attributes}\n                className={cn({\n                    '[&_input]:!yt-focus-dark': isCellInDetailMode,\n                })}\n                onChange={handleDatepickerChange}\n                onKeyDown={handleDatepickerKeyDown}\n                ref={refCallback}\n                value={value as Date}\n            />\n        );\n    } else if (controlRenderer === 'switch') {\n        return (\n            <Switch {...attributes} className=\"mx-2 mt-1.5\" checked={Boolean(value)} onChange={handleChange} ref={refCallback} />\n        );\n    } else if (controlRenderer === 'textarea') {\n        return (\n            <TextAreaControl\n                {...props}\n                isCellInDetailMode={isCellInDetailMode}\n                onKeyDown={handleInputKeyDown}\n                ref={refCallback}\n            />\n        );\n    }\n\n    return (\n        <Input\n            {...attributes}\n            className={cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {\n                '!yt-focus-dark': isCellInDetailMode,\n            })}\n            onChange={event => {\n                handleChange(event.target.value);\n            }}\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","isCurrentRow","attributes","tableMeta","options","meta","ref","useRef","refCallback","mergeRefs","columnMeta","columnDef","controlRenderer","control","isCellInDetailMode","editing","detailModeEditing","_ref$current","current","contains","document","activeElement","handleKeyDown","event","target","readOnly","key","stopPropagation","preventDefault","setDetailModeEditing","changedRow","changes","row","id","rowEdtitingDataWithInitialValue","_","isEqual","original","resetChange","_tableRef$current","toggleEditing","focus","deselectInputValue","_target$select","select","call","isNumber","handleInputKeyDown","test","handleDatepickerChange","originalDate","changedDate","detail","hasChanged","setValue","nextValue","handleDatepickerKeyDown","Datepicker","className","cn","onKeyDown","Switch","checked","Boolean","TextAreaControl","Input","getInputAppearanceClassnames","getCellAlignmentClasses","type","undefined","String"],"mappings":"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"}

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

@@ -0,0 +1,102 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { useMergedRef } from '../../../../../../hooks/useMergedRef.js';
+import { getCellAlignmentClasses } from '../../styles.js';
+import { Textarea } from '../../../../../Textarea/Textarea.js';
+
+const TextAreaControl = /*#__PURE__*/React__default.forwardRef(function TextAreaControl(props, externalRef) {
+  const {
+    onKeyDown: handleKeyDown,
+    onChange: handleChange,
+    column,
+    isCellInDetailMode,
+    align,
+    isCurrentRow,
+    value,
+    ...attributes
+  } = props;
+  const textareaMaxHeight = 120;
+  const textareaMinHeight = 32;
+  const columnMeta = column.columnDef.meta;
+  const ref = useMergedRef(externalRef);
+  React__default.useEffect(() => {
+    // If truncation is not enabled, then textarea should re-calculate it's height to fit with it's own content, when initialized.
+    if (ref !== null && ref !== void 0 && ref.current && !(columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate)) {
+      const textareaElement = ref === null || ref === void 0 ? void 0 : ref.current;
+      resizeTextArea(textareaElement);
+    }
+  }, []);
+  React__default.useEffect(() => {
+    // If truncation is enabled, then textarea should only adjust to it's own content, when in detail mode.
+    // Otherwise it should collapse to minimal height.
+    if (ref !== null && ref !== void 0 && ref.current && columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
+      const textareaElement = ref === null || ref === void 0 ? void 0 : ref.current;
+      if (isCellInDetailMode) {
+        resizeTextArea(textareaElement);
+      } else {
+        textareaElement.style.height = `${textareaMinHeight}px`;
+      }
+    }
+  }, [isCellInDetailMode]);
+  const resizeTextArea = textareaElement => {
+    // Need to set inherit before calculating height, so that browser sets the scrollHeight properly,
+    // depending on text inside.
+    const textareaRect = textareaElement.getBoundingClientRect();
+    const prevHeight = textareaRect.height;
+    if (columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
+      if (prevHeight < textareaMaxHeight) {
+        textareaElement.style.height = 'inherit';
+        textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, textareaMaxHeight)}px`;
+      }
+    } else {
+      textareaElement.style.height = 'inherit';
+      textareaElement.style.height = `${textareaElement.scrollHeight}px`;
+    }
+  };
+  const handleTextareaChange = e => {
+    resizeTextArea(e.target);
+  };
+  const textareaContainerClassName = cn('w-full', {
+    'focus-within:absolute focus-within:left-0 focus-within:top-0 focus-within:z-20 focus-within:px-2 focus-within:pt-[var(--table3-row-padding)]': columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate
+  });
+  const handleTextareaKeyDown = event => {
+    // By default Shift + Enter in textarea makes a new line, we want to keep this behaviour
+    if (event.shiftKey && event.key === 'Enter') {
+      return;
+    } else {
+      handleKeyDown(event);
+    }
+  };
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: textareaContainerClassName,
+    "data-taco": "input-container"
+  }, /*#__PURE__*/React__default.createElement(Textarea, Object.assign({}, attributes, {
+    onChange: event => {
+      handleChange(event.target.value);
+      handleTextareaChange(event);
+    },
+    rows: 1,
+    onKeyDown: e => {
+      handleTextareaKeyDown(e);
+    },
+    onBlur: event => {
+      // If truncation is enabled, then textarea should shring back to min height, when loosing focus.
+      if (columnMeta !== null && columnMeta !== void 0 && columnMeta.enableTruncate) {
+        const textareaElement = event.currentTarget;
+        textareaElement.style.height = `${textareaMinHeight}px`;
+      }
+    },
+    className: cn(getCellAlignmentClasses(align), `z-20 h-fit resize-none`, {
+      [`!min-h-[${textareaMinHeight}px]`]: columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate,
+      '!yt-focus-dark': isCellInDetailMode,
+      [`h-[${textareaMinHeight}px]`]: !isCellInDetailMode && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate),
+      // Only allow resizing when focused and truncation enabled
+      'focus:resize-y': isCurrentRow && (columnMeta === null || columnMeta === void 0 ? void 0 : columnMeta.enableTruncate)
+    }),
+    ref: ref,
+    value: String(value !== null && value !== void 0 ? value : '')
+  })));
+});
+
+export { TextAreaControl };
+//# sourceMappingURL=TextAreaControl.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextAreaControl.js","sources":["../../../../../../../../../../../src/components/Table3/components/columns/cell/controls/TextAreaControl.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Textarea } from '../../../../../Textarea/Textarea';\nimport { EditingControlProps } from '../EditingControl';\nimport { getCellAlignmentClasses } from '../../styles';\nimport { useMergedRef } from '../../../../../../hooks/useMergedRef';\n\ntype TextAreaControlProps<TType = unknown> = EditingControlProps<TType> & {\n    onKeyDown: (event: React.KeyboardEvent<HTMLTextAreaElement>) => void;\n    isCellInDetailMode?: boolean;\n};\n\nexport const TextAreaControl = React.forwardRef<HTMLElement, any>(function TextAreaControl<TType = unknown>(\n    props: TextAreaControlProps<TType>,\n    externalRef: React.Ref<HTMLElement>\n) {\n    const {\n        onKeyDown: handleKeyDown,\n        onChange: handleChange,\n        column,\n        isCellInDetailMode,\n        align,\n        isCurrentRow,\n        value,\n        ...attributes\n    } = props;\n\n    const textareaMaxHeight = 120;\n    const textareaMinHeight = 32;\n\n    const columnMeta = column.columnDef.meta;\n\n    const ref = useMergedRef<HTMLTextAreaElement>(externalRef);\n\n    React.useEffect(() => {\n        // If truncation is not enabled, then textarea should re-calculate it's height to fit with it's own content, when initialized.\n        if (ref?.current && !columnMeta?.enableTruncate) {\n            const textareaElement = ref?.current as HTMLTextAreaElement;\n            resizeTextArea(textareaElement);\n        }\n    }, []);\n\n    React.useEffect(() => {\n        // If truncation is enabled, then textarea should only adjust to it's own content, when in detail mode.\n        // Otherwise it should collapse to minimal height.\n        if (ref?.current && columnMeta?.enableTruncate) {\n            const textareaElement = ref?.current as HTMLTextAreaElement;\n\n            if (isCellInDetailMode) {\n                resizeTextArea(textareaElement);\n            } else {\n                textareaElement.style.height = `${textareaMinHeight}px`;\n            }\n        }\n    }, [isCellInDetailMode]);\n\n    const resizeTextArea = (textareaElement: HTMLTextAreaElement) => {\n        // Need to set inherit before calculating height, so that browser sets the scrollHeight properly,\n        // depending on text inside.\n        const textareaRect = textareaElement.getBoundingClientRect();\n        const prevHeight = textareaRect.height;\n        if (columnMeta?.enableTruncate) {\n            if (prevHeight < textareaMaxHeight) {\n                textareaElement.style.height = 'inherit';\n                textareaElement.style.height = `${Math.min(textareaElement.scrollHeight, textareaMaxHeight)}px`;\n            }\n        } else {\n            textareaElement.style.height = 'inherit';\n            textareaElement.style.height = `${textareaElement.scrollHeight}px`;\n        }\n    };\n\n    const handleTextareaChange = e => {\n        resizeTextArea(e.target);\n    };\n\n    const textareaContainerClassName = cn('w-full', {\n        'focus-within:absolute focus-within:left-0 focus-within:top-0 focus-within:z-20 focus-within:px-2 focus-within:pt-[var(--table3-row-padding)]':\n            columnMeta?.enableTruncate,\n    });\n    const handleTextareaKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {\n        // By default Shift + Enter in textarea makes a new line, we want to keep this behaviour\n        if (event.shiftKey && event.key === 'Enter') {\n            return;\n        } else {\n            handleKeyDown(event);\n        }\n    };\n\n    return (\n        <div className={textareaContainerClassName} data-taco=\"input-container\">\n            <Textarea\n                {...attributes}\n                onChange={event => {\n                    handleChange(event.target.value);\n                    handleTextareaChange(event);\n                }}\n                rows={1}\n                onKeyDown={e => {\n                    handleTextareaKeyDown(e);\n                }}\n                onBlur={event => {\n                    // If truncation is enabled, then textarea should shring back to min height, when loosing focus.\n                    if (columnMeta?.enableTruncate) {\n                        const textareaElement = event.currentTarget;\n                        textareaElement.style.height = `${textareaMinHeight}px`;\n                    }\n                }}\n                className={cn(getCellAlignmentClasses(align), `z-20 h-fit resize-none`, {\n                    [`!min-h-[${textareaMinHeight}px]`]: columnMeta?.enableTruncate,\n                    '!yt-focus-dark': isCellInDetailMode,\n                    [`h-[${textareaMinHeight}px]`]: !isCellInDetailMode && columnMeta?.enableTruncate,\n                    // Only allow resizing when focused and truncation enabled\n                    'focus:resize-y': isCurrentRow && columnMeta?.enableTruncate,\n                })}\n                ref={ref}\n                value={String(value ?? '')}\n            />\n        </div>\n    );\n});\n"],"names":["TextAreaControl","React","forwardRef","props","externalRef","onKeyDown","handleKeyDown","onChange","handleChange","column","isCellInDetailMode","align","isCurrentRow","value","attributes","textareaMaxHeight","textareaMinHeight","columnMeta","columnDef","meta","ref","useMergedRef","useEffect","current","enableTruncate","textareaElement","resizeTextArea","style","height","textareaRect","getBoundingClientRect","prevHeight","Math","min","scrollHeight","handleTextareaChange","e","target","textareaContainerClassName","cn","handleTextareaKeyDown","event","shiftKey","key","className","Textarea","rows","onBlur","currentTarget","getCellAlignmentClasses","String"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/Table3/components/columns/footer/Footer.js

@@ -40,7 +40,7 @@ const MemoedFooter = /*#__PURE__*/React__default.memo(function MemoedFooter(prop
     className: className,
     "data-align": align,
     "data-column-index": index,
-    role: "cell"
+    role: "columnheader"
   }, typeof meta.footer === 'function' ? /*#__PURE__*/React__default.createElement("span", {
     className: "flex-grow truncate"
   }, meta.footer(table.getRowModel().rows.map(row => row.original[id]))) : null);