@economic/taco 2.69.0 → 2.69.2-onEditingChange-stale.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"
@@ -55908,10 +55917,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 +55944,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 +56222,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 +56241,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 +56302,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,