@economic/taco 2.69.0 → 2.69.2-alpha.0

package/dist/taco.d.ts

@@ -1057,7 +1057,7 @@ export declare type DialogContentDrawerRenderProps = DialogContext['drawer'];
 export declare type DialogContentProps = Omit<React_2.HTMLAttributes<HTMLDivElement>, 'children'> & {
     /** An accessible label to be announced when the dialog is opened */
     'aria-label': string;
-    children: Omit<React_2.ReactNode, 'Function'> | ((props: DialogContentRenderProps) => JSX.Element);
+    children: React_2.ReactNode | ((props: DialogContentRenderProps) => JSX.Element);
     onOpenAutoFocus?: DialogPrimitive.DialogContentProps['onOpenAutoFocus'];
     onCloseAutoFocus?: DialogPrimitive.DialogContentProps['onCloseAutoFocus'];
 };
@@ -1165,7 +1165,7 @@ declare type DrawerCloseProps = default_2.HTMLAttributes<HTMLButtonElement>;
 declare type DrawerContentProps = Omit<default_2.HTMLAttributes<HTMLDivElement>, 'children'> & {
     /** An accessible label to be announced when the side drawer is opened */
     'aria-label': string;
-    children: Omit<default_2.ReactNode, 'Function'> | ((props: DrawerContentRenderProps) => JSX.Element);
+    children: default_2.ReactNode | ((props: DrawerContentRenderProps) => JSX.Element);
 };
 
 declare type DrawerContentRenderProps = {
@@ -3071,7 +3071,7 @@ export declare type Table3Ref = TableRef & {
             createRow?: (row: unknown) => Promise<void>;
             save: (rowId?: string) => Promise<boolean>;
             removeRowChanges: (rowId: string) => Promise<void>;
-            forceValidate: () => Promise<string[]>;
+            forceValidate?: () => Promise<string[]>;
         };
     };
 };
