@economic/taco 2.0.0-alpha.173 → 2.0.0-alpha.6

package/dist/esm/packages/taco/src/components/Table2/components/column/Cell.js

@@ -0,0 +1,600 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { useMergedRef } from '../../../../hooks/useMergedRef.js';
+import { Input } from '../../../Input/Input.js';
+import { Datepicker } from '../../../Datepicker/Datepicker.js';
+import { _catch } from '../../../../../../../node_modules/babel-plugin-transform-async-to-promises/helpers.mjs.js';
+import { Switch } from '../../../Switch/Switch.js';
+import { flexRender } from '@tanstack/react-table';
+import { useRowContext } from '../row/Context.js';
+import { isInternalColumn } from '../../utilities/columns.js';
+import { getCellSizingClasses, isKeyboardFocusableElement, getCellAlignmentClasses } from '../../utilities/cell.js';
+import { ColumnBase } from './Base.js';
+import { globalFilterFn, columnFilterFn } from '../../utilities/filterFn.js';
+import { MOVE_DIR } from '../../hooks/useEditMode.js';
+import { IndicatorReason, Indicator } from './Indicator.js';
+import { ValidationError } from './ValidationError.js';
+import { clickableNodeNames, hasChanged, willRowMoveAfterSorting } from './utils.js';
+
+const Cell = function Cell(props) {
+  var _cell$column$columnDe, _cell$column$columnDe2, _table$options$meta;
+  const {
+    cell,
+    index,
+    isLastRow,
+    rowIndex,
+    rows,
+    scrollToIndex,
+    scrollToOffset,
+    table,
+    tableRef,
+    ...columnProps
+  } = props;
+  const meta = table.options.meta;
+  const {
+    addFocussableColumnIndex,
+    focussableColumnIndexes: allFocussableColumnIndexes
+  } = meta;
+  const {
+    editMode: {
+      validationErrors,
+      rowMoveReason
+    },
+    isHovered: isHoveredRow
+  } = useRowContext();
+  const hasValidationErrorsInRow = !!validationErrors;
+  const internalRef = React__default.useRef(null);
+  const controlRef = React__default.useRef(null);
+  const cellClassName = (_cell$column$columnDe = cell.column.columnDef.meta) === null || _cell$column$columnDe === void 0 ? void 0 : _cell$column$columnDe.className;
+  const isActiveRow = meta.activeRowIndex === rowIndex;
+  const isFrozen = !!cell.column.getIsPinned();
+  const isDragging = meta.dragging[cell.row.id];
+  const isSelected = cell.row.getIsSelected();
+  const isDataColumn = !isInternalColumn(cell.column.id);
+  const hasCellControl = !!((_cell$column$columnDe2 = cell.column.columnDef.meta) !== null && _cell$column$columnDe2 !== void 0 && _cell$column$columnDe2.control);
+  const allVisibleColumns = table.getVisibleLeafColumns();
+  const lastColumnIndex = allVisibleColumns.length > 0 ? allVisibleColumns.length - 1 : 0;
+  // editing
+  const isEditingThisRow = meta.editMode.isEditing && isActiveRow;
+  const canEditThisCell = isEditingThisRow && isDataColumn;
+  const isEditingThisCell = canEditThisCell && meta.editMode.columnIndex === index;
+  const isHoveringThisRowWhileEditing = meta.editMode.isEditing && isHoveredRow && !meta.shouldPauseHoverState;
+  const isIndicatorVisible = Object.keys(rowMoveReason).length > 0;
+  React__default.useEffect(() => {
+    // Adds padding to the table so that indicator doesn't get cropped
+    if (isIndicatorVisible && isLastRow) {
+      var _tableRef$current;
+      (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.classList.add('pb-4');
+    }
+    return () => {
+      var _tableRef$current2;
+      return (_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : _tableRef$current2.classList.remove('pb-4');
+    };
+  }, [isIndicatorVisible, isLastRow]);
+  const className = cn('[&>[data-taco="tag"]]:-my-0.5', {
+    'border-b': !isLastRow,
+    'sticky z-[1]': isFrozen,
+    // use isHoveredRow rather than css group-hover/row because we want to hide hover state when keyboard navigating
+    'bg-white': !isActiveRow && !isSelected,
+    'group-hover/row:bg-grey-100': !isActiveRow && !isSelected && !meta.shouldPauseHoverState,
+    'bg-grey-200 group-hover/row:bg-grey-200': isActiveRow && !isSelected,
+    'bg-blue-100': isSelected,
+    '!wcag-blue-500': isDragging,
+    '[&>*]:!grayscale [&_.bg-white]:!bg-grey-100': !isEditingThisRow && isHoveringThisRowWhileEditing,
+    '!bg-red-100': hasValidationErrorsInRow,
+    'z-[1]': isFrozen && isActiveRow,
+    // First column should have higher z-index so that row indicator always show on top of the cell
+    // control components. A z-index of 3, will show the indicator when columns are pinned.
+    'z-[3]': isFrozen && isActiveRow && index === 0,
+    'border-blue !border-y-2 border-x-0': isIndicatorVisible,
+    'border-l-2 rounded-l': isIndicatorVisible && index === 0,
+    'border-r-2 rounded-r': isIndicatorVisible && index === lastColumnIndex
+  }, getCellSizingClasses((_table$options$meta = table.options.meta) === null || _table$options$meta === void 0 ? void 0 : _table$options$meta.rowDensity, (isEditingThisRow || isHoveringThisRowWhileEditing) && hasCellControl), typeof cellClassName === 'function' ? cellClassName(cell.row, table) : cellClassName);
+  const handleMouseDown = event => {
+    // only detect left clicks
+    if (event.button === 0) {
+      const activeElement = document.activeElement;
+      const isActiveElementControl = activeElement === null || activeElement === void 0 ? void 0 : activeElement.closest('[role="cell"]');
+      const hasActiveRowChanged = meta.activeRowIndex !== rowIndex;
+      // When user clicks on a cell that is not in the active row, for some reason blur event is not called on the cell
+      // previous cell control element so we need to manually call it in order to save the changes in that cell
+      if (isActiveElementControl && hasActiveRowChanged) {
+        activeElement.blur();
+      }
+      meta.setActiveRowIndex(rowIndex);
+      if (meta.editMode.isEditing) {
+        if (allFocussableColumnIndexes.includes(index)) {
+          meta.editMode.setColumn(index);
+        } else {
+          meta.editMode.setColumn(allFocussableColumnIndexes[0]);
+        }
+      }
+    }
+  };
+  const attributes = {
+    ...columnProps,
+    // base props,
+    column: cell.column,
+    table,
+    // dom attributes
+    className,
+    'data-column-index': index,
+    'data-row-index': rowIndex,
+    onMouseDown: handleMouseDown,
+    ref: internalRef,
+    role: 'cell'
+  };
+  const [detailModeEditing, setDetailModeEditing] = React__default.useState(false);
+  // reset the editing state when we move column
+  React__default.useEffect(() => {
+    if (meta.editMode.columnIndex !== index) {
+      setDetailModeEditing(false);
+    }
+  }, [meta.editMode.columnIndex]);
+  React__default.useEffect(() => {
+    if (isEditingThisRow && controlRef.current && isKeyboardFocusableElement(controlRef.current)) {
+      addFocussableColumnIndex(index);
+    }
+  }, [isEditingThisRow, allFocussableColumnIndexes, addFocussableColumnIndex, index]);
+  const moveRow = moveDirection => {
+    if (moveDirection === MOVE_DIR.PREV) {
+      meta.moveToPreviousRow(rows, nextIndex => scrollToIndex(nextIndex - 1));
+    } else if (moveDirection === MOVE_DIR.NEXT) {
+      meta.moveToNextRow(rows, nextIndex => scrollToIndex(nextIndex + 2));
+    }
+  };
+  if (meta.editMode.onSave && hasCellControl && (canEditThisCell || isHoveringThisRowWhileEditing && isDataColumn)) {
+    attributes.onMouseDown = event => {
+      handleMouseDown(event);
+      const target = event.target;
+      const isTargetInput = target !== null && target.nodeName === 'INPUT';
+      // event.target?.select is only truthy for input elements
+      // if event.target is active element, then that means we should select the text
+      if (isTargetInput && target !== document.activeElement) {
+        event.preventDefault();
+        setTimeout(() => {
+          target.select();
+        }, 1);
+      } else if (isTargetInput && target === document.activeElement) {
+        // if user left clicks on the input then we are into edit mode
+        // only detect left clicks
+        if (event.button === 0) {
+          setDetailModeEditing(true);
+        }
+      }
+    };
+    attributes.onBlur = () => {
+      setDetailModeEditing(false);
+    };
+    if (canEditThisCell) {
+      var _allFocussableColumnI, _allFocussableColumnI2;
+      const firstDataColumnIndex = (_allFocussableColumnI = allFocussableColumnIndexes.at(0)) !== null && _allFocussableColumnI !== void 0 ? _allFocussableColumnI : 0;
+      const lastDataColumnIndex = (_allFocussableColumnI2 = allFocussableColumnIndexes.at(-1)) !== null && _allFocussableColumnI2 !== void 0 ? _allFocussableColumnI2 : 0;
+      attributes.onKeyDown = event => {
+        const control = event.target;
+        const isControlInput = control.nodeName === 'INPUT' && (control === null || control === void 0 ? void 0 : control.getAttribute('data-inline-editing-component')) === 'true';
+        // For some reason, Taco Input keyboard event always return true when "event.isDefaultPrevented()" is
+        // called. So we need to check if the control is input or not so that we don't return early.
+        if (!isControlInput && (event.isDefaultPrevented() || event.isPropagationStopped())) {
+          return;
+        }
+        if (control.tagName === 'INPUT') {
+          if (event.key === 'Enter') {
+            event.preventDefault();
+            const input = control;
+            if (!detailModeEditing) {
+              var _input$setSelectionRa, _input$value, _input$value2;
+              (_input$setSelectionRa = input.setSelectionRange) === null || _input$setSelectionRa === void 0 ? void 0 : _input$setSelectionRa.call(input, (_input$value = input.value) === null || _input$value === void 0 ? void 0 : _input$value.length, (_input$value2 = input.value) === null || _input$value2 === void 0 ? void 0 : _input$value2.length);
+            } else {
+              var _input$select;
+              input === null || input === void 0 ? void 0 : (_input$select = input.select) === null || _input$select === void 0 ? void 0 : _input$select.call(input);
+            }
+            setDetailModeEditing(!detailModeEditing);
+            return;
+          }
+          // Datepicker doesn't have keydown event handler its value doesn't change when user types inside
+          // datepicker input, so we need to explicitly enable detail editing mode on typing any alphanumeric
+          // character
+          if (control !== null && control !== void 0 && control.closest('[data-taco="datepicker"]') && /^[a-z0-9]$/i.test(event.key)) {
+            setDetailModeEditing(true);
+          }
+        }
+        // Don't exit edit mode if the target of the escape isn't a child of the cell (e.g. if its a popover).
+        if (event.key === 'Escape' && event.currentTarget.contains(control)) {
+          event.preventDefault();
+          if (detailModeEditing) {
+            setDetailModeEditing(false);
+          } else {
+            var _tableRef$current3;
+            meta.editMode.toggleEditing(false);
+            (_tableRef$current3 = tableRef.current) === null || _tableRef$current3 === void 0 ? void 0 : _tableRef$current3.focus();
+          }
+          return;
+        }
+        if (!detailModeEditing && event.key === 'ArrowLeft' || event.key === 'Tab' && event.shiftKey) {
+          event.preventDefault();
+          const isFirstRow = rowIndex === 0;
+          const isFirstColumn = index === firstDataColumnIndex;
+          if (event.ctrlKey || event.metaKey) {
+            // If the current active column is the first column then we don't do any thing so that focus
+            // remains on the first column.
+            if (!isFirstColumn) {
+              control.blur();
+              meta.editMode.moveToFirstColumn(allFocussableColumnIndexes);
+            }
+          } else {
+            // If it is first row and first column, then don't move column.
+            if (!isFirstRow || !isFirstColumn) {
+              control.blur();
+              meta.editMode.moveToPreviousColumn(allFocussableColumnIndexes, moveRow);
+            }
+          }
+          return;
+        }
+        if (!detailModeEditing && event.key === 'ArrowRight' || event.key === 'Tab' && !event.shiftKey) {
+          event.preventDefault();
+          const isLastColumn = index === lastDataColumnIndex;
+          if (event.ctrlKey || event.metaKey) {
+            // If the current active column is the last column then we don't do any thing so that focus
+            // remains on the last column.
+            if (!isLastColumn) {
+              control.blur();
+              meta.editMode.moveToLastColumn(allFocussableColumnIndexes);
+            }
+          } else {
+            // If it is last row and last column, then don't move column.
+            if (!isLastRow || !isLastColumn) {
+              control.blur();
+              meta.editMode.moveToNextColumn(allFocussableColumnIndexes, moveRow);
+            }
+          }
+          return;
+        }
+        if (!detailModeEditing && event.key === 'ArrowUp') {
+          event.preventDefault();
+          // if it is the first row then return early, so that focus on the cell is not lost
+          if (rowIndex === 0) {
+            return;
+          }
+          control.blur();
+          if (event.ctrlKey || event.metaKey) {
+            meta.setActiveRowIndex(0);
+            scrollToOffset(0);
+          } else {
+            moveRow(MOVE_DIR.PREV);
+          }
+          meta.setShouldPauseHoverState(true);
+          return;
+        }
+        if (!detailModeEditing && event.key === 'ArrowDown') {
+          event.preventDefault();
+          // if it is the last row then return early, so that focus on the cell is not lost
+          if (rowIndex === rows.length - 1) {
+            return;
+          }
+          control.blur();
+          if (event.ctrlKey || event.metaKey) {
+            meta.setActiveRowIndex(rows.length - 1);
+            scrollToIndex(rows.length + 20);
+          } else {
+            moveRow(MOVE_DIR.NEXT);
+          }
+          meta.setShouldPauseHoverState(true);
+          return;
+        }
+      };
+    }
+    return /*#__PURE__*/React__default.createElement(ColumnBase, Object.assign({}, attributes), /*#__PURE__*/React__default.createElement(EditingCell, {
+      detailModeEditing: detailModeEditing,
+      cell: cell,
+      cellRef: internalRef,
+      columnIndex: index,
+      isEditingThisCell: isEditingThisCell,
+      onSave: meta.editMode.onSave,
+      rowIndex: rowIndex,
+      table: table,
+      tableRef: tableRef,
+      ref: controlRef,
+      rowValues: rows[rowIndex].original,
+      rowsLength: rows.length,
+      enableDetailModeEditing: () => {
+        if (!detailModeEditing) {
+          setDetailModeEditing(true);
+        }
+      }
+    }));
+  } else {
+    if (meta.onRowClick) {
+      attributes.onClick = event => {
+        const {
+          target
+        } = event;
+        // This check prevents triggering row click, when a click is performed in the dropdown (e.g. Select option or DayPicker date selection)
+        if (internalRef.current && target instanceof HTMLElement && internalRef.current.contains(target)) {
+          var _meta$onRowClick;
+          // Checking that target is clickable element or it is a child of clickable element
+          if (clickableNodeNames.includes(target.tagName) || target.closest(clickableNodeNames.map(tag => `[role=row] ${tag}`).join(','))) {
+            return;
+          }
+          (_meta$onRowClick = meta.onRowClick) === null || _meta$onRowClick === void 0 ? void 0 : _meta$onRowClick.call(meta, cell.row.original);
+        }
+      };
+    }
+  }
+  return /*#__PURE__*/React__default.createElement(ColumnBase, Object.assign({}, attributes), flexRender(cell.column.columnDef.cell, cell.getContext()));
+};
+const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  var _cell$column$columnDe3, _cell$column$columnDe4, _cellRef$current2, _cellRef$current2$par, _rowMoveReason$cellId;
+  const {
+    cell,
+    cellRef,
+    columnIndex,
+    detailModeEditing,
+    isEditingThisCell = false,
+    onSave: handleSave,
+    rowIndex,
+    rowValues,
+    table,
+    tableRef,
+    enableDetailModeEditing
+  } = props;
+  const {
+    editMode: {
+      validationErrors,
+      setValidationErrors,
+      rowMoveReason,
+      setRowMoveReason
+    },
+    isHovered
+  } = useRowContext();
+  const controlRef = useMergedRef(ref);
+  const cellId = cell.column.id;
+  const cellValidationError = validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[cellId];
+  const value = cell.getValue();
+  const ariaLabel = cell.column.columnDef.header;
+  const meta = table.options.meta;
+  const {
+    globalFilter
+  } = table.getState();
+  const [state, setState] = React__default.useState(value);
+  const isHoveringAnotherRowWhileEditing = meta.editMode.isEditing && meta.activeRowIndex !== rowIndex && isHovered;
+  const hasValidationError = !isHoveringAnotherRowWhileEditing && !!cellValidationError;
+  // On each save, the initialValue will be set to the new value of the cell
+  const initialValue = React__default.useRef(value);
+  const stateReset = React__default.useRef(false);
+  // It is important that we let consumers pass a newValue as an argument because when setState is called before
+  // onBlur then saveIfChanged method gets the stale state value. This happens because the rerender hasn't happened
+  // before the saveIfChanged method is called.
+  const saveIfChanged = function (eventOrNewValue) {
+    try {
+      let newValue = state;
+      // if eventOrNewValue is not an event object
+      if (!(eventOrNewValue !== null && eventOrNewValue !== void 0 && eventOrNewValue.target)) {
+        newValue = eventOrNewValue;
+      }
+      const _temp2 = function () {
+        if (hasChanged(value, newValue)) {
+          const _temp = _catch(function () {
+            const updatedRow = {
+              ...cell.row.original,
+              [cellId]: newValue
+            };
+            return Promise.resolve(handleSave(updatedRow, cellId)).then(function () {
+              // If sorting is paused then update the last sorted or filtered rows to store the newly updated row
+              if (meta.shouldPauseSortingAndFiltering) {
+                meta.lastSortedOrFilteredRows.current = meta.lastSortedOrFilteredRows.current.map(row => {
+                  if (row.id === cell.row.id) {
+                    row.original = updatedRow;
+                  }
+                  return row;
+                });
+              }
+              // Reset error if save was successful
+              setValidationErrors(null);
+            });
+          }, function (error) {
+            setValidationErrors({
+              ...validationErrors,
+              ...error
+            });
+          });
+          if (_temp && _temp.then) return _temp.then(function () {});
+        }
+      }();
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(function () {}) : void 0);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  // Ensures we "auto focus" the field if the cell is being edited.
+  React__default.useEffect(() => {
+    var _meta$tableRef$curren;
+    const isFocusInsideTable = (_meta$tableRef$curren = meta.tableRef.current) === null || _meta$tableRef$curren === void 0 ? void 0 : _meta$tableRef$curren.contains(document.activeElement);
+    // When control is blurred then body gets the focus that's why we have to make sure if activeElement
+    // is body then we focus the cell if it is being edited.
+    const isBodyFocussed = document.body === document.activeElement;
+    // Don't focus cell if any table popup(filter popup, column settings popup) is open.
+    if (isEditingThisCell && (isFocusInsideTable || isBodyFocussed)) {
+      var _controlRef$current, _controlRef$current$f;
+      (_controlRef$current = controlRef.current) === null || _controlRef$current === void 0 ? void 0 : (_controlRef$current$f = _controlRef$current.focus) === null || _controlRef$current$f === void 0 ? void 0 : _controlRef$current$f.call(_controlRef$current);
+    }
+  }, [isEditingThisCell, controlRef.current]);
+  const pinnedColumnsWidth = React__default.useMemo(() => {
+    const pinnedColumns = table.getState().columnPinning.left;
+    if (Array.isArray(pinnedColumns) && pinnedColumns.length > 0) {
+      const lastFrozenColumn = pinnedColumns[pinnedColumns.length - 1];
+      const lastFrozenColumnOffset = meta.columnOffsets[lastFrozenColumn];
+      if (lastFrozenColumnOffset !== undefined) {
+        var _table$getState$colum;
+        return lastFrozenColumnOffset + ((_table$getState$colum = table.getState().columnSizing[lastFrozenColumn]) !== null && _table$getState$colum !== void 0 ? _table$getState$colum : 0);
+      }
+    }
+    return 0;
+  }, [meta.columnOffsets, table.getState().columnSizing]);
+  React__default.useEffect(() => {
+    if (hasChanged(initialValue.current, state)) {
+      var _controlRef$current2;
+      // For an input we want to make sure that if the value is changed then we go into detail mode, so that
+      // arrow keys doesn't trigger the quick mode shortcuts.
+      if (((_controlRef$current2 = controlRef.current) === null || _controlRef$current2 === void 0 ? void 0 : _controlRef$current2.nodeName) === 'INPUT') {
+        enableDetailModeEditing();
+      }
+      showIndicator();
+    } else {
+      hideIndicator();
+    }
+    return hideIndicator;
+  }, [state]);
+  // This effect makes sure we select the input control value when escape key is pressed
+  React__default.useEffect(() => {
+    var _controlRef$current3, _controlRef$current4;
+    const isControlInput = ((_controlRef$current3 = controlRef.current) === null || _controlRef$current3 === void 0 ? void 0 : _controlRef$current3.nodeName) === 'INPUT' && ((_controlRef$current4 = controlRef.current) === null || _controlRef$current4 === void 0 ? void 0 : _controlRef$current4.getAttribute('data-inline-editing-component')) === 'true';
+    if (stateReset.current && isControlInput) {
+      var _controlRef$current5;
+      (_controlRef$current5 = controlRef.current) === null || _controlRef$current5 === void 0 ? void 0 : _controlRef$current5.select();
+    }
+    stateReset.current = false;
+  }, [stateReset.current]);
+  const handleFocus = event => {
+    var _event$target, _cellRef$current;
+    meta.editMode.setColumn(columnIndex);
+    if ((_event$target = event.target) !== null && _event$target !== void 0 && _event$target.select) {
+      var _event$target2;
+      (_event$target2 = event.target) === null || _event$target2 === void 0 ? void 0 : _event$target2.select();
+    }
+    // ensure the field is always visible (e.g. not hidden behind the pinned columns)
+    const rect = (_cellRef$current = cellRef.current) === null || _cellRef$current === void 0 ? void 0 : _cellRef$current.getBoundingClientRect();
+    const leftOffset = meta.columnOffsets[cellId];
+    if (rect && leftOffset && rect.left < pinnedColumnsWidth) {
+      var _tableRef$current4;
+      (_tableRef$current4 = tableRef.current) === null || _tableRef$current4 === void 0 ? void 0 : _tableRef$current4.scrollTo(leftOffset - pinnedColumnsWidth, tableRef.current.scrollTop);
+    }
+  };
+  // In order to reset the value of an input when escape key is pressed this keydown handler is required.
+  // Instead of adding this event handler in parent component, this handler is added here because we have access
+  // to the state handler of the control component.
+  const handleKeyDown = event => {
+    const control = event.target;
+    const isControlInput = control.nodeName === 'INPUT' && (control === null || control === void 0 ? void 0 : control.getAttribute('data-inline-editing-component')) === 'true';
+    if (isControlInput && event.key === 'Escape') {
+      setState(initialValue.current);
+      stateReset.current = true;
+    }
+  };
+  const showIndicator = () => {
+    var _table$getState$sorti;
+    let willRowMoveReason = null;
+    const isFilteredByGlobalFilter = Object.values({
+      ...rowValues,
+      [cellId]: state
+    }).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) {
+      willRowMoveReason = IndicatorReason.SEARCH;
+    } else if (cell.column.getIsFiltered() && !columnFilterFn(state, cell.column.getFilterValue())) {
+      willRowMoveReason = IndicatorReason.FILTER;
+    } else if (!willRowMoveReason && cell.column.getIsSorted() && willRowMoveAfterSorting(state, 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))) {
+      willRowMoveReason = IndicatorReason.SORTING;
+    }
+    if (willRowMoveReason !== null) {
+      meta.setShouldPauseSortingAndFiltering(true);
+      setRowMoveReason({
+        [cellId]: willRowMoveReason
+      });
+    }
+  };
+  const hideIndicator = () => {
+    setRowMoveReason(prevState => {
+      const newState = {
+        ...prevState
+      };
+      delete newState[cellId];
+      return newState;
+    });
+  };
+  const cellControl = (_cell$column$columnDe3 = cell.column.columnDef.meta) === null || _cell$column$columnDe3 === void 0 ? void 0 : _cell$column$columnDe3.control;
+  const attributes = {
+    'aria-label': ariaLabel,
+    onBlur: saveIfChanged,
+    onFocus: handleFocus,
+    ref,
+    // This is a temporary fix to enable up/down arrow key shortcuts on input in quick mode. For some reason,
+    // the preventDefault is true on Taco Input, so the keyboard shortcuts doesn't work. By adding this
+    // data attribute we make sure the event is coming from a control component, and then we can make sure
+    // keyboard shortcut works as expected.
+    'data-inline-editing-component': 'true'
+  };
+  const className = cn(getCellAlignmentClasses((_cell$column$columnDe4 = cell.column.columnDef.meta) === null || _cell$column$columnDe4 === void 0 ? void 0 : _cell$column$columnDe4.align));
+  const indicatorMountNode = (_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.querySelector(':first-child');
+  let controlComponent;
+  const detailModeClassName = cn({
+    '!yt-focus-dark': detailModeEditing
+  });
+  if (cellControl) {
+    if (typeof cellControl === 'function') {
+      controlComponent = cellControl({
+        invalid: hasValidationError,
+        onBlur: saveIfChanged,
+        onFocus: handleFocus,
+        ref: controlRef,
+        setValue: setState,
+        value: state,
+        'data-inline-editing-component': 'true'
+      }, cell.row.original);
+    } else {
+      switch (cellControl) {
+        case 'datepicker':
+          controlComponent = /*#__PURE__*/React__default.createElement(Datepicker, Object.assign({}, attributes, {
+            className: cn({
+              '[&_input]:!shadow-[0_0_0_4px_rgba(0,99,255,0.25)]': detailModeEditing
+            }),
+            invalid: hasValidationError,
+            onBlur: event => {
+              const newDate = event.detail;
+              saveIfChanged(newDate);
+            },
+            onChange: event => {
+              setState(event.detail);
+            },
+            ref: controlRef,
+            value: state
+          }));
+          break;
+        case 'switch':
+          controlComponent = /*#__PURE__*/React__default.createElement(Switch, Object.assign({}, attributes, {
+            className: cn('mx-2 mt-1.5', detailModeClassName),
+            checked: Boolean(state),
+            onChange: setState,
+            ref: controlRef
+          }));
+          break;
+        default:
+          controlComponent = /*#__PURE__*/React__default.createElement(Input, Object.assign({}, attributes, {
+            className: cn(className, detailModeClassName),
+            invalid: hasValidationError,
+            onChange: event => {
+              setState(event.target.value);
+            },
+            ref: controlRef,
+            value: String(state !== null && state !== void 0 ? state : ''),
+            onKeyDown: handleKeyDown
+          }));
+          break;
+      }
+    }
+  }
+  const indicatorReason = (_rowMoveReason$cellId = rowMoveReason[cellId]) !== null && _rowMoveReason$cellId !== void 0 ? _rowMoveReason$cellId : null;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, indicatorReason !== null && /*#__PURE__*/React__default.createElement(Indicator, {
+    reason: indicatorReason,
+    columnName: String(cell.column.columnDef.header),
+    mountNode: indicatorMountNode,
+    validationErrors: validationErrors
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "relative flex-grow"
+  }, controlComponent, hasValidationError && /*#__PURE__*/React__default.createElement(ValidationError, null, String(cellValidationError))));
+}));
+
+export { Cell };
+//# sourceMappingURL=Cell.js.map