@economic/taco 1.41.0 → 2.0.0-alpha.5

package/dist/esm/packages/taco/src/components/Table3/Table3.js

@@ -0,0 +1,145 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { useMergedRef } from '../../hooks/useMergedRef.js';
+import { FocusScope } from '@react-aria/focus';
+import { flexRender } from '@tanstack/react-table';
+import { useCssGrid } from './hooks/useCssGrid.js';
+import { useColumnFreezingStyle } from './hooks/features/useColumnFreezing.js';
+import { useTable } from './hooks/useTable.js';
+import { useTableRenderStrategy } from './strategies/index.js';
+import { Toolbar } from './components/toolbar/Toolbar.js';
+import { useTableRefInstanceSetup } from './hooks/useTableRefInstanceSetup.js';
+import { Summary } from './components/columns/footer/Summary.js';
+import { useCssVars } from './hooks/useCssVars.js';
+export { useTableData } from './hooks/useTableData.js';
+
+function Column(_) {
+  return null;
+}
+const Table = /*#__PURE__*/React__default.forwardRef(function Table3(props, ref) {
+  const {
+    emptyState: EmptyState,
+    toolbarLeft,
+    toolbarRight
+  } = props;
+  const internalRef = useMergedRef(ref);
+  const {
+    table,
+    length
+  } = useTable(props);
+  useTableRefInstanceSetup(table, internalRef);
+  const {
+    renderBody,
+    scrollToIndex
+  } = useTableRenderStrategy(props, table, internalRef);
+  const tableMeta = table.options.meta;
+  const state = table.getState();
+  const handleKeyDown = event => {
+    tableMeta.hoverState.handleKeyDown(event);
+    tableMeta.currentRow.handleKeyDown(event, table.getRowModel().rows.length, scrollToIndex);
+    tableMeta.rowClick.handleKeyDown(event, table);
+    tableMeta.rowSelection.handleKeyDown(event, table);
+    tableMeta.editing.handleKeyDown(event, internalRef);
+  };
+  const handleBlur = event => {
+    tableMeta.editing.handleBlur(event);
+  };
+  const handleScroll = function (event) {
+    try {
+      tableMeta.columnFreezing.handleScroll(event);
+      return Promise.resolve();
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const className = cn('border-grey-300 relative grid h-full w-full flex-grow overflow-auto rounded border bg-white scroll-mt-[41px]', 'focus:yt-focus focus-within:yt-focus', '[&[data-resizing="true"]]:select-none', {
+    'text-xs': tableMeta.fontSize.size === 'small',
+    'text-sm': tableMeta.fontSize.size === 'medium',
+    'text-base': tableMeta.fontSize.size === 'large'
+  });
+  const {
+    style: cssGridStyle
+  } = useCssGrid(table);
+  const {
+    style: cssVars
+  } = useCssVars(tableMeta.rowHeight.height, tableMeta.fontSize.size);
+  const style = {
+    ...cssVars,
+    ...cssGridStyle,
+    // create a new stacking context so our internal z-indexes don't effect external components
+    // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+    opacity: 0.999
+  };
+  const columnFreezingStyle = useColumnFreezingStyle(props.id, table);
+  const isServerLoadingAndNotReady = tableMeta.isUsingServer && props.length === undefined;
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, columnFreezingStyle ? /*#__PURE__*/React__default.createElement("style", {
+    "data-taco": "table3-column-freezing-styles"
+  }, columnFreezingStyle) : null, /*#__PURE__*/React__default.createElement(Toolbar, {
+    table: table,
+    tableProps: props,
+    total: length,
+    left: toolbarLeft,
+    right: toolbarRight,
+    scrollToIndex: scrollToIndex
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: className,
+    id: props.id,
+    "data-font-size": tableMeta.fontSize.size,
+    "data-editing": tableMeta.editing.isEditing,
+    "data-horizontally-scrolled": tableMeta.columnFreezing.horizontallyScrolled,
+    "data-pause-hover": tableMeta === null || tableMeta === void 0 ? void 0 : tableMeta.hoverState.isPaused,
+    "data-resizing": !!state.columnSizingInfo.isResizingColumn,
+    "data-taco": "table3",
+    onBlur: handleBlur,
+    onKeyDown: handleKeyDown,
+    onScroll: handleScroll,
+    ref: internalRef,
+    role: "table",
+    style: style,
+    tabIndex: 0
+  }, isServerLoadingAndNotReady ? null : /*#__PURE__*/React__default.createElement("div", {
+    className: "group/header contents",
+    role: "rowgroup"
+  }, table.getHeaderGroups().map(headerGroup => /*#__PURE__*/React__default.createElement("div", {
+    className: "contents",
+    key: headerGroup.id,
+    role: "row"
+  }, headerGroup.headers.map(header => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+    key: header.id
+  }, flexRender(header.column.columnDef.header, {
+    ...header.getContext(),
+    scrollToIndex
+  })))))), table.getRowModel().rows.length ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(FocusScope, null, /*#__PURE__*/React__default.createElement("div", {
+    className: "group/body contents",
+    role: "rowgroup"
+  }, renderBody(), /*#__PURE__*/React__default.createElement("span", {
+    className: "col-span-full h-16 print:hidden"
+  }))), /*#__PURE__*/React__default.createElement("div", {
+    className: "group/footer contents",
+    role: "rowgroup"
+  }, table.getFooterGroups().map(footerGroup => /*#__PURE__*/React__default.createElement("div", {
+    className: "contents",
+    key: footerGroup.id,
+    role: "row"
+  }, footerGroup.headers.map(footer => /*#__PURE__*/React__default.createElement(React__default.Fragment, {
+    key: footer.id
+  }, flexRender(footer.column.columnDef.footer, footer.getContext()))))), length ? /*#__PURE__*/React__default.createElement(Summary, {
+    length: length,
+    table: table
+  }) : null)) : /*#__PURE__*/React__default.createElement("div", {
+    className: "col-span-full min-h-[theme(spacing.8)]"
+  }, EmptyState ? /*#__PURE__*/React__default.createElement(EmptyState, null) : null)));
+});
+const Table3 = /*#__PURE__*/React__default.forwardRef(function Table3(props, ref) {
+  // we force a remount (using key) when the child columns change because there are too many places to add children as an effect
+  // this is cheaper from a complexity perspective, and probably performance wise as well
+  const key = React__default.useMemo(() => String('tableKey_' + String(props.children)), [props.children]);
+  return /*#__PURE__*/React__default.createElement(Table, Object.assign({}, props, {
+    key: key,
+    ref: ref
+  }));
+});
+Table3.Column = Column;
+
+export { Table3 };
+//# sourceMappingURL=Table3.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Table3.js","sources":["../../../../../../../src/components/Table3/Table3.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { flexRender, TableMeta } from '@tanstack/react-table';\nimport { FocusScope } from '@react-aria/focus';\nimport { useMergedRef } from '../../hooks/useMergedRef';\nimport { useCssGrid } from './hooks/useCssGrid';\nimport { useTable } from './hooks/useTable';\nimport { useTableRenderStrategy } from './strategies';\nimport { Table3ColumnProps, Table3Props, Table3Ref } from './types';\nimport { Toolbar } from './components/toolbar/Toolbar';\nimport { useColumnFreezingStyle } from './hooks/features/useColumnFreezing';\nimport { useTableRefInstanceSetup } from './hooks/useTableRefInstanceSetup';\nimport { Summary } from './components/columns/footer/Summary';\nimport { useCssVars } from './hooks/useCssVars';\nimport './style.css';\n\nfunction Column(_: Table3ColumnProps) {\n    return null;\n}\n\nconst Table = React.forwardRef(function Table3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    const { emptyState: EmptyState, toolbarLeft, toolbarRight } = props;\n    const internalRef = useMergedRef<Table3Ref>(ref);\n\n    const { table, length } = useTable<TType>(props);\n    useTableRefInstanceSetup(table, internalRef);\n\n    const { renderBody, scrollToIndex } = useTableRenderStrategy<TType>(props, table, internalRef);\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const state = table.getState();\n\n    const handleKeyDown = (event: React.KeyboardEvent) => {\n        tableMeta.hoverState.handleKeyDown(event);\n        tableMeta.currentRow.handleKeyDown(event, table.getRowModel().rows.length, scrollToIndex);\n        tableMeta.rowClick.handleKeyDown(event, table);\n        tableMeta.rowSelection.handleKeyDown(event, table);\n        tableMeta.editing.handleKeyDown(event, internalRef);\n    };\n\n    const handleBlur = (event: React.FocusEvent) => {\n        tableMeta.editing.handleBlur(event);\n    };\n\n    const handleScroll = async (event: React.MouseEvent<HTMLDivElement>) => {\n        tableMeta.columnFreezing.handleScroll(event);\n    };\n\n    const className = cn(\n        'border-grey-300 relative grid h-full w-full flex-grow overflow-auto rounded border bg-white scroll-mt-[41px]',\n        'focus:yt-focus focus-within:yt-focus',\n        '[&[data-resizing=\"true\"]]:select-none',\n        {\n            'text-xs': tableMeta.fontSize.size === 'small',\n            'text-sm': tableMeta.fontSize.size === 'medium',\n            'text-base': tableMeta.fontSize.size === 'large',\n        }\n    );\n\n    const { style: cssGridStyle } = useCssGrid<TType>(table);\n    const { style: cssVars } = useCssVars(tableMeta.rowHeight.height, tableMeta.fontSize.size);\n\n    const style = {\n        ...cssVars,\n        ...cssGridStyle,\n        // create a new stacking context so our internal z-indexes don't effect external components\n        // https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context\n        opacity: 0.999,\n    };\n\n    const columnFreezingStyle = useColumnFreezingStyle(props.id, table);\n    const isServerLoadingAndNotReady = tableMeta.isUsingServer && props.length === undefined;\n\n    return (\n        <>\n            {columnFreezingStyle ? <style data-taco=\"table3-column-freezing-styles\">{columnFreezingStyle}</style> : null}\n            <Toolbar\n                table={table}\n                tableProps={props}\n                total={length}\n                left={toolbarLeft}\n                right={toolbarRight}\n                scrollToIndex={scrollToIndex}\n            />\n            <div\n                className={className}\n                id={props.id}\n                data-font-size={tableMeta.fontSize.size}\n                data-editing={tableMeta.editing.isEditing}\n                data-horizontally-scrolled={tableMeta.columnFreezing.horizontallyScrolled}\n                data-pause-hover={tableMeta?.hoverState.isPaused}\n                data-resizing={!!state.columnSizingInfo.isResizingColumn}\n                data-taco=\"table3\"\n                onBlur={handleBlur}\n                onKeyDown={handleKeyDown}\n                onScroll={handleScroll}\n                ref={internalRef}\n                role=\"table\"\n                style={style}\n                tabIndex={0}>\n                {isServerLoadingAndNotReady ? null : (\n                    <div className=\"group/header contents\" role=\"rowgroup\">\n                        {table.getHeaderGroups().map(headerGroup => (\n                            <div className=\"contents\" key={headerGroup.id} role=\"row\">\n                                {headerGroup.headers.map(header => (\n                                    <React.Fragment key={header.id}>\n                                        {flexRender(header.column.columnDef.header, { ...header.getContext(), scrollToIndex })}\n                                    </React.Fragment>\n                                ))}\n                            </div>\n                        ))}\n                    </div>\n                )}\n                {table.getRowModel().rows.length ? (\n                    <>\n                        <FocusScope>\n                            <div className=\"group/body contents\" role=\"rowgroup\">\n                                {renderBody()}\n                                <span className=\"col-span-full h-16 print:hidden\" />\n                            </div>\n                        </FocusScope>\n                        <div className=\"group/footer contents\" role=\"rowgroup\">\n                            {table.getFooterGroups().map(footerGroup => (\n                                <div className=\"contents\" key={footerGroup.id} role=\"row\">\n                                    {footerGroup.headers.map(footer => (\n                                        <React.Fragment key={footer.id}>\n                                            {flexRender(footer.column.columnDef.footer, footer.getContext())}\n                                        </React.Fragment>\n                                    ))}\n                                </div>\n                            ))}\n                            {length ? <Summary length={length} table={table} /> : null}\n                        </div>\n                    </>\n                ) : (\n                    <div className=\"col-span-full min-h-[theme(spacing.8)]\">{EmptyState ? <EmptyState /> : null}</div>\n                )}\n            </div>\n        </>\n    );\n}) as Table3WithStatics;\n\ntype Table3WithStatics<TType = unknown> = React.ForwardRefExoticComponent<Table3Props<TType>> & {\n    Column: (props: Table3ColumnProps) => null;\n} & (<TType>(props: Table3Props<TType> & { ref?: React.Ref<Table3Ref> }) => JSX.Element);\n\nexport const Table3 = React.forwardRef(function Table3<TType = unknown>(props: Table3Props<TType>, ref: React.Ref<Table3Ref>) {\n    // we force a remount (using key) when the child columns change because there are too many places to add children as an effect\n    // this is cheaper from a complexity perspective, and probably performance wise as well\n    const key = React.useMemo(() => String('tableKey_' + String(props.children)), [props.children]);\n    return <Table {...props} key={key} ref={ref} />;\n}) as Table3WithStatics;\n\nTable3.Column = Column;\n\n// hooks\nexport { useTableData } from './hooks/useTableData';\n\n// types\nexport type { useTable3DataFetcher, useTable3DataOptions, useTableDataValues } from './hooks/useTableData';\n\nexport type {\n    Table3Ref,\n    Table3Props,\n    Table3Preset,\n    Table3Settings,\n    Table3SettingsAdapter,\n    Table3RowHeight,\n    Table3FilterComparator,\n    Table3FilterHandler,\n    Table3SearchHandler,\n    Table3LoadPageHandler,\n    Table3LoadAllHandler,\n    Table3RowGotoHandler,\n    Table3SortHandler,\n    Table3Shortcuts,\n    Table3ShortcutHandlerFn,\n    Table3ShortcutHandlerObject,\n    Table3FontSize,\n    Table3SortDirection,\n    Table3SortFn,\n    Table3RowActionRenderer,\n    Table3RowSelectionHandler,\n    Table3RowExpansionRenderer,\n    Table3RowDropHandler,\n    Table3RowDragHandler,\n    Table3RowClickHandler,\n    Table3ColumnProps,\n    Table3ColumnAlignment,\n    Table3ColumnDataType,\n    Table3ColumnHeaderMenu,\n    Table3ColumnClassNameHandler,\n    Table3ColumnFooterRenderer,\n    Table3ColumnRenderer,\n    Table3ColumnControlRenderer,\n    Table3ColumnControlProps,\n} from './types';\n"],"names":["Column","_","Table","React","forwardRef","Table3","props","ref","emptyState","EmptyState","toolbarLeft","toolbarRight","internalRef","useMergedRef","table","length","useTable","useTableRefInstanceSetup","renderBody","scrollToIndex","useTableRenderStrategy","tableMeta","options","meta","state","getState","handleKeyDown","event","hoverState","currentRow","getRowModel","rows","rowClick","rowSelection","editing","handleBlur","handleScroll","columnFreezing","className","cn","fontSize","size","style","cssGridStyle","useCssGrid","cssVars","useCssVars","rowHeight","height","opacity","columnFreezingStyle","useColumnFreezingStyle","id","isServerLoadingAndNotReady","isUsingServer","undefined","Toolbar","tableProps","total","left","right","isEditing","horizontallyScrolled","isPaused","columnSizingInfo","isResizingColumn","onBlur","onKeyDown","onScroll","role","tabIndex","getHeaderGroups","map","headerGroup","key","headers","header","Fragment","flexRender","column","columnDef","getContext","FocusScope","getFooterGroups","footerGroup","footer","Summary","useMemo","String","children"],"mappings":"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"}

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

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

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

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

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