@@ -3930,7 +3930,7 @@ export declare const Truncate: ({ children, tooltip }: TruncateProps) => default
 
 export declare type TruncateProps = {
     children: default_2.ReactElement;
-    tooltip: string;
+    tooltip: string | JSX.Element;
 };
 
 export declare interface UncontrolledCheckboxProps extends CheckboxBaseProps {

package/dist/taco.js

@@ -11391,22 +11391,22 @@ const getButtonClasses$1 = () => {
 const getAppearanceClasses = (value, icon = false) => {
   switch (value) {
     case "primary":
-      return `wcag-blue-500 visited:wcag-blue-500 hover:wcag-blue-700 hover:active:wcag-blue-500 aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50`;
+      return `wcag-blue-500 visited:wcag-blue-500 hover:wcag-blue-700 hover:active:wcag-blue-500 focus-visible:wcag-blue-500 aria-disabled:bg-blue-500/50 aria-disabled:active:bg-blue-500/50`;
     case "danger":
-      return `wcag-red-500 visited:wcag-red-500 hover:wcag-red-700 hover:active:wcag-red-500 aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50`;
+      return `wcag-red-500 visited:wcag-red-500 hover:wcag-red-700 hover:active:wcag-red-500 focus-visible:wcag-red-500 aria-disabled:bg-red-500/50 aria-disabled:active:bg-red-500/50`;
     case "ghost":
-      return `bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white`;
+      return `bg-white border border-blue-500 text-blue-500 visited:text-blue-500 hover:bg-blue-100 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:border-blue-500/50 aria-disabled:text-blue-500/50 aria-disabled:bg-white`;
     case "discrete": {
       if (icon) {
-        return `bg-transparent text-black visited:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30`;
+        return `bg-transparent text-black visited:text-black hover:bg-[#000]/[0.08] focus-visible:bg-[#000]/[0.08] aria-disabled:text-black/30`;
       }
-      return `bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 aria-disabled:text-blue-500/50`;
+      return `bg-transparent text-blue-500 visited:text-blue-500 hover:text-blue-700 focus-visible:text-blue-700 aria-disabled:text-blue-500/50`;
     }
     case "transparent": {
-      return `bg-transparent text-black visited:text-black hover:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30 aria-disabled:bg-transparent`;
+      return `bg-transparent text-black visited:text-black hover:text-black focus-visible:text-black hover:bg-[#000]/[0.08] aria-disabled:text-black/30 aria-disabled:bg-transparent`;
     }
     default:
-      return `wcag-grey-200 visited:wcag-grey-200 hover:wcag-grey-300 aria-disabled:bg-grey-200/50 aria-disabled:text-black/30`;
+      return `wcag-grey-200 visited:wcag-grey-200 hover:wcag-grey-300 focus-visible:wcag-grey-300 aria-disabled:bg-grey-200/50 aria-disabled:text-black/30`;
   }
 };
 const createButtonWithTooltip = (props, className, ref) => {
@@ -38481,7 +38481,16 @@ const useResizeObserver$1 = (ref, enabled = true) => {
 const DisplayRow = React__default.memo(
   React__default.forwardRef(function DisplayRow2(props, externalRef) {
     var _a, _b, _c;
-    const { children, cellRenderer: CellRenderer, index: index2, measureRow, row, table, ...otherAttributes } = props;
+    const {
+      children,
+      cellRenderer: CellRenderer,
+      index: index2,
+      measureRow,
+      row,
+      table,
+      remeasureDependencies = [],
+      ...otherAttributes
+    } = props;
     const tableMeta = table.options.meta;
     const attributes = {
       ...otherAttributes,
@@ -38577,7 +38586,7 @@ const DisplayRow = React__default.memo(
       const rowHeight = ((_a2 = ref.current) == null ? void 0 : _a2.getBoundingClientRect().height) ?? 0;
       const expansionHeight = ((_b2 = expansionRef.current) == null ? void 0 : _b2.getBoundingClientRect().height) ?? 0;
       measureRow(rowHeight + expansionHeight);
-    }, [expansionRef.current, expandedRowSize == null ? void 0 : expandedRowSize.height]);
+    }, [expansionRef.current, expandedRowSize == null ? void 0 : expandedRowSize.height, ...remeasureDependencies]);
     const className = clsx("group/row", otherAttributes.className, {
       "hover:cursor-grab": tableMeta.rowDrag.isEnabled && typeof attributes.onClick !== "function",
       "hover:cursor-pointer": typeof attributes.onClick === "function"
@@ -39587,9 +39596,9 @@ function Search$1(props) {
     if (tableMeta.search.enableGlobalFilter && tableMeta.search.handleSearch) {
       clearTimeout(searchTimeoutRef.current);
       searchTimeoutRef.current = setTimeout(() => {
-        var _a2, _b;
+        var _a2, _b, _c;
         setLoading(true);
-        (_b = (_a2 = tableMeta.search).handleSearch) == null ? void 0 : _b.call(_a2, query2, hiddenColumns).then(() => {
+        (_c = (_b = (_a2 = tableMeta.search).handleSearch) == null ? void 0 : _b.call(_a2, query2, hiddenColumns)) == null ? void 0 : _c.then(() => {
           setLoading(false);
         });
       }, 150);
@@ -44133,7 +44142,14 @@ const EditPopover = (props) => {
         onChangeColor: setColor,
         onKeyDown: preventKeyDownPropagation
       }
-    )) : null, /* @__PURE__ */ React__default.createElement(Group$6, null, /* @__PURE__ */ React__default.createElement(Button$4, { onClick: close }, texts.select2.cancel), /* @__PURE__ */ React__default.createElement(Button$4, { appearance: "primary", onClick: handleSave(close) }, texts.select2.save))) : null, onEdit && onDelete ? /* @__PURE__ */ React__default.createElement("hr", null) : null, onDelete ? /* @__PURE__ */ React__default.createElement(
+    )) : null, /* @__PURE__ */ React__default.createElement(Group$6, null, /* @__PURE__ */ React__default.createElement(Button$4, { onClick: close }, texts.select2.cancel), /* @__PURE__ */ React__default.createElement(
+      Button$4,
+      {
+        appearance: "primary",
+        onClick: handleSave(close)
+      },
+      texts.select2.save
+    ))) : null, onEdit && onDelete ? /* @__PURE__ */ React__default.createElement("hr", null) : null, onDelete ? /* @__PURE__ */ React__default.createElement(
       "button",
       {
         className: "hover:text-grey-700 flex items-center justify-start gap-1",
@@ -45399,6 +45415,7 @@ function Control(props) {
   const controlRenderer = (_a = column == null ? void 0 : column.columnDef.meta) == null ? void 0 : _a.control;
   const dataType = (_b = column == null ? void 0 : column.columnDef.meta) == null ? void 0 : _b.dataType;
   const filters = React__default.useContext(FilterContext);
+  const ref = React__default.useRef(null);
   useEffect(() => {
     if ((controlRenderer === "switch" || controlRenderer === "checkbox") && value === void 0) {
       onChange(false);
@@ -45408,8 +45425,9 @@ function Control(props) {
     const control = controlRenderer(
       {
         ...attributes,
-        setValue: (value2) => onChange(value2),
-        value
+        setValue: onChange,
+        value,
+        ref
       },
       void 0,
       filters
@@ -51671,7 +51689,9 @@ const useRowSelect = (onSelectedRows) => {
             const { onChange: _, ...props } = getToggleAllRowsSelectedProps();
             const onChange = (checked) => {
               if (checked) {
-                onSelectedRows(Object.assign({}, Array.from({ length: rows.length }).fill(true)));
+                onSelectedRows(
+                  Object.assign({}, Array.from({ length: rows.length }).fill(true))
+                );
               } else {
                 onSelectedRows({});
               }
@@ -55118,7 +55138,8 @@ var setWithExports = requireSetWith();
 const setWith = /* @__PURE__ */ getDefaultExportFromCjs(setWithExports);
 const DELAY_BEFORE_REMOVING_SAVE_STATUS = 3e3;
 function reducer(state, action) {
-  const { type, rowId, payload } = action;
+  var _a;
+  const { type, payload } = action;
   switch (type) {
     case "setCellValue": {
       const { columnId, index: index2, row, value } = payload;
@@ -55126,26 +55147,26 @@ function reducer(state, action) {
         ...state,
         changes: {
           ...state.changes,
-          rows: setWith(state.changes.rows, `${rowId}.${columnId}`, value, Object),
-          originals: setWith(state.changes.originals, rowId, row, Object),
-          dirty: setWith(state.changes.dirty, rowId, true, Object)
+          rows: setWith(state.changes.rows, `${action.rowId}.${columnId}`, value, Object),
+          originals: setWith(state.changes.originals, action.rowId, row, Object),
+          dirty: setWith(state.changes.dirty, action.rowId, true, Object)
         },
-        indexes: setWith(state.indexes, rowId, index2, Object)
+        indexes: setWith(state.indexes, action.rowId, index2, Object)
       };
     }
     case "removeCellValue": {
       const { columnId, rowIdentityAccessor } = payload;
-      const changes = omit$1(state.changes.rows, `${rowId}.${columnId}`);
-      if (!Object.keys(changes[rowId]).length) {
-        return reducer(state, { type: "removeRow", rowId, payload: { rowIdentityAccessor } });
+      const changes = omit$1(state.changes.rows, `${action.rowId}.${columnId}`);
+      if (!Object.keys(changes[action.rowId]).length) {
+        return reducer(state, { type: "removeRow", rowId: action.rowId, payload: { rowIdentityAccessor } });
       }
       return {
         ...state,
         changes: {
           ...state.changes,
-          rows: omit$1(state.changes.rows, `${rowId}.${columnId}`),
-          errors: omit$1(state.changes.errors, `${rowId}.cells.${columnId}`),
-          moveReasons: omit$1(state.changes.moveReasons, `${rowId}.${columnId}`)
+          rows: omit$1(state.changes.rows, `${action.rowId}.${columnId}`),
+          errors: omit$1(state.changes.errors, `${action.rowId}.cells.${columnId}`),
+          moveReasons: omit$1(state.changes.moveReasons, `${action.rowId}.${columnId}`)
         }
       };
     }
@@ -55155,24 +55176,28 @@ function reducer(state, action) {
         ...state,
         changes: {
           ...state.changes,
-          rows: setWith(state.changes.rows, rowId, value, Object),
+          rows: setWith(state.changes.rows, action.rowId, value, Object),
           errors: setWith(
             state.changes.errors,
-            `${rowId}.cells`,
-            cellErrors ?? state.changes.errors.cells[rowId],
+            `${action.rowId}.cells`,
+            cellErrors ?? ((_a = state.changes.errors[action.rowId]) == null ? void 0 : _a.cells),
+            Object
+          ),
+          originals: setWith(
+            state.changes.originals,
+            action.rowId,
+            original ?? state.changes.originals[action.rowId],
             Object
           ),
-          originals: setWith(state.changes.originals, rowId, original ?? state.changes.originals[rowId], Object),
           moveReasons: setWith(
             state.changes.moveReasons,
-            rowId,
-            moveReasons ?? state.changes.moveReasons[rowId],
+            action.rowId,
+            moveReasons ?? state.changes.moveReasons[action.rowId],
             Object
-          ),
-          // status can be undefined, so don't use ??
-          status: setWith(state.changes.status, rowId, void 0, Object)
+          )
         },
-        indexes: setWith(state.indexes, rowId, index2, Object)
+        indexes: setWith(state.indexes, action.rowId, index2, Object),
+        statuses: omit$1(state.statuses, action.rowId)
       };
     }
     case "removeRow": {
@@ -55181,28 +55206,27 @@ function reducer(state, action) {
         ...state,
         changes: {
           ...state.changes,
-          rows: omit$1(state.changes.rows, rowId),
-          errors: omit$1(state.changes.errors, rowId),
-          moveReasons: omit$1(state.changes.moveReasons, rowId),
-          originals: omit$1(state.changes.originals, rowId),
-          status: omit$1(state.changes.status, rowId),
-          dirty: omit$1(state.changes.dirty, rowId)
+          rows: omit$1(state.changes.rows, action.rowId),
+          errors: omit$1(state.changes.errors, action.rowId),
+          moveReasons: omit$1(state.changes.moveReasons, action.rowId),
+          originals: omit$1(state.changes.originals, action.rowId),
+          dirty: omit$1(state.changes.dirty, action.rowId)
         },
-        indexes: omit$1(state.indexes, rowId),
-        temporaryRows: state.temporaryRows.filter((row) => row[rowIdentityAccessor] !== rowId)
+        indexes: omit$1(state.indexes, action.rowId),
+        temporaryRows: state.temporaryRows.filter((row) => row[rowIdentityAccessor] !== action.rowId)
       };
     }
     case "complete": {
       const { changes, handleDiscard } = payload;
-      if (JSON.stringify(changes) !== JSON.stringify(state.changes.rows[rowId])) {
+      if (JSON.stringify(changes) !== JSON.stringify(state.changes.rows[action.rowId])) {
         return {
           ...state,
           changes: {
             ...state.changes,
             originals: setWith(
               state.changes.originals,
-              rowId,
-              { ...state.changes.originals[rowId], ...changes },
+              action.rowId,
+              { ...state.changes.originals[action.rowId], ...changes },
               Object
             )
           }
@@ -55215,12 +55239,15 @@ function reducer(state, action) {
     }
     case "setRowStatus": {
       const { status } = payload;
+      if (status) {
+        return {
+          ...state,
+          statuses: setWith(state.statuses, action.rowId, status, Object)
+        };
+      }
       return {
         ...state,
-        changes: {
-          ...state.changes,
-          status: status ? setWith(state.changes.status, rowId, status, Object) : omit$1(state.changes.status, rowId)
-        }
+        statuses: omit$1(state.statuses, action.rowId)
       };
     }
     case "setRowErrors": {
@@ -55229,7 +55256,7 @@ function reducer(state, action) {
         ...state,
         changes: {
           ...state.changes,
-          errors: setWith(state.changes.errors, rowId, errors, Object)
+          errors: setWith(state.changes.errors, action.rowId, errors, Object)
         }
       };
     }
@@ -55240,10 +55267,10 @@ function reducer(state, action) {
         temporaryRows: state.temporaryRows.concat(value),
         changes: {
           ...state.changes,
-          rows: setWith(state.changes.rows, rowId, value, Object),
-          originals: setWith(state.changes.originals, rowId, value, Object)
+          rows: setWith(state.changes.rows, action.rowId, value, Object),
+          originals: setWith(state.changes.originals, action.rowId, value, Object)
         },
-        indexes: setWith(state.indexes, rowId, index2, Object)
+        indexes: setWith(state.indexes, action.rowId, index2, Object)
       };
     }
     case "forceValidate": {
@@ -55260,9 +55287,10 @@ function reducer(state, action) {
 function usePendingChangesState(handleSave, handleChange, handleDiscard, rowIdentityAccessor, validator) {
   const localization = useLocalization();
   const [state, dispatch] = React__default.useReducer(reducer, {
-    changes: { rows: {}, errors: {}, moveReasons: {}, originals: {}, status: {}, dirty: {} },
+    changes: { rows: {}, errors: {}, moveReasons: {}, originals: {}, dirty: {} },
     indexes: {},
-    temporaryRows: []
+    temporaryRows: [],
+    statuses: {}
   });
   function getRowValue(rowId) {
     var _a;
@@ -55290,7 +55318,7 @@ function usePendingChangesState(handleSave, handleChange, handleDiscard, rowIden
     return !!((_b = state.changes.errors[rowId]) == null ? void 0 : _b.row) || !!Object.keys(((_c = state.changes.errors[rowId]) == null ? void 0 : _c.cells) ?? {}).length;
   }
   function getRowStatus(rowId) {
-    return state.changes.status[rowId];
+    return state.statuses[rowId];
   }
   function setRowStatus(rowId, status) {
     dispatch({
@@ -55301,6 +55329,12 @@ function usePendingChangesState(handleSave, handleChange, handleDiscard, rowIden
       }
     });
   }
+  function showSavedStatus(rowId) {
+    setRowStatus(rowId, "saved");
+    setTimeout(() => {
+      setRowStatus(rowId, void 0);
+    }, DELAY_BEFORE_REMOVING_SAVE_STATUS);
+  }
   function insertTemporaryRow(data, rowIndex) {
     const newRowId = `${TEMPORARY_ROW_ID_PREFIX}${nanoid()}`;
     const value = {
@@ -55427,7 +55461,7 @@ function usePendingChangesState(handleSave, handleChange, handleDiscard, rowIden
               newState.changes.originals[row.id] = row.original;
               newState.changes.moveReasons[row.id] = { ...newState.changes.moveReasons[row.id] };
               newState.changes.rows[row.id] = { ...newState.changes.rows[row.id] };
-              newState.changes.status[row.id] = "errored";
+              newState.statuses[row.id] = "errored";
               newState.indexes[row.id] = index2;
               newState.changes.errors[row.id] = {
                 cells: cellErrors,
@@ -55468,7 +55502,7 @@ function usePendingChangesState(handleSave, handleChange, handleDiscard, rowIden
     }));
   }
   function hasSaved() {
-    return !!Object.values(state.changes.status).filter((value) => value === "saved").length;
+    return !!Object.values(state.statuses).filter((status) => status === "saved").length;
   }
   function hasChanges(rowId) {
     return rowId ? !!state.changes.rows[rowId] : !!Object.keys(state.changes.rows).length;
@@ -55507,10 +55541,7 @@ function usePendingChangesState(handleSave, handleChange, handleDiscard, rowIden
         }
         await handleSave(changeSet);
         complete(rowId2, table, rowChanges);
-        setRowStatus(rowId2, "saved");
-        setTimeout(() => {
-          setRowStatus(rowId2, void 0);
-        }, DELAY_BEFORE_REMOVING_SAVE_STATUS);
+        showSavedStatus(rowId2);
       } catch (error) {
         if (error instanceof ReferenceError || error instanceof TypeError || ((_a = error == null ? void 0 : error.response) == null ? void 0 : _a.status) >= 500) {
           console.error(error);
@@ -55890,10 +55921,17 @@ function EditingControlCell(props) {
   const handleFocus = useEditingCellAutofocus(props);
   const value = cell.getValue();
   const rowChanges = tableMeta.editing.getRowValue(cell.row.id);
+  const shouldRunUpdate = React__default.useRef(false);
   const hasNonTextControl = React__default.useMemo(() => {
     var _a;
     return typeof type === "function" && !!((_a = cellRef.current) == null ? void 0 : _a.querySelector('[data-taco="Select2"],[data-taco="switch"],[data-taco="checkbox"]'));
   }, [cellRef.current]);
+  useLazyEffect(() => {
+    if (hasNonTextControl && shouldRunUpdate.current) {
+      tableMeta.editing.onCellChanged(cell, rowIndex, value, true, false);
+      shouldRunUpdate.current = false;
+    }
+  }, [value]);
   const handleChange = React__default.useCallback(
     (nextValue) => {
       let hasChanged = false;
@@ -55910,9 +55948,7 @@ function EditingControlCell(props) {
       }
       if (hasChanged) {
         tableMeta.editing.setCellValue(cell, rowIndex, nextValue);
-        if (hasNonTextControl) {
-          requestAnimationFrame(() => tableMeta.editing.onCellChanged(cell, rowIndex, nextValue, true, false));
-        }
+        shouldRunUpdate.current = hasNonTextControl;
       }
     },
     [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex, value, columnMeta.dataType]
@@ -56190,6 +56226,7 @@ function DiscardChangesConfirmationDialog(props) {
   return /* @__PURE__ */ React__default.createElement(Dialog, { ...dialogProps, showCloseButton: false }, /* @__PURE__ */ React__default.createElement(
     Dialog.Content,
     {
+      "data-taco": "discard-changes-dialog",
       "aria-label": texts.table3.editing.clearChangesConfirmationDialog.title,
       onClick: handleClickInsideDialogContent,
       onKeyDown: handleKeydown
@@ -56208,16 +56245,11 @@ function DiscardChangesConfirmationDialog(props) {
   ));
 }
 function Row(props) {
-  const { row, index: index2, table, measureRow } = props;
+  const { row, index: index2, table } = props;
   const focusManager = useAugmentedFocusManager();
   const tableMeta = table.options.meta;
   const isActiveRow = tableMeta.rowActive.rowActiveIndex === index2;
-  const rowRef = React__default.useRef(null);
   const hasErrors = tableMeta.editing.hasRowErrors(row.id);
-  React__default.useEffect(() => {
-    if (!measureRow || !rowRef.current) return;
-    measureRow(rowRef.current.getBoundingClientRect().height);
-  }, [hasErrors, measureRow]);
   React__default.useEffect(() => {
     if (tableMeta.editing.isEditing && isActiveRow && tableMeta.editing.lastFocusedCellIndex === void 0) {
       const element = focusManager.focusFirst();
@@ -56274,7 +56306,7 @@ function Row(props) {
     onFocus: handleFocus,
     onKeyDown: handleKeyDown
   };
-  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(DisplayRow, { ...props, ...attributes, ref: rowRef }, rowStatus === "saving" || rowStatus === "saved" ? /* @__PURE__ */ React__default.createElement(SaveStatus, { rowId: row.id, table }) : null), /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(DisplayRow, { ...props, ...attributes, remeasureDependencies: [hasErrors] }, rowStatus === "saving" || rowStatus === "saved" ? /* @__PURE__ */ React__default.createElement(SaveStatus, { rowId: row.id, table }) : null), /* @__PURE__ */ React__default.createElement(
     DiscardChangesConfirmationDialog,
     {
       open: showDiscardDialog,
@@ -56371,7 +56403,7 @@ function useTable3(props, ref) {
           removeRowChanges: (rowId) => table.meta.editing.discardChanges(rowId, table.instance),
           save: (rowId) => table.meta.editing.saveChanges(table.instance, rowId)
         };
-        if (props.onEditingCreate) {
+        if (props.onEditingCreate && instance.editing) {
           instance.editing.createRow = (row) => table.meta.editing.createRow(table.instance, row);
         }
       }
@@ -56380,7 +56412,7 @@ function useTable3(props, ref) {
   React__default.useEffect(() => {
     if (table.ref.current) {
       const instance = table.ref.current.instance;
-      if (table.meta.editing.isEnabled) {
+      if (table.meta.editing.isEnabled && instance.editing) {
         instance.editing.forceValidate = async () => await table.meta.editing.forceValidate(table.instance);
       }
     }