@economic/taco 14.1.1 → 14.2.0-tanstack-virtual-update.0

package/dist/components/Table3/components/Columns/Cell/Cell.js

@@ -1,15 +1,16 @@
 import React__default from "react";
 import { DisplayCell } from "../../../../../primitives/Table/Core/components/Columns/Cell/BuiltIns/DisplayCell.js";
 import { RowContext } from "../../../../../primitives/Table/Core/components/Row/RowContext.js";
+import { getTableMeta } from "../../../../../primitives/Table/useTableManager/util/rows.js";
 import { EditingControlCell } from "./EditingControlCell.js";
 import { EditingDisplayCell } from "./EditingDisplayCell.js";
 function Cell(props) {
   const { cell } = props;
   const { isHovered, rowIndex } = React__default.useContext(RowContext);
-  const tableMeta = cell.getContext().table.options.meta;
+  const tableMeta = getTableMeta(cell.getContext().table);
   const columnMeta = cell.column.columnDef.meta;
   if (tableMeta.editing.isEditing) {
-    if (columnMeta.control && columnMeta.enableEditing) {
+    if (columnMeta?.control && columnMeta.enableEditing) {
       const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;
       const cellError = tableMeta.editing.getCellError(cell);
       const hasErrorAndIsEditing = cellError ? tableMeta.editing.isEditing : true;

package/dist/components/Table3/components/Columns/Cell/Cell.js.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.js","sources":["../../../../../../src/components/Table3/components/Columns/Cell/Cell.tsx"],"sourcesContent":["import type { TableMeta as ReactTableMeta, ColumnMeta as ReactTableColumnMeta } from '@tanstack/react-table';\nimport React from 'react';\n\nimport { DisplayCell } from '@/primitives/Table/Core/components/Columns/Cell/BuiltIns/DisplayCell';\nimport { RowContext } from '@/primitives/Table/Core/components/Row/RowContext';\nimport type { TableCellRendererProps } from '@/primitives/Table/Core/types';\n\nimport { EditingControlCell } from './EditingControlCell';\nimport { EditingDisplayCell } from './EditingDisplayCell';\n\nexport function Cell<TType = unknown>(props: TableCellRendererProps<TType>) {\n    const { cell } = props;\n    const { isHovered, rowIndex } = React.useContext(RowContext);\n    const tableMeta = cell.getContext().table.options.meta as ReactTableMeta<TType>;\n    const columnMeta = cell.column.columnDef.meta as ReactTableColumnMeta<TType, unknown>;\n\n    if (tableMeta.editing.isEditing) {\n        if (columnMeta.control && columnMeta.enableEditing) {\n            const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n            const cellError = tableMeta.editing.getCellError(cell);\n            const hasErrorAndIsEditing = cellError ? tableMeta.editing.isEditing : true;\n\n            // saves may be pending when not currently editing, but we want to show the \"changed\" data\n            // otherwise the unsaved value flashes in while the request completes, which looks a bit shit\n            const changedValue = tableMeta.editing.getCellValue(cell);\n\n            if (changedValue !== undefined && changedValue !== cell.getValue() && hasErrorAndIsEditing) {\n                // a little hacky, but it seems to work without side effects\n                const getValue = () => changedValue as any;\n                const context = cell.getContext();\n                cell.getValue = getValue;\n                cell.getContext = () => ({ ...context, getValue });\n            }\n\n            if (isActiveRow || !!cellError || (isHovered && !isActiveRow && !tableMeta.rowActive.isHoverStatePaused)) {\n                return <EditingControlCell<TType> {...props} />;\n            }\n        }\n\n        return <EditingDisplayCell<TType> {...props} />;\n    }\n\n    return <DisplayCell<TType> {...props} />;\n}\n"],"names":["React"],"mappings":";;;;;AAUO,SAAS,KAAsB,OAAsC;AACxE,QAAM,EAAE,SAAS;AACjB,QAAM,EAAE,WAAW,SAAA,IAAaA,eAAM,WAAW,UAAU;AAC3D,QAAM,YAAY,KAAK,WAAA,EAAa,MAAM,QAAQ;AAClD,QAAM,aAAa,KAAK,OAAO,UAAU;AAEzC,MAAI,UAAU,QAAQ,WAAW;AAC7B,QAAI,WAAW,WAAW,WAAW,eAAe;AAChD,YAAM,cAAc,UAAU,UAAU,mBAAmB;AAC3D,YAAM,YAAY,UAAU,QAAQ,aAAa,IAAI;AACrD,YAAM,uBAAuB,YAAY,UAAU,QAAQ,YAAY;AAIvE,YAAM,eAAe,UAAU,QAAQ,aAAa,IAAI;AAExD,UAAI,iBAAiB,UAAa,iBAAiB,KAAK,SAAA,KAAc,sBAAsB;AAExF,cAAM,WAAW,MAAM;AACvB,cAAM,UAAU,KAAK,WAAA;AACrB,aAAK,WAAW;AAChB,aAAK,aAAa,OAAO,EAAE,GAAG,SAAS,SAAA;AAAA,MAC3C;AAEA,UAAI,eAAe,CAAC,CAAC,aAAc,aAAa,CAAC,eAAe,CAAC,UAAU,UAAU,oBAAqB;AACtG,eAAOA,+BAAA,cAAC,oBAAA,EAA2B,GAAG,MAAA,CAAO;AAAA,MACjD;AAAA,IACJ;AAEA,WAAOA,+BAAA,cAAC,oBAAA,EAA2B,GAAG,MAAA,CAAO;AAAA,EACjD;AAEA,SAAOA,+BAAA,cAAC,aAAA,EAAoB,GAAG,MAAA,CAAO;AAC1C;"}
+{"version":3,"file":"Cell.js","sources":["../../../../../../src/components/Table3/components/Columns/Cell/Cell.tsx"],"sourcesContent":["import React from 'react';\n\nimport { DisplayCell } from '@/primitives/Table/Core/components/Columns/Cell/BuiltIns/DisplayCell';\nimport { RowContext } from '@/primitives/Table/Core/components/Row/RowContext';\nimport type { TableCellRendererProps } from '@/primitives/Table/Core/types';\nimport { getTableMeta } from '@/primitives/Table/useTableManager/util/rows';\n\nimport { EditingControlCell } from './EditingControlCell';\nimport { EditingDisplayCell } from './EditingDisplayCell';\n\nexport function Cell<TType = unknown>(props: TableCellRendererProps<TType>) {\n    const { cell } = props;\n    const { isHovered, rowIndex } = React.useContext(RowContext);\n    const tableMeta = getTableMeta(cell.getContext().table);\n    const columnMeta = cell.column.columnDef.meta;\n\n    if (tableMeta.editing.isEditing) {\n        if (columnMeta?.control && columnMeta.enableEditing) {\n            const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n            const cellError = tableMeta.editing.getCellError(cell);\n            const hasErrorAndIsEditing = cellError ? tableMeta.editing.isEditing : true;\n\n            // saves may be pending when not currently editing, but we want to show the \"changed\" data\n            // otherwise the unsaved value flashes in while the request completes, which looks a bit shit\n            const changedValue = tableMeta.editing.getCellValue(cell);\n\n            if (changedValue !== undefined && changedValue !== cell.getValue() && hasErrorAndIsEditing) {\n                // a little hacky, but it seems to work without side effects\n                const getValue = () => changedValue as any;\n                const context = cell.getContext();\n                cell.getValue = getValue;\n                cell.getContext = () => ({ ...context, getValue });\n            }\n\n            if (isActiveRow || !!cellError || (isHovered && !isActiveRow && !tableMeta.rowActive.isHoverStatePaused)) {\n                return <EditingControlCell<TType> {...props} />;\n            }\n        }\n\n        return <EditingDisplayCell<TType> {...props} />;\n    }\n\n    return <DisplayCell<TType> {...props} />;\n}\n"],"names":["React"],"mappings":";;;;;;AAUO,SAAS,KAAsB,OAAsC;AACxE,QAAM,EAAE,SAAS;AACjB,QAAM,EAAE,WAAW,SAAA,IAAaA,eAAM,WAAW,UAAU;AAC3D,QAAM,YAAY,aAAa,KAAK,WAAA,EAAa,KAAK;AACtD,QAAM,aAAa,KAAK,OAAO,UAAU;AAEzC,MAAI,UAAU,QAAQ,WAAW;AAC7B,QAAI,YAAY,WAAW,WAAW,eAAe;AACjD,YAAM,cAAc,UAAU,UAAU,mBAAmB;AAC3D,YAAM,YAAY,UAAU,QAAQ,aAAa,IAAI;AACrD,YAAM,uBAAuB,YAAY,UAAU,QAAQ,YAAY;AAIvE,YAAM,eAAe,UAAU,QAAQ,aAAa,IAAI;AAExD,UAAI,iBAAiB,UAAa,iBAAiB,KAAK,SAAA,KAAc,sBAAsB;AAExF,cAAM,WAAW,MAAM;AACvB,cAAM,UAAU,KAAK,WAAA;AACrB,aAAK,WAAW;AAChB,aAAK,aAAa,OAAO,EAAE,GAAG,SAAS,SAAA;AAAA,MAC3C;AAEA,UAAI,eAAe,CAAC,CAAC,aAAc,aAAa,CAAC,eAAe,CAAC,UAAU,UAAU,oBAAqB;AACtG,eAAOA,+BAAA,cAAC,oBAAA,EAA2B,GAAG,MAAA,CAAO;AAAA,MACjD;AAAA,IACJ;AAEA,WAAOA,+BAAA,cAAC,oBAAA,EAA2B,GAAG,MAAA,CAAO;AAAA,EACjD;AAEA,SAAOA,+BAAA,cAAC,aAAA,EAAoB,GAAG,MAAA,CAAO;AAC1C;"}

package/dist/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.cjs

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
+const rows = require("../../../../../../primitives/Table/useTableManager/util/rows.cjs");
 const Localization = require("../../../../../Provider/Localization.cjs");
 const Tooltip = require("../../../../../Tooltip/Tooltip.cjs");
 const Icon = require("../../../../../Icon/Icon.cjs");
@@ -9,8 +10,8 @@ function RowMoveIndicator(props) {
   const { texts } = Localization.useLocalization();
   const [show, setShow] = React.useState(false);
   const table = cell.getContext().table;
-  const tableMeta = table.options.meta;
-  const columnMeta = cell.column.columnDef.meta ?? {};
+  const tableMeta = rows.getTableMeta(table);
+  const columnMeta = cell.column.columnDef.meta;
   const moveReason = tableMeta.editing.getRowMoveReason(cell.row.id);
   React.useEffect(() => {
     if (cellRef.current) {
@@ -35,18 +36,18 @@ function RowMoveIndicator(props) {
     return null;
   }
   const { title, description } = getMessageFromReason(texts, moveReason);
-  let columnHeader = columnMeta.header;
+  let columnHeader = columnMeta?.header;
   if (moveReason === "sorting") {
     const sortedColumns = table.getState().sorting;
     const columnId = sortedColumns[0]?.id;
     if (columnId) {
       const sortedColumn = table.getColumn(columnId);
       if (sortedColumn) {
-        columnHeader = sortedColumn.columnDef.meta.header;
+        columnHeader = sortedColumn.columnDef.meta?.header;
       }
     }
   }
-  return /* @__PURE__ */ React.createElement(Tooltip.Tooltip, { placement: "bottom", title: description.replace("[COLUMN]", columnHeader) }, /* @__PURE__ */ React.createElement("span", { "data-row-move-indicator": true }, /* @__PURE__ */ React.createElement(Icon.Icon, { name: "info", className: "-mt-0.5 mr-1 !h-4 !w-4 rounded-full bg-white !p-0 text-blue-500" }), title));
+  return /* @__PURE__ */ React.createElement(Tooltip.Tooltip, { placement: "bottom", title: description.replace("[COLUMN]", columnHeader ?? "") }, /* @__PURE__ */ React.createElement("span", { "data-row-move-indicator": true }, /* @__PURE__ */ React.createElement(Icon.Icon, { name: "info", className: "-mt-0.5 mr-1 !h-4 !w-4 rounded-full bg-white !p-0 text-blue-500" }), title));
 }
 function getMessageFromReason(texts, reason) {
   let title;

package/dist/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"RowMoveIndicator.cjs","sources":["../../../../../../../src/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.tsx"],"sourcesContent":["import type {\n    Cell as ReactTableCell,\n    TableMeta as ReactTableMeta,\n    ColumnMeta as ReactTableColumnMeta,\n} from '@tanstack/react-table';\nimport React from 'react';\n\nimport type { LocalizationTexts } from '@/components';\nimport { Icon, Tooltip, useLocalization } from '@/components';\n\ntype TableRowMoveIndicatorProps<TType = unknown> = {\n    cell: ReactTableCell<TType, unknown>;\n    cellRef: React.RefObject<HTMLTableCellElement | null>;\n    isActiveRow: boolean;\n};\n\ntype Reason = 'search' | 'sorting' | 'filter' | undefined;\n\nexport function RowMoveIndicator<TType = unknown>(props: TableRowMoveIndicatorProps<TType>) {\n    const { cell, cellRef, isActiveRow } = props;\n    const { texts } = useLocalization();\n    const [show, setShow] = React.useState(false);\n    const table = cell.getContext().table;\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const columnMeta = (cell.column.columnDef.meta ?? {}) as ReactTableColumnMeta<TType, unknown>;\n    const moveReason = tableMeta.editing.getRowMoveReason(cell.row.id) as Reason;\n\n    React.useEffect(() => {\n        if (cellRef.current) {\n            if (isActiveRow && !!moveReason) {\n                const firstChild = cellRef.current.parentElement?.querySelector('td[data-taco=\"cell-control\"]');\n\n                if (cellRef.current === firstChild) {\n                    setShow(true);\n                    cellRef.current.parentElement?.setAttribute('data-row-editing-move', 'true');\n                }\n            } else {\n                setShow(false);\n                cellRef.current.parentElement?.removeAttribute('data-row-editing-move');\n            }\n        }\n\n        return () => {\n            if (cellRef.current) {\n                cellRef.current.parentElement?.removeAttribute('data-row-editing-move');\n            }\n        };\n    }, [cellRef, isActiveRow, moveReason]);\n\n    if (!show) {\n        return null;\n    }\n\n    const { title, description } = getMessageFromReason(texts, moveReason);\n\n    let columnHeader = columnMeta.header;\n\n    if (moveReason === 'sorting') {\n        const sortedColumns = table.getState().sorting;\n        const columnId = sortedColumns[0]?.id;\n\n        if (columnId) {\n            const sortedColumn = table.getColumn(columnId);\n            if (sortedColumn) {\n                columnHeader = (sortedColumn.columnDef.meta as ReactTableColumnMeta<TType, unknown>).header;\n            }\n        }\n    }\n\n    return (\n        <Tooltip placement=\"bottom\" title={description.replace('[COLUMN]', columnHeader)}>\n            <span data-row-move-indicator>\n                <Icon name=\"info\" className=\"-mt-0.5 mr-1 !h-4 !w-4 rounded-full bg-white !p-0 text-blue-500\" />\n                {title}\n            </span>\n        </Tooltip>\n    );\n}\n\nfunction getMessageFromReason(texts: LocalizationTexts, reason: Reason) {\n    let title;\n    let description;\n\n    switch (reason) {\n        case 'filter':\n            title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonFilter;\n            break;\n\n        case 'search':\n            title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonSearch;\n            break;\n\n        case 'sorting':\n            title = texts.table3.editing.rowIndicator.rowWillMove;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonSorting;\n            break;\n\n        default:\n            title = '';\n            description = '';\n            break;\n    }\n\n    return { title, description };\n}\n"],"names":["useLocalization","Tooltip","Icon"],"mappings":";;;;;;AAkBO,SAAS,iBAAkC,OAA0C;AACxF,QAAM,EAAE,MAAM,SAAS,YAAA,IAAgB;AACvC,QAAM,EAAE,MAAA,IAAUA,6BAAA;AAClB,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,QAAQ,KAAK,WAAA,EAAa;AAChC,QAAM,YAAY,MAAM,QAAQ;AAChC,QAAM,aAAc,KAAK,OAAO,UAAU,QAAQ,CAAA;AAClD,QAAM,aAAa,UAAU,QAAQ,iBAAiB,KAAK,IAAI,EAAE;AAEjE,QAAM,UAAU,MAAM;AAClB,QAAI,QAAQ,SAAS;AACjB,UAAI,eAAe,CAAC,CAAC,YAAY;AAC7B,cAAM,aAAa,QAAQ,QAAQ,eAAe,cAAc,8BAA8B;AAE9F,YAAI,QAAQ,YAAY,YAAY;AAChC,kBAAQ,IAAI;AACZ,kBAAQ,QAAQ,eAAe,aAAa,yBAAyB,MAAM;AAAA,QAC/E;AAAA,MACJ,OAAO;AACH,gBAAQ,KAAK;AACb,gBAAQ,QAAQ,eAAe,gBAAgB,uBAAuB;AAAA,MAC1E;AAAA,IACJ;AAEA,WAAO,MAAM;AACT,UAAI,QAAQ,SAAS;AACjB,gBAAQ,QAAQ,eAAe,gBAAgB,uBAAuB;AAAA,MAC1E;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,SAAS,aAAa,UAAU,CAAC;AAErC,MAAI,CAAC,MAAM;AACP,WAAO;AAAA,EACX;AAEA,QAAM,EAAE,OAAO,YAAA,IAAgB,qBAAqB,OAAO,UAAU;AAErE,MAAI,eAAe,WAAW;AAE9B,MAAI,eAAe,WAAW;AAC1B,UAAM,gBAAgB,MAAM,SAAA,EAAW;AACvC,UAAM,WAAW,cAAc,CAAC,GAAG;AAEnC,QAAI,UAAU;AACV,YAAM,eAAe,MAAM,UAAU,QAAQ;AAC7C,UAAI,cAAc;AACd,uBAAgB,aAAa,UAAU,KAA8C;AAAA,MACzF;AAAA,IACJ;AAAA,EACJ;AAEA,SACI,sBAAA,cAACC,mBAAQ,WAAU,UAAS,OAAO,YAAY,QAAQ,YAAY,YAAY,EAAA,GAC3E,sBAAA,cAAC,UAAK,2BAAuB,KAAA,uCACxBC,KAAAA,MAAA,EAAK,MAAK,QAAO,WAAU,kEAAA,CAAkE,GAC7F,KACL,CACJ;AAER;AAEA,SAAS,qBAAqB,OAA0B,QAAgB;AACpE,MAAI;AACJ,MAAI;AAEJ,UAAQ,QAAA;AAAA,IACJ,KAAK;AACD,cAAQ,MAAM,OAAO,QAAQ,aAAa;AAC1C,oBAAc,MAAM,OAAO,QAAQ,aAAa;AAChD;AAAA,IAEJ,KAAK;AACD,cAAQ,MAAM,OAAO,QAAQ,aAAa;AAC1C,oBAAc,MAAM,OAAO,QAAQ,aAAa;AAChD;AAAA,IAEJ,KAAK;AACD,cAAQ,MAAM,OAAO,QAAQ,aAAa;AAC1C,oBAAc,MAAM,OAAO,QAAQ,aAAa;AAChD;AAAA,IAEJ;AACI,cAAQ;AACR,oBAAc;AACd;AAAA,EAAA;AAGR,SAAO,EAAE,OAAO,YAAA;AACpB;;"}
+{"version":3,"file":"RowMoveIndicator.cjs","sources":["../../../../../../../src/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.tsx"],"sourcesContent":["import type { Cell as ReactTableCell } from '@tanstack/react-table';\nimport React from 'react';\n\nimport type { LocalizationTexts } from '@/components';\nimport { Icon, Tooltip, useLocalization } from '@/components';\nimport { getTableMeta } from '@/primitives/Table/useTableManager/util/rows';\n\ntype TableRowMoveIndicatorProps<TType = unknown> = {\n    cell: ReactTableCell<TType, unknown>;\n    cellRef: React.RefObject<HTMLTableCellElement | null>;\n    isActiveRow: boolean;\n};\n\ntype Reason = 'search' | 'sorting' | 'filter' | undefined;\n\nexport function RowMoveIndicator<TType = unknown>(props: TableRowMoveIndicatorProps<TType>) {\n    const { cell, cellRef, isActiveRow } = props;\n    const { texts } = useLocalization();\n    const [show, setShow] = React.useState(false);\n    const table = cell.getContext().table;\n    const tableMeta = getTableMeta(table);\n    const columnMeta = cell.column.columnDef.meta;\n    const moveReason = tableMeta.editing.getRowMoveReason(cell.row.id) as Reason;\n\n    React.useEffect(() => {\n        if (cellRef.current) {\n            if (isActiveRow && !!moveReason) {\n                const firstChild = cellRef.current.parentElement?.querySelector('td[data-taco=\"cell-control\"]');\n\n                if (cellRef.current === firstChild) {\n                    setShow(true);\n                    cellRef.current.parentElement?.setAttribute('data-row-editing-move', 'true');\n                }\n            } else {\n                setShow(false);\n                cellRef.current.parentElement?.removeAttribute('data-row-editing-move');\n            }\n        }\n\n        return () => {\n            if (cellRef.current) {\n                cellRef.current.parentElement?.removeAttribute('data-row-editing-move');\n            }\n        };\n    }, [cellRef, isActiveRow, moveReason]);\n\n    if (!show) {\n        return null;\n    }\n\n    const { title, description } = getMessageFromReason(texts, moveReason);\n\n    let columnHeader = columnMeta?.header;\n\n    if (moveReason === 'sorting') {\n        const sortedColumns = table.getState().sorting;\n        const columnId = sortedColumns[0]?.id;\n\n        if (columnId) {\n            const sortedColumn = table.getColumn(columnId);\n            if (sortedColumn) {\n                columnHeader = sortedColumn.columnDef.meta?.header;\n            }\n        }\n    }\n\n    return (\n        <Tooltip placement=\"bottom\" title={description.replace('[COLUMN]', columnHeader ?? '')}>\n            <span data-row-move-indicator>\n                <Icon name=\"info\" className=\"-mt-0.5 mr-1 !h-4 !w-4 rounded-full bg-white !p-0 text-blue-500\" />\n                {title}\n            </span>\n        </Tooltip>\n    );\n}\n\nfunction getMessageFromReason(texts: LocalizationTexts, reason: Reason) {\n    let title;\n    let description;\n\n    switch (reason) {\n        case 'filter':\n            title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonFilter;\n            break;\n\n        case 'search':\n            title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonSearch;\n            break;\n\n        case 'sorting':\n            title = texts.table3.editing.rowIndicator.rowWillMove;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonSorting;\n            break;\n\n        default:\n            title = '';\n            description = '';\n            break;\n    }\n\n    return { title, description };\n}\n"],"names":["useLocalization","getTableMeta","Tooltip","Icon"],"mappings":";;;;;;;AAeO,SAAS,iBAAkC,OAA0C;AACxF,QAAM,EAAE,MAAM,SAAS,YAAA,IAAgB;AACvC,QAAM,EAAE,MAAA,IAAUA,6BAAA;AAClB,QAAM,CAAC,MAAM,OAAO,IAAI,MAAM,SAAS,KAAK;AAC5C,QAAM,QAAQ,KAAK,WAAA,EAAa;AAChC,QAAM,YAAYC,KAAAA,aAAa,KAAK;AACpC,QAAM,aAAa,KAAK,OAAO,UAAU;AACzC,QAAM,aAAa,UAAU,QAAQ,iBAAiB,KAAK,IAAI,EAAE;AAEjE,QAAM,UAAU,MAAM;AAClB,QAAI,QAAQ,SAAS;AACjB,UAAI,eAAe,CAAC,CAAC,YAAY;AAC7B,cAAM,aAAa,QAAQ,QAAQ,eAAe,cAAc,8BAA8B;AAE9F,YAAI,QAAQ,YAAY,YAAY;AAChC,kBAAQ,IAAI;AACZ,kBAAQ,QAAQ,eAAe,aAAa,yBAAyB,MAAM;AAAA,QAC/E;AAAA,MACJ,OAAO;AACH,gBAAQ,KAAK;AACb,gBAAQ,QAAQ,eAAe,gBAAgB,uBAAuB;AAAA,MAC1E;AAAA,IACJ;AAEA,WAAO,MAAM;AACT,UAAI,QAAQ,SAAS;AACjB,gBAAQ,QAAQ,eAAe,gBAAgB,uBAAuB;AAAA,MAC1E;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,SAAS,aAAa,UAAU,CAAC;AAErC,MAAI,CAAC,MAAM;AACP,WAAO;AAAA,EACX;AAEA,QAAM,EAAE,OAAO,YAAA,IAAgB,qBAAqB,OAAO,UAAU;AAErE,MAAI,eAAe,YAAY;AAE/B,MAAI,eAAe,WAAW;AAC1B,UAAM,gBAAgB,MAAM,SAAA,EAAW;AACvC,UAAM,WAAW,cAAc,CAAC,GAAG;AAEnC,QAAI,UAAU;AACV,YAAM,eAAe,MAAM,UAAU,QAAQ;AAC7C,UAAI,cAAc;AACd,uBAAe,aAAa,UAAU,MAAM;AAAA,MAChD;AAAA,IACJ;AAAA,EACJ;AAEA,SACI,sBAAA,cAACC,QAAAA,WAAQ,WAAU,UAAS,OAAO,YAAY,QAAQ,YAAY,gBAAgB,EAAE,EAAA,uCAChF,QAAA,EAAK,2BAAuB,KAAA,GACzB,sBAAA,cAACC,KAAAA,MAAA,EAAK,MAAK,QAAO,WAAU,kEAAA,CAAkE,GAC7F,KACL,CACJ;AAER;AAEA,SAAS,qBAAqB,OAA0B,QAAgB;AACpE,MAAI;AACJ,MAAI;AAEJ,UAAQ,QAAA;AAAA,IACJ,KAAK;AACD,cAAQ,MAAM,OAAO,QAAQ,aAAa;AAC1C,oBAAc,MAAM,OAAO,QAAQ,aAAa;AAChD;AAAA,IAEJ,KAAK;AACD,cAAQ,MAAM,OAAO,QAAQ,aAAa;AAC1C,oBAAc,MAAM,OAAO,QAAQ,aAAa;AAChD;AAAA,IAEJ,KAAK;AACD,cAAQ,MAAM,OAAO,QAAQ,aAAa;AAC1C,oBAAc,MAAM,OAAO,QAAQ,aAAa;AAChD;AAAA,IAEJ;AACI,cAAQ;AACR,oBAAc;AACd;AAAA,EAAA;AAGR,SAAO,EAAE,OAAO,YAAA;AACpB;;"}

package/dist/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.js

@@ -1,4 +1,5 @@
 import React__default from "react";
+import { getTableMeta } from "../../../../../../primitives/Table/useTableManager/util/rows.js";
 import { useLocalization } from "../../../../../Provider/Localization.js";
 import { Tooltip } from "../../../../../Tooltip/Tooltip.js";
 import { Icon } from "../../../../../Icon/Icon.js";
@@ -7,8 +8,8 @@ function RowMoveIndicator(props) {
   const { texts } = useLocalization();
   const [show, setShow] = React__default.useState(false);
   const table = cell.getContext().table;
-  const tableMeta = table.options.meta;
-  const columnMeta = cell.column.columnDef.meta ?? {};
+  const tableMeta = getTableMeta(table);
+  const columnMeta = cell.column.columnDef.meta;
   const moveReason = tableMeta.editing.getRowMoveReason(cell.row.id);
   React__default.useEffect(() => {
     if (cellRef.current) {
@@ -33,18 +34,18 @@ function RowMoveIndicator(props) {
     return null;
   }
   const { title, description } = getMessageFromReason(texts, moveReason);
-  let columnHeader = columnMeta.header;
+  let columnHeader = columnMeta?.header;
   if (moveReason === "sorting") {
     const sortedColumns = table.getState().sorting;
     const columnId = sortedColumns[0]?.id;
     if (columnId) {
       const sortedColumn = table.getColumn(columnId);
       if (sortedColumn) {
-        columnHeader = sortedColumn.columnDef.meta.header;
+        columnHeader = sortedColumn.columnDef.meta?.header;
       }
     }
   }
-  return /* @__PURE__ */ React__default.createElement(Tooltip, { placement: "bottom", title: description.replace("[COLUMN]", columnHeader) }, /* @__PURE__ */ React__default.createElement("span", { "data-row-move-indicator": true }, /* @__PURE__ */ React__default.createElement(Icon, { name: "info", className: "-mt-0.5 mr-1 !h-4 !w-4 rounded-full bg-white !p-0 text-blue-500" }), title));
+  return /* @__PURE__ */ React__default.createElement(Tooltip, { placement: "bottom", title: description.replace("[COLUMN]", columnHeader ?? "") }, /* @__PURE__ */ React__default.createElement("span", { "data-row-move-indicator": true }, /* @__PURE__ */ React__default.createElement(Icon, { name: "info", className: "-mt-0.5 mr-1 !h-4 !w-4 rounded-full bg-white !p-0 text-blue-500" }), title));
 }
 function getMessageFromReason(texts, reason) {
   let title;

package/dist/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.js.map

@@ -1 +1 @@
-{"version":3,"file":"RowMoveIndicator.js","sources":["../../../../../../../src/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.tsx"],"sourcesContent":["import type {\n    Cell as ReactTableCell,\n    TableMeta as ReactTableMeta,\n    ColumnMeta as ReactTableColumnMeta,\n} from '@tanstack/react-table';\nimport React from 'react';\n\nimport type { LocalizationTexts } from '@/components';\nimport { Icon, Tooltip, useLocalization } from '@/components';\n\ntype TableRowMoveIndicatorProps<TType = unknown> = {\n    cell: ReactTableCell<TType, unknown>;\n    cellRef: React.RefObject<HTMLTableCellElement | null>;\n    isActiveRow: boolean;\n};\n\ntype Reason = 'search' | 'sorting' | 'filter' | undefined;\n\nexport function RowMoveIndicator<TType = unknown>(props: TableRowMoveIndicatorProps<TType>) {\n    const { cell, cellRef, isActiveRow } = props;\n    const { texts } = useLocalization();\n    const [show, setShow] = React.useState(false);\n    const table = cell.getContext().table;\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const columnMeta = (cell.column.columnDef.meta ?? {}) as ReactTableColumnMeta<TType, unknown>;\n    const moveReason = tableMeta.editing.getRowMoveReason(cell.row.id) as Reason;\n\n    React.useEffect(() => {\n        if (cellRef.current) {\n            if (isActiveRow && !!moveReason) {\n                const firstChild = cellRef.current.parentElement?.querySelector('td[data-taco=\"cell-control\"]');\n\n                if (cellRef.current === firstChild) {\n                    setShow(true);\n                    cellRef.current.parentElement?.setAttribute('data-row-editing-move', 'true');\n                }\n            } else {\n                setShow(false);\n                cellRef.current.parentElement?.removeAttribute('data-row-editing-move');\n            }\n        }\n\n        return () => {\n            if (cellRef.current) {\n                cellRef.current.parentElement?.removeAttribute('data-row-editing-move');\n            }\n        };\n    }, [cellRef, isActiveRow, moveReason]);\n\n    if (!show) {\n        return null;\n    }\n\n    const { title, description } = getMessageFromReason(texts, moveReason);\n\n    let columnHeader = columnMeta.header;\n\n    if (moveReason === 'sorting') {\n        const sortedColumns = table.getState().sorting;\n        const columnId = sortedColumns[0]?.id;\n\n        if (columnId) {\n            const sortedColumn = table.getColumn(columnId);\n            if (sortedColumn) {\n                columnHeader = (sortedColumn.columnDef.meta as ReactTableColumnMeta<TType, unknown>).header;\n            }\n        }\n    }\n\n    return (\n        <Tooltip placement=\"bottom\" title={description.replace('[COLUMN]', columnHeader)}>\n            <span data-row-move-indicator>\n                <Icon name=\"info\" className=\"-mt-0.5 mr-1 !h-4 !w-4 rounded-full bg-white !p-0 text-blue-500\" />\n                {title}\n            </span>\n        </Tooltip>\n    );\n}\n\nfunction getMessageFromReason(texts: LocalizationTexts, reason: Reason) {\n    let title;\n    let description;\n\n    switch (reason) {\n        case 'filter':\n            title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonFilter;\n            break;\n\n        case 'search':\n            title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonSearch;\n            break;\n\n        case 'sorting':\n            title = texts.table3.editing.rowIndicator.rowWillMove;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonSorting;\n            break;\n\n        default:\n            title = '';\n            description = '';\n            break;\n    }\n\n    return { title, description };\n}\n"],"names":["React"],"mappings":";;;;AAkBO,SAAS,iBAAkC,OAA0C;AACxF,QAAM,EAAE,MAAM,SAAS,YAAA,IAAgB;AACvC,QAAM,EAAE,MAAA,IAAU,gBAAA;AAClB,QAAM,CAAC,MAAM,OAAO,IAAIA,eAAM,SAAS,KAAK;AAC5C,QAAM,QAAQ,KAAK,WAAA,EAAa;AAChC,QAAM,YAAY,MAAM,QAAQ;AAChC,QAAM,aAAc,KAAK,OAAO,UAAU,QAAQ,CAAA;AAClD,QAAM,aAAa,UAAU,QAAQ,iBAAiB,KAAK,IAAI,EAAE;AAEjEA,iBAAM,UAAU,MAAM;AAClB,QAAI,QAAQ,SAAS;AACjB,UAAI,eAAe,CAAC,CAAC,YAAY;AAC7B,cAAM,aAAa,QAAQ,QAAQ,eAAe,cAAc,8BAA8B;AAE9F,YAAI,QAAQ,YAAY,YAAY;AAChC,kBAAQ,IAAI;AACZ,kBAAQ,QAAQ,eAAe,aAAa,yBAAyB,MAAM;AAAA,QAC/E;AAAA,MACJ,OAAO;AACH,gBAAQ,KAAK;AACb,gBAAQ,QAAQ,eAAe,gBAAgB,uBAAuB;AAAA,MAC1E;AAAA,IACJ;AAEA,WAAO,MAAM;AACT,UAAI,QAAQ,SAAS;AACjB,gBAAQ,QAAQ,eAAe,gBAAgB,uBAAuB;AAAA,MAC1E;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,SAAS,aAAa,UAAU,CAAC;AAErC,MAAI,CAAC,MAAM;AACP,WAAO;AAAA,EACX;AAEA,QAAM,EAAE,OAAO,YAAA,IAAgB,qBAAqB,OAAO,UAAU;AAErE,MAAI,eAAe,WAAW;AAE9B,MAAI,eAAe,WAAW;AAC1B,UAAM,gBAAgB,MAAM,SAAA,EAAW;AACvC,UAAM,WAAW,cAAc,CAAC,GAAG;AAEnC,QAAI,UAAU;AACV,YAAM,eAAe,MAAM,UAAU,QAAQ;AAC7C,UAAI,cAAc;AACd,uBAAgB,aAAa,UAAU,KAA8C;AAAA,MACzF;AAAA,IACJ;AAAA,EACJ;AAEA,SACIA,+BAAA,cAAC,WAAQ,WAAU,UAAS,OAAO,YAAY,QAAQ,YAAY,YAAY,EAAA,GAC3EA,+BAAA,cAAC,UAAK,2BAAuB,KAAA,gDACxB,MAAA,EAAK,MAAK,QAAO,WAAU,kEAAA,CAAkE,GAC7F,KACL,CACJ;AAER;AAEA,SAAS,qBAAqB,OAA0B,QAAgB;AACpE,MAAI;AACJ,MAAI;AAEJ,UAAQ,QAAA;AAAA,IACJ,KAAK;AACD,cAAQ,MAAM,OAAO,QAAQ,aAAa;AAC1C,oBAAc,MAAM,OAAO,QAAQ,aAAa;AAChD;AAAA,IAEJ,KAAK;AACD,cAAQ,MAAM,OAAO,QAAQ,aAAa;AAC1C,oBAAc,MAAM,OAAO,QAAQ,aAAa;AAChD;AAAA,IAEJ,KAAK;AACD,cAAQ,MAAM,OAAO,QAAQ,aAAa;AAC1C,oBAAc,MAAM,OAAO,QAAQ,aAAa;AAChD;AAAA,IAEJ;AACI,cAAQ;AACR,oBAAc;AACd;AAAA,EAAA;AAGR,SAAO,EAAE,OAAO,YAAA;AACpB;"}
+{"version":3,"file":"RowMoveIndicator.js","sources":["../../../../../../../src/components/Table3/components/Columns/Cell/Editing/RowMoveIndicator.tsx"],"sourcesContent":["import type { Cell as ReactTableCell } from '@tanstack/react-table';\nimport React from 'react';\n\nimport type { LocalizationTexts } from '@/components';\nimport { Icon, Tooltip, useLocalization } from '@/components';\nimport { getTableMeta } from '@/primitives/Table/useTableManager/util/rows';\n\ntype TableRowMoveIndicatorProps<TType = unknown> = {\n    cell: ReactTableCell<TType, unknown>;\n    cellRef: React.RefObject<HTMLTableCellElement | null>;\n    isActiveRow: boolean;\n};\n\ntype Reason = 'search' | 'sorting' | 'filter' | undefined;\n\nexport function RowMoveIndicator<TType = unknown>(props: TableRowMoveIndicatorProps<TType>) {\n    const { cell, cellRef, isActiveRow } = props;\n    const { texts } = useLocalization();\n    const [show, setShow] = React.useState(false);\n    const table = cell.getContext().table;\n    const tableMeta = getTableMeta(table);\n    const columnMeta = cell.column.columnDef.meta;\n    const moveReason = tableMeta.editing.getRowMoveReason(cell.row.id) as Reason;\n\n    React.useEffect(() => {\n        if (cellRef.current) {\n            if (isActiveRow && !!moveReason) {\n                const firstChild = cellRef.current.parentElement?.querySelector('td[data-taco=\"cell-control\"]');\n\n                if (cellRef.current === firstChild) {\n                    setShow(true);\n                    cellRef.current.parentElement?.setAttribute('data-row-editing-move', 'true');\n                }\n            } else {\n                setShow(false);\n                cellRef.current.parentElement?.removeAttribute('data-row-editing-move');\n            }\n        }\n\n        return () => {\n            if (cellRef.current) {\n                cellRef.current.parentElement?.removeAttribute('data-row-editing-move');\n            }\n        };\n    }, [cellRef, isActiveRow, moveReason]);\n\n    if (!show) {\n        return null;\n    }\n\n    const { title, description } = getMessageFromReason(texts, moveReason);\n\n    let columnHeader = columnMeta?.header;\n\n    if (moveReason === 'sorting') {\n        const sortedColumns = table.getState().sorting;\n        const columnId = sortedColumns[0]?.id;\n\n        if (columnId) {\n            const sortedColumn = table.getColumn(columnId);\n            if (sortedColumn) {\n                columnHeader = sortedColumn.columnDef.meta?.header;\n            }\n        }\n    }\n\n    return (\n        <Tooltip placement=\"bottom\" title={description.replace('[COLUMN]', columnHeader ?? '')}>\n            <span data-row-move-indicator>\n                <Icon name=\"info\" className=\"-mt-0.5 mr-1 !h-4 !w-4 rounded-full bg-white !p-0 text-blue-500\" />\n                {title}\n            </span>\n        </Tooltip>\n    );\n}\n\nfunction getMessageFromReason(texts: LocalizationTexts, reason: Reason) {\n    let title;\n    let description;\n\n    switch (reason) {\n        case 'filter':\n            title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonFilter;\n            break;\n\n        case 'search':\n            title = texts.table3.editing.rowIndicator.rowWillBeHidden;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonSearch;\n            break;\n\n        case 'sorting':\n            title = texts.table3.editing.rowIndicator.rowWillMove;\n            description = texts.table3.editing.rowIndicator.rowWillMoveReasonSorting;\n            break;\n\n        default:\n            title = '';\n            description = '';\n            break;\n    }\n\n    return { title, description };\n}\n"],"names":["React"],"mappings":";;;;;AAeO,SAAS,iBAAkC,OAA0C;AACxF,QAAM,EAAE,MAAM,SAAS,YAAA,IAAgB;AACvC,QAAM,EAAE,MAAA,IAAU,gBAAA;AAClB,QAAM,CAAC,MAAM,OAAO,IAAIA,eAAM,SAAS,KAAK;AAC5C,QAAM,QAAQ,KAAK,WAAA,EAAa;AAChC,QAAM,YAAY,aAAa,KAAK;AACpC,QAAM,aAAa,KAAK,OAAO,UAAU;AACzC,QAAM,aAAa,UAAU,QAAQ,iBAAiB,KAAK,IAAI,EAAE;AAEjEA,iBAAM,UAAU,MAAM;AAClB,QAAI,QAAQ,SAAS;AACjB,UAAI,eAAe,CAAC,CAAC,YAAY;AAC7B,cAAM,aAAa,QAAQ,QAAQ,eAAe,cAAc,8BAA8B;AAE9F,YAAI,QAAQ,YAAY,YAAY;AAChC,kBAAQ,IAAI;AACZ,kBAAQ,QAAQ,eAAe,aAAa,yBAAyB,MAAM;AAAA,QAC/E;AAAA,MACJ,OAAO;AACH,gBAAQ,KAAK;AACb,gBAAQ,QAAQ,eAAe,gBAAgB,uBAAuB;AAAA,MAC1E;AAAA,IACJ;AAEA,WAAO,MAAM;AACT,UAAI,QAAQ,SAAS;AACjB,gBAAQ,QAAQ,eAAe,gBAAgB,uBAAuB;AAAA,MAC1E;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,SAAS,aAAa,UAAU,CAAC;AAErC,MAAI,CAAC,MAAM;AACP,WAAO;AAAA,EACX;AAEA,QAAM,EAAE,OAAO,YAAA,IAAgB,qBAAqB,OAAO,UAAU;AAErE,MAAI,eAAe,YAAY;AAE/B,MAAI,eAAe,WAAW;AAC1B,UAAM,gBAAgB,MAAM,SAAA,EAAW;AACvC,UAAM,WAAW,cAAc,CAAC,GAAG;AAEnC,QAAI,UAAU;AACV,YAAM,eAAe,MAAM,UAAU,QAAQ;AAC7C,UAAI,cAAc;AACd,uBAAe,aAAa,UAAU,MAAM;AAAA,MAChD;AAAA,IACJ;AAAA,EACJ;AAEA,SACIA,+BAAA,cAAC,WAAQ,WAAU,UAAS,OAAO,YAAY,QAAQ,YAAY,gBAAgB,EAAE,EAAA,gDAChF,QAAA,EAAK,2BAAuB,KAAA,GACzBA,+BAAA,cAAC,MAAA,EAAK,MAAK,QAAO,WAAU,kEAAA,CAAkE,GAC7F,KACL,CACJ;AAER;AAEA,SAAS,qBAAqB,OAA0B,QAAgB;AACpE,MAAI;AACJ,MAAI;AAEJ,UAAQ,QAAA;AAAA,IACJ,KAAK;AACD,cAAQ,MAAM,OAAO,QAAQ,aAAa;AAC1C,oBAAc,MAAM,OAAO,QAAQ,aAAa;AAChD;AAAA,IAEJ,KAAK;AACD,cAAQ,MAAM,OAAO,QAAQ,aAAa;AAC1C,oBAAc,MAAM,OAAO,QAAQ,aAAa;AAChD;AAAA,IAEJ,KAAK;AACD,cAAQ,MAAM,OAAO,QAAQ,aAAa;AAC1C,oBAAc,MAAM,OAAO,QAAQ,aAAa;AAChD;AAAA,IAEJ;AACI,cAAQ;AACR,oBAAc;AACd;AAAA,EAAA;AAGR,SAAO,EAAE,OAAO,YAAA;AACpB;"}

package/dist/components/Table3/components/Columns/Cell/EditingControlCell.cjs

@@ -6,6 +6,7 @@ const useLazyEffect = require("../../../../../hooks/useLazyEffect.cjs");
 const util$1 = require("../../../../../primitives/Table/Core/components/Columns/Cell/util.cjs");
 const RowContext = require("../../../../../primitives/Table/Core/components/Row/RowContext.cjs");
 const dataTypes = require("../../../../../primitives/Table/useTableManager/util/dataTypes.cjs");
+const rows = require("../../../../../primitives/Table/useTableManager/util/rows.cjs");
 const date = require("../../../../../utils/date.cjs");
 const dom = require("../../../../../utils/dom.cjs");
 const keyboard = require("../../../../../utils/keyboard.cjs");
@@ -23,10 +24,10 @@ function EditingControlCell(props) {
   const { rowIndex } = React.useContext(RowContext.RowContext);
   const { table } = cell.getContext();
   const locale = Localization.useLocalization();
-  const tableMeta = table.options.meta;
+  const tableMeta = rows.getTableMeta(table);
   const columnMeta = cell.column.columnDef.meta;
   const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;
-  const type = columnMeta.control ?? "input";
+  const type = columnMeta?.control ?? "input";
   const handleFocus = util.useEditingCellAutofocus(props);
   const value = cell.getValue();
   const rowChanges = tableMeta.editing.getRowValue(cell.row.id);
@@ -43,11 +44,11 @@ function EditingControlCell(props) {
   const handleChange = React.useCallback(
     (nextValue) => {
       let hasChanged = false;
-      if (columnMeta.dataType === "date") {
+      if (columnMeta?.dataType === "date") {
         hasChanged = !dateFns.isSameDay(new Date(nextValue), new Date(value));
-      } else if (columnMeta.dataType === "datetime") {
+      } else if (columnMeta?.dataType === "datetime") {
         hasChanged = !dateFns.isEqual(new Date(nextValue), new Date(value));
-      } else if (columnMeta.dataType === "time") {
+      } else if (columnMeta?.dataType === "time") {
         const next = new Date(nextValue);
         const current = new Date(value);
         hasChanged = !(next.getHours() === current.getHours() && next.getMinutes() === current.getMinutes());
@@ -59,7 +60,7 @@ function EditingControlCell(props) {
         shouldRunUpdate.current = hasNonTextControl;
       }
     },
-    [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex, value, columnMeta.dataType]
+    [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex, value, columnMeta?.dataType]
   );
   const handleBlur = React.useCallback(
     (event) => {
@@ -78,13 +79,13 @@ function EditingControlCell(props) {
     tableMeta.editing.onCellChanged(cell, rowIndex, void 0, true, true);
   }, [cell.row.id, JSON.stringify(rowChanges), rowIndex, cell.column.id, cell.row.original]);
   const controlProps = {
-    dataType: columnMeta.dataType,
+    dataType: columnMeta?.dataType,
     disabled: tableMeta.editing.getRowStatus(cell.row.id) === "saving",
     fontSize: tableMeta.fontSize.size,
     id: cell.column.id,
     invalid: !!error,
     isDetailedMode: tableMeta.editing.isDetailedMode,
-    isTruncated: !!columnMeta.enableTruncate,
+    isTruncated: !!columnMeta?.enableTruncate,
     locale: locale.locale,
     onBlur: handleBlur,
     onChange: handleChange,

package/dist/components/Table3/components/Columns/Cell/EditingControlCell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"EditingControlCell.cjs","sources":["../../../../../../src/components/Table3/components/Columns/Cell/EditingControlCell.tsx"],"sourcesContent":["import type { TableMeta as ReactTableMeta, ColumnMeta as ReactTableColumnMeta } from '@tanstack/react-table';\nimport { isDate, isEqual as isEqualDate, isSameDay } from 'date-fns';\nimport React from 'react';\n\nimport { Checkbox, Datepicker, Field, Input, useLocalization, Switch } from '@/components';\nimport { useLazyEffect } from '@/hooks/useLazyEffect';\nimport { getCellAttributes } from '@/primitives/Table/Core/components/Columns/Cell/util';\nimport { RowContext } from '@/primitives/Table/Core/components/Row/RowContext';\nimport type { TableCellRendererProps } from '@/primitives/Table/Core/types';\nimport type { TableColumnDataType, TableColumnRendererControl, TableFontSize } from '@/primitives/Table/types';\nimport { getDataTypeProperties } from '@/primitives/Table/useTableManager/util/dataTypes';\nimport * as date from '@/utils/date';\nimport { isElementInsideOrTriggeredFromContainer } from '@/utils/dom';\nimport { isPressingMetaKey } from '@/utils/keyboard';\n\nimport { RowMoveIndicator } from './Editing/RowMoveIndicator';\nimport { TextareaWithAutosizing } from './Editing/TextareaWithAutosizing';\nimport { useEditingCellAutofocus } from './util';\n\nexport function EditingControlCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n    const { cell, cellRef, isHighlighted, index } = props;\n    const { rowIndex } = React.useContext(RowContext);\n    const { table } = cell.getContext();\n    const locale = useLocalization();\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const columnMeta = cell.column.columnDef.meta as ReactTableColumnMeta<TType, unknown>;\n    const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n    const type = columnMeta.control ?? 'input';\n    const handleFocus = useEditingCellAutofocus<TType>(props);\n    const value = cell.getValue();\n    const rowChanges = tableMeta.editing.getRowValue(cell.row.id);\n    const shouldRunUpdate = React.useRef(false);\n\n    // some controls, like select2, should trigger cell changed (validation, updates) as the value changes\n    const hasNonTextControl = React.useMemo(() => {\n        return (\n            typeof type === 'function' &&\n            !!cellRef.current?.querySelector('[data-taco=\"Select2\"],[data-taco=\"switch\"],[data-taco=\"checkbox\"]')\n        );\n    }, [cellRef.current]);\n\n    useLazyEffect(() => {\n        // Use an effect instead of a change handler to prevent onEditingChange from running with a stale js closure during on-the-fly creation.\n        if (hasNonTextControl && shouldRunUpdate.current) {\n            tableMeta.editing.onCellChanged(cell, rowIndex, value, true, false);\n            // prevent risk of infinite loop, in case there'd ever be an updater function with two values that update each other.\n            shouldRunUpdate.current = false;\n        }\n    }, [value]);\n\n    const handleChange = React.useCallback(\n        (nextValue: unknown) => {\n            let hasChanged = false;\n\n            if (columnMeta.dataType === 'date') {\n                hasChanged = !isSameDay(new Date(nextValue as string | Date), new Date(value as string | Date));\n            } else if (columnMeta.dataType === 'datetime') {\n                hasChanged = !isEqualDate(new Date(nextValue as string | Date), new Date(value as string | Date));\n            } else if (columnMeta.dataType === 'time') {\n                const next = new Date(nextValue as string | Date);\n                const current = new Date(value as string | Date);\n                hasChanged = !(next.getHours() === current.getHours() && next.getMinutes() === current.getMinutes());\n            } else {\n                hasChanged = nextValue !== value;\n            }\n\n            if (hasChanged) {\n                tableMeta.editing.setCellValue(cell, rowIndex, nextValue);\n                shouldRunUpdate.current = hasNonTextControl;\n            }\n        },\n        [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex, value, columnMeta.dataType]\n    );\n\n    const handleBlur = React.useCallback(\n        (event: React.FocusEvent) => {\n            if (event && isElementInsideOrTriggeredFromContainer(event.relatedTarget, event.currentTarget)) {\n                return;\n            }\n\n            requestAnimationFrame(() => {\n                tableMeta.editing.toggleDetailedMode(false);\n                tableMeta.editing.onCellChanged(cell, rowIndex, undefined, !hasNonTextControl, true);\n            });\n        },\n        [hasNonTextControl, cell.row.id, JSON.stringify(rowChanges), rowIndex, cell.column.id, cell.row.original]\n    );\n\n    const error = tableMeta.editing.getCellError<TType>(cell);\n\n    const handleExitDetailedMode = React.useCallback(() => {\n        tableMeta.editing.onCellChanged(cell, rowIndex, undefined, true, true);\n    }, [cell.row.id, JSON.stringify(rowChanges), rowIndex, cell.column.id, cell.row.original]);\n\n    const controlProps = {\n        dataType: columnMeta.dataType,\n        disabled: tableMeta.editing.getRowStatus(cell.row.id) === 'saving',\n        fontSize: tableMeta.fontSize.size,\n        id: cell.column.id,\n        invalid: !!error,\n        isDetailedMode: tableMeta.editing.isDetailedMode,\n        isTruncated: !!columnMeta.enableTruncate,\n        locale: locale.locale,\n        onBlur: handleBlur,\n        onChange: handleChange,\n        onExitDetailedMode: handleExitDetailedMode,\n        row: cell.row.original,\n        rowPendingChanges: tableMeta.editing.getRowValue(cell.row.id),\n        tabIndex: isActiveRow ? 0 : -1,\n        toggleDetailedMode: tableMeta.editing.toggleDetailedMode,\n        type,\n        value,\n    };\n\n    const cellAttributes = {\n        ...getCellAttributes(cell, index, isHighlighted),\n        'data-cell-editing-invalid': error ? true : undefined,\n        'data-taco': 'cell-control',\n        onFocus: handleFocus,\n        ref: cellRef,\n        tabIndex: -1,\n    };\n\n    return (\n        <td {...cellAttributes}>\n            <Field invalid={!!error} message={error}>\n                <MemoedEditingCell<TType> {...controlProps} />\n            </Field>\n            {\n                // we show row move indicator here within the cell rather than the row because it is\n                // an editing only feature, and we don't want to leak editing into the shared row component\n            }\n            <RowMoveIndicator cell={cell} cellRef={cellRef} isActiveRow={isActiveRow} />\n        </td>\n    );\n}\n\ntype MemoedEditingCellProps<TType = unknown, TValue = unknown> = {\n    dataType?: TableColumnDataType;\n    disabled: boolean;\n    fontSize: TableFontSize;\n    id: string;\n    invalid: boolean;\n    isDetailedMode: boolean;\n    isTruncated: boolean;\n    locale: string;\n    onBlur: (event: React.FocusEvent) => void;\n    onChange: (value: TValue) => void;\n    onExitDetailedMode: () => void;\n    row: TType;\n    rowPendingChanges: Partial<TType> | undefined;\n    tabIndex?: number;\n    toggleDetailedMode: (detailed: React.SetStateAction<boolean>) => void;\n    type: TableColumnRendererControl<TType>;\n    value: TValue;\n};\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n    const {\n        dataType,\n        disabled,\n        fontSize,\n        id,\n        invalid,\n        isDetailedMode,\n        isTruncated,\n        locale,\n        onBlur,\n        onChange,\n        onExitDetailedMode,\n        row,\n        rowPendingChanges,\n        tabIndex = -1,\n        toggleDetailedMode,\n        type = 'input',\n        value,\n    } = props;\n    const controlRef = React.useRef<HTMLElement>(null);\n    const currentValue = row[id as keyof TType];\n    const commonProps = {\n        disabled,\n        onBlur,\n        ref: controlRef,\n        tabIndex,\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        const target = event.target as HTMLInputElement | HTMLTextAreaElement;\n\n        if (target.readOnly) {\n            return;\n        }\n\n        // prevent active row navigation while in detailed mode\n        if (\n            isDetailedMode &&\n            (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight')\n        ) {\n            event.stopPropagation();\n        }\n\n        // enter or exit detail mode when pressing enter\n        if (event.key === 'Enter') {\n            // textareas support shift and enter, don't prevent default in that case\n            if (event.shiftKey && isDetailedMode) {\n                return;\n            }\n\n            event.preventDefault();\n\n            if (isDetailedMode) {\n                target.select?.();\n                onExitDetailedMode();\n            } else {\n                target.setSelectionRange?.(target.value?.length, target.value?.length);\n            }\n\n            toggleDetailedMode(editing => !editing);\n            return;\n        }\n\n        // reset the value, or exit edit mode when pressing escape\n        if (event.key === 'Escape') {\n            if (isDetailedMode) {\n                event.preventDefault();\n                toggleDetailedMode(false);\n\n                if (value !== currentValue) {\n                    props.onChange(currentValue);\n                }\n\n                // have to let onChange run before selecting, otherwise the value changes\n                requestAnimationFrame(() => target.select?.());\n            }\n\n            return;\n        }\n\n        // toggle into detailed mode when actually inputting something\n        if (!isPressingMetaKey(event) && (/^[a-z0-9]$/iu.test(event.key) || event.key === 'Backspace')) {\n            toggleDetailedMode(true);\n        }\n    };\n\n    const handlePaste = () => {\n        if (!isDetailedMode) {\n            toggleDetailedMode(true);\n        }\n    };\n\n    if (typeof type === 'function') {\n        const controlFnProps = {\n            ...commonProps,\n            invalid,\n            setValue: onChange,\n            onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => {\n                const target = (event.target as HTMLElement) || null;\n                // it make sense to handle keydown for the custom edititng controls only if target is either input or textarea\n                if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')) {\n                    handleInputKeyDown(event as React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>);\n                }\n            },\n            onPaste: handlePaste,\n            value,\n        };\n\n        return type(controlFnProps, { ...row, ...rowPendingChanges });\n    }\n\n    if (type === 'switch') {\n        return (\n            <Switch\n                {...commonProps}\n                checked={Boolean(value)}\n                onChange={onChange}\n                ref={controlRef as React.Ref<HTMLInputElement>}\n            />\n        );\n    }\n\n    if (type === 'checkbox') {\n        return (\n            <Checkbox\n                {...commonProps}\n                checked={Boolean(value)}\n                onChange={onChange}\n                ref={controlRef as React.Ref<HTMLInputElement>}\n            />\n        );\n    }\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        if (!isDetailedMode) {\n            event.target.select();\n        }\n    };\n\n    if (type === 'datepicker') {\n        const valueAsDate = date.parse(value as Date | string | undefined);\n\n        const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n            const newDate = (event as any).detail as Date;\n\n            if (!valueAsDate || !newDate || (isDate(valueAsDate) && isDate(newDate) && !date.isWeakEqual(valueAsDate, newDate))) {\n                props.onChange(newDate);\n            }\n        };\n\n        const handleDatepickerInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n            const target = event.target as HTMLInputElement;\n\n            if (isDetailedMode && event.key === 'Enter') {\n                // If the field is empty, save as null before exiting detailed mode\n                // This prevents the value from reverting to the previous value\n                if (target.value === '') {\n                    onChange(null);\n                } else {\n                    // When value is not empty, prevent handleInputKeyDown and give full control to Datepicker\n                    // The datepicker will exit \"detailed mode\" by itself when a valid date change is triggered\n                    target.select?.();\n                    return;\n                }\n            }\n\n            handleInputKeyDown(event);\n        };\n\n        return (\n            <Datepicker\n                {...commonProps}\n                invalid={invalid}\n                onChange={handleChange}\n                onFocus={handleFocus}\n                onKeyDown={handleDatepickerInputKeyDown}\n                onPaste={handlePaste}\n                ref={controlRef as React.Ref<HTMLInputElement>}\n                value={valueAsDate}\n            />\n        );\n    }\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        const dataTypeProps = getDataTypeProperties(dataType);\n        onChange(dataTypeProps.parse?.(event.target.value, locale) ?? event.target.value);\n    };\n\n    if (type === 'textarea') {\n        return (\n            <TextareaWithAutosizing\n                {...commonProps}\n                fontSize={fontSize}\n                invalid={invalid}\n                isTruncated={isTruncated}\n                onChange={handleChange}\n                onFocus={handleFocus}\n                onKeyDown={handleInputKeyDown}\n                onPaste={handlePaste}\n                ref={controlRef as React.Ref<HTMLTextAreaElement>}\n                value={String(value ?? '')}\n            />\n        );\n    }\n\n    return (\n        <Input\n            {...commonProps}\n            invalid={invalid}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            onKeyDown={handleInputKeyDown}\n            onPaste={handlePaste}\n            ref={controlRef as React.Ref<HTMLInputElement>}\n            type={dataType === 'number' ? 'number' : undefined}\n            value={dataType === 'number' ? (value as number) : String(value ?? '')}\n        />\n    );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => React.JSX.Element;\n"],"names":["RowContext","useLocalization","useEditingCellAutofocus","useLazyEffect","isSameDay","isEqualDate","isElementInsideOrTriggeredFromContainer","getCellAttributes","Field","RowMoveIndicator","MemoedEditingCell","isPressingMetaKey","Switch","Checkbox","date.parse","handleChange","isDate","date.isWeakEqual","Datepicker","getDataTypeProperties","TextareaWithAutosizing","Input"],"mappings":";;;;;;;;;;;;;;;;;;;;AAmBO,SAAS,mBAAoC,OAAsC;AACtF,QAAM,EAAE,MAAM,SAAS,eAAe,UAAU;AAChD,QAAM,EAAE,SAAA,IAAa,MAAM,WAAWA,WAAAA,UAAU;AAChD,QAAM,EAAE,MAAA,IAAU,KAAK,WAAA;AACvB,QAAM,SAASC,aAAAA,gBAAA;AACf,QAAM,YAAY,MAAM,QAAQ;AAChC,QAAM,aAAa,KAAK,OAAO,UAAU;AACzC,QAAM,cAAc,UAAU,UAAU,mBAAmB;AAC3D,QAAM,OAAO,WAAW,WAAW;AACnC,QAAM,cAAcC,KAAAA,wBAA+B,KAAK;AACxD,QAAM,QAAQ,KAAK,SAAA;AACnB,QAAM,aAAa,UAAU,QAAQ,YAAY,KAAK,IAAI,EAAE;AAC5D,QAAM,kBAAkB,MAAM,OAAO,KAAK;AAG1C,QAAM,oBAAoB,MAAM,QAAQ,MAAM;AAC1C,WACI,OAAO,SAAS,cAChB,CAAC,CAAC,QAAQ,SAAS,cAAc,mEAAmE;AAAA,EAE5G,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpBC,gBAAAA,cAAc,MAAM;AAEhB,QAAI,qBAAqB,gBAAgB,SAAS;AAC9C,gBAAU,QAAQ,cAAc,MAAM,UAAU,OAAO,MAAM,KAAK;AAElE,sBAAgB,UAAU;AAAA,IAC9B;AAAA,EACJ,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,eAAe,MAAM;AAAA,IACvB,CAAC,cAAuB;AACpB,UAAI,aAAa;AAEjB,UAAI,WAAW,aAAa,QAAQ;AAChC,qBAAa,CAACC,QAAAA,UAAU,IAAI,KAAK,SAA0B,GAAG,IAAI,KAAK,KAAsB,CAAC;AAAA,MAClG,WAAW,WAAW,aAAa,YAAY;AAC3C,qBAAa,CAACC,QAAAA,QAAY,IAAI,KAAK,SAA0B,GAAG,IAAI,KAAK,KAAsB,CAAC;AAAA,MACpG,WAAW,WAAW,aAAa,QAAQ;AACvC,cAAM,OAAO,IAAI,KAAK,SAA0B;AAChD,cAAM,UAAU,IAAI,KAAK,KAAsB;AAC/C,qBAAa,EAAE,KAAK,SAAA,MAAe,QAAQ,cAAc,KAAK,WAAA,MAAiB,QAAQ,WAAA;AAAA,MAC3F,OAAO;AACH,qBAAa,cAAc;AAAA,MAC/B;AAEA,UAAI,YAAY;AACZ,kBAAU,QAAQ,aAAa,MAAM,UAAU,SAAS;AACxD,wBAAgB,UAAU;AAAA,MAC9B;AAAA,IACJ;AAAA,IACA,CAAC,mBAAmB,KAAK,IAAI,IAAI,KAAK,OAAO,IAAI,KAAK,IAAI,UAAU,UAAU,OAAO,WAAW,QAAQ;AAAA,EAAA;AAG5G,QAAM,aAAa,MAAM;AAAA,IACrB,CAAC,UAA4B;AACzB,UAAI,SAASC,IAAAA,wCAAwC,MAAM,eAAe,MAAM,aAAa,GAAG;AAC5F;AAAA,MACJ;AAEA,4BAAsB,MAAM;AACxB,kBAAU,QAAQ,mBAAmB,KAAK;AAC1C,kBAAU,QAAQ,cAAc,MAAM,UAAU,QAAW,CAAC,mBAAmB,IAAI;AAAA,MACvF,CAAC;AAAA,IACL;AAAA,IACA,CAAC,mBAAmB,KAAK,IAAI,IAAI,KAAK,UAAU,UAAU,GAAG,UAAU,KAAK,OAAO,IAAI,KAAK,IAAI,QAAQ;AAAA,EAAA;AAG5G,QAAM,QAAQ,UAAU,QAAQ,aAAoB,IAAI;AAExD,QAAM,yBAAyB,MAAM,YAAY,MAAM;AACnD,cAAU,QAAQ,cAAc,MAAM,UAAU,QAAW,MAAM,IAAI;AAAA,EACzE,GAAG,CAAC,KAAK,IAAI,IAAI,KAAK,UAAU,UAAU,GAAG,UAAU,KAAK,OAAO,IAAI,KAAK,IAAI,QAAQ,CAAC;AAEzF,QAAM,eAAe;AAAA,IACjB,UAAU,WAAW;AAAA,IACrB,UAAU,UAAU,QAAQ,aAAa,KAAK,IAAI,EAAE,MAAM;AAAA,IAC1D,UAAU,UAAU,SAAS;AAAA,IAC7B,IAAI,KAAK,OAAO;AAAA,IAChB,SAAS,CAAC,CAAC;AAAA,IACX,gBAAgB,UAAU,QAAQ;AAAA,IAClC,aAAa,CAAC,CAAC,WAAW;AAAA,IAC1B,QAAQ,OAAO;AAAA,IACf,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,oBAAoB;AAAA,IACpB,KAAK,KAAK,IAAI;AAAA,IACd,mBAAmB,UAAU,QAAQ,YAAY,KAAK,IAAI,EAAE;AAAA,IAC5D,UAAU,cAAc,IAAI;AAAA,IAC5B,oBAAoB,UAAU,QAAQ;AAAA,IACtC;AAAA,IACA;AAAA,EAAA;AAGJ,QAAM,iBAAiB;AAAA,IACnB,GAAGC,yBAAkB,MAAM,OAAO,aAAa;AAAA,IAC/C,6BAA6B,QAAQ,OAAO;AAAA,IAC5C,aAAa;AAAA,IACb,SAAS;AAAA,IACT,KAAK;AAAA,IACL,UAAU;AAAA,EAAA;AAGd,SACI,sBAAA,cAAC,QAAI,GAAG,eAAA,uCACHC,MAAAA,OAAA,EAAM,SAAS,CAAC,CAAC,OAAO,SAAS,SAC9B,sBAAA,cAAC,mBAAA,EAA0B,GAAG,aAAA,CAAc,CAChD,uCAKCC,iBAAAA,kBAAA,EAAiB,MAAY,SAAkB,YAAA,CAA0B,CAC9E;AAER;AAsBA,MAAM,oBAAoB,MAAM,KAAK,SAASC,mBAAmC,OAAsC;AACnH,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,OAAO;AAAA,IACP;AAAA,EAAA,IACA;AACJ,QAAM,aAAa,MAAM,OAAoB,IAAI;AACjD,QAAM,eAAe,IAAI,EAAiB;AAC1C,QAAM,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL;AAAA,EAAA;AAGJ,QAAM,qBAAqB,CAAC,UAAuE;AAC/F,UAAM,SAAS,MAAM;AAErB,QAAI,OAAO,UAAU;AACjB;AAAA,IACJ;AAGA,QACI,mBACC,MAAM,QAAQ,aAAa,MAAM,QAAQ,eAAe,MAAM,QAAQ,eAAe,MAAM,QAAQ,eACtG;AACE,YAAM,gBAAA;AAAA,IACV;AAGA,QAAI,MAAM,QAAQ,SAAS;AAEvB,UAAI,MAAM,YAAY,gBAAgB;AAClC;AAAA,MACJ;AAEA,YAAM,eAAA;AAEN,UAAI,gBAAgB;AAChB,eAAO,SAAA;AACP,2BAAA;AAAA,MACJ,OAAO;AACH,eAAO,oBAAoB,OAAO,OAAO,QAAQ,OAAO,OAAO,MAAM;AAAA,MACzE;AAEA,yBAAmB,CAAA,YAAW,CAAC,OAAO;AACtC;AAAA,IACJ;AAGA,QAAI,MAAM,QAAQ,UAAU;AACxB,UAAI,gBAAgB;AAChB,cAAM,eAAA;AACN,2BAAmB,KAAK;AAExB,YAAI,UAAU,cAAc;AACxB,gBAAM,SAAS,YAAY;AAAA,QAC/B;AAGA,8BAAsB,MAAM,OAAO,UAAU;AAAA,MACjD;AAEA;AAAA,IACJ;AAGA,QAAI,CAACC,SAAAA,kBAAkB,KAAK,MAAM,eAAe,KAAK,MAAM,GAAG,KAAK,MAAM,QAAQ,cAAc;AAC5F,yBAAmB,IAAI;AAAA,IAC3B;AAAA,EACJ;AAEA,QAAM,cAAc,MAAM;AACtB,QAAI,CAAC,gBAAgB;AACjB,yBAAmB,IAAI;AAAA,IAC3B;AAAA,EACJ;AAEA,MAAI,OAAO,SAAS,YAAY;AAC5B,UAAM,iBAAiB;AAAA,MACnB,GAAG;AAAA,MACH;AAAA,MACA,UAAU;AAAA,MACV,WAAW,CAAC,UAA4C;AACpD,cAAM,SAAU,MAAM,UAA0B;AAEhD,YAAI,WAAW,OAAO,YAAY,WAAW,OAAO,YAAY,aAAa;AACzE,6BAAmB,KAAoE;AAAA,QAC3F;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,IAAA;AAGJ,WAAO,KAAK,gBAAgB,EAAE,GAAG,KAAK,GAAG,mBAAmB;AAAA,EAChE;AAEA,MAAI,SAAS,UAAU;AACnB,WACI,sBAAA;AAAA,MAACC,OAAAA;AAAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,SAAS,QAAQ,KAAK;AAAA,QACtB;AAAA,QACA,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAGjB;AAEA,MAAI,SAAS,YAAY;AACrB,WACI,sBAAA;AAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,SAAS,QAAQ,KAAK;AAAA,QACtB;AAAA,QACA,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAGjB;AAEA,QAAM,cAAc,CAAC,UAAoE;AACrF,QAAI,CAAC,gBAAgB;AACjB,YAAM,OAAO,OAAA;AAAA,IACjB;AAAA,EACJ;AAEA,MAAI,SAAS,cAAc;AACvB,UAAM,cAAcC,KAAAA,MAAW,KAAkC;AAEjE,UAAMC,gBAAe,CAAC,UAA+C;AACjE,YAAM,UAAW,MAAc;AAE/B,UAAI,CAAC,eAAe,CAAC,WAAYC,QAAAA,OAAO,WAAW,KAAKA,eAAO,OAAO,KAAK,CAACC,KAAAA,YAAiB,aAAa,OAAO,GAAI;AACjH,cAAM,SAAS,OAAO;AAAA,MAC1B;AAAA,IACJ;AAEA,UAAM,+BAA+B,CAAC,UAAiD;AACnF,YAAM,SAAS,MAAM;AAErB,UAAI,kBAAkB,MAAM,QAAQ,SAAS;AAGzC,YAAI,OAAO,UAAU,IAAI;AACrB,mBAAS,IAAI;AAAA,QACjB,OAAO;AAGH,iBAAO,SAAA;AACP;AAAA,QACJ;AAAA,MACJ;AAEA,yBAAmB,KAAK;AAAA,IAC5B;AAEA,WACI,sBAAA;AAAA,MAACC,WAAAA;AAAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ;AAAA,QACA,UAAUH;AAAAA,QACV,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,KAAK;AAAA,QACL,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAGnB;AAEA,QAAM,eAAe,CAAC,UAAqE;AACvF,UAAM,gBAAgBI,UAAAA,sBAAsB,QAAQ;AACpD,aAAS,cAAc,QAAQ,MAAM,OAAO,OAAO,MAAM,KAAK,MAAM,OAAO,KAAK;AAAA,EACpF;AAEA,MAAI,SAAS,YAAY;AACrB,WACI,sBAAA;AAAA,MAACC,uBAAAA;AAAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,KAAK;AAAA,QACL,OAAO,OAAO,SAAS,EAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAGrC;AAEA,SACI,sBAAA;AAAA,IAACC,MAAAA;AAAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA,UAAU;AAAA,MACV,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,MACT,KAAK;AAAA,MACL,MAAM,aAAa,WAAW,WAAW;AAAA,MACzC,OAAO,aAAa,WAAY,QAAmB,OAAO,SAAS,EAAE;AAAA,IAAA;AAAA,EAAA;AAGjF,CAAC;;"}
+{"version":3,"file":"EditingControlCell.cjs","sources":["../../../../../../src/components/Table3/components/Columns/Cell/EditingControlCell.tsx"],"sourcesContent":["import { isDate, isEqual as isEqualDate, isSameDay } from 'date-fns';\nimport React from 'react';\n\nimport { Checkbox, Datepicker, Field, Input, useLocalization, Switch } from '@/components';\nimport { useLazyEffect } from '@/hooks/useLazyEffect';\nimport { getCellAttributes } from '@/primitives/Table/Core/components/Columns/Cell/util';\nimport { RowContext } from '@/primitives/Table/Core/components/Row/RowContext';\nimport type { TableCellRendererProps } from '@/primitives/Table/Core/types';\nimport type { TableColumnDataType, TableColumnRendererControl, TableFontSize } from '@/primitives/Table/types';\nimport { getDataTypeProperties } from '@/primitives/Table/useTableManager/util/dataTypes';\nimport { getTableMeta } from '@/primitives/Table/useTableManager/util/rows';\nimport * as date from '@/utils/date';\nimport { isElementInsideOrTriggeredFromContainer } from '@/utils/dom';\nimport { isPressingMetaKey } from '@/utils/keyboard';\n\nimport { RowMoveIndicator } from './Editing/RowMoveIndicator';\nimport { TextareaWithAutosizing } from './Editing/TextareaWithAutosizing';\nimport { useEditingCellAutofocus } from './util';\n\nexport function EditingControlCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n    const { cell, cellRef, isHighlighted, index } = props;\n    const { rowIndex } = React.useContext(RowContext);\n    const { table } = cell.getContext();\n    const locale = useLocalization();\n    const tableMeta = getTableMeta(table);\n    const columnMeta = cell.column.columnDef.meta;\n    const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n    const type = columnMeta?.control ?? 'input';\n    const handleFocus = useEditingCellAutofocus<TType>(props);\n    const value = cell.getValue();\n    const rowChanges = tableMeta.editing.getRowValue(cell.row.id);\n    const shouldRunUpdate = React.useRef(false);\n\n    // some controls, like select2, should trigger cell changed (validation, updates) as the value changes\n    const hasNonTextControl = React.useMemo(() => {\n        return (\n            typeof type === 'function' &&\n            !!cellRef.current?.querySelector('[data-taco=\"Select2\"],[data-taco=\"switch\"],[data-taco=\"checkbox\"]')\n        );\n    }, [cellRef.current]);\n\n    useLazyEffect(() => {\n        // Use an effect instead of a change handler to prevent onEditingChange from running with a stale js closure during on-the-fly creation.\n        if (hasNonTextControl && shouldRunUpdate.current) {\n            tableMeta.editing.onCellChanged(cell, rowIndex, value, true, false);\n            // prevent risk of infinite loop, in case there'd ever be an updater function with two values that update each other.\n            shouldRunUpdate.current = false;\n        }\n    }, [value]);\n\n    const handleChange = React.useCallback(\n        (nextValue: unknown) => {\n            let hasChanged = false;\n\n            if (columnMeta?.dataType === 'date') {\n                hasChanged = !isSameDay(new Date(nextValue as string | Date), new Date(value as string | Date));\n            } else if (columnMeta?.dataType === 'datetime') {\n                hasChanged = !isEqualDate(new Date(nextValue as string | Date), new Date(value as string | Date));\n            } else if (columnMeta?.dataType === 'time') {\n                const next = new Date(nextValue as string | Date);\n                const current = new Date(value as string | Date);\n                hasChanged = !(next.getHours() === current.getHours() && next.getMinutes() === current.getMinutes());\n            } else {\n                hasChanged = nextValue !== value;\n            }\n\n            if (hasChanged) {\n                tableMeta.editing.setCellValue(cell, rowIndex, nextValue);\n                shouldRunUpdate.current = hasNonTextControl;\n            }\n        },\n        [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex, value, columnMeta?.dataType]\n    );\n\n    const handleBlur = React.useCallback(\n        (event: React.FocusEvent) => {\n            if (event && isElementInsideOrTriggeredFromContainer(event.relatedTarget, event.currentTarget)) {\n                return;\n            }\n\n            requestAnimationFrame(() => {\n                tableMeta.editing.toggleDetailedMode(false);\n                tableMeta.editing.onCellChanged(cell, rowIndex, undefined, !hasNonTextControl, true);\n            });\n        },\n        [hasNonTextControl, cell.row.id, JSON.stringify(rowChanges), rowIndex, cell.column.id, cell.row.original]\n    );\n\n    const error = tableMeta.editing.getCellError<TType>(cell);\n\n    const handleExitDetailedMode = React.useCallback(() => {\n        tableMeta.editing.onCellChanged(cell, rowIndex, undefined, true, true);\n    }, [cell.row.id, JSON.stringify(rowChanges), rowIndex, cell.column.id, cell.row.original]);\n\n    const controlProps = {\n        dataType: columnMeta?.dataType,\n        disabled: tableMeta.editing.getRowStatus(cell.row.id) === 'saving',\n        fontSize: tableMeta.fontSize.size,\n        id: cell.column.id,\n        invalid: !!error,\n        isDetailedMode: tableMeta.editing.isDetailedMode,\n        isTruncated: !!columnMeta?.enableTruncate,\n        locale: locale.locale,\n        onBlur: handleBlur,\n        onChange: handleChange,\n        onExitDetailedMode: handleExitDetailedMode,\n        row: cell.row.original,\n        rowPendingChanges: tableMeta.editing.getRowValue(cell.row.id),\n        tabIndex: isActiveRow ? 0 : -1,\n        toggleDetailedMode: tableMeta.editing.toggleDetailedMode,\n        type,\n        value,\n    };\n\n    const cellAttributes = {\n        ...getCellAttributes(cell, index, isHighlighted),\n        'data-cell-editing-invalid': error ? true : undefined,\n        'data-taco': 'cell-control',\n        onFocus: handleFocus,\n        ref: cellRef,\n        tabIndex: -1,\n    };\n\n    return (\n        <td {...cellAttributes}>\n            <Field invalid={!!error} message={error}>\n                <MemoedEditingCell<TType> {...controlProps} />\n            </Field>\n            {\n                // we show row move indicator here within the cell rather than the row because it is\n                // an editing only feature, and we don't want to leak editing into the shared row component\n            }\n            <RowMoveIndicator cell={cell} cellRef={cellRef} isActiveRow={isActiveRow} />\n        </td>\n    );\n}\n\ntype MemoedEditingCellProps<TType = unknown, TValue = unknown> = {\n    dataType?: TableColumnDataType;\n    disabled: boolean;\n    fontSize: TableFontSize;\n    id: string;\n    invalid: boolean;\n    isDetailedMode: boolean;\n    isTruncated: boolean;\n    locale: string;\n    onBlur: (event: React.FocusEvent) => void;\n    onChange: (value: TValue) => void;\n    onExitDetailedMode: () => void;\n    row: TType;\n    rowPendingChanges: Partial<TType> | undefined;\n    tabIndex?: number;\n    toggleDetailedMode: (detailed: React.SetStateAction<boolean>) => void;\n    type: TableColumnRendererControl<TType>;\n    value: TValue;\n};\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n    const {\n        dataType,\n        disabled,\n        fontSize,\n        id,\n        invalid,\n        isDetailedMode,\n        isTruncated,\n        locale,\n        onBlur,\n        onChange,\n        onExitDetailedMode,\n        row,\n        rowPendingChanges,\n        tabIndex = -1,\n        toggleDetailedMode,\n        type = 'input',\n        value,\n    } = props;\n    const controlRef = React.useRef<HTMLElement>(null);\n    const currentValue = row[id as keyof TType];\n    const commonProps = {\n        disabled,\n        onBlur,\n        ref: controlRef,\n        tabIndex,\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        const target = event.target as HTMLInputElement | HTMLTextAreaElement;\n\n        if (target.readOnly) {\n            return;\n        }\n\n        // prevent active row navigation while in detailed mode\n        if (\n            isDetailedMode &&\n            (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight')\n        ) {\n            event.stopPropagation();\n        }\n\n        // enter or exit detail mode when pressing enter\n        if (event.key === 'Enter') {\n            // textareas support shift and enter, don't prevent default in that case\n            if (event.shiftKey && isDetailedMode) {\n                return;\n            }\n\n            event.preventDefault();\n\n            if (isDetailedMode) {\n                target.select?.();\n                onExitDetailedMode();\n            } else {\n                target.setSelectionRange?.(target.value?.length, target.value?.length);\n            }\n\n            toggleDetailedMode(editing => !editing);\n            return;\n        }\n\n        // reset the value, or exit edit mode when pressing escape\n        if (event.key === 'Escape') {\n            if (isDetailedMode) {\n                event.preventDefault();\n                toggleDetailedMode(false);\n\n                if (value !== currentValue) {\n                    props.onChange(currentValue);\n                }\n\n                // have to let onChange run before selecting, otherwise the value changes\n                requestAnimationFrame(() => target.select?.());\n            }\n\n            return;\n        }\n\n        // toggle into detailed mode when actually inputting something\n        if (!isPressingMetaKey(event) && (/^[a-z0-9]$/iu.test(event.key) || event.key === 'Backspace')) {\n            toggleDetailedMode(true);\n        }\n    };\n\n    const handlePaste = () => {\n        if (!isDetailedMode) {\n            toggleDetailedMode(true);\n        }\n    };\n\n    if (typeof type === 'function') {\n        const controlFnProps = {\n            ...commonProps,\n            invalid,\n            setValue: onChange,\n            onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => {\n                const target = (event.target as HTMLElement) || null;\n                // it make sense to handle keydown for the custom edititng controls only if target is either input or textarea\n                if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')) {\n                    handleInputKeyDown(event as React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>);\n                }\n            },\n            onPaste: handlePaste,\n            value,\n        };\n\n        return type(controlFnProps, { ...row, ...rowPendingChanges });\n    }\n\n    if (type === 'switch') {\n        return (\n            <Switch\n                {...commonProps}\n                checked={Boolean(value)}\n                onChange={onChange}\n                ref={controlRef as React.Ref<HTMLInputElement>}\n            />\n        );\n    }\n\n    if (type === 'checkbox') {\n        return (\n            <Checkbox\n                {...commonProps}\n                checked={Boolean(value)}\n                onChange={onChange}\n                ref={controlRef as React.Ref<HTMLInputElement>}\n            />\n        );\n    }\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        if (!isDetailedMode) {\n            event.target.select();\n        }\n    };\n\n    if (type === 'datepicker') {\n        const valueAsDate = date.parse(value as Date | string | undefined);\n\n        const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n            const newDate = (event as any).detail as Date;\n\n            if (!valueAsDate || !newDate || (isDate(valueAsDate) && isDate(newDate) && !date.isWeakEqual(valueAsDate, newDate))) {\n                props.onChange(newDate);\n            }\n        };\n\n        const handleDatepickerInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n            const target = event.target as HTMLInputElement;\n\n            if (isDetailedMode && event.key === 'Enter') {\n                // If the field is empty, save as null before exiting detailed mode\n                // This prevents the value from reverting to the previous value\n                if (target.value === '') {\n                    onChange(null);\n                } else {\n                    // When value is not empty, prevent handleInputKeyDown and give full control to Datepicker\n                    // The datepicker will exit \"detailed mode\" by itself when a valid date change is triggered\n                    target.select?.();\n                    return;\n                }\n            }\n\n            handleInputKeyDown(event);\n        };\n\n        return (\n            <Datepicker\n                {...commonProps}\n                invalid={invalid}\n                onChange={handleChange}\n                onFocus={handleFocus}\n                onKeyDown={handleDatepickerInputKeyDown}\n                onPaste={handlePaste}\n                ref={controlRef as React.Ref<HTMLInputElement>}\n                value={valueAsDate}\n            />\n        );\n    }\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        const dataTypeProps = getDataTypeProperties(dataType);\n        onChange(dataTypeProps.parse?.(event.target.value, locale) ?? event.target.value);\n    };\n\n    if (type === 'textarea') {\n        return (\n            <TextareaWithAutosizing\n                {...commonProps}\n                fontSize={fontSize}\n                invalid={invalid}\n                isTruncated={isTruncated}\n                onChange={handleChange}\n                onFocus={handleFocus}\n                onKeyDown={handleInputKeyDown}\n                onPaste={handlePaste}\n                ref={controlRef as React.Ref<HTMLTextAreaElement>}\n                value={String(value ?? '')}\n            />\n        );\n    }\n\n    return (\n        <Input\n            {...commonProps}\n            invalid={invalid}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            onKeyDown={handleInputKeyDown}\n            onPaste={handlePaste}\n            ref={controlRef as React.Ref<HTMLInputElement>}\n            type={dataType === 'number' ? 'number' : undefined}\n            value={dataType === 'number' ? (value as number) : String(value ?? '')}\n        />\n    );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => React.JSX.Element;\n"],"names":["RowContext","useLocalization","getTableMeta","useEditingCellAutofocus","useLazyEffect","isSameDay","isEqualDate","isElementInsideOrTriggeredFromContainer","getCellAttributes","Field","RowMoveIndicator","MemoedEditingCell","isPressingMetaKey","Switch","Checkbox","date.parse","handleChange","isDate","date.isWeakEqual","Datepicker","getDataTypeProperties","TextareaWithAutosizing","Input"],"mappings":"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"}

package/dist/components/Table3/components/Columns/Cell/EditingControlCell.js

@@ -4,6 +4,7 @@ import { useLazyEffect } from "../../../../../hooks/useLazyEffect.js";
 import { getCellAttributes } from "../../../../../primitives/Table/Core/components/Columns/Cell/util.js";
 import { RowContext } from "../../../../../primitives/Table/Core/components/Row/RowContext.js";
 import { getDataTypeProperties } from "../../../../../primitives/Table/useTableManager/util/dataTypes.js";
+import { getTableMeta } from "../../../../../primitives/Table/useTableManager/util/rows.js";
 import { parse, isWeakEqual } from "../../../../../utils/date.js";
 import { isElementInsideOrTriggeredFromContainer } from "../../../../../utils/dom.js";
 import { isPressingMetaKey } from "../../../../../utils/keyboard.js";
@@ -21,10 +22,10 @@ function EditingControlCell(props) {
   const { rowIndex } = React__default.useContext(RowContext);
   const { table } = cell.getContext();
   const locale = useLocalization();
-  const tableMeta = table.options.meta;
+  const tableMeta = getTableMeta(table);
   const columnMeta = cell.column.columnDef.meta;
   const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;
-  const type = columnMeta.control ?? "input";
+  const type = columnMeta?.control ?? "input";
   const handleFocus = useEditingCellAutofocus(props);
   const value = cell.getValue();
   const rowChanges = tableMeta.editing.getRowValue(cell.row.id);
@@ -41,11 +42,11 @@ function EditingControlCell(props) {
   const handleChange = React__default.useCallback(
     (nextValue) => {
       let hasChanged = false;
-      if (columnMeta.dataType === "date") {
+      if (columnMeta?.dataType === "date") {
         hasChanged = !isSameDay(new Date(nextValue), new Date(value));
-      } else if (columnMeta.dataType === "datetime") {
+      } else if (columnMeta?.dataType === "datetime") {
         hasChanged = !isEqual(new Date(nextValue), new Date(value));
-      } else if (columnMeta.dataType === "time") {
+      } else if (columnMeta?.dataType === "time") {
         const next = new Date(nextValue);
         const current = new Date(value);
         hasChanged = !(next.getHours() === current.getHours() && next.getMinutes() === current.getMinutes());
@@ -57,7 +58,7 @@ function EditingControlCell(props) {
         shouldRunUpdate.current = hasNonTextControl;
       }
     },
-    [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex, value, columnMeta.dataType]
+    [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex, value, columnMeta?.dataType]
   );
   const handleBlur = React__default.useCallback(
     (event) => {
@@ -76,13 +77,13 @@ function EditingControlCell(props) {
     tableMeta.editing.onCellChanged(cell, rowIndex, void 0, true, true);
   }, [cell.row.id, JSON.stringify(rowChanges), rowIndex, cell.column.id, cell.row.original]);
   const controlProps = {
-    dataType: columnMeta.dataType,
+    dataType: columnMeta?.dataType,
     disabled: tableMeta.editing.getRowStatus(cell.row.id) === "saving",
     fontSize: tableMeta.fontSize.size,
     id: cell.column.id,
     invalid: !!error,
     isDetailedMode: tableMeta.editing.isDetailedMode,
-    isTruncated: !!columnMeta.enableTruncate,
+    isTruncated: !!columnMeta?.enableTruncate,
     locale: locale.locale,
     onBlur: handleBlur,
     onChange: handleChange,

package/dist/components/Table3/components/Columns/Cell/EditingControlCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"EditingControlCell.js","sources":["../../../../../../src/components/Table3/components/Columns/Cell/EditingControlCell.tsx"],"sourcesContent":["import type { TableMeta as ReactTableMeta, ColumnMeta as ReactTableColumnMeta } from '@tanstack/react-table';\nimport { isDate, isEqual as isEqualDate, isSameDay } from 'date-fns';\nimport React from 'react';\n\nimport { Checkbox, Datepicker, Field, Input, useLocalization, Switch } from '@/components';\nimport { useLazyEffect } from '@/hooks/useLazyEffect';\nimport { getCellAttributes } from '@/primitives/Table/Core/components/Columns/Cell/util';\nimport { RowContext } from '@/primitives/Table/Core/components/Row/RowContext';\nimport type { TableCellRendererProps } from '@/primitives/Table/Core/types';\nimport type { TableColumnDataType, TableColumnRendererControl, TableFontSize } from '@/primitives/Table/types';\nimport { getDataTypeProperties } from '@/primitives/Table/useTableManager/util/dataTypes';\nimport * as date from '@/utils/date';\nimport { isElementInsideOrTriggeredFromContainer } from '@/utils/dom';\nimport { isPressingMetaKey } from '@/utils/keyboard';\n\nimport { RowMoveIndicator } from './Editing/RowMoveIndicator';\nimport { TextareaWithAutosizing } from './Editing/TextareaWithAutosizing';\nimport { useEditingCellAutofocus } from './util';\n\nexport function EditingControlCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n    const { cell, cellRef, isHighlighted, index } = props;\n    const { rowIndex } = React.useContext(RowContext);\n    const { table } = cell.getContext();\n    const locale = useLocalization();\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const columnMeta = cell.column.columnDef.meta as ReactTableColumnMeta<TType, unknown>;\n    const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n    const type = columnMeta.control ?? 'input';\n    const handleFocus = useEditingCellAutofocus<TType>(props);\n    const value = cell.getValue();\n    const rowChanges = tableMeta.editing.getRowValue(cell.row.id);\n    const shouldRunUpdate = React.useRef(false);\n\n    // some controls, like select2, should trigger cell changed (validation, updates) as the value changes\n    const hasNonTextControl = React.useMemo(() => {\n        return (\n            typeof type === 'function' &&\n            !!cellRef.current?.querySelector('[data-taco=\"Select2\"],[data-taco=\"switch\"],[data-taco=\"checkbox\"]')\n        );\n    }, [cellRef.current]);\n\n    useLazyEffect(() => {\n        // Use an effect instead of a change handler to prevent onEditingChange from running with a stale js closure during on-the-fly creation.\n        if (hasNonTextControl && shouldRunUpdate.current) {\n            tableMeta.editing.onCellChanged(cell, rowIndex, value, true, false);\n            // prevent risk of infinite loop, in case there'd ever be an updater function with two values that update each other.\n            shouldRunUpdate.current = false;\n        }\n    }, [value]);\n\n    const handleChange = React.useCallback(\n        (nextValue: unknown) => {\n            let hasChanged = false;\n\n            if (columnMeta.dataType === 'date') {\n                hasChanged = !isSameDay(new Date(nextValue as string | Date), new Date(value as string | Date));\n            } else if (columnMeta.dataType === 'datetime') {\n                hasChanged = !isEqualDate(new Date(nextValue as string | Date), new Date(value as string | Date));\n            } else if (columnMeta.dataType === 'time') {\n                const next = new Date(nextValue as string | Date);\n                const current = new Date(value as string | Date);\n                hasChanged = !(next.getHours() === current.getHours() && next.getMinutes() === current.getMinutes());\n            } else {\n                hasChanged = nextValue !== value;\n            }\n\n            if (hasChanged) {\n                tableMeta.editing.setCellValue(cell, rowIndex, nextValue);\n                shouldRunUpdate.current = hasNonTextControl;\n            }\n        },\n        [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex, value, columnMeta.dataType]\n    );\n\n    const handleBlur = React.useCallback(\n        (event: React.FocusEvent) => {\n            if (event && isElementInsideOrTriggeredFromContainer(event.relatedTarget, event.currentTarget)) {\n                return;\n            }\n\n            requestAnimationFrame(() => {\n                tableMeta.editing.toggleDetailedMode(false);\n                tableMeta.editing.onCellChanged(cell, rowIndex, undefined, !hasNonTextControl, true);\n            });\n        },\n        [hasNonTextControl, cell.row.id, JSON.stringify(rowChanges), rowIndex, cell.column.id, cell.row.original]\n    );\n\n    const error = tableMeta.editing.getCellError<TType>(cell);\n\n    const handleExitDetailedMode = React.useCallback(() => {\n        tableMeta.editing.onCellChanged(cell, rowIndex, undefined, true, true);\n    }, [cell.row.id, JSON.stringify(rowChanges), rowIndex, cell.column.id, cell.row.original]);\n\n    const controlProps = {\n        dataType: columnMeta.dataType,\n        disabled: tableMeta.editing.getRowStatus(cell.row.id) === 'saving',\n        fontSize: tableMeta.fontSize.size,\n        id: cell.column.id,\n        invalid: !!error,\n        isDetailedMode: tableMeta.editing.isDetailedMode,\n        isTruncated: !!columnMeta.enableTruncate,\n        locale: locale.locale,\n        onBlur: handleBlur,\n        onChange: handleChange,\n        onExitDetailedMode: handleExitDetailedMode,\n        row: cell.row.original,\n        rowPendingChanges: tableMeta.editing.getRowValue(cell.row.id),\n        tabIndex: isActiveRow ? 0 : -1,\n        toggleDetailedMode: tableMeta.editing.toggleDetailedMode,\n        type,\n        value,\n    };\n\n    const cellAttributes = {\n        ...getCellAttributes(cell, index, isHighlighted),\n        'data-cell-editing-invalid': error ? true : undefined,\n        'data-taco': 'cell-control',\n        onFocus: handleFocus,\n        ref: cellRef,\n        tabIndex: -1,\n    };\n\n    return (\n        <td {...cellAttributes}>\n            <Field invalid={!!error} message={error}>\n                <MemoedEditingCell<TType> {...controlProps} />\n            </Field>\n            {\n                // we show row move indicator here within the cell rather than the row because it is\n                // an editing only feature, and we don't want to leak editing into the shared row component\n            }\n            <RowMoveIndicator cell={cell} cellRef={cellRef} isActiveRow={isActiveRow} />\n        </td>\n    );\n}\n\ntype MemoedEditingCellProps<TType = unknown, TValue = unknown> = {\n    dataType?: TableColumnDataType;\n    disabled: boolean;\n    fontSize: TableFontSize;\n    id: string;\n    invalid: boolean;\n    isDetailedMode: boolean;\n    isTruncated: boolean;\n    locale: string;\n    onBlur: (event: React.FocusEvent) => void;\n    onChange: (value: TValue) => void;\n    onExitDetailedMode: () => void;\n    row: TType;\n    rowPendingChanges: Partial<TType> | undefined;\n    tabIndex?: number;\n    toggleDetailedMode: (detailed: React.SetStateAction<boolean>) => void;\n    type: TableColumnRendererControl<TType>;\n    value: TValue;\n};\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n    const {\n        dataType,\n        disabled,\n        fontSize,\n        id,\n        invalid,\n        isDetailedMode,\n        isTruncated,\n        locale,\n        onBlur,\n        onChange,\n        onExitDetailedMode,\n        row,\n        rowPendingChanges,\n        tabIndex = -1,\n        toggleDetailedMode,\n        type = 'input',\n        value,\n    } = props;\n    const controlRef = React.useRef<HTMLElement>(null);\n    const currentValue = row[id as keyof TType];\n    const commonProps = {\n        disabled,\n        onBlur,\n        ref: controlRef,\n        tabIndex,\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        const target = event.target as HTMLInputElement | HTMLTextAreaElement;\n\n        if (target.readOnly) {\n            return;\n        }\n\n        // prevent active row navigation while in detailed mode\n        if (\n            isDetailedMode &&\n            (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight')\n        ) {\n            event.stopPropagation();\n        }\n\n        // enter or exit detail mode when pressing enter\n        if (event.key === 'Enter') {\n            // textareas support shift and enter, don't prevent default in that case\n            if (event.shiftKey && isDetailedMode) {\n                return;\n            }\n\n            event.preventDefault();\n\n            if (isDetailedMode) {\n                target.select?.();\n                onExitDetailedMode();\n            } else {\n                target.setSelectionRange?.(target.value?.length, target.value?.length);\n            }\n\n            toggleDetailedMode(editing => !editing);\n            return;\n        }\n\n        // reset the value, or exit edit mode when pressing escape\n        if (event.key === 'Escape') {\n            if (isDetailedMode) {\n                event.preventDefault();\n                toggleDetailedMode(false);\n\n                if (value !== currentValue) {\n                    props.onChange(currentValue);\n                }\n\n                // have to let onChange run before selecting, otherwise the value changes\n                requestAnimationFrame(() => target.select?.());\n            }\n\n            return;\n        }\n\n        // toggle into detailed mode when actually inputting something\n        if (!isPressingMetaKey(event) && (/^[a-z0-9]$/iu.test(event.key) || event.key === 'Backspace')) {\n            toggleDetailedMode(true);\n        }\n    };\n\n    const handlePaste = () => {\n        if (!isDetailedMode) {\n            toggleDetailedMode(true);\n        }\n    };\n\n    if (typeof type === 'function') {\n        const controlFnProps = {\n            ...commonProps,\n            invalid,\n            setValue: onChange,\n            onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => {\n                const target = (event.target as HTMLElement) || null;\n                // it make sense to handle keydown for the custom edititng controls only if target is either input or textarea\n                if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')) {\n                    handleInputKeyDown(event as React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>);\n                }\n            },\n            onPaste: handlePaste,\n            value,\n        };\n\n        return type(controlFnProps, { ...row, ...rowPendingChanges });\n    }\n\n    if (type === 'switch') {\n        return (\n            <Switch\n                {...commonProps}\n                checked={Boolean(value)}\n                onChange={onChange}\n                ref={controlRef as React.Ref<HTMLInputElement>}\n            />\n        );\n    }\n\n    if (type === 'checkbox') {\n        return (\n            <Checkbox\n                {...commonProps}\n                checked={Boolean(value)}\n                onChange={onChange}\n                ref={controlRef as React.Ref<HTMLInputElement>}\n            />\n        );\n    }\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        if (!isDetailedMode) {\n            event.target.select();\n        }\n    };\n\n    if (type === 'datepicker') {\n        const valueAsDate = date.parse(value as Date | string | undefined);\n\n        const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n            const newDate = (event as any).detail as Date;\n\n            if (!valueAsDate || !newDate || (isDate(valueAsDate) && isDate(newDate) && !date.isWeakEqual(valueAsDate, newDate))) {\n                props.onChange(newDate);\n            }\n        };\n\n        const handleDatepickerInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n            const target = event.target as HTMLInputElement;\n\n            if (isDetailedMode && event.key === 'Enter') {\n                // If the field is empty, save as null before exiting detailed mode\n                // This prevents the value from reverting to the previous value\n                if (target.value === '') {\n                    onChange(null);\n                } else {\n                    // When value is not empty, prevent handleInputKeyDown and give full control to Datepicker\n                    // The datepicker will exit \"detailed mode\" by itself when a valid date change is triggered\n                    target.select?.();\n                    return;\n                }\n            }\n\n            handleInputKeyDown(event);\n        };\n\n        return (\n            <Datepicker\n                {...commonProps}\n                invalid={invalid}\n                onChange={handleChange}\n                onFocus={handleFocus}\n                onKeyDown={handleDatepickerInputKeyDown}\n                onPaste={handlePaste}\n                ref={controlRef as React.Ref<HTMLInputElement>}\n                value={valueAsDate}\n            />\n        );\n    }\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        const dataTypeProps = getDataTypeProperties(dataType);\n        onChange(dataTypeProps.parse?.(event.target.value, locale) ?? event.target.value);\n    };\n\n    if (type === 'textarea') {\n        return (\n            <TextareaWithAutosizing\n                {...commonProps}\n                fontSize={fontSize}\n                invalid={invalid}\n                isTruncated={isTruncated}\n                onChange={handleChange}\n                onFocus={handleFocus}\n                onKeyDown={handleInputKeyDown}\n                onPaste={handlePaste}\n                ref={controlRef as React.Ref<HTMLTextAreaElement>}\n                value={String(value ?? '')}\n            />\n        );\n    }\n\n    return (\n        <Input\n            {...commonProps}\n            invalid={invalid}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            onKeyDown={handleInputKeyDown}\n            onPaste={handlePaste}\n            ref={controlRef as React.Ref<HTMLInputElement>}\n            type={dataType === 'number' ? 'number' : undefined}\n            value={dataType === 'number' ? (value as number) : String(value ?? '')}\n        />\n    );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => React.JSX.Element;\n"],"names":["React","isEqualDate","MemoedEditingCell","date.parse","handleChange","date.isWeakEqual"],"mappings":";;;;;;;;;;;;;;;;;;AAmBO,SAAS,mBAAoC,OAAsC;AACtF,QAAM,EAAE,MAAM,SAAS,eAAe,UAAU;AAChD,QAAM,EAAE,SAAA,IAAaA,eAAM,WAAW,UAAU;AAChD,QAAM,EAAE,MAAA,IAAU,KAAK,WAAA;AACvB,QAAM,SAAS,gBAAA;AACf,QAAM,YAAY,MAAM,QAAQ;AAChC,QAAM,aAAa,KAAK,OAAO,UAAU;AACzC,QAAM,cAAc,UAAU,UAAU,mBAAmB;AAC3D,QAAM,OAAO,WAAW,WAAW;AACnC,QAAM,cAAc,wBAA+B,KAAK;AACxD,QAAM,QAAQ,KAAK,SAAA;AACnB,QAAM,aAAa,UAAU,QAAQ,YAAY,KAAK,IAAI,EAAE;AAC5D,QAAM,kBAAkBA,eAAM,OAAO,KAAK;AAG1C,QAAM,oBAAoBA,eAAM,QAAQ,MAAM;AAC1C,WACI,OAAO,SAAS,cAChB,CAAC,CAAC,QAAQ,SAAS,cAAc,mEAAmE;AAAA,EAE5G,GAAG,CAAC,QAAQ,OAAO,CAAC;AAEpB,gBAAc,MAAM;AAEhB,QAAI,qBAAqB,gBAAgB,SAAS;AAC9C,gBAAU,QAAQ,cAAc,MAAM,UAAU,OAAO,MAAM,KAAK;AAElE,sBAAgB,UAAU;AAAA,IAC9B;AAAA,EACJ,GAAG,CAAC,KAAK,CAAC;AAEV,QAAM,eAAeA,eAAM;AAAA,IACvB,CAAC,cAAuB;AACpB,UAAI,aAAa;AAEjB,UAAI,WAAW,aAAa,QAAQ;AAChC,qBAAa,CAAC,UAAU,IAAI,KAAK,SAA0B,GAAG,IAAI,KAAK,KAAsB,CAAC;AAAA,MAClG,WAAW,WAAW,aAAa,YAAY;AAC3C,qBAAa,CAACC,QAAY,IAAI,KAAK,SAA0B,GAAG,IAAI,KAAK,KAAsB,CAAC;AAAA,MACpG,WAAW,WAAW,aAAa,QAAQ;AACvC,cAAM,OAAO,IAAI,KAAK,SAA0B;AAChD,cAAM,UAAU,IAAI,KAAK,KAAsB;AAC/C,qBAAa,EAAE,KAAK,SAAA,MAAe,QAAQ,cAAc,KAAK,WAAA,MAAiB,QAAQ,WAAA;AAAA,MAC3F,OAAO;AACH,qBAAa,cAAc;AAAA,MAC/B;AAEA,UAAI,YAAY;AACZ,kBAAU,QAAQ,aAAa,MAAM,UAAU,SAAS;AACxD,wBAAgB,UAAU;AAAA,MAC9B;AAAA,IACJ;AAAA,IACA,CAAC,mBAAmB,KAAK,IAAI,IAAI,KAAK,OAAO,IAAI,KAAK,IAAI,UAAU,UAAU,OAAO,WAAW,QAAQ;AAAA,EAAA;AAG5G,QAAM,aAAaD,eAAM;AAAA,IACrB,CAAC,UAA4B;AACzB,UAAI,SAAS,wCAAwC,MAAM,eAAe,MAAM,aAAa,GAAG;AAC5F;AAAA,MACJ;AAEA,4BAAsB,MAAM;AACxB,kBAAU,QAAQ,mBAAmB,KAAK;AAC1C,kBAAU,QAAQ,cAAc,MAAM,UAAU,QAAW,CAAC,mBAAmB,IAAI;AAAA,MACvF,CAAC;AAAA,IACL;AAAA,IACA,CAAC,mBAAmB,KAAK,IAAI,IAAI,KAAK,UAAU,UAAU,GAAG,UAAU,KAAK,OAAO,IAAI,KAAK,IAAI,QAAQ;AAAA,EAAA;AAG5G,QAAM,QAAQ,UAAU,QAAQ,aAAoB,IAAI;AAExD,QAAM,yBAAyBA,eAAM,YAAY,MAAM;AACnD,cAAU,QAAQ,cAAc,MAAM,UAAU,QAAW,MAAM,IAAI;AAAA,EACzE,GAAG,CAAC,KAAK,IAAI,IAAI,KAAK,UAAU,UAAU,GAAG,UAAU,KAAK,OAAO,IAAI,KAAK,IAAI,QAAQ,CAAC;AAEzF,QAAM,eAAe;AAAA,IACjB,UAAU,WAAW;AAAA,IACrB,UAAU,UAAU,QAAQ,aAAa,KAAK,IAAI,EAAE,MAAM;AAAA,IAC1D,UAAU,UAAU,SAAS;AAAA,IAC7B,IAAI,KAAK,OAAO;AAAA,IAChB,SAAS,CAAC,CAAC;AAAA,IACX,gBAAgB,UAAU,QAAQ;AAAA,IAClC,aAAa,CAAC,CAAC,WAAW;AAAA,IAC1B,QAAQ,OAAO;AAAA,IACf,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,oBAAoB;AAAA,IACpB,KAAK,KAAK,IAAI;AAAA,IACd,mBAAmB,UAAU,QAAQ,YAAY,KAAK,IAAI,EAAE;AAAA,IAC5D,UAAU,cAAc,IAAI;AAAA,IAC5B,oBAAoB,UAAU,QAAQ;AAAA,IACtC;AAAA,IACA;AAAA,EAAA;AAGJ,QAAM,iBAAiB;AAAA,IACnB,GAAG,kBAAkB,MAAM,OAAO,aAAa;AAAA,IAC/C,6BAA6B,QAAQ,OAAO;AAAA,IAC5C,aAAa;AAAA,IACb,SAAS;AAAA,IACT,KAAK;AAAA,IACL,UAAU;AAAA,EAAA;AAGd,SACIA,+BAAA,cAAC,QAAI,GAAG,eAAA,gDACH,OAAA,EAAM,SAAS,CAAC,CAAC,OAAO,SAAS,SAC9BA,+BAAA,cAAC,mBAAA,EAA0B,GAAG,aAAA,CAAc,CAChD,gDAKC,kBAAA,EAAiB,MAAY,SAAkB,YAAA,CAA0B,CAC9E;AAER;AAsBA,MAAM,oBAAoBA,eAAM,KAAK,SAASE,mBAAmC,OAAsC;AACnH,QAAM;AAAA,IACF;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,OAAO;AAAA,IACP;AAAA,EAAA,IACA;AACJ,QAAM,aAAaF,eAAM,OAAoB,IAAI;AACjD,QAAM,eAAe,IAAI,EAAiB;AAC1C,QAAM,cAAc;AAAA,IAChB;AAAA,IACA;AAAA,IACA,KAAK;AAAA,IACL;AAAA,EAAA;AAGJ,QAAM,qBAAqB,CAAC,UAAuE;AAC/F,UAAM,SAAS,MAAM;AAErB,QAAI,OAAO,UAAU;AACjB;AAAA,IACJ;AAGA,QACI,mBACC,MAAM,QAAQ,aAAa,MAAM,QAAQ,eAAe,MAAM,QAAQ,eAAe,MAAM,QAAQ,eACtG;AACE,YAAM,gBAAA;AAAA,IACV;AAGA,QAAI,MAAM,QAAQ,SAAS;AAEvB,UAAI,MAAM,YAAY,gBAAgB;AAClC;AAAA,MACJ;AAEA,YAAM,eAAA;AAEN,UAAI,gBAAgB;AAChB,eAAO,SAAA;AACP,2BAAA;AAAA,MACJ,OAAO;AACH,eAAO,oBAAoB,OAAO,OAAO,QAAQ,OAAO,OAAO,MAAM;AAAA,MACzE;AAEA,yBAAmB,CAAA,YAAW,CAAC,OAAO;AACtC;AAAA,IACJ;AAGA,QAAI,MAAM,QAAQ,UAAU;AACxB,UAAI,gBAAgB;AAChB,cAAM,eAAA;AACN,2BAAmB,KAAK;AAExB,YAAI,UAAU,cAAc;AACxB,gBAAM,SAAS,YAAY;AAAA,QAC/B;AAGA,8BAAsB,MAAM,OAAO,UAAU;AAAA,MACjD;AAEA;AAAA,IACJ;AAGA,QAAI,CAAC,kBAAkB,KAAK,MAAM,eAAe,KAAK,MAAM,GAAG,KAAK,MAAM,QAAQ,cAAc;AAC5F,yBAAmB,IAAI;AAAA,IAC3B;AAAA,EACJ;AAEA,QAAM,cAAc,MAAM;AACtB,QAAI,CAAC,gBAAgB;AACjB,yBAAmB,IAAI;AAAA,IAC3B;AAAA,EACJ;AAEA,MAAI,OAAO,SAAS,YAAY;AAC5B,UAAM,iBAAiB;AAAA,MACnB,GAAG;AAAA,MACH;AAAA,MACA,UAAU;AAAA,MACV,WAAW,CAAC,UAA4C;AACpD,cAAM,SAAU,MAAM,UAA0B;AAEhD,YAAI,WAAW,OAAO,YAAY,WAAW,OAAO,YAAY,aAAa;AACzE,6BAAmB,KAAoE;AAAA,QAC3F;AAAA,MACJ;AAAA,MACA,SAAS;AAAA,MACT;AAAA,IAAA;AAGJ,WAAO,KAAK,gBAAgB,EAAE,GAAG,KAAK,GAAG,mBAAmB;AAAA,EAChE;AAEA,MAAI,SAAS,UAAU;AACnB,WACIA,+BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,SAAS,QAAQ,KAAK;AAAA,QACtB;AAAA,QACA,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAGjB;AAEA,MAAI,SAAS,YAAY;AACrB,WACIA,+BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ,SAAS,QAAQ,KAAK;AAAA,QACtB;AAAA,QACA,KAAK;AAAA,MAAA;AAAA,IAAA;AAAA,EAGjB;AAEA,QAAM,cAAc,CAAC,UAAoE;AACrF,QAAI,CAAC,gBAAgB;AACjB,YAAM,OAAO,OAAA;AAAA,IACjB;AAAA,EACJ;AAEA,MAAI,SAAS,cAAc;AACvB,UAAM,cAAcG,MAAW,KAAkC;AAEjE,UAAMC,gBAAe,CAAC,UAA+C;AACjE,YAAM,UAAW,MAAc;AAE/B,UAAI,CAAC,eAAe,CAAC,WAAY,OAAO,WAAW,KAAK,OAAO,OAAO,KAAK,CAACC,YAAiB,aAAa,OAAO,GAAI;AACjH,cAAM,SAAS,OAAO;AAAA,MAC1B;AAAA,IACJ;AAEA,UAAM,+BAA+B,CAAC,UAAiD;AACnF,YAAM,SAAS,MAAM;AAErB,UAAI,kBAAkB,MAAM,QAAQ,SAAS;AAGzC,YAAI,OAAO,UAAU,IAAI;AACrB,mBAAS,IAAI;AAAA,QACjB,OAAO;AAGH,iBAAO,SAAA;AACP;AAAA,QACJ;AAAA,MACJ;AAEA,yBAAmB,KAAK;AAAA,IAC5B;AAEA,WACIL,+BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ;AAAA,QACA,UAAUI;AAAAA,QACV,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,KAAK;AAAA,QACL,OAAO;AAAA,MAAA;AAAA,IAAA;AAAA,EAGnB;AAEA,QAAM,eAAe,CAAC,UAAqE;AACvF,UAAM,gBAAgB,sBAAsB,QAAQ;AACpD,aAAS,cAAc,QAAQ,MAAM,OAAO,OAAO,MAAM,KAAK,MAAM,OAAO,KAAK;AAAA,EACpF;AAEA,MAAI,SAAS,YAAY;AACrB,WACIJ,+BAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACI,GAAG;AAAA,QACJ;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU;AAAA,QACV,SAAS;AAAA,QACT,WAAW;AAAA,QACX,SAAS;AAAA,QACT,KAAK;AAAA,QACL,OAAO,OAAO,SAAS,EAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EAGrC;AAEA,SACIA,+BAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACI,GAAG;AAAA,MACJ;AAAA,MACA,UAAU;AAAA,MACV,SAAS;AAAA,MACT,WAAW;AAAA,MACX,SAAS;AAAA,MACT,KAAK;AAAA,MACL,MAAM,aAAa,WAAW,WAAW;AAAA,MACzC,OAAO,aAAa,WAAY,QAAmB,OAAO,SAAS,EAAE;AAAA,IAAA;AAAA,EAAA;AAGjF,CAAC;"}
+{"version":3,"file":"EditingControlCell.js","sources":["../../../../../../src/components/Table3/components/Columns/Cell/EditingControlCell.tsx"],"sourcesContent":["import { isDate, isEqual as isEqualDate, isSameDay } from 'date-fns';\nimport React from 'react';\n\nimport { Checkbox, Datepicker, Field, Input, useLocalization, Switch } from '@/components';\nimport { useLazyEffect } from '@/hooks/useLazyEffect';\nimport { getCellAttributes } from '@/primitives/Table/Core/components/Columns/Cell/util';\nimport { RowContext } from '@/primitives/Table/Core/components/Row/RowContext';\nimport type { TableCellRendererProps } from '@/primitives/Table/Core/types';\nimport type { TableColumnDataType, TableColumnRendererControl, TableFontSize } from '@/primitives/Table/types';\nimport { getDataTypeProperties } from '@/primitives/Table/useTableManager/util/dataTypes';\nimport { getTableMeta } from '@/primitives/Table/useTableManager/util/rows';\nimport * as date from '@/utils/date';\nimport { isElementInsideOrTriggeredFromContainer } from '@/utils/dom';\nimport { isPressingMetaKey } from '@/utils/keyboard';\n\nimport { RowMoveIndicator } from './Editing/RowMoveIndicator';\nimport { TextareaWithAutosizing } from './Editing/TextareaWithAutosizing';\nimport { useEditingCellAutofocus } from './util';\n\nexport function EditingControlCell<TType = unknown>(props: TableCellRendererProps<TType>) {\n    const { cell, cellRef, isHighlighted, index } = props;\n    const { rowIndex } = React.useContext(RowContext);\n    const { table } = cell.getContext();\n    const locale = useLocalization();\n    const tableMeta = getTableMeta(table);\n    const columnMeta = cell.column.columnDef.meta;\n    const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n    const type = columnMeta?.control ?? 'input';\n    const handleFocus = useEditingCellAutofocus<TType>(props);\n    const value = cell.getValue();\n    const rowChanges = tableMeta.editing.getRowValue(cell.row.id);\n    const shouldRunUpdate = React.useRef(false);\n\n    // some controls, like select2, should trigger cell changed (validation, updates) as the value changes\n    const hasNonTextControl = React.useMemo(() => {\n        return (\n            typeof type === 'function' &&\n            !!cellRef.current?.querySelector('[data-taco=\"Select2\"],[data-taco=\"switch\"],[data-taco=\"checkbox\"]')\n        );\n    }, [cellRef.current]);\n\n    useLazyEffect(() => {\n        // Use an effect instead of a change handler to prevent onEditingChange from running with a stale js closure during on-the-fly creation.\n        if (hasNonTextControl && shouldRunUpdate.current) {\n            tableMeta.editing.onCellChanged(cell, rowIndex, value, true, false);\n            // prevent risk of infinite loop, in case there'd ever be an updater function with two values that update each other.\n            shouldRunUpdate.current = false;\n        }\n    }, [value]);\n\n    const handleChange = React.useCallback(\n        (nextValue: unknown) => {\n            let hasChanged = false;\n\n            if (columnMeta?.dataType === 'date') {\n                hasChanged = !isSameDay(new Date(nextValue as string | Date), new Date(value as string | Date));\n            } else if (columnMeta?.dataType === 'datetime') {\n                hasChanged = !isEqualDate(new Date(nextValue as string | Date), new Date(value as string | Date));\n            } else if (columnMeta?.dataType === 'time') {\n                const next = new Date(nextValue as string | Date);\n                const current = new Date(value as string | Date);\n                hasChanged = !(next.getHours() === current.getHours() && next.getMinutes() === current.getMinutes());\n            } else {\n                hasChanged = nextValue !== value;\n            }\n\n            if (hasChanged) {\n                tableMeta.editing.setCellValue(cell, rowIndex, nextValue);\n                shouldRunUpdate.current = hasNonTextControl;\n            }\n        },\n        [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex, value, columnMeta?.dataType]\n    );\n\n    const handleBlur = React.useCallback(\n        (event: React.FocusEvent) => {\n            if (event && isElementInsideOrTriggeredFromContainer(event.relatedTarget, event.currentTarget)) {\n                return;\n            }\n\n            requestAnimationFrame(() => {\n                tableMeta.editing.toggleDetailedMode(false);\n                tableMeta.editing.onCellChanged(cell, rowIndex, undefined, !hasNonTextControl, true);\n            });\n        },\n        [hasNonTextControl, cell.row.id, JSON.stringify(rowChanges), rowIndex, cell.column.id, cell.row.original]\n    );\n\n    const error = tableMeta.editing.getCellError<TType>(cell);\n\n    const handleExitDetailedMode = React.useCallback(() => {\n        tableMeta.editing.onCellChanged(cell, rowIndex, undefined, true, true);\n    }, [cell.row.id, JSON.stringify(rowChanges), rowIndex, cell.column.id, cell.row.original]);\n\n    const controlProps = {\n        dataType: columnMeta?.dataType,\n        disabled: tableMeta.editing.getRowStatus(cell.row.id) === 'saving',\n        fontSize: tableMeta.fontSize.size,\n        id: cell.column.id,\n        invalid: !!error,\n        isDetailedMode: tableMeta.editing.isDetailedMode,\n        isTruncated: !!columnMeta?.enableTruncate,\n        locale: locale.locale,\n        onBlur: handleBlur,\n        onChange: handleChange,\n        onExitDetailedMode: handleExitDetailedMode,\n        row: cell.row.original,\n        rowPendingChanges: tableMeta.editing.getRowValue(cell.row.id),\n        tabIndex: isActiveRow ? 0 : -1,\n        toggleDetailedMode: tableMeta.editing.toggleDetailedMode,\n        type,\n        value,\n    };\n\n    const cellAttributes = {\n        ...getCellAttributes(cell, index, isHighlighted),\n        'data-cell-editing-invalid': error ? true : undefined,\n        'data-taco': 'cell-control',\n        onFocus: handleFocus,\n        ref: cellRef,\n        tabIndex: -1,\n    };\n\n    return (\n        <td {...cellAttributes}>\n            <Field invalid={!!error} message={error}>\n                <MemoedEditingCell<TType> {...controlProps} />\n            </Field>\n            {\n                // we show row move indicator here within the cell rather than the row because it is\n                // an editing only feature, and we don't want to leak editing into the shared row component\n            }\n            <RowMoveIndicator cell={cell} cellRef={cellRef} isActiveRow={isActiveRow} />\n        </td>\n    );\n}\n\ntype MemoedEditingCellProps<TType = unknown, TValue = unknown> = {\n    dataType?: TableColumnDataType;\n    disabled: boolean;\n    fontSize: TableFontSize;\n    id: string;\n    invalid: boolean;\n    isDetailedMode: boolean;\n    isTruncated: boolean;\n    locale: string;\n    onBlur: (event: React.FocusEvent) => void;\n    onChange: (value: TValue) => void;\n    onExitDetailedMode: () => void;\n    row: TType;\n    rowPendingChanges: Partial<TType> | undefined;\n    tabIndex?: number;\n    toggleDetailedMode: (detailed: React.SetStateAction<boolean>) => void;\n    type: TableColumnRendererControl<TType>;\n    value: TValue;\n};\n\nconst MemoedEditingCell = React.memo(function MemoedEditingCell<TType = unknown>(props: MemoedEditingCellProps<TType>) {\n    const {\n        dataType,\n        disabled,\n        fontSize,\n        id,\n        invalid,\n        isDetailedMode,\n        isTruncated,\n        locale,\n        onBlur,\n        onChange,\n        onExitDetailedMode,\n        row,\n        rowPendingChanges,\n        tabIndex = -1,\n        toggleDetailedMode,\n        type = 'input',\n        value,\n    } = props;\n    const controlRef = React.useRef<HTMLElement>(null);\n    const currentValue = row[id as keyof TType];\n    const commonProps = {\n        disabled,\n        onBlur,\n        ref: controlRef,\n        tabIndex,\n    };\n\n    const handleInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        const target = event.target as HTMLInputElement | HTMLTextAreaElement;\n\n        if (target.readOnly) {\n            return;\n        }\n\n        // prevent active row navigation while in detailed mode\n        if (\n            isDetailedMode &&\n            (event.key === 'ArrowUp' || event.key === 'ArrowDown' || event.key === 'ArrowLeft' || event.key === 'ArrowRight')\n        ) {\n            event.stopPropagation();\n        }\n\n        // enter or exit detail mode when pressing enter\n        if (event.key === 'Enter') {\n            // textareas support shift and enter, don't prevent default in that case\n            if (event.shiftKey && isDetailedMode) {\n                return;\n            }\n\n            event.preventDefault();\n\n            if (isDetailedMode) {\n                target.select?.();\n                onExitDetailedMode();\n            } else {\n                target.setSelectionRange?.(target.value?.length, target.value?.length);\n            }\n\n            toggleDetailedMode(editing => !editing);\n            return;\n        }\n\n        // reset the value, or exit edit mode when pressing escape\n        if (event.key === 'Escape') {\n            if (isDetailedMode) {\n                event.preventDefault();\n                toggleDetailedMode(false);\n\n                if (value !== currentValue) {\n                    props.onChange(currentValue);\n                }\n\n                // have to let onChange run before selecting, otherwise the value changes\n                requestAnimationFrame(() => target.select?.());\n            }\n\n            return;\n        }\n\n        // toggle into detailed mode when actually inputting something\n        if (!isPressingMetaKey(event) && (/^[a-z0-9]$/iu.test(event.key) || event.key === 'Backspace')) {\n            toggleDetailedMode(true);\n        }\n    };\n\n    const handlePaste = () => {\n        if (!isDetailedMode) {\n            toggleDetailedMode(true);\n        }\n    };\n\n    if (typeof type === 'function') {\n        const controlFnProps = {\n            ...commonProps,\n            invalid,\n            setValue: onChange,\n            onKeyDown: (event: React.KeyboardEvent<HTMLElement>) => {\n                const target = (event.target as HTMLElement) || null;\n                // it make sense to handle keydown for the custom edititng controls only if target is either input or textarea\n                if (target && (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA')) {\n                    handleInputKeyDown(event as React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>);\n                }\n            },\n            onPaste: handlePaste,\n            value,\n        };\n\n        return type(controlFnProps, { ...row, ...rowPendingChanges });\n    }\n\n    if (type === 'switch') {\n        return (\n            <Switch\n                {...commonProps}\n                checked={Boolean(value)}\n                onChange={onChange}\n                ref={controlRef as React.Ref<HTMLInputElement>}\n            />\n        );\n    }\n\n    if (type === 'checkbox') {\n        return (\n            <Checkbox\n                {...commonProps}\n                checked={Boolean(value)}\n                onChange={onChange}\n                ref={controlRef as React.Ref<HTMLInputElement>}\n            />\n        );\n    }\n\n    const handleFocus = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        if (!isDetailedMode) {\n            event.target.select();\n        }\n    };\n\n    if (type === 'datepicker') {\n        const valueAsDate = date.parse(value as Date | string | undefined);\n\n        const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n            const newDate = (event as any).detail as Date;\n\n            if (!valueAsDate || !newDate || (isDate(valueAsDate) && isDate(newDate) && !date.isWeakEqual(valueAsDate, newDate))) {\n                props.onChange(newDate);\n            }\n        };\n\n        const handleDatepickerInputKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {\n            const target = event.target as HTMLInputElement;\n\n            if (isDetailedMode && event.key === 'Enter') {\n                // If the field is empty, save as null before exiting detailed mode\n                // This prevents the value from reverting to the previous value\n                if (target.value === '') {\n                    onChange(null);\n                } else {\n                    // When value is not empty, prevent handleInputKeyDown and give full control to Datepicker\n                    // The datepicker will exit \"detailed mode\" by itself when a valid date change is triggered\n                    target.select?.();\n                    return;\n                }\n            }\n\n            handleInputKeyDown(event);\n        };\n\n        return (\n            <Datepicker\n                {...commonProps}\n                invalid={invalid}\n                onChange={handleChange}\n                onFocus={handleFocus}\n                onKeyDown={handleDatepickerInputKeyDown}\n                onPaste={handlePaste}\n                ref={controlRef as React.Ref<HTMLInputElement>}\n                value={valueAsDate}\n            />\n        );\n    }\n\n    const handleChange = (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n        const dataTypeProps = getDataTypeProperties(dataType);\n        onChange(dataTypeProps.parse?.(event.target.value, locale) ?? event.target.value);\n    };\n\n    if (type === 'textarea') {\n        return (\n            <TextareaWithAutosizing\n                {...commonProps}\n                fontSize={fontSize}\n                invalid={invalid}\n                isTruncated={isTruncated}\n                onChange={handleChange}\n                onFocus={handleFocus}\n                onKeyDown={handleInputKeyDown}\n                onPaste={handlePaste}\n                ref={controlRef as React.Ref<HTMLTextAreaElement>}\n                value={String(value ?? '')}\n            />\n        );\n    }\n\n    return (\n        <Input\n            {...commonProps}\n            invalid={invalid}\n            onChange={handleChange}\n            onFocus={handleFocus}\n            onKeyDown={handleInputKeyDown}\n            onPaste={handlePaste}\n            ref={controlRef as React.Ref<HTMLInputElement>}\n            type={dataType === 'number' ? 'number' : undefined}\n            value={dataType === 'number' ? (value as number) : String(value ?? '')}\n        />\n    );\n}) as <TType = unknown>(props: MemoedEditingCellProps<TType>) => React.JSX.Element;\n"],"names":["React","isEqualDate","MemoedEditingCell","date.parse","handleChange","date.isWeakEqual"],"mappings":"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"}

package/dist/components/Table3/components/Columns/Cell/util.cjs

@@ -3,12 +3,13 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const util = require("../../../../../primitives/Table/Core/components/Body/util.cjs");
 const RowContext = require("../../../../../primitives/Table/Core/components/Row/RowContext.cjs");
+const rows = require("../../../../../primitives/Table/useTableManager/util/rows.cjs");
 const dom = require("../../../../../utils/dom.cjs");
 function useEditingCellAutofocus(props) {
   const focusManager = util.useAugmentedFocusManager();
   const { rowIndex } = React.useContext(RowContext.RowContext);
   const table = props.cell.getContext().table;
-  const tableMeta = table.options.meta;
+  const tableMeta = rows.getTableMeta(table);
   const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;
   const autoFocus = props.index === tableMeta.editing.lastFocusedCellIndex && isActiveRow;
   React.useEffect(() => {

package/dist/components/Table3/components/Columns/Cell/util.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"util.cjs","sources":["../../../../../../src/components/Table3/components/Columns/Cell/util.ts"],"sourcesContent":["import type { TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport React from 'react';\n\nimport { useAugmentedFocusManager } from '@/primitives/Table/Core/components/Body/util';\nimport { RowContext } from '@/primitives/Table/Core/components/Row/RowContext';\nimport type { TableCellRendererProps } from '@/primitives/Table/Core/types';\nimport { hasFocusableElement } from '@/utils/dom';\n\nexport function useEditingCellAutofocus<TType = unknown>(props: TableCellRendererProps<TType>) {\n    const focusManager = useAugmentedFocusManager();\n    const { rowIndex } = React.useContext(RowContext);\n    const table = props.cell.getContext().table;\n    const tableMeta = table.options.meta as ReactTableMeta<TType>;\n    const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n    const autoFocus = props.index === tableMeta.editing.lastFocusedCellIndex && isActiveRow;\n\n    // focus the cell so that we trigger it's handle focus\n    React.useEffect(() => {\n        if (props.cellRef.current) {\n            const isFocusedElementInCurrentRow = props.cellRef.current.closest('tr')?.contains(document.activeElement);\n            const isFocusedElementSearch = document.activeElement?.getAttribute('name') === 'table-search';\n            const isFocusedElementMenu = document.activeElement?.getAttribute('role') === 'menu';\n\n            if (autoFocus && !isFocusedElementInCurrentRow && !isFocusedElementSearch && !isFocusedElementMenu) {\n                props.cellRef.current?.focus();\n            }\n        }\n    }, [tableMeta.rowActive.rowActiveIndex]);\n\n    // when the cell receives focus we actually want to focus the control inside it...\n    const handleFocus = (event: React.FocusEvent<HTMLTableCellElement>) => {\n        const tableElement = props.cellRef.current?.closest('table');\n\n        if (tableElement && table.getIsSomeColumnsPinned() && !props.cell.column.getIsPinned()) {\n            const columnFreezingOffset = table.getLeftTotalSize();\n            const targetRect = event.currentTarget.getBoundingClientRect();\n            const tableRect = tableElement.getBoundingClientRect();\n            const leftOffsetFromScrollContainer = targetRect.left - tableRect.left;\n            // the width of table vertical scrollbar\n            const scrollbarWidth = tableElement.offsetWidth - tableElement.clientWidth;\n            const isFocusedElementMenu = event.currentTarget.getAttribute('data-cell-id') === '__actions';\n\n            if (\n                // When pinned column overlaps the focused cell\n                (leftOffsetFromScrollContainer < columnFreezingOffset ||\n                    // When focused cell goes behidn the edge of the table\n                    leftOffsetFromScrollContainer + targetRect.width > tableRect.width - scrollbarWidth) &&\n                !isFocusedElementMenu\n            ) {\n                tableElement.scrollTo(props.cell.column.getStart() - columnFreezingOffset, tableElement.scrollTop);\n            }\n        }\n\n        if (event.target === event.currentTarget && hasFocusableElement(event.currentTarget)) {\n            focusManager.focusNext();\n        }\n    };\n\n    return handleFocus;\n}\n"],"names":["useAugmentedFocusManager","RowContext","hasFocusableElement"],"mappings":";;;;;;AAQO,SAAS,wBAAyC,OAAsC;AAC3F,QAAM,eAAeA,KAAAA,yBAAA;AACrB,QAAM,EAAE,SAAA,IAAa,MAAM,WAAWC,WAAAA,UAAU;AAChD,QAAM,QAAQ,MAAM,KAAK,WAAA,EAAa;AACtC,QAAM,YAAY,MAAM,QAAQ;AAChC,QAAM,cAAc,UAAU,UAAU,mBAAmB;AAC3D,QAAM,YAAY,MAAM,UAAU,UAAU,QAAQ,wBAAwB;AAG5E,QAAM,UAAU,MAAM;AAClB,QAAI,MAAM,QAAQ,SAAS;AACvB,YAAM,+BAA+B,MAAM,QAAQ,QAAQ,QAAQ,IAAI,GAAG,SAAS,SAAS,aAAa;AACzG,YAAM,yBAAyB,SAAS,eAAe,aAAa,MAAM,MAAM;AAChF,YAAM,uBAAuB,SAAS,eAAe,aAAa,MAAM,MAAM;AAE9E,UAAI,aAAa,CAAC,gCAAgC,CAAC,0BAA0B,CAAC,sBAAsB;AAChG,cAAM,QAAQ,SAAS,MAAA;AAAA,MAC3B;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,UAAU,UAAU,cAAc,CAAC;AAGvC,QAAM,cAAc,CAAC,UAAkD;AACnE,UAAM,eAAe,MAAM,QAAQ,SAAS,QAAQ,OAAO;AAE3D,QAAI,gBAAgB,MAAM,uBAAA,KAA4B,CAAC,MAAM,KAAK,OAAO,eAAe;AACpF,YAAM,uBAAuB,MAAM,iBAAA;AACnC,YAAM,aAAa,MAAM,cAAc,sBAAA;AACvC,YAAM,YAAY,aAAa,sBAAA;AAC/B,YAAM,gCAAgC,WAAW,OAAO,UAAU;AAElE,YAAM,iBAAiB,aAAa,cAAc,aAAa;AAC/D,YAAM,uBAAuB,MAAM,cAAc,aAAa,cAAc,MAAM;AAElF;AAAA;AAAA,SAEK,gCAAgC;AAAA,QAE7B,gCAAgC,WAAW,QAAQ,UAAU,QAAQ,mBACzE,CAAC;AAAA,QACH;AACE,qBAAa,SAAS,MAAM,KAAK,OAAO,aAAa,sBAAsB,aAAa,SAAS;AAAA,MACrG;AAAA,IACJ;AAEA,QAAI,MAAM,WAAW,MAAM,iBAAiBC,wBAAoB,MAAM,aAAa,GAAG;AAClF,mBAAa,UAAA;AAAA,IACjB;AAAA,EACJ;AAEA,SAAO;AACX;;"}
+{"version":3,"file":"util.cjs","sources":["../../../../../../src/components/Table3/components/Columns/Cell/util.ts"],"sourcesContent":["import React from 'react';\n\nimport { useAugmentedFocusManager } from '@/primitives/Table/Core/components/Body/util';\nimport { RowContext } from '@/primitives/Table/Core/components/Row/RowContext';\nimport type { TableCellRendererProps } from '@/primitives/Table/Core/types';\nimport { getTableMeta } from '@/primitives/Table/useTableManager/util/rows';\nimport { hasFocusableElement } from '@/utils/dom';\n\nexport function useEditingCellAutofocus<TType = unknown>(props: TableCellRendererProps<TType>) {\n    const focusManager = useAugmentedFocusManager();\n    const { rowIndex } = React.useContext(RowContext);\n    const table = props.cell.getContext().table;\n    const tableMeta = getTableMeta(table);\n    const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;\n    const autoFocus = props.index === tableMeta.editing.lastFocusedCellIndex && isActiveRow;\n\n    // focus the cell so that we trigger it's handle focus\n    React.useEffect(() => {\n        if (props.cellRef.current) {\n            const isFocusedElementInCurrentRow = props.cellRef.current.closest('tr')?.contains(document.activeElement);\n            const isFocusedElementSearch = document.activeElement?.getAttribute('name') === 'table-search';\n            const isFocusedElementMenu = document.activeElement?.getAttribute('role') === 'menu';\n\n            if (autoFocus && !isFocusedElementInCurrentRow && !isFocusedElementSearch && !isFocusedElementMenu) {\n                props.cellRef.current?.focus();\n            }\n        }\n    }, [tableMeta.rowActive.rowActiveIndex]);\n\n    // when the cell receives focus we actually want to focus the control inside it...\n    const handleFocus = (event: React.FocusEvent<HTMLTableCellElement>) => {\n        const tableElement = props.cellRef.current?.closest('table');\n\n        if (tableElement && table.getIsSomeColumnsPinned() && !props.cell.column.getIsPinned()) {\n            const columnFreezingOffset = table.getLeftTotalSize();\n            const targetRect = event.currentTarget.getBoundingClientRect();\n            const tableRect = tableElement.getBoundingClientRect();\n            const leftOffsetFromScrollContainer = targetRect.left - tableRect.left;\n            // the width of table vertical scrollbar\n            const scrollbarWidth = tableElement.offsetWidth - tableElement.clientWidth;\n            const isFocusedElementMenu = event.currentTarget.getAttribute('data-cell-id') === '__actions';\n\n            if (\n                // When pinned column overlaps the focused cell\n                (leftOffsetFromScrollContainer < columnFreezingOffset ||\n                    // When focused cell goes behidn the edge of the table\n                    leftOffsetFromScrollContainer + targetRect.width > tableRect.width - scrollbarWidth) &&\n                !isFocusedElementMenu\n            ) {\n                tableElement.scrollTo(props.cell.column.getStart() - columnFreezingOffset, tableElement.scrollTop);\n            }\n        }\n\n        if (event.target === event.currentTarget && hasFocusableElement(event.currentTarget)) {\n            focusManager.focusNext();\n        }\n    };\n\n    return handleFocus;\n}\n"],"names":["useAugmentedFocusManager","RowContext","getTableMeta","hasFocusableElement"],"mappings":";;;;;;;AAQO,SAAS,wBAAyC,OAAsC;AAC3F,QAAM,eAAeA,KAAAA,yBAAA;AACrB,QAAM,EAAE,SAAA,IAAa,MAAM,WAAWC,WAAAA,UAAU;AAChD,QAAM,QAAQ,MAAM,KAAK,WAAA,EAAa;AACtC,QAAM,YAAYC,KAAAA,aAAa,KAAK;AACpC,QAAM,cAAc,UAAU,UAAU,mBAAmB;AAC3D,QAAM,YAAY,MAAM,UAAU,UAAU,QAAQ,wBAAwB;AAG5E,QAAM,UAAU,MAAM;AAClB,QAAI,MAAM,QAAQ,SAAS;AACvB,YAAM,+BAA+B,MAAM,QAAQ,QAAQ,QAAQ,IAAI,GAAG,SAAS,SAAS,aAAa;AACzG,YAAM,yBAAyB,SAAS,eAAe,aAAa,MAAM,MAAM;AAChF,YAAM,uBAAuB,SAAS,eAAe,aAAa,MAAM,MAAM;AAE9E,UAAI,aAAa,CAAC,gCAAgC,CAAC,0BAA0B,CAAC,sBAAsB;AAChG,cAAM,QAAQ,SAAS,MAAA;AAAA,MAC3B;AAAA,IACJ;AAAA,EACJ,GAAG,CAAC,UAAU,UAAU,cAAc,CAAC;AAGvC,QAAM,cAAc,CAAC,UAAkD;AACnE,UAAM,eAAe,MAAM,QAAQ,SAAS,QAAQ,OAAO;AAE3D,QAAI,gBAAgB,MAAM,uBAAA,KAA4B,CAAC,MAAM,KAAK,OAAO,eAAe;AACpF,YAAM,uBAAuB,MAAM,iBAAA;AACnC,YAAM,aAAa,MAAM,cAAc,sBAAA;AACvC,YAAM,YAAY,aAAa,sBAAA;AAC/B,YAAM,gCAAgC,WAAW,OAAO,UAAU;AAElE,YAAM,iBAAiB,aAAa,cAAc,aAAa;AAC/D,YAAM,uBAAuB,MAAM,cAAc,aAAa,cAAc,MAAM;AAElF;AAAA;AAAA,SAEK,gCAAgC;AAAA,QAE7B,gCAAgC,WAAW,QAAQ,UAAU,QAAQ,mBACzE,CAAC;AAAA,QACH;AACE,qBAAa,SAAS,MAAM,KAAK,OAAO,aAAa,sBAAsB,aAAa,SAAS;AAAA,MACrG;AAAA,IACJ;AAEA,QAAI,MAAM,WAAW,MAAM,iBAAiBC,wBAAoB,MAAM,aAAa,GAAG;AAClF,mBAAa,UAAA;AAAA,IACjB;AAAA,EACJ;AAEA,SAAO;AACX;;"}

package/dist/components/Table3/components/Columns/Cell/util.js

@@ -1,12 +1,13 @@
 import React__default from "react";
 import { useAugmentedFocusManager } from "../../../../../primitives/Table/Core/components/Body/util.js";
 import { RowContext } from "../../../../../primitives/Table/Core/components/Row/RowContext.js";
+import { getTableMeta } from "../../../../../primitives/Table/useTableManager/util/rows.js";
 import { hasFocusableElement } from "../../../../../utils/dom.js";
 function useEditingCellAutofocus(props) {
   const focusManager = useAugmentedFocusManager();
   const { rowIndex } = React__default.useContext(RowContext);
   const table = props.cell.getContext().table;
-  const tableMeta = table.options.meta;
+  const tableMeta = getTableMeta(table);
   const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;
   const autoFocus = props.index === tableMeta.editing.lastFocusedCellIndex && isActiveRow;
   React__default.useEffect(() => {