@@ -0,0 +1,131 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { isCellHighlighted, scrollColumnIntoView } from '../../../util/columns.js';
+import { RowContext } from '../../rows/RowContext.js';
+
+function DisplayCell(props) {
+  const {
+    cell,
+    className,
+    column,
+    getValue,
+    index,
+    row,
+    table,
+    tableRef
+  } = props;
+  const columnMeta = React__default.useMemo(() => column.columnDef.meta, []);
+  const tableMeta = table.options.meta;
+  const {
+    rowIndex
+  } = React__default.useContext(RowContext);
+  const value = getValue();
+  // cells are heavily memoized because performance in our table is critical
+  // be careful and selective about props that you pass to the cell
+  const memoedProps = React__default.useMemo(() => {
+    var _ref, _ref2, _props$children, _columnMeta$renderer;
+    return {
+      align: columnMeta.align,
+      children: (_ref = (_ref2 = (_props$children = props.children) !== null && _props$children !== void 0 ? _props$children : (_columnMeta$renderer = columnMeta.renderer) === null || _columnMeta$renderer === void 0 ? void 0 : _columnMeta$renderer.call(columnMeta, value, row.original)) !== null && _ref2 !== void 0 ? _ref2 : value) !== null && _ref !== void 0 ? _ref : null,
+      className: cn(className,
+      // we alias to any because className conflicts with the Table2 definition,
+      // when Table2 is gone, remove this as any
+      typeof columnMeta.className === 'function' ? columnMeta.className(row.original) : columnMeta.className),
+      data: row.original,
+      debug: table.options.debugAll,
+      enableTruncate: columnMeta.enableTruncate,
+      frozenColumnIndex: tableMeta.columnFreezing.frozenColumnIndex,
+      id: cell.id,
+      index,
+      tableRef
+    };
+  }, [row.original, props.children, value]);
+  const memoedHighlight = React__default.useMemo(() => {
+    var _tableMeta$search$que;
+    if (!tableMeta.search.isHighlightingEnabled) {
+      return false;
+    }
+    if ((_tableMeta$search$que = tableMeta.search.query) !== null && _tableMeta$search$que !== void 0 && _tableMeta$search$que.length && columnMeta.enableSearch) {
+      return isCellHighlighted(tableMeta.search.query, value, memoedProps.children);
+    }
+    return false;
+  }, [memoedProps.children, tableMeta.search.isHighlightingEnabled, tableMeta.search.query]);
+  const memoedHighlightCurrent = React__default.useMemo(() => {
+    if (!tableMeta.search.isHighlightingEnabled || !memoedHighlight || tableMeta.search.currentHighlightColumnIndex === undefined) {
+      return false;
+    }
+    const [currentRowIndex, currentColumnIndex] = tableMeta.search.highlightedColumnIndexes[tableMeta.search.currentHighlightColumnIndex];
+    if (currentRowIndex === rowIndex && currentColumnIndex === index) {
+      return true;
+    }
+    return false;
+  }, [memoedHighlight, tableMeta.search.highlightedColumnIndexes.length, tableMeta.search.currentHighlightColumnIndex]);
+  return /*#__PURE__*/React__default.createElement(MemoedDisplayCell, Object.assign({}, memoedProps, {
+    highlighted: memoedHighlight,
+    highlightedAsCurrent: memoedHighlightCurrent
+  }));
+}
+const MemoedDisplayCell = /*#__PURE__*/React__default.memo(function MemoedDisplayCell(props) {
+  const {
+    align = 'left',
+    children,
+    className: customClassName,
+    debug,
+    enableTruncate,
+    frozenColumnIndex,
+    highlighted,
+    highlightedAsCurrent = false,
+    id,
+    index,
+    tableRef
+  } = props;
+  const layoutClassName = cn('py-[var(--table3-row-padding)]', customClassName);
+  const className = highlighted ? undefined : layoutClassName;
+  const content = enableTruncate || typeof children === 'string' ? /*#__PURE__*/React__default.createElement("span", {
+    className: "truncate"
+  }, children) : children;
+  if (debug) {
+    console.log('cell render', id);
+  }
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: className,
+    "data-align": align,
+    "data-column-index": index,
+    "data-highlighted": highlighted,
+    role: "cell"
+  }, highlighted ? /*#__PURE__*/React__default.createElement(Highlight, {
+    className: layoutClassName,
+    current: highlightedAsCurrent,
+    frozenColumnIndex: frozenColumnIndex,
+    index: index,
+    tableRef: tableRef
+  }, content) : content);
+});
+const Highlight = props => {
+  const {
+    current,
+    frozenColumnIndex,
+    index,
+    tableRef,
+    ...attributes
+  } = props;
+  const ref = React__default.useRef(null);
+  const className = cn('h-full flex px-4 [justify-content:inherit] [text-align:inherit]', props.className, {
+    // normal row
+    'bg-blue-200/25': !current,
+    // current row
+    'bg-blue-200/75': current
+  });
+  React__default.useEffect(() => {
+    if (ref.current && current) {
+      scrollColumnIntoView(index, frozenColumnIndex, ref.current, tableRef.current);
+    }
+  }, [current]);
+  return /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
+    className: className,
+    ref: ref
+  }));
+};
+
+export { DisplayCell };
+//# sourceMappingURL=DisplayCell.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DisplayCell.js","sources":["../../../../../../../../../../src/components/Table3/components/columns/cell/DisplayCell.tsx"],"sourcesContent":["import React from 'react';\nimport cn from 'classnames';\nimport { ColumnMeta, CellContext, TableMeta } from '@tanstack/react-table';\nimport { Table3ColumnAlignment } from '../../../types';\nimport { RowContext } from '../../rows/RowContext';\nimport { isCellHighlighted, scrollColumnIntoView } from '../../../util/columns';\n\nexport type DisplayCellProps<TType = unknown> = CellContext<TType, unknown> & {\n    children?: string | JSX.Element;\n    className?: string;\n};\n\nexport function DisplayCell<TType = unknown>(props: DisplayCellProps<TType>) {\n    const { cell, className, column, getValue, index, row, table, tableRef } = props;\n    const columnMeta = React.useMemo(() => column.columnDef.meta as ColumnMeta<TType, unknown>, []);\n    const tableMeta = table.options.meta as TableMeta<TType>;\n    const { rowIndex } = React.useContext(RowContext);\n\n    const value = getValue();\n\n    // cells are heavily memoized because performance in our table is critical\n    // be careful and selective about props that you pass to the cell\n    const memoedProps = React.useMemo(() => {\n        return {\n            align: columnMeta.align,\n            children: (props.children ?? columnMeta.renderer?.(value, row.original) ?? value ?? null) as\n                | JSX.Element\n                | string\n                | null,\n            className: cn(\n                className,\n                // we alias to any because className conflicts with the Table2 definition,\n                // when Table2 is gone, remove this as any\n                typeof columnMeta.className === 'function' ? (columnMeta.className as any)(row.original) : columnMeta.className\n            ),\n            data: row.original,\n            debug: table.options.debugAll,\n            enableTruncate: columnMeta.enableTruncate,\n            frozenColumnIndex: tableMeta.columnFreezing.frozenColumnIndex,\n            id: cell.id,\n            index,\n            tableRef,\n        };\n    }, [row.original, props.children, value]);\n\n    const memoedHighlight = React.useMemo(() => {\n        if (!tableMeta.search.isHighlightingEnabled) {\n            return false;\n        }\n\n        if (tableMeta.search.query?.length && columnMeta.enableSearch) {\n            return isCellHighlighted(tableMeta.search.query, value, memoedProps.children);\n        }\n\n        return false;\n    }, [memoedProps.children, tableMeta.search.isHighlightingEnabled, tableMeta.search.query]);\n\n    const memoedHighlightCurrent = React.useMemo(() => {\n        if (\n            !tableMeta.search.isHighlightingEnabled ||\n            !memoedHighlight ||\n            tableMeta.search.currentHighlightColumnIndex === undefined\n        ) {\n            return false;\n        }\n\n        const [currentRowIndex, currentColumnIndex] =\n            tableMeta.search.highlightedColumnIndexes[tableMeta.search.currentHighlightColumnIndex];\n\n        if (currentRowIndex === rowIndex && currentColumnIndex === index) {\n            return true;\n        }\n\n        return false;\n    }, [memoedHighlight, tableMeta.search.highlightedColumnIndexes.length, tableMeta.search.currentHighlightColumnIndex]);\n\n    return (\n        <MemoedDisplayCell<TType> {...memoedProps} highlighted={memoedHighlight} highlightedAsCurrent={memoedHighlightCurrent} />\n    );\n}\n\n// Memoization\nexport type MemoedDisplayCellProps<TType = unknown> = {\n    align?: Table3ColumnAlignment;\n    children: JSX.Element | string | null;\n    className?: string;\n    data: TType;\n    debug?: boolean;\n    enableTruncate?: boolean;\n    frozenColumnIndex?: number;\n    highlighted: boolean;\n    highlightedAsCurrent: boolean;\n    id: string;\n    index: number;\n    tableRef: React.RefObject<HTMLDivElement>;\n};\n\nconst MemoedDisplayCell = React.memo(function MemoedDisplayCell<TType = unknown>(props: MemoedDisplayCellProps<TType>) {\n    const {\n        align = 'left',\n        children,\n        className: customClassName,\n        debug,\n        enableTruncate,\n        frozenColumnIndex,\n        highlighted,\n        highlightedAsCurrent = false,\n        id,\n        index,\n        tableRef,\n    } = props;\n\n    const layoutClassName = cn('py-[var(--table3-row-padding)]', customClassName);\n\n    const className = highlighted ? undefined : layoutClassName;\n    const content = enableTruncate || typeof children === 'string' ? <span className=\"truncate\">{children}</span> : children;\n\n    if (debug) {\n        console.log('cell render', id);\n    }\n\n    return (\n        <div className={className} data-align={align} data-column-index={index} data-highlighted={highlighted} role=\"cell\">\n            {highlighted ? (\n                <Highlight\n                    className={layoutClassName}\n                    current={highlightedAsCurrent}\n                    frozenColumnIndex={frozenColumnIndex}\n                    index={index}\n                    tableRef={tableRef}>\n                    {content}\n                </Highlight>\n            ) : (\n                content\n            )}\n        </div>\n    );\n}) as <TType = unknown>(props: MemoedDisplayCellProps<TType>) => JSX.Element;\n\nconst Highlight = props => {\n    const { current, frozenColumnIndex, index, tableRef, ...attributes } = props;\n    const ref = React.useRef<HTMLDivElement | null>(null);\n    const className = cn('h-full flex px-4 [justify-content:inherit] [text-align:inherit]', props.className, {\n        // normal row\n        'bg-blue-200/25': !current,\n        // current row\n        'bg-blue-200/75': current,\n    });\n\n    React.useEffect(() => {\n        if (ref.current && current) {\n            scrollColumnIntoView(index, frozenColumnIndex, ref.current, tableRef.current);\n        }\n    }, [current]);\n\n    return <div {...attributes} className={className} ref={ref} />;\n};\n"],"names":["DisplayCell","props","cell","className","column","getValue","index","row","table","tableRef","columnMeta","React","useMemo","columnDef","meta","tableMeta","options","rowIndex","useContext","RowContext","value","memoedProps","align","children","renderer","original","cn","data","debug","debugAll","enableTruncate","frozenColumnIndex","columnFreezing","id","memoedHighlight","search","isHighlightingEnabled","query","length","enableSearch","isCellHighlighted","memoedHighlightCurrent","currentHighlightColumnIndex","undefined","currentRowIndex","currentColumnIndex","highlightedColumnIndexes","MemoedDisplayCell","highlighted","highlightedAsCurrent","memo","customClassName","layoutClassName","content","console","log","role","Highlight","current","attributes","ref","useRef","useEffect","scrollColumnIntoView"],"mappings":";;;;;SAYgBA,WAAW,CAAkBC,KAA8B;EACvE,MAAM;IAAEC,IAAI;IAAEC,SAAS;IAAEC,MAAM;IAAEC,QAAQ;IAAEC,KAAK;IAAEC,GAAG;IAAEC,KAAK;IAAEC;GAAU,GAAGR,KAAK;EAChF,MAAMS,UAAU,GAAGC,cAAK,CAACC,OAAO,CAAC,MAAMR,MAAM,CAACS,SAAS,CAACC,IAAkC,EAAE,EAAE,CAAC;EAC/F,MAAMC,SAAS,GAAGP,KAAK,CAACQ,OAAO,CAACF,IAAwB;EACxD,MAAM;IAAEG;GAAU,GAAGN,cAAK,CAACO,UAAU,CAACC,UAAU,CAAC;EAEjD,MAAMC,KAAK,GAAGf,QAAQ,EAAE;;;EAIxB,MAAMgB,WAAW,GAAGV,cAAK,CAACC,OAAO,CAAC;;IAC9B,OAAO;MACHU,KAAK,EAAEZ,UAAU,CAACY,KAAK;MACvBC,QAAQ,sCAAGtB,KAAK,CAACsB,QAAQ,qFAAIb,UAAU,CAACc,QAAQ,yDAAnB,0BAAAd,UAAU,EAAYU,KAAK,EAAEb,GAAG,CAACkB,QAAQ,CAAC,yCAAIL,KAAK,uCAAI,IAG1E;MACVjB,SAAS,EAAEuB,EAAE,CACTvB,SAAS;;;MAGT,OAAOO,UAAU,CAACP,SAAS,KAAK,UAAU,GAAIO,UAAU,CAACP,SAAiB,CAACI,GAAG,CAACkB,QAAQ,CAAC,GAAGf,UAAU,CAACP,SAAS,CAClH;MACDwB,IAAI,EAAEpB,GAAG,CAACkB,QAAQ;MAClBG,KAAK,EAAEpB,KAAK,CAACQ,OAAO,CAACa,QAAQ;MAC7BC,cAAc,EAAEpB,UAAU,CAACoB,cAAc;MACzCC,iBAAiB,EAAEhB,SAAS,CAACiB,cAAc,CAACD,iBAAiB;MAC7DE,EAAE,EAAE/B,IAAI,CAAC+B,EAAE;MACX3B,KAAK;MACLG;KACH;GACJ,EAAE,CAACF,GAAG,CAACkB,QAAQ,EAAExB,KAAK,CAACsB,QAAQ,EAAEH,KAAK,CAAC,CAAC;EAEzC,MAAMc,eAAe,GAAGvB,cAAK,CAACC,OAAO,CAAC;;IAClC,IAAI,CAACG,SAAS,CAACoB,MAAM,CAACC,qBAAqB,EAAE;MACzC,OAAO,KAAK;;IAGhB,IAAI,yBAAArB,SAAS,CAACoB,MAAM,CAACE,KAAK,kDAAtB,sBAAwBC,MAAM,IAAI5B,UAAU,CAAC6B,YAAY,EAAE;MAC3D,OAAOC,iBAAiB,CAACzB,SAAS,CAACoB,MAAM,CAACE,KAAK,EAAEjB,KAAK,EAAEC,WAAW,CAACE,QAAQ,CAAC;;IAGjF,OAAO,KAAK;GACf,EAAE,CAACF,WAAW,CAACE,QAAQ,EAAER,SAAS,CAACoB,MAAM,CAACC,qBAAqB,EAAErB,SAAS,CAACoB,MAAM,CAACE,KAAK,CAAC,CAAC;EAE1F,MAAMI,sBAAsB,GAAG9B,cAAK,CAACC,OAAO,CAAC;IACzC,IACI,CAACG,SAAS,CAACoB,MAAM,CAACC,qBAAqB,IACvC,CAACF,eAAe,IAChBnB,SAAS,CAACoB,MAAM,CAACO,2BAA2B,KAAKC,SAAS,EAC5D;MACE,OAAO,KAAK;;IAGhB,MAAM,CAACC,eAAe,EAAEC,kBAAkB,CAAC,GACvC9B,SAAS,CAACoB,MAAM,CAACW,wBAAwB,CAAC/B,SAAS,CAACoB,MAAM,CAACO,2BAA2B,CAAC;IAE3F,IAAIE,eAAe,KAAK3B,QAAQ,IAAI4B,kBAAkB,KAAKvC,KAAK,EAAE;MAC9D,OAAO,IAAI;;IAGf,OAAO,KAAK;GACf,EAAE,CAAC4B,eAAe,EAAEnB,SAAS,CAACoB,MAAM,CAACW,wBAAwB,CAACR,MAAM,EAAEvB,SAAS,CAACoB,MAAM,CAACO,2BAA2B,CAAC,CAAC;EAErH,oBACI/B,6BAACoC,iBAAiB,oBAAY1B,WAAW;IAAE2B,WAAW,EAAEd,eAAe;IAAEe,oBAAoB,EAAER;KAA0B;AAEjI;AAkBA,MAAMM,iBAAiB,gBAAGpC,cAAK,CAACuC,IAAI,CAAC,SAASH,iBAAiB,CAAkB9C,KAAoC;EACjH,MAAM;IACFqB,KAAK,GAAG,MAAM;IACdC,QAAQ;IACRpB,SAAS,EAAEgD,eAAe;IAC1BvB,KAAK;IACLE,cAAc;IACdC,iBAAiB;IACjBiB,WAAW;IACXC,oBAAoB,GAAG,KAAK;IAC5BhB,EAAE;IACF3B,KAAK;IACLG;GACH,GAAGR,KAAK;EAET,MAAMmD,eAAe,GAAG1B,EAAE,CAAC,gCAAgC,EAAEyB,eAAe,CAAC;EAE7E,MAAMhD,SAAS,GAAG6C,WAAW,GAAGL,SAAS,GAAGS,eAAe;EAC3D,MAAMC,OAAO,GAAGvB,cAAc,IAAI,OAAOP,QAAQ,KAAK,QAAQ,gBAAGZ;IAAMR,SAAS,EAAC;KAAYoB,QAAQ,CAAQ,GAAGA,QAAQ;EAExH,IAAIK,KAAK,EAAE;IACP0B,OAAO,CAACC,GAAG,CAAC,aAAa,EAAEtB,EAAE,CAAC;;EAGlC,oBACItB;IAAKR,SAAS,EAAEA,SAAS;kBAAcmB,KAAK;yBAAqBhB,KAAK;wBAAoB0C,WAAW;IAAEQ,IAAI,EAAC;KACvGR,WAAW,gBACRrC,6BAAC8C,SAAS;IACNtD,SAAS,EAAEiD,eAAe;IAC1BM,OAAO,EAAET,oBAAoB;IAC7BlB,iBAAiB,EAAEA,iBAAiB;IACpCzB,KAAK,EAAEA,KAAK;IACZG,QAAQ,EAAEA;KACT4C,OAAO,CACA,GAEZA,OACH,CACC;AAEd,CAAC,CAA2E;AAE5E,MAAMI,SAAS,GAAGxD,KAAK;EACnB,MAAM;IAAEyD,OAAO;IAAE3B,iBAAiB;IAAEzB,KAAK;IAAEG,QAAQ;IAAE,GAAGkD;GAAY,GAAG1D,KAAK;EAC5E,MAAM2D,GAAG,GAAGjD,cAAK,CAACkD,MAAM,CAAwB,IAAI,CAAC;EACrD,MAAM1D,SAAS,GAAGuB,EAAE,CAAC,iEAAiE,EAAEzB,KAAK,CAACE,SAAS,EAAE;;IAErG,gBAAgB,EAAE,CAACuD,OAAO;;IAE1B,gBAAgB,EAAEA;GACrB,CAAC;EAEF/C,cAAK,CAACmD,SAAS,CAAC;IACZ,IAAIF,GAAG,CAACF,OAAO,IAAIA,OAAO,EAAE;MACxBK,oBAAoB,CAACzD,KAAK,EAAEyB,iBAAiB,EAAE6B,GAAG,CAACF,OAAO,EAAEjD,QAAQ,CAACiD,OAAO,CAAC;;GAEpF,EAAE,CAACA,OAAO,CAAC,CAAC;EAEb,oBAAO/C,sDAASgD,UAAU;IAAExD,SAAS,EAAEA,SAAS;IAAEyD,GAAG,EAAEA;KAAO;AAClE,CAAC;;;;"}

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

