@economic/taco 2.69.0 → 2.69.2-alpha.0

package/dist/taco.cjs

@@ -11409,22 +11409,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) => {
@@ -38499,7 +38499,16 @@ const useResizeObserver$1 = (ref, enabled = true) => {
 const DisplayRow = React.memo(
   React.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,
@@ -38595,7 +38604,7 @@ const DisplayRow = React.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"
@@ -39605,9 +39614,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);
@@ -44151,7 +44160,14 @@ const EditPopover = (props) => {
         onChangeColor: setColor,
         onKeyDown: preventKeyDownPropagation
       }
-    )) : null, /* @__PURE__ */ React.createElement(Group$6, null, /* @__PURE__ */ React.createElement(Button$4, { onClick: close }, texts.select2.cancel), /* @__PURE__ */ React.createElement(Button$4, { appearance: "primary", onClick: handleSave(close) }, texts.select2.save))) : null, onEdit && onDelete ? /* @__PURE__ */ React.createElement("hr", null) : null, onDelete ? /* @__PURE__ */ React.createElement(
+    )) : null, /* @__PURE__ */ React.createElement(Group$6, null, /* @__PURE__ */ React.createElement(Button$4, { onClick: close }, texts.select2.cancel), /* @__PURE__ */ React.createElement(
+      Button$4,
+      {
+        appearance: "primary",
+        onClick: handleSave(close)
+      },
+      texts.select2.save
+    ))) : null, onEdit && onDelete ? /* @__PURE__ */ React.createElement("hr", null) : null, onDelete ? /* @__PURE__ */ React.createElement(
       "button",
       {
         className: "hover:text-grey-700 flex items-center justify-start gap-1",
@@ -45417,6 +45433,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.useContext(FilterContext);
+  const ref = React.useRef(null);
   React.useEffect(() => {
     if ((controlRenderer === "switch" || controlRenderer === "checkbox") && value === void 0) {
       onChange(false);
@@ -45426,8 +45443,9 @@ function Control(props) {
     const control = controlRenderer(
       {
         ...attributes,
-        setValue: (value2) => onChange(value2),
-        value
+        setValue: onChange,
+        value,
+        ref
       },
       void 0,
       filters
@@ -51689,7 +51707,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({});
               }
@@ -55136,7 +55156,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;
@@ -55144,26 +55165,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}`)
         }
       };
     }
@@ -55173,24 +55194,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": {
@@ -55199,28 +55224,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
             )
           }
@@ -55233,12 +55257,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": {
@@ -55247,7 +55274,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)
         }
       };
     }
@@ -55258,10 +55285,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": {
@@ -55278,9 +55305,10 @@ function reducer(state, action) {
 function usePendingChangesState(handleSave, handleChange, handleDiscard, rowIdentityAccessor, validator) {
   const localization = useLocalization();
   const [state, dispatch] = React.useReducer(reducer, {
-    changes: { rows: {}, errors: {}, moveReasons: {}, originals: {}, status: {}, dirty: {} },
+    changes: { rows: {}, errors: {}, moveReasons: {}, originals: {}, dirty: {} },
     indexes: {},
-    temporaryRows: []
+    temporaryRows: [],
+    statuses: {}
   });
   function getRowValue(rowId) {
     var _a;
@@ -55308,7 +55336,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({
@@ -55319,6 +55347,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 = {
@@ -55445,7 +55479,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,
@@ -55486,7 +55520,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;
@@ -55525,10 +55559,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);
@@ -55908,10 +55939,17 @@ function EditingControlCell(props) {
   const handleFocus = useEditingCellAutofocus(props);
   const value = cell.getValue();
   const rowChanges = tableMeta.editing.getRowValue(cell.row.id);
+  const shouldRunUpdate = React.useRef(false);
   const hasNonTextControl = React.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.useCallback(
     (nextValue) => {
       let hasChanged = false;
@@ -55928,9 +55966,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]
@@ -56208,6 +56244,7 @@ function DiscardChangesConfirmationDialog(props) {
   return /* @__PURE__ */ React.createElement(Dialog, { ...dialogProps, showCloseButton: false }, /* @__PURE__ */ React.createElement(
     Dialog.Content,
     {
+      "data-taco": "discard-changes-dialog",
       "aria-label": texts.table3.editing.clearChangesConfirmationDialog.title,
       onClick: handleClickInsideDialogContent,
       onKeyDown: handleKeydown
@@ -56226,16 +56263,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.useRef(null);
   const hasErrors = tableMeta.editing.hasRowErrors(row.id);
-  React.useEffect(() => {
-    if (!measureRow || !rowRef.current) return;
-    measureRow(rowRef.current.getBoundingClientRect().height);
-  }, [hasErrors, measureRow]);
   React.useEffect(() => {
     if (tableMeta.editing.isEditing && isActiveRow && tableMeta.editing.lastFocusedCellIndex === void 0) {
       const element = focusManager.focusFirst();
@@ -56292,7 +56324,7 @@ function Row(props) {
     onFocus: handleFocus,
     onKeyDown: handleKeyDown
   };
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DisplayRow, { ...props, ...attributes, ref: rowRef }, rowStatus === "saving" || rowStatus === "saved" ? /* @__PURE__ */ React.createElement(SaveStatus, { rowId: row.id, table }) : null), /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(DisplayRow, { ...props, ...attributes, remeasureDependencies: [hasErrors] }, rowStatus === "saving" || rowStatus === "saved" ? /* @__PURE__ */ React.createElement(SaveStatus, { rowId: row.id, table }) : null), /* @__PURE__ */ React.createElement(
     DiscardChangesConfirmationDialog,
     {
       open: showDiscardDialog,
@@ -56389,7 +56421,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);
         }
       }
@@ -56398,7 +56430,7 @@ function useTable3(props, ref) {
   React.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);
       }
     }