@economic/taco 1.19.1 → 1.21.0

package/dist/esm/packages/taco/src/components/Table2/components/ShortcutsGuideButton.js

@@ -0,0 +1,94 @@
+import React__default from 'react';
+import { IconButton } from '../../IconButton/IconButton.js';
+import { useLocalization } from '../../Provider/Localization.js';
+import { Popover } from '../../Popover/Popover.js';
+import { Shortcut } from '../../Shortcut/Shortcut.js';
+
+const ShortcutsGuideButton = ({
+  table
+}) => {
+  const meta = table.options.meta;
+  const {
+    texts: {
+      table2: tableTexts
+    }
+  } = useLocalization();
+  const shortcuts = [];
+  if (table.options.enableGlobalFilter) {
+    shortcuts.push({
+      feature: tableTexts.shortcuts.search,
+      keys: ['Ctrl', 'F']
+    });
+  }
+  if (table.options.enableColumnFilters) {
+    shortcuts.push({
+      feature: tableTexts.shortcuts.filter,
+      keys: ['Ctrl', 'Shift', 'F']
+    });
+  }
+  shortcuts.push({
+    feature: tableTexts.shortcuts.previousRow,
+    keys: ['Up']
+  });
+  shortcuts.push({
+    feature: tableTexts.shortcuts.nextRow,
+    keys: ['Down']
+  });
+  if (meta.editMode.enableEditMode) {
+    shortcuts.push({
+      feature: tableTexts.shortcuts.editCell,
+      keys: ['Enter']
+    });
+    shortcuts.push({
+      feature: tableTexts.shortcuts.previousColumn,
+      keys: ['Arrow-Left']
+    });
+    shortcuts.push({
+      feature: tableTexts.shortcuts.nextColumn,
+      keys: ['Arrow-Right']
+    });
+  } else if (meta.onRowClick) {
+    shortcuts.push({
+      feature: tableTexts.shortcuts.rowClick,
+      keys: ['Enter']
+    });
+  }
+  if (table.options.enableRowSelection) {
+    shortcuts.push({
+      feature: tableTexts.shortcuts.selectRow,
+      keys: ['Space']
+    });
+    shortcuts.push({
+      feature: tableTexts.shortcuts.selectAllRows,
+      keys: ['Ctrl', 'A']
+    });
+  }
+  if (table.options.enableExpanding) {
+    shortcuts.push({
+      feature: tableTexts.shortcuts.expandRow,
+      keys: ['Ctrl', 'Right']
+    });
+    shortcuts.push({
+      feature: tableTexts.shortcuts.collapseRow,
+      keys: ['Ctrl', 'Left']
+    });
+  }
+  return /*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": "View keyboard shortcuts",
+    icon: "shortcuts",
+    popover: popoverProps => /*#__PURE__*/React__default.createElement(Popover, Object.assign({}, popoverProps), /*#__PURE__*/React__default.createElement(Popover.Content, {
+      align: "end"
+    }, /*#__PURE__*/React__default.createElement("div", {
+      className: "flex flex-col gap-y-1"
+    }, shortcuts.map(shortcut => /*#__PURE__*/React__default.createElement("span", {
+      className: "flex items-center justify-between gap-x-8",
+      key: shortcut.feature
+    }, /*#__PURE__*/React__default.createElement("span", null, shortcut.feature), /*#__PURE__*/React__default.createElement(Shortcut, {
+      keys: shortcut.keys
+    })))))),
+    rounded: true
+  });
+};
+
+export { ShortcutsGuideButton };
+//# sourceMappingURL=ShortcutsGuideButton.js.map