@@ -0,0 +1,286 @@
+import React__default from 'react';
+import cn from 'classnames';
+import { Input } from '../../../../Input/Input.js';
+import { deselectInputValue } from '../../../../../utils/input.js';
+import { Datepicker } from '../../../../Datepicker/Datepicker.js';
+import { Switch } from '../../../../Switch/Switch.js';
+import { getCurrentRowCellElement } from '../../../util/columns.js';
+import { getInputAppearanceClassnames, getCellAlignmentClasses } from '../styles.js';
+import { globalFilterFn, columnFilterFn } from '../../../util/filtering.js';
+import _ from 'lodash-es';
+import { EDITING_ACTIONS_WIDTH } from '../internal/EditingActions.js';
+import { Indicator, IndicatorReason } from './Indicator.js';
+import { hasChanged, willRowMoveAfterSorting } from '../../../util/editing.js';
+
+function EditingCell(props) {
+  return /*#__PURE__*/React__default.createElement(MemoedEditingCell, Object.assign({}, props));
+}
+const MemoedEditingCell = /*#__PURE__*/React__default.memo(function MemoedEditingCell(props) {
+  var _tableMeta$editing$ge, _tableMeta$editing$ro, _rows$tableMeta$curre;
+  const {
+    cell,
+    column,
+    index,
+    getValue,
+    table,
+    tableRef,
+    row
+  } = props;
+  const tableMeta = table.options.meta;
+  const columnMeta = column.columnDef.meta;
+  const cellRef = React__default.useRef(null);
+  const controlRef = React__default.useRef(null);
+  const handleChange = value => tableMeta.editing.setCellValue(cell, value);
+  const value = (_tableMeta$editing$ge = tableMeta.editing.getCellValue(cell)) !== null && _tableMeta$editing$ge !== void 0 ? _tableMeta$editing$ge : getValue();
+  const handleFocus = event => {
+    var _event$target;
+    // Check if cell is hidden behind pinned columns or edititng actions, and scroll to it.
+    const frozenColumnIndex = tableMeta.columnFreezing.frozenColumnIndex;
+    const tableElement = tableRef.current;
+    if (tableElement && frozenColumnIndex !== undefined && index > frozenColumnIndex) {
+      var _cellRef$current;
+      const lastFrozenColumnElement = getCurrentRowCellElement(frozenColumnIndex, tableElement);
+      const cellRect = (_cellRef$current = cellRef.current) === null || _cellRef$current === void 0 ? void 0 : _cellRef$current.getBoundingClientRect();
+      const lastFrozenRect = lastFrozenColumnElement === null || lastFrozenColumnElement === void 0 ? void 0 : lastFrozenColumnElement.getBoundingClientRect();
+      const tableRect = tableElement.getBoundingClientRect();
+      // Check for pinned columns overlap
+      if (cellRect && lastFrozenRect && cellRect.left < lastFrozenRect.left + lastFrozenRect.width) {
+        const pinnedColumnsWidth = lastFrozenRect.left + lastFrozenRect.width;
+        tableElement.scrollTo(cellRect.left - pinnedColumnsWidth, tableElement.scrollTop);
+        // Check for editing actions overlap
+      } else if (cellRect && tableRect && cellRect.right > tableRect.right - EDITING_ACTIONS_WIDTH) {
+        const spaceBetweenCellAndEditingActions = 10;
+        tableElement.scrollTo(
+        // Need to take into account if table has been already scrolled.
+        tableElement.scrollLeft + EDITING_ACTIONS_WIDTH + spaceBetweenCellAndEditingActions, tableElement.scrollTop);
+      }
+    }
+    if ((_event$target = event.target) !== null && _event$target !== void 0 && _event$target.select) {
+      requestAnimationFrame(() => {
+        event.target.select();
+      });
+    }
+  };
+  const handleBlur = () => {
+    tableMeta.editing.setDetailModeEditing(false);
+  };
+  // row move indicator
+  const moveReason = (_tableMeta$editing$ro = tableMeta.editing.rowMoveReason[cell.column.id]) !== null && _tableMeta$editing$ro !== void 0 ? _tableMeta$editing$ro : null;
+  const rows = table.getRowModel().rows;
+  const isCurrentRow = ((_rows$tableMeta$curre = rows[tableMeta.currentRow.currentRowIndex]) === null || _rows$tableMeta$curre === void 0 ? void 0 : _rows$tableMeta$curre.id) === row.id;
+  const mountNode = React__default.useMemo(() => {
+    if (moveReason) {
+      var _cellRef$current2, _cellRef$current2$par;
+      return (_cellRef$current2 = cellRef.current) === null || _cellRef$current2 === void 0 ? void 0 : (_cellRef$current2$par = _cellRef$current2.parentElement) === null || _cellRef$current2$par === void 0 ? void 0 : _cellRef$current2$par.firstChild;
+    }
+    return null;
+  }, [moveReason, cellRef]);
+  const removeMoveReason = () => {
+    tableMeta.editing.removeRowMoveReason(cell.column.id);
+  };
+  React__default.useEffect(() => {
+    // To avoid reseting move reason on another row hover,
+    // we need to check for changes only if value got changed in the current row.
+    if (!isCurrentRow) {
+      return;
+    }
+    if (hasChanged(getValue(), value)) {
+      const moveReason = getRowMoveReason(table, row.index, row.original, cell, value);
+      tableMeta.editing.setRowMoveReason({
+        [cell.column.id]: moveReason
+      });
+    } else {
+      removeMoveReason();
+    }
+    return removeMoveReason;
+  }, [value]);
+  const className = cn('!px-2 py-[var(--table3-row-padding)]',
+  // component overrides - grayscale for editing hover
+  '[[role="row"][data-current="false"]:hover_&>*]:!grayscale [[role="row"][data-current="false"]:hover_&_.bg-white]:!bg-grey-100',
+  // we alias to any because className conflicts with the Table2 definition,
+  // when Table2 is gone, remove this as any
+  typeof columnMeta.className === 'function' ? columnMeta.className(row.original) : columnMeta.className);
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, moveReason !== null && mountNode && /*#__PURE__*/React__default.createElement(Indicator, {
+    reason: moveReason,
+    columnName: String(cell.column.columnDef.header),
+    mountNode: mountNode,
+    validationErrors: []
+  }), /*#__PURE__*/React__default.createElement("div", {
+    className: className,
+    "data-column-index": index,
+    role: "cell",
+    ref: cellRef
+  }, /*#__PURE__*/React__default.createElement(Control, {
+    align: columnMeta.align,
+    column: cell.column,
+    data: cell.row.original,
+    initialValue: getValue(),
+    onBlur: handleBlur,
+    onFocus: handleFocus,
+    onChange: handleChange,
+    ref: controlRef,
+    table: table,
+    tableRef: tableRef,
+    value: value,
+    cell: cell
+  })));
+});
+const Control = /*#__PURE__*/React__default.forwardRef(function Control(props, ref) {
+  var _column$columnDef$met, _ref$current;
+  const {
+    align,
+    column,
+    data,
+    initialValue,
+    onChange: handleChange,
+    table,
+    tableRef,
+    value,
+    cell,
+    ...attributes
+  } = props;
+  const tableMeta = table.options.meta;
+  const controlRenderer = (_column$columnDef$met = column.columnDef.meta) === null || _column$columnDef$met === void 0 ? void 0 : _column$columnDef$met.control;
+  const isCellInDetailMode = tableMeta.editing.detailModeEditing && (ref === null || ref === void 0 ? void 0 : (_ref$current = ref.current) === null || _ref$current === void 0 ? void 0 : _ref$current.contains(document.activeElement));
+  const handleKeyDown = event => {
+    const target = event.target;
+    if (target.readOnly) {
+      return;
+    }
+    // prevent row arrow shortcuts triggering when in detail mode
+    if (tableMeta.editing.detailModeEditing && (event.key === 'ArrowUp' || event.key === 'ArrowDown')) {
+      event.preventDefault();
+      event.stopPropagation();
+    }
+    if (event.key === 'Escape') {
+      event.preventDefault();
+      // Revert to initial value if escape was pressed in detail mode.
+      if (tableMeta.editing.detailModeEditing) {
+        tableMeta.editing.setDetailModeEditing(false);
+        if (value !== initialValue) {
+          // Before reseting to initial value, we need to check if edited row with cell initial value is the same as original row,
+          // and in this case we need to completely remove row from editing state to avoid saving the same data as original.
+          const changedRow = tableMeta.editing.changes ? tableMeta.editing.changes[cell.row.id] : {};
+          const rowEdtitingDataWithInitialValue = {
+            ...changedRow,
+            [cell.column.id]: initialValue
+          };
+          if (_.isEqual(cell.row.original, rowEdtitingDataWithInitialValue)) {
+            tableMeta.editing.resetChange(cell.row.id);
+          } else {
+            handleChange(initialValue);
+          }
+        }
+      } else {
+        var _tableRef$current;
+        tableMeta.editing.toggleEditing(false);
+        (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.focus();
+      }
+      return;
+    }
+    // Should enable/disable editing mode if Enter was clicked
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      if (!tableMeta.editing.detailModeEditing) {
+        deselectInputValue(target);
+      } else {
+        var _target$select;
+        target === null || target === void 0 ? void 0 : (_target$select = target.select) === null || _target$select === void 0 ? void 0 : _target$select.call(target);
+      }
+      // Ketydown "Enter" should toggle edititng mode
+      tableMeta.editing.setDetailModeEditing(!tableMeta.editing.detailModeEditing);
+      return;
+    }
+  };
+  const handleDatepickerChange = event => {
+    // When datepicker looses focus, it triggers change event, even if date wasn't changed,
+    // so adding additional check here to prevent adding change to the edititng state.
+    const originalDate = cell.row.original[cell.column.id];
+    const changedDate = event.detail;
+    if (hasChanged(originalDate, changedDate)) {
+      handleChange(changedDate);
+    }
+  };
+  if (typeof controlRenderer === 'function') {
+    return controlRenderer({
+      ...attributes,
+      ref,
+      setValue: nextValue => {
+        if (nextValue !== value) {
+          handleChange(nextValue);
+        }
+      },
+      value
+    }, data);
+  } else if (controlRenderer === 'datepicker') {
+    const handleDatepickerKeyDown = event => {
+      handleKeyDown(event);
+      if (/^[a-z0-9]$/i.test(event.key)) {
+        tableMeta.editing.setDetailModeEditing(true);
+        return;
+      }
+    };
+    return /*#__PURE__*/React__default.createElement(Datepicker, Object.assign({}, attributes, {
+      className: cn({
+        '[&_input]:!yt-focus-dark': isCellInDetailMode
+      }),
+      onChange: handleDatepickerChange,
+      onKeyDown: handleDatepickerKeyDown,
+      ref: ref,
+      value: value
+    }));
+  } else if (controlRenderer === 'switch') {
+    return /*#__PURE__*/React__default.createElement(Switch, Object.assign({}, attributes, {
+      className: "mx-2 mt-1.5",
+      checked: Boolean(value),
+      onChange: handleChange,
+      ref: ref
+    }));
+  }
+  const isNumber = typeof value === 'number';
+  const handleInputKeyDown = event => {
+    handleKeyDown(event);
+    // Switching to editing mode, when key pressed any alphabetical character or number
+    if (/^[a-z0-9]$/i.test(event.key)) {
+      tableMeta.editing.setDetailModeEditing(true);
+      return;
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(Input, Object.assign({}, attributes, {
+    className: cn(getInputAppearanceClassnames(), getCellAlignmentClasses(align), {
+      '!yt-focus-dark': isCellInDetailMode
+    }),
+    onChange: event => {
+      handleChange(event.target.value);
+    },
+    onKeyDown: handleInputKeyDown,
+    ref: ref,
+    type: isNumber ? 'number' : undefined,
+    value: isNumber ? value : String(value !== null && value !== void 0 ? value : '')
+  }));
+});
+function getRowMoveReason(table, rowIndex, rowValues, cell, newValue) {
+  var _table$getState$sorti;
+  let rowMoveReason = null;
+  const {
+    globalFilter
+  } = table.getState();
+  const isFilteredByGlobalFilter = Object.values({
+    ...rowValues,
+    [cell.id]: newValue
+  }).some(cellValue =>
+  // Global filter can be undefined when there is no text being searched so we pass an empty string to
+  // globalFilterFn as query in that case.
+  globalFilterFn(String(cellValue), globalFilter ? String(globalFilter) : ''));
+  if (!isFilteredByGlobalFilter) {
+    rowMoveReason = IndicatorReason.SEARCH;
+  } else if (cell.column.getIsFiltered() && !columnFilterFn(newValue, cell.column.getFilterValue())) {
+    rowMoveReason = IndicatorReason.FILTER;
+  } else if (!rowMoveReason && cell.column.getIsSorted() && willRowMoveAfterSorting(newValue, cell, rowIndex, table.getRowModel().rows, !!((_table$getState$sorti = table.getState().sorting.find(s => s.id === cell.column.id)) !== null && _table$getState$sorti !== void 0 && _table$getState$sorti.desc))) {
+    rowMoveReason = IndicatorReason.SORTING;
+  }
+  return rowMoveReason;
+}
+
+export { EditingCell };
+//# sourceMappingURL=EditingCell.js.map