@economic/taco 1.41.0 → 2.0.0-alpha.173

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

@@ -1,600 +0,0 @@
-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