package/dist/esm/packages/taco/src/components/Table2/components/ShortcutsGuideButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShortcutsGuideButton.js","sources":["../../../../../../../../src/components/Table2/components/ShortcutsGuideButton.tsx"],"sourcesContent":["import React from 'react';\nimport { Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport { IconButton } from '../../IconButton/IconButton';\nimport { Popover } from '../../Popover/Popover';\nimport { Shortcut } from '../../Shortcut/Shortcut';\nimport { useLocalization } from '../../Provider/Localization';\n\ntype ShortcutGuideShortcut = {\n    feature: string;\n    keys: string[];\n};\n\ntype ShortcutsGuideButtonProps = {\n    table: RTTable<any>;\n};\n\nexport const ShortcutsGuideButton = ({ table }: ShortcutsGuideButtonProps) => {\n    const meta = table.options.meta as TableMeta<any>;\n    const {\n        texts: { table2: tableTexts },\n    } = useLocalization();\n\n    const shortcuts: ShortcutGuideShortcut[] = [];\n\n    if (table.options.enableGlobalFilter) {\n        shortcuts.push({\n            feature: tableTexts.shortcuts.search,\n            keys: ['Ctrl', 'F'],\n        });\n    }\n\n    if (table.options.enableColumnFilters) {\n        shortcuts.push({\n            feature: tableTexts.shortcuts.filter,\n            keys: ['Ctrl', 'Shift', 'F'],\n        });\n    }\n\n    shortcuts.push({\n        feature: tableTexts.shortcuts.previousRow,\n        keys: ['Up'],\n    });\n    shortcuts.push({\n        feature: tableTexts.shortcuts.nextRow,\n        keys: ['Down'],\n    });\n\n    if (meta.editMode.enableEditMode) {\n        shortcuts.push({\n            feature: tableTexts.shortcuts.editCell,\n            keys: ['Enter'],\n        });\n        shortcuts.push({\n            feature: tableTexts.shortcuts.previousColumn,\n            keys: ['Arrow-Left'],\n        });\n        shortcuts.push({\n            feature: tableTexts.shortcuts.nextColumn,\n            keys: ['Arrow-Right'],\n        });\n    } else if (meta.onRowClick) {\n        shortcuts.push({\n            feature: tableTexts.shortcuts.rowClick,\n            keys: ['Enter'],\n        });\n    }\n\n    if (table.options.enableRowSelection) {\n        shortcuts.push({\n            feature: tableTexts.shortcuts.selectRow,\n            keys: ['Space'],\n        });\n        shortcuts.push({\n            feature: tableTexts.shortcuts.selectAllRows,\n            keys: ['Ctrl', 'A'],\n        });\n    }\n\n    if (table.options.enableExpanding) {\n        shortcuts.push({\n            feature: tableTexts.shortcuts.expandRow,\n            keys: ['Ctrl', 'Right'],\n        });\n        shortcuts.push({\n            feature: tableTexts.shortcuts.collapseRow,\n            keys: ['Ctrl', 'Left'],\n        });\n    }\n\n    return (\n        <IconButton\n            aria-label=\"View keyboard shortcuts\"\n            icon=\"shortcuts\"\n            popover={popoverProps => (\n                <Popover {...popoverProps}>\n                    <Popover.Content align=\"end\">\n                        <div className=\"flex flex-col gap-y-1\">\n                            {shortcuts.map(shortcut => (\n                                <span className=\"flex items-center justify-between gap-x-8\" key={shortcut.feature}>\n                                    <span>{shortcut.feature}</span>\n                                    <Shortcut keys={shortcut.keys} />\n                                </span>\n                            ))}\n                        </div>\n                    </Popover.Content>\n                </Popover>\n            )}\n            rounded\n        />\n    );\n};\n"],"names":["ShortcutsGuideButton","table","meta","options","texts","table2","tableTexts","useLocalization","shortcuts","enableGlobalFilter","push","feature","search","keys","enableColumnFilters","filter","previousRow","nextRow","editMode","enableEditMode","editCell","previousColumn","nextColumn","onRowClick","rowClick","enableRowSelection","selectRow","selectAllRows","enableExpanding","expandRow","collapseRow","React","IconButton","icon","popover","popoverProps","Popover","Content","align","className","map","shortcut","key","Shortcut","rounded"],"mappings":"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"}

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

@@ -0,0 +1,32 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { getPinnedShadowClasses, getCellAlignmentClasses } from '../../utilities/cell.js';
+
+const ColumnBase = /*#__PURE__*/React__default.forwardRef(function Table2ColumnBase(props, ref) {
+  var _column$columnDef$met;
+  const {
+    column,
+    scrolled,
+    style,
+    table,
+    ...attributes
+  } = props;
+  const pinned = !!column.getIsPinned();
+  const meta = table.options.meta;
+  const left = meta.columnOffsets[column.id];
+  const columnPinning = table.getLeftVisibleLeafColumns().map(c => c.id);
+  const className = cn('border-grey-300', getPinnedShadowClasses(column, columnPinning, scrolled), getCellAlignmentClasses((_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.align), {
+    'cursor-pointer': !!attributes.onClick
+  }, attributes.className);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
+    className: className,
+    style: {
+      ...style,
+      left: pinned && Number.isInteger(left) ? left : undefined
+    },
+    ref: ref
+  }));
+});
+
+export { ColumnBase };
+//# sourceMappingURL=Base.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Base.js","sources":["../../../../../../../../../src/components/Table2/components/column/Base.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { Column as RTColumn, Table as RTTable, TableMeta } from '@tanstack/react-table';\nimport { getCellAlignmentClasses, getPinnedShadowClasses } from '../../utilities/cell';\n\nexport type ColumnBaseProps<TType = any> = React.HTMLAttributes<HTMLDivElement> & {\n    column: RTColumn<TType, any>;\n    scrolled: boolean;\n    table: RTTable<TType>;\n};\n\nexport const ColumnBase = React.forwardRef<HTMLDivElement, ColumnBaseProps>(function Table2ColumnBase(props, ref) {\n    const { column, scrolled, style, table, ...attributes } = props;\n    const pinned = !!column.getIsPinned();\n    const meta = table.options.meta as TableMeta<any>;\n    const left = meta.columnOffsets[column.id];\n\n    const columnPinning = table.getLeftVisibleLeafColumns().map(c => c.id);\n\n    const className = cn(\n        'border-grey-300',\n        getPinnedShadowClasses(column, columnPinning, scrolled),\n        getCellAlignmentClasses(column.columnDef.meta?.align),\n        {\n            'cursor-pointer': !!attributes.onClick,\n        },\n        attributes.className\n    );\n\n    return (\n        <div\n            {...attributes}\n            className={className}\n            style={{ ...style, left: pinned && Number.isInteger(left) ? left : undefined }}\n            ref={ref}\n        />\n    );\n});\n"],"names":["ColumnBase","React","forwardRef","Table2ColumnBase","props","ref","column","scrolled","style","table","attributes","pinned","getIsPinned","meta","options","left","columnOffsets","id","columnPinning","getLeftVisibleLeafColumns","map","c","className","cn","getPinnedShadowClasses","getCellAlignmentClasses","columnDef","align","onClick","Number","isInteger","undefined"],"mappings":";;;;MAWaA,UAAU,gBAAGC,cAAK,CAACC,UAAU,CAAkC,SAASC,gBAAgB,CAACC,KAAK,EAAEC,GAAG;;EAC5G,MAAM;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,KAAK;IAAE,GAAGC;GAAY,GAAGN,KAAK;EAC/D,MAAMO,MAAM,GAAG,CAAC,CAACL,MAAM,CAACM,WAAW,EAAE;EACrC,MAAMC,IAAI,GAAGJ,KAAK,CAACK,OAAO,CAACD,IAAsB;EACjD,MAAME,IAAI,GAAGF,IAAI,CAACG,aAAa,CAACV,MAAM,CAACW,EAAE,CAAC;EAE1C,MAAMC,aAAa,GAAGT,KAAK,CAACU,yBAAyB,EAAE,CAACC,GAAG,CAACC,CAAC,IAAIA,CAAC,CAACJ,EAAE,CAAC;EAEtE,MAAMK,SAAS,GAAGC,EAAE,CAChB,iBAAiB,EACjBC,sBAAsB,CAAClB,MAAM,EAAEY,aAAa,EAAEX,QAAQ,CAAC,EACvDkB,uBAAuB,0BAACnB,MAAM,CAACoB,SAAS,CAACb,IAAI,0DAArB,sBAAuBc,KAAK,CAAC,EACrD;IACI,gBAAgB,EAAE,CAAC,CAACjB,UAAU,CAACkB;GAClC,EACDlB,UAAU,CAACY,SAAS,CACvB;EAED,oBACIrB,sDACQS,UAAU;IACdY,SAAS,EAAEA,SAAS;IACpBd,KAAK,EAAE;MAAE,GAAGA,KAAK;MAAEO,IAAI,EAAEJ,MAAM,IAAIkB,MAAM,CAACC,SAAS,CAACf,IAAI,CAAC,GAAGA,IAAI,GAAGgB;KAAW;IAC9E1B,GAAG,EAAEA;KACP;AAEV,CAAC;;;;"}

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

