@economic/taco 1.41.0 → 2.0.0-alpha.173

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

@@ -0,0 +1,27 @@
+import React__default from 'react';
+import { useRowContext } from '../../rows/RowContext.js';
+import { DisplayCell } from './DisplayCell.js';
+import { EditingCell } from './EditingCell.js';
+
+function Cell(props) {
+  var _rows$tableMeta$curre;
+  const {
+    column,
+    row,
+    table
+  } = props;
+  const {
+    isHovered: isHoveredRow
+  } = useRowContext();
+  const rows = table.getRowModel().rows;
+  const tableMeta = table.options.meta;
+  const columnMeta = column.columnDef.meta;
+  const isCurrentRow = ((_rows$tableMeta$curre = rows[tableMeta.currentRow.currentRowIndex]) === null || _rows$tableMeta$curre === void 0 ? void 0 : _rows$tableMeta$curre.id) === row.id;
+  if (tableMeta.editing.isEditing && columnMeta.control && (isCurrentRow || isHoveredRow && !tableMeta.hoverState.isPaused)) {
+    return /*#__PURE__*/React__default.createElement(EditingCell, Object.assign({}, props));
+  }
+  return /*#__PURE__*/React__default.createElement(DisplayCell, Object.assign({}, props));
+}
+
+export { Cell };
+//# sourceMappingURL=Cell.js.map

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';\n\nexport type CellProps<TType = unknown> = CellContext<TType, unknown> & {\n    children?: string | JSX.Element;\n};\n\nexport function Cell<TType = unknown>(props: CellProps<TType>) {\n    const { column, row, table } = props;\n    const { isHovered: isHoveredRow } = useRowContext();\n    const rows = table.getRowModel().rows;\n    const tableMeta = table.options.meta as TableMeta<unknown>;\n    const columnMeta = column.columnDef.meta as ColumnMeta<TType, unknown>;\n\n    const isCurrentRow = rows[tableMeta.currentRow.currentRowIndex]?.id === row.id;\n\n    if (tableMeta.editing.isEditing && columnMeta.control && (isCurrentRow || (isHoveredRow && !tableMeta.hoverState.isPaused))) {\n        return <EditingCell {...props} />;\n    }\n\n    return <DisplayCell {...props} />;\n}\n"],"names":["Cell","props","column","row","table","isHovered","isHoveredRow","useRowContext","rows","getRowModel","tableMeta","options","meta","columnMeta","columnDef","isCurrentRow","currentRow","currentRowIndex","id","editing","isEditing","control","hoverState","isPaused","React","EditingCell","DisplayCell"],"mappings":";;;;;SAUgBA,IAAI,CAAkBC,KAAuB;;EACzD,MAAM;IAAEC,MAAM;IAAEC,GAAG;IAAEC;GAAO,GAAGH,KAAK;EACpC,MAAM;IAAEI,SAAS,EAAEC;GAAc,GAAGC,aAAa,EAAE;EACnD,MAAMC,IAAI,GAAGJ,KAAK,CAACK,WAAW,EAAE,CAACD,IAAI;EACrC,MAAME,SAAS,GAAGN,KAAK,CAACO,OAAO,CAACC,IAA0B;EAC1D,MAAMC,UAAU,GAAGX,MAAM,CAACY,SAAS,CAACF,IAAkC;EAEtE,MAAMG,YAAY,GAAG,0BAAAP,IAAI,CAACE,SAAS,CAACM,UAAU,CAACC,eAAe,CAAC,0DAA1C,sBAA4CC,EAAE,MAAKf,GAAG,CAACe,EAAE;EAE9E,IAAIR,SAAS,CAACS,OAAO,CAACC,SAAS,IAAIP,UAAU,CAACQ,OAAO,KAAKN,YAAY,IAAKT,YAAY,IAAI,CAACI,SAAS,CAACY,UAAU,CAACC,QAAS,CAAC,EAAE;IACzH,oBAAOC,6BAACC,WAAW,oBAAKxB,KAAK,EAAI;;EAGrC,oBAAOuB,6BAACE,WAAW,oBAAKzB,KAAK,EAAI;AACrC;;;;"}

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

@@ -0,0 +1,128 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { isCellHighlighted, scrollColumnIntoView } from '../../../util/columns.js';
+import { RowContext } from '../../rows/RowContext.js';
+
+function DisplayCell(props) {
+  const {
+    cell,
+    className,
+    column,
+    getValue,
+    index,
+    row,
+    table,
+    tableRef
+  } = props;
+  const columnMeta = React__default.useMemo(() => column.columnDef.meta, []);
+  const tableMeta = table.options.meta;
+  const {
+    rowIndex
+  } = React__default.useContext(RowContext);
+  const value = getValue();
+  // cells are heavily memoized because performance in our table is critical
+  // be careful and selective about props that you pass to the cell
+  const memoedProps = React__default.useMemo(() => {
+    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,
+      frozenColumnIndex: tableMeta.columnFreezing.frozenColumnIndex,
+      id: cell.id,
+      index,
+      tableRef
+    };
+  }, [row.original, props.children, value]);
+  const memoedHighlight = React__default.useMemo(() => {
+    var _tableMeta$search$que;
+    if (!tableMeta.search.isHighlightingEnabled) {
+      return false;
+    }
+    if ((_tableMeta$search$que = tableMeta.search.query) !== null && _tableMeta$search$que !== void 0 && _tableMeta$search$que.length && columnMeta.enableSearch) {
+      return isCellHighlighted(tableMeta.search.query, value, memoedProps.children);
+    }
+    return false;
+  }, [memoedProps.children, tableMeta.search.isHighlightingEnabled, tableMeta.search.query]);
+  const memoedHighlightCurrent = React__default.useMemo(() => {
+    if (!tableMeta.search.isHighlightingEnabled || !memoedHighlight || tableMeta.search.currentHighlightColumnIndex === undefined) {
+      return false;
+    }
+    const [currentRowIndex, currentColumnIndex] = tableMeta.search.highlightedColumnIndexes[tableMeta.search.currentHighlightColumnIndex];
+    if (currentRowIndex === rowIndex && currentColumnIndex === index) {
+      return true;
+    }
+    return false;
+  }, [memoedHighlight, tableMeta.search.highlightedColumnIndexes.length, tableMeta.search.currentHighlightColumnIndex]);
+  return /*#__PURE__*/React__default.createElement(MemoedDisplayCell, Object.assign({}, memoedProps, {
+    highlighted: memoedHighlight,
+    highlightedAsCurrent: memoedHighlightCurrent
+  }));
+}
+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-row-padding)]', customClassName);
+  const className = highlighted ? undefined : layoutClassName;
+  const content = enableTruncate || typeof children === 'string' ? /*#__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"
+  }, highlighted ? /*#__PURE__*/React__default.createElement(Highlight, {
+    className: layoutClassName,
+    current: highlightedAsCurrent,
+    frozenColumnIndex: frozenColumnIndex,
+    index: index,
+    tableRef: tableRef
+  }, content) : content);
+});
+const Highlight = props => {
+  const {
+    current,
+    frozenColumnIndex,
+    index,
+    tableRef,
+    ...attributes
+  } = props;
+  const ref = React__default.useRef(null);
+  const className = cn('h-full flex px-4 [justify-content:inherit] [text-align:inherit]', props.className, {
+    // normal row
+    'bg-blue-200/25': !current,
+    // current row
+    'bg-blue-200/75': current
+  });
+  React__default.useEffect(() => {
+    if (ref.current && current) {
+      scrollColumnIntoView(index, frozenColumnIndex, ref.current, tableRef.current);
+    }
+  }, [current]);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
+    className: className,
+    ref: ref
+  }));
+};
+
+export { DisplayCell };
+//# sourceMappingURL=DisplayCell.js.map

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

@@ -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 'classnames';\nimport { ColumnMeta, CellContext, TableMeta } from '@tanstack/react-table';\nimport { ColumnAlignment } from '../../../types';\nimport { RowContext } from '../../rows/RowContext';\nimport { isCellHighlighted, scrollColumnIntoView } from '../../../util/columns';\n\nexport type DisplayCellProps<TType = unknown> = CellContext<TType, unknown> & {\n    children?: string | JSX.Element;\n    className?: string;\n};\n\nexport function DisplayCell<TType = unknown>(props: DisplayCellProps<TType>) {\n    const { cell, className, column, getValue, index, row, table, tableRef } = props;\n    const columnMeta = React.useMemo(() => column.columnDef.meta as ColumnMeta<TType, unknown>, []);\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const { rowIndex } = React.useContext(RowContext);\n\n    const value = getValue();\n\n    // cells are heavily memoized because performance in our table is critical\n    // be careful and selective about props that you pass to the cell\n    const memoedProps = React.useMemo(() => {\n        return {\n            align: columnMeta.align,\n            children: (props.children ?? columnMeta.renderer?.(value, row.original) ?? value ?? null) as\n                | JSX.Element\n                | string\n                | null,\n            className: cn(\n                className,\n                typeof columnMeta.className === 'function' ? columnMeta.className(row.original) : columnMeta.className\n            ),\n            data: row.original,\n            debug: table.options.debugAll,\n            enableTruncate: columnMeta.enableTruncate,\n            frozenColumnIndex: tableMeta.columnFreezing.frozenColumnIndex,\n            id: cell.id,\n            index,\n            tableRef,\n        };\n    }, [row.original, props.children, value]);\n\n    const memoedHighlight = React.useMemo(() => {\n        if (!tableMeta.search.isHighlightingEnabled) {\n            return false;\n        }\n\n        if (tableMeta.search.query?.length && columnMeta.enableSearch) {\n            return isCellHighlighted(tableMeta.search.query, value, memoedProps.children);\n        }\n\n        return false;\n    }, [memoedProps.children, tableMeta.search.isHighlightingEnabled, tableMeta.search.query]);\n\n    const memoedHighlightCurrent = React.useMemo(() => {\n        if (\n            !tableMeta.search.isHighlightingEnabled ||\n            !memoedHighlight ||\n            tableMeta.search.currentHighlightColumnIndex === undefined\n        ) {\n            return false;\n        }\n\n        const [currentRowIndex, currentColumnIndex] =\n            tableMeta.search.highlightedColumnIndexes[tableMeta.search.currentHighlightColumnIndex];\n\n        if (currentRowIndex === rowIndex && currentColumnIndex === index) {\n            return true;\n        }\n\n        return false;\n    }, [memoedHighlight, tableMeta.search.highlightedColumnIndexes.length, tableMeta.search.currentHighlightColumnIndex]);\n\n    return (\n        <MemoedDisplayCell<TType> {...memoedProps} highlighted={memoedHighlight} highlightedAsCurrent={memoedHighlightCurrent} />\n    );\n}\n\n// Memoization\nexport type MemoedDisplayCellProps<TType = unknown> = {\n    align?: ColumnAlignment;\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('py-[var(--table3-row-padding)]', customClassName);\n\n    const className = highlighted ? undefined : layoutClassName;\n    const content = enableTruncate || typeof children === 'string' ? <span className=\"truncate\">{children}</span> : children;\n\n    if (debug) {\n        console.log('cell render', id);\n    }\n\n    return (\n        <div className={className} data-align={align} data-column-index={index} data-highlighted={highlighted} role=\"cell\">\n            {highlighted ? (\n                <Highlight\n                    className={layoutClassName}\n                    current={highlightedAsCurrent}\n                    frozenColumnIndex={frozenColumnIndex}\n                    index={index}\n                    tableRef={tableRef}>\n                    {content}\n                </Highlight>\n            ) : (\n                content\n            )}\n        </div>\n    );\n}) as <TType = unknown>(props: MemoedDisplayCellProps<TType>) => JSX.Element;\n\nconst Highlight = props => {\n    const { current, frozenColumnIndex, index, tableRef, ...attributes } = props;\n    const ref = React.useRef<HTMLDivElement | null>(null);\n    const className = cn('h-full flex px-4 [justify-content:inherit] [text-align:inherit]', props.className, {\n        // normal row\n        'bg-blue-200/25': !current,\n        // current row\n        'bg-blue-200/75': current,\n    });\n\n    React.useEffect(() => {\n        if (ref.current && current) {\n            scrollColumnIntoView(index, frozenColumnIndex, ref.current, tableRef.current);\n        }\n    }, [current]);\n\n    return <div {...attributes} className={className} ref={ref} />;\n};\n"],"names":["DisplayCell","props","cell","className","column","getValue","index","row","table","tableRef","columnMeta","React","useMemo","columnDef","meta","tableMeta","options","rowIndex","useContext","RowContext","value","memoedProps","align","children","renderer","original","cn","data","debug","debugAll","enableTruncate","frozenColumnIndex","columnFreezing","id","memoedHighlight","search","isHighlightingEnabled","query","length","enableSearch","isCellHighlighted","memoedHighlightCurrent","currentHighlightColumnIndex","undefined","currentRowIndex","currentColumnIndex","highlightedColumnIndexes","MemoedDisplayCell","highlighted","highlightedAsCurrent","memo","customClassName","layoutClassName","content","console","log","role","Highlight","current","attributes","ref","useRef","useEffect","scrollColumnIntoView"],"mappings":"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"}

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

@@ -0,0 +1,283 @@
+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 { 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';
+
+function EditingCell(props) {
+  return /*#__PURE__*/React__default.createElement(MemoedEditingCell, Object.assign({}, props));
+}
+const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditingCell(props) {
+  var _tableMeta$editing$ge, _tableMeta$editing$ro, _rows$tableMeta$curre;
+  const {
+    cell,
+    column,
+    index,
+    getValue,
+    table,
+    tableRef,
+    row
+  } = props;
+  const tableMeta = table.options.meta;
+  const columnMeta = column.columnDef.meta;
+  const cellRef = React__default.useRef(null);
+  const controlRef = React__default.useRef(null);
+  const handleChange = value => tableMeta.editing.setCellValue(cell, value);
+  const value = (_tableMeta$editing$ge = tableMeta.editing.getCellValue(cell)) !== null && _tableMeta$editing$ge !== void 0 ? _tableMeta$editing$ge : getValue();
+  const handleFocus = event => {
+    var _event$target;
+    // Check if cell is hidden behind pinned columns or edititng actions, and scroll to it.
+    const frozenColumnIndex = tableMeta.columnFreezing.frozenColumnIndex;
+    const tableElement = tableRef.current;
+    if (tableElement && frozenColumnIndex !== undefined && index > frozenColumnIndex) {
+      var _cellRef$current;
+      const lastFrozenColumnElement = getCurrentRowCellElement(frozenColumnIndex, tableElement);
+      const cellRect = (_cellRef$current = cellRef.current) === null || _cellRef$current === void 0 ? void 0 : _cellRef$current.getBoundingClientRect();
+      const lastFrozenRect = lastFrozenColumnElement === null || lastFrozenColumnElement === void 0 ? void 0 : lastFrozenColumnElement.getBoundingClientRect();
+      const tableRect = tableElement.getBoundingClientRect();
+      // Check for pinned columns overlap
+      if (cellRect && lastFrozenRect && cellRect.left < lastFrozenRect.left + lastFrozenRect.width) {
+        const pinnedColumnsWidth = lastFrozenRect.left + lastFrozenRect.width;
+        tableElement.scrollTo(cellRect.left - pinnedColumnsWidth, tableElement.scrollTop);
+        // Check for editing actions overlap
+      } else if (cellRect && tableRect && cellRect.right > tableRect.right - EDITING_ACTIONS_WIDTH) {
+        const spaceBetweenCellAndEditingActions = 10;
+        tableElement.scrollTo(
+        // Need to take into account if table has been already scrolled.
+        tableElement.scrollLeft + EDITING_ACTIONS_WIDTH + spaceBetweenCellAndEditingActions, tableElement.scrollTop);
+      }
+    }
+    if ((_event$target = event.target) !== null && _event$target !== void 0 && _event$target.select) {
+      requestAnimationFrame(() => {
+        event.target.select();
+      });
+    }
+  };
+  const handleBlur = () => {
+    tableMeta.editing.setDetailModeEditing(false);
+  };
+  // row move indicator
+  const moveReason = (_tableMeta$editing$ro = tableMeta.editing.rowMoveReason[cell.column.id]) !== null && _tableMeta$editing$ro !== void 0 ? _tableMeta$editing$ro : null;
+  const rows = table.getRowModel().rows;
+  const isCurrentRow = ((_rows$tableMeta$curre = rows[tableMeta.currentRow.currentRowIndex]) === null || _rows$tableMeta$curre === void 0 ? void 0 : _rows$tableMeta$curre.id) === row.id;
+  const mountNode = React__default.useMemo(() => {
+    if (moveReason) {
+      var _cellRef$current2, _cellRef$current2$par;
+      return (_cellRef$current2 = cellRef.current) === null || _cellRef$current2 === void 0 ? void 0 : (_cellRef$current2$par = _cellRef$current2.parentElement) === null || _cellRef$current2$par === void 0 ? void 0 : _cellRef$current2$par.firstChild;
+    }
+    return null;
+  }, [moveReason, cellRef]);
+  const removeMoveReason = () => {
+    tableMeta.editing.removeRowMoveReason(cell.column.id);
+  };
+  React__default.useEffect(() => {
+    // To avoid reseting move reason on another row hover,
+    // we need to check for changes only if value got changed in the current row.
+    if (!isCurrentRow) {
+      return;
+    }
+    if (hasChanged(getValue(), value)) {
+      const moveReason = getRowMoveReason(table, row.index, row.original, cell, value);
+      tableMeta.editing.setRowMoveReason({
+        [cell.column.id]: moveReason
+      });
+    } else {
+      removeMoveReason();
+    }
+    return removeMoveReason;
+  }, [value]);
+  const className = cn('!px-2 py-[var(--table3-row-padding)]',
+  // component overrides - grayscale for editing hover
+  '[[role="row"][data-current="false"]:hover_&>*]:!grayscale [[role="row"][data-current="false"]:hover_&_.bg-white]:!bg-grey-100', typeof columnMeta.className === 'function' ? columnMeta.className(row.original) : columnMeta.className);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, moveReason !== null && mountNode && /*#__PURE__*/React__default.createElement(Indicator, {
+    reason: moveReason,
+    columnName: String(cell.column.columnDef.header),
+    mountNode: mountNode,
+    validationErrors: []
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: className,
+    "data-column-index": index,
+    role: "cell",
+    ref: cellRef
+  }, /*#__PURE__*/React__default.createElement(Control, {
+    align: columnMeta.align,
+    column: cell.column,
+    data: cell.row.original,
+    initialValue: getValue(),
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onChange: handleChange,
+    ref: controlRef,
+    table: table,
+    tableRef: tableRef,
+    value: value,
+    cell: cell
+  })));
+});
+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 {
+        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 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;
+  const {
+    globalFilter
+  } = table.getState();
+  const isFilteredByGlobalFilter = Object.values({
+    ...rowValues,
+    [cell.id]: newValue
+  }).some(cellValue =>
+  // Global filter can be undefined when there is no text being searched so we pass an empty string to
+  // globalFilterFn as query in that case.
+  globalFilterFn(String(cellValue), globalFilter ? String(globalFilter) : ''));
+  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 '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        typeof columnMeta.className === 'function' ? columnMeta.className(row.original) : columnMeta.className\n    );\n\n    return (\n        <>\n            {moveReason !== null && mountNode && (\n                <Indicator\n                    reason={moveReason}\n                    columnName={String(cell.column.columnDef.header)}\n                    mountNode={mountNode}\n                    validationErrors={[]}\n                />\n            )}\n            <div 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                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 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","getCellValue","handleFocus","event","frozenColumnIndex","columnFreezing","tableElement","current","undefined","lastFrozenColumnElement","getCurrentRowCellElement","cellRect","getBoundingClientRect","lastFrozenRect","tableRect","left","width","pinnedColumnsWidth","scrollTo","scrollTop","right","EDITING_ACTIONS_WIDTH","spaceBetweenCellAndEditingActions","scrollLeft","target","select","requestAnimationFrame","handleBlur","setDetailModeEditing","moveReason","rowMoveReason","id","rows","getRowModel","isCurrentRow","currentRow","currentRowIndex","mountNode","useMemo","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","control","isCellInDetailMode","detailModeEditing","contains","document","activeElement","handleKeyDown","readOnly","key","preventDefault","stopPropagation","changedRow","changes","rowEdtitingDataWithInitialValue","_","isEqual","resetChange","toggleEditing","focus","deselectInputValue","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","sorting","find","s","desc","SORTING"],"mappings":"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"}

package/dist/esm/packages/taco/src/components/{Table2/components/column → Table3/components/columns/cell}/Indicator.js

@@ -1,7 +1,7 @@
 import React__default from 'react';
-import { Icon } from '../../../Icon/Icon.js';
-import { Tooltip } from '../../../Tooltip/Tooltip.js';
-import { useLocalization } from '../../../Provider/Localization.js';
+import { Icon } from '../../../../Icon/Icon.js';
+import { Tooltip } from '../../../../Tooltip/Tooltip.js';
+import { useLocalization } from '../../../../Provider/Localization.js';
 import ReactDOM from 'react-dom';
 
 var IndicatorReason;
@@ -18,16 +18,16 @@ const useIndicatorText = reason => {
   } = useLocalization();
   switch (reason) {
     case IndicatorReason.FILTER:
-      title = texts.table2.editing.rowIndicator.rowWillBeHidden;
-      description = texts.table2.editing.rowIndicator.rowWillMoveReasonFilter;
+      title = texts.table3.editing.rowIndicator.rowWillBeHidden;
+      description = texts.table3.editing.rowIndicator.rowWillMoveReasonFilter;
       break;
     case IndicatorReason.SEARCH:
-      title = texts.table2.editing.rowIndicator.rowWillBeHidden;
-      description = texts.table2.editing.rowIndicator.rowWillMoveReasonSearch;
+      title = texts.table3.editing.rowIndicator.rowWillBeHidden;
+      description = texts.table3.editing.rowIndicator.rowWillMoveReasonSearch;
       break;
     case IndicatorReason.SORTING:
-      title = texts.table2.editing.rowIndicator.rowWillMove;
-      description = texts.table2.editing.rowIndicator.rowWillMoveReasonSorting;
+      title = texts.table3.editing.rowIndicator.rowWillMove;
+      description = texts.table3.editing.rowIndicator.rowWillMoveReasonSorting;
       break;
   }
   return {
@@ -43,20 +43,21 @@ const Indicator = ({
 }) => {
   const container = React__default.useMemo(() => {
     const element = document.createElement('div');
-    element.className += 'z-[3] rounded-b-md items-center wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap px-1 py-0.5 text-xs font-bold shadow-sm';
+    element.className += 'rounded-b-md items-center wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap px-1 py-0.5 text-xs font-bold shadow-sm';
     return element;
   }, []);
   const indicatorText = useIndicatorText(reason);
   const hasValidationErrorsInRow = !!validationErrors;
   React__default.useEffect(() => {
     // mountNode could be null when rows are filtered
-    mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.add('relative');
+    // Pinned columns has z-20 class assigned, which overlaps indicator element, need to add z-21 to overlap pinned columns.
+    mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.add('!z-[21]', 'relative');
     mountNode === null || mountNode === void 0 ? void 0 : mountNode.appendChild(container);
     return () => {
-      mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.remove('relative');
+      mountNode === null || mountNode === void 0 ? void 0 : mountNode.classList.remove('!z-[21]', 'relative');
       mountNode === null || mountNode === void 0 ? void 0 : mountNode.removeChild(container);
     };
-  }, [hasValidationErrorsInRow]);
+  }, [hasValidationErrorsInRow, mountNode]);
   // Using react portal inside a react tree component is an unorthodox way, but in order to avoid much code refactoring
   // and being able to use Taco Tooltip component in side the visual indicator, portal is used.
   return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(Tooltip, {

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

@@ -0,0 +1 @@
+{"version":3,"file":"Indicator.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/Indicator.tsx"],"sourcesContent":["import React from 'react';\nimport ReactDOM from 'react-dom';\nimport { useLocalization } from '../../../../Provider/Localization';\nimport { Tooltip } from '../../../../Tooltip/Tooltip';\nimport { Icon } from '../../../../Icon/Icon';\n\nexport enum IndicatorReason {\n    SEARCH = 'SEARCH',\n    SORTING = 'SORTING',\n    FILTER = 'FILTER',\n}\n\nexport const useIndicatorText = reason => {\n    let title = '';\n    let description = '';\n\n    const { texts } = useLocalization();\n\n    switch (reason) {\n        case IndicatorReason.FILTER:\n            title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonFilter;\n            break;\n        case IndicatorReason.SEARCH:\n            title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonSearch;\n            break;\n        case IndicatorReason.SORTING:\n            title = texts.table3.editing.rowIndicator.rowWillMove;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonSorting;\n            break;\n    }\n\n    return { title, description };\n};\n\nexport type IndicatorProps = {\n    reason: IndicatorReason;\n    columnName: string;\n    mountNode: Element | null;\n    validationErrors: any;\n};\nexport const Indicator = ({ reason, columnName, mountNode, validationErrors }: IndicatorProps) => {\n    const container = React.useMemo(() => {\n        const element = document.createElement('div');\n        element.className +=\n            'rounded-b-md items-center wcag-blue-500 absolute left-0 top-full ml-1 whitespace-nowrap px-1 py-0.5 text-xs font-bold shadow-sm';\n\n        return element;\n    }, []);\n\n    const indicatorText = useIndicatorText(reason);\n\n    const hasValidationErrorsInRow = !!validationErrors;\n\n    React.useEffect(() => {\n        // mountNode could be null when rows are filtered\n        // Pinned columns has z-20 class assigned, which overlaps indicator element, need to add z-21 to overlap pinned columns.\n        mountNode?.classList.add('!z-[21]', 'relative');\n        mountNode?.appendChild(container);\n\n        return () => {\n            mountNode?.classList.remove('!z-[21]', 'relative');\n            mountNode?.removeChild(container);\n        };\n    }, [hasValidationErrorsInRow, mountNode]);\n\n    // Using react portal inside a react tree component is an unorthodox way, but in order to avoid much code refactoring\n    // and being able to use Taco Tooltip component in side the visual indicator, portal is used.\n    return ReactDOM.createPortal(\n        <Tooltip title={indicatorText.description.replace('[COLUMN]', columnName)}>\n            <span className=\"flex gap-1 hover:cursor-pointer\">\n                <Icon name=\"info\" className=\"!h-4 !w-4 rounded-full bg-white !p-0 text-blue-500\" />\n                {indicatorText.title}\n            </span>\n        </Tooltip>,\n        container\n    );\n};\n"],"names":["IndicatorReason","useIndicatorText","reason","title","description","texts","useLocalization","FILTER","table3","editing","rowIndicator","rowWillBeHidden","rowWillMoveReasonFilter","SEARCH","rowWillMoveReasonSearch","SORTING","rowWillMove","rowWillMoveReasonSorting","Indicator","columnName","mountNode","validationErrors","container","React","useMemo","element","document","createElement","className","indicatorText","hasValidationErrorsInRow","useEffect","classList","add","appendChild","remove","removeChild","ReactDOM","createPortal","Tooltip","replace","Icon","name"],"mappings":";;;;;;IAMYA;AAAZ,WAAYA,eAAe;EACvBA,oCAAiB;EACjBA,sCAAmB;EACnBA,oCAAiB;AACrB,CAAC,EAJWA,eAAe,KAAfA,eAAe;MAMdC,gBAAgB,GAAGC,MAAM;EAClC,IAAIC,KAAK,GAAG,EAAE;EACd,IAAIC,WAAW,GAAG,EAAE;EAEpB,MAAM;IAAEC;GAAO,GAAGC,eAAe,EAAE;EAEnC,QAAQJ,MAAM;IACV,KAAKF,eAAe,CAACO,MAAM;MACvBJ,KAAK,GAAGE,KAAK,CAACG,MAAM,CAACC,OAAO,CAACC,YAAY,CAACC,eAAe;MACzDP,WAAW,GAAGC,KAAK,CAACG,MAAM,CAACC,OAAO,CAACC,YAAY,CAACE,uBAAuB;MACvE;IACJ,KAAKZ,eAAe,CAACa,MAAM;MACvBV,KAAK,GAAGE,KAAK,CAACG,MAAM,CAACC,OAAO,CAACC,YAAY,CAACC,eAAe;MACzDP,WAAW,GAAGC,KAAK,CAACG,MAAM,CAACC,OAAO,CAACC,YAAY,CAACI,uBAAuB;MACvE;IACJ,KAAKd,eAAe,CAACe,OAAO;MACxBZ,KAAK,GAAGE,KAAK,CAACG,MAAM,CAACC,OAAO,CAACC,YAAY,CAACM,WAAW;MACrDZ,WAAW,GAAGC,KAAK,CAACG,MAAM,CAACC,OAAO,CAACC,YAAY,CAACO,wBAAwB;MACxE;;EAGR,OAAO;IAAEd,KAAK;IAAEC;GAAa;AACjC;MAQac,SAAS,GAAG,CAAC;EAAEhB,MAAM;EAAEiB,UAAU;EAAEC,SAAS;EAAEC;CAAkC;EACzF,MAAMC,SAAS,GAAGC,cAAK,CAACC,OAAO,CAAC;IAC5B,MAAMC,OAAO,GAAGC,QAAQ,CAACC,aAAa,CAAC,KAAK,CAAC;IAC7CF,OAAO,CAACG,SAAS,IACb,iIAAiI;IAErI,OAAOH,OAAO;GACjB,EAAE,EAAE,CAAC;EAEN,MAAMI,aAAa,GAAG5B,gBAAgB,CAACC,MAAM,CAAC;EAE9C,MAAM4B,wBAAwB,GAAG,CAAC,CAACT,gBAAgB;EAEnDE,cAAK,CAACQ,SAAS,CAAC;;;IAGZX,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEY,SAAS,CAACC,GAAG,CAAC,SAAS,EAAE,UAAU,CAAC;IAC/Cb,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEc,WAAW,CAACZ,SAAS,CAAC;IAEjC,OAAO;MACHF,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEY,SAAS,CAACG,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC;MAClDf,SAAS,aAATA,SAAS,uBAATA,SAAS,CAAEgB,WAAW,CAACd,SAAS,CAAC;KACpC;GACJ,EAAE,CAACQ,wBAAwB,EAAEV,SAAS,CAAC,CAAC;;;EAIzC,oBAAOiB,QAAQ,CAACC,YAAY,eACxBf,6BAACgB,OAAO;IAACpC,KAAK,EAAE0B,aAAa,CAACzB,WAAW,CAACoC,OAAO,CAAC,UAAU,EAAErB,UAAU;kBACpEI;IAAMK,SAAS,EAAC;kBACZL,6BAACkB,IAAI;IAACC,IAAI,EAAC,MAAM;IAACd,SAAS,EAAC;IAAuD,EAClFC,aAAa,CAAC1B,KAAK,CACjB,CACD,EACVmB,SAAS,CACZ;AACL;;;;"}