@@ -0,0 +1,516 @@
+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 { flexRender } from '@tanstack/react-table';
+import { isInternalColumn } from '../../utilities/columns.js';
+import { getCellSizingClasses, isKeyboardFocusableElement, getCellAlignmentClasses } from '../../utilities/cell.js';
+import { ColumnBase } from './Base.js';
+import { Switch } from '../../../Switch/Switch.js';
+import { globalFilterFn, columnFilterFn } from '../../utilities/filterFn.js';
+import { MOVE_DIR } from '../../hooks/useEditMode.js';
+import { useRowContext } from '../row/Context.js';
+import { IndicatorReason, Indicator } from './Indicator.js';
+import { ValidationError } from './ValidationError.js';
+import { hasChanged, willRowMoveAfterSorting } from './utils.js';
+
+const Cell = function Cell(props) {
+  var _cell$column$columnDe, _cell$column$columnDe2, _cell$column$columnDe3, _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 {
+    validationErrors,
+    rowMoveReason
+  } = useRowContext();
+  const hasValidationErrorsInRow = !!validationErrors;
+  const internalRef = React__default.useRef(null);
+  const controlRef = React__default.useRef(null);
+  const disableTruncation = (_cell$column$columnDe = cell.column.columnDef.meta) === null || _cell$column$columnDe === void 0 ? void 0 : _cell$column$columnDe.disableTruncation;
+  const cellClassName = (_cell$column$columnDe2 = cell.column.columnDef.meta) === null || _cell$column$columnDe2 === void 0 ? void 0 : _cell$column$columnDe2.className;
+  const isActiveRow = meta.activeRowIndex === rowIndex;
+  const isHoveredRow = meta.hoveredRowIndex === rowIndex;
+  const isPinned = !!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$columnDe3 = cell.column.columnDef.meta) !== null && _cell$column$columnDe3 !== void 0 && _cell$column$columnDe3.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;
+  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({
+    'border-b': !isLastRow,
+    'sticky z-[1]': isPinned,
+    // use isHoveredRow rather than css group-hover/row because we want to hide hover state when keyboard navigating
+    'bg-white': !isActiveRow && !isSelected && !isHoveredRow,
+    'bg-grey-100': !isActiveRow && !isSelected && isHoveredRow,
+    '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]': isPinned && isActiveRow,
+    // First column should have higher z-index so that row indicator always show on top of the cell
+    // control components.
+    'z-[2]': isPinned && 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) : 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);
+  const detailModeClassName = cn({
+    '!shadow-[0_0_0_4px_rgba(0,99,255,0.25)]': detailModeEditing
+  });
+  // 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);
+        }
+      }
+    };
+    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);
+              setDetailModeEditing(true);
+            }
+            return;
+          }
+        }
+        // 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();
+          const input = control;
+          if (detailModeEditing) {
+            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(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.setHoveredRowIndex(undefined);
+          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.setHoveredRowIndex(undefined);
+          return;
+        }
+      };
+    }
+    return /*#__PURE__*/React__default.createElement(ColumnBase, Object.assign({}, attributes), /*#__PURE__*/React__default.createElement(EditingCell, {
+      detailModeClassName: detailModeClassName,
+      cell: cell,
+      cellRef: internalRef,
+      columnIndex: index,
+      isEditingThisCell: isEditingThisCell,
+      onSave: meta.editMode.onSave,
+      rowIndex: rowIndex,
+      table: table,
+      ref: controlRef,
+      rowValues: rows[rowIndex].original,
+      rowsLength: rows.length
+    }));
+  } else {
+    if (meta.onRowClick) {
+      attributes.onClick = () => {
+        var _meta$onRowClick;
+        (_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), /*#__PURE__*/React__default.createElement("div", {
+    className: disableTruncation ? '-my-[0.45rem]' : 'truncate'
+  }, flexRender(cell.column.columnDef.cell, cell.getContext())));
+};
+const EditingCell = /*#__PURE__*/React__default.memo( /*#__PURE__*/React__default.forwardRef((props, ref) => {
+  var _cell$column$columnDe4, _cell$column$columnDe5, _cellRef$current, _cellRef$current$pare, _rowMoveReason$cellId;
+  const {
+    cell,
+    cellRef,
+    columnIndex,
+    detailModeClassName,
+    isEditingThisCell = false,
+    onSave: handleSave,
+    rowIndex,
+    rowValues,
+    table
+  } = props;
+  const {
+    validationErrors,
+    setValidationErrors,
+    rowMoveReason,
+    setRowMoveReason
+  } = 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 && meta.hoveredRowIndex === rowIndex;
+  const showValidationError = !isHoveringAnotherRowWhileEditing && !!cellValidationError;
+  // On each save, the initialValue will be set to the new value of the cell
+  const initialValue = React__default.useRef(value);
+  // 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.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(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]);
+  // make sure the cell becomes active if the field is focused
+  const handleFocus = event => {
+    var _event$target;
+    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();
+    }
+  };
+  React__default.useEffect(() => {
+    if (hasChanged(initialValue.current, state)) {
+      showIndicator();
+    } else {
+      hideIndicator();
+    }
+    return hideIndicator;
+  }, [state]);
+  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$columnDe4 = cell.column.columnDef.meta) === null || _cell$column$columnDe4 === void 0 ? void 0 : _cell$column$columnDe4.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$columnDe5 = cell.column.columnDef.meta) === null || _cell$column$columnDe5 === void 0 ? void 0 : _cell$column$columnDe5.align));
+  const indicatorMountNode = (_cellRef$current = cellRef.current) === null || _cellRef$current === void 0 ? void 0 : (_cellRef$current$pare = _cellRef$current.parentElement) === null || _cellRef$current$pare === void 0 ? void 0 : _cellRef$current$pare.querySelector(':first-child');
+  let controlComponent;
+  if (cellControl) {
+    if (typeof cellControl === 'function') {
+      controlComponent = cellControl({
+        onBlur: saveIfChanged,
+        onFocus: handleFocus,
+        ref: controlRef,
+        setValue: setState,
+        value: state,
+        'data-inline-editing-component': 'true',
+        className: detailModeClassName
+      }, cell.row.original);
+    } else {
+      switch (cellControl) {
+        case 'datepicker':
+          controlComponent = /*#__PURE__*/React__default.createElement(Datepicker, Object.assign({}, attributes, {
+            className: detailModeClassName,
+            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', detailModeClassName),
+            checked: Boolean(state),
+            onChange: setState,
+            ref: controlRef
+          }));
+          break;
+        default:
+          controlComponent = /*#__PURE__*/React__default.createElement(Input, Object.assign({}, attributes, {
+            className: cn(className, detailModeClassName),
+            onChange: event => {
+              setState(event.target.value);
+            },
+            ref: controlRef,
+            value: String(state !== null && state !== void 0 ? state : '')
+          }));
+          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
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: "relative flex-grow"
+  }, controlComponent, showValidationError && /*#__PURE__*/React__default.createElement(ValidationError, null, String(cellValidationError))));
+}));
+
+export { Cell };
+//# sourceMappingURL=Cell.js.map