@economic/taco 2.46.3 → 2.46.5

package/dist/taco.cjs.development.js

@@ -4376,7 +4376,7 @@ const Tooltip = /*#__PURE__*/React.forwardRef(function Tooltip(props, ref) {
 });
 
 const getButtonClasses = () => {
-  return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus aria-disabled:cursor-not-allowed';
+  return 'flex-shrink-0 min-h-[theme(spacing.8)] min-w-[theme(spacing.8)] gap-1 h-max leading-5 inline-flex items-center justify-center focus-visible:yt-focus data-[state=instant-open]:yt-focus aria-disabled:cursor-not-allowed';
 };
 const getAppearanceClasses = (value, icon = false) => {
   switch (value) {
@@ -12406,7 +12406,8 @@ const Cell = /*#__PURE__*/React__default.memo(function MemoedCell(context) {
   const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;
   const isResizingColumn = !!table.getState().columnSizingInfo.isResizingColumn;
   const isHoverStatePaused = tableMeta.rowActive.isHoverStatePaused;
-  if (!hideRowActions && actions !== null && actions !== void 0 && actions.length && (isActiveRow || isHovered && !isHoverStatePaused && !isResizingColumn)) {
+  const isRowGrouped = row.getIsGrouped();
+  if (!hideRowActions && !isRowGrouped && actions !== null && actions !== void 0 && actions.length && (isActiveRow || isHovered && !isHoverStatePaused && !isResizingColumn)) {
     return /*#__PURE__*/React__default.createElement(Actions$1, {
       actions: actions,
       actionsLength: actionsLength,
@@ -12782,7 +12783,9 @@ function GroupedCell(props) {
   } = React__default.useContext(RowContext);
   const isActiveRow = tableMeta.rowActive.rowActiveIndex === rowIndex;
   const canShowActions = isActiveRow || isHovered && !tableMeta.rowActive.isHoverStatePaused;
-  const colSpan = cell.row.getVisibleCells().filter(c => !isInternalColumn(c.column.id)).length - 1;
+  // Set colSpan based on the count of visible cells, including '__actions' and non-internal columns, so that
+  // rowGroupActions aligns with rowActions.
+  const colSpan = cell.row.getVisibleCells().filter(c => c.column.id === '__actions' || !isInternalColumn(c.column.id)).length - 1;
   const content = (_ref = (_columnMeta$renderer = (_columnMeta$renderer2 = columnMeta.renderer) === null || _columnMeta$renderer2 === void 0 ? void 0 : _columnMeta$renderer2.call(columnMeta, cell.getValue(), cell.row.original)) !== null && _columnMeta$renderer !== void 0 ? _columnMeta$renderer : cell.getValue()) !== null && _ref !== void 0 ? _ref : null;
   const subRows = cell.getContext().row.subRows.map(row => row.original);
   return /*#__PURE__*/React__default.createElement(MemoedGroupedCell, Object.assign({}, attributes, {
@@ -12807,21 +12810,26 @@ const MemoedGroupedCell = /*#__PURE__*/React__default.memo(function MemoedGroupe
     table,
     ...attributes
   } = props;
-  return /*#__PURE__*/React__default.createElement("td", Object.assign({}, attributes, {
-    ref: cellRef,
-    style: {
-      gridColumn: `span ${colSpan} / span ${colSpan}`
-    }
-  }), /*#__PURE__*/React__default.createElement("span", {
-    className: "grow"
-  }, children), rowActions !== null && rowActions !== void 0 && rowActions.length && canShowActions ? (/*#__PURE__*/React__default.createElement(Actions$1, {
-    actions: rowActions,
-    actionsLength: 4,
-    data: subRows,
-    isActiveRow: true,
-    rowId: rowId,
-    table: table
-  })) : null);
+  return (
+    /*#__PURE__*/
+    // pr-1 is needed to align group row actions with row actions in sibling rows, if present
+    React__default.createElement("td", Object.assign({}, attributes, {
+      className: "!pr-1",
+      ref: cellRef,
+      style: {
+        gridColumn: `span ${colSpan} / span ${colSpan}`
+      }
+    }), /*#__PURE__*/React__default.createElement("span", {
+      className: "grow"
+    }, children), rowActions !== null && rowActions !== void 0 && rowActions.length && canShowActions ? (/*#__PURE__*/React__default.createElement(Actions$1, {
+      actions: rowActions,
+      actionsLength: 4,
+      data: subRows,
+      isActiveRow: true,
+      rowId: rowId,
+      table: table
+    })) : null)
+  );
 });
 
 function Cell$4(props) {
@@ -12964,10 +12972,13 @@ const DisplayRow = /*#__PURE__*/React__default.memo(function DisplayRow(props) {
     'hover:cursor-grab': tableMeta.rowDrag.isEnabled && typeof attributes.onClick !== 'function',
     'hover:cursor-pointer': typeof attributes.onClick === 'function'
   });
+  const isGrouped = row.getIsGrouped();
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("tr", Object.assign({}, attributes, {
     className: className,
     ref: ref
-  }), children, row.getVisibleCells().map((cell, cellIndex) => (/*#__PURE__*/React__default.createElement(Cell$4, {
+  }), children, row.getVisibleCells()
+  // Filter out the row actions cell from rendering in Grouped Row
+  .filter(cell => !(isGrouped && cell.column.id === '__actions')).map((cell, cellIndex) => (/*#__PURE__*/React__default.createElement(Cell$4, {
     key: cell.id,
     cell: cell,
     index: cellIndex,
@@ -18462,11 +18473,13 @@ function useTableEditingListener(table, tableRef, scrollToIndex) {
   // store the last row active index, otherwise everytime tableMeta.editing.saveChanges changes the hook runs again
   const lastRowActiveIndexRef = React__default.useRef(tableMeta.rowActive.rowActiveIndex);
   useLazyEffect(() => {
-    if (tableMeta.editing.isEditing && lastRowActiveIndexRef.current !== undefined && tableMeta.rowActive.rowActiveIndex !== lastRowActiveIndexRef.current) {
+    if (tableMeta.rowActive.rowActiveIndex !== lastRowActiveIndexRef.current) {
       lastRowActiveIndexRef.current = tableMeta.rowActive.rowActiveIndex;
-      tableMeta.editing.saveChanges(table);
+      if (tableMeta.editing.isEditing && lastRowActiveIndexRef.current !== undefined) {
+        tableMeta.editing.saveChanges(table);
+      }
     }
-  }, [tableMeta.rowActive.rowActiveIndex, tableMeta.editing.saveChanges]);
+  }, [tableMeta.rowActive.rowActiveIndex]);
   // show a warning if the user navigates away without triggering save, such as using the browser back/forward button
   const hasChanges = tableMeta.editing.hasChanges();
   React__default.useEffect(() => {
@@ -19600,7 +19613,7 @@ function DiscardChangesConfirmationDialog(props) {
   }, texts.table3.editing.clearChangesConfirmationDialog.confirm))))));
 }
 
-function EditingActionMenu(props) {
+function EditingActionsMenu(props) {
   const {
     hasChanges,
     hasErrors,
@@ -19766,10 +19779,19 @@ function useTable3(props, ref) {
     // Display EditingActionMenu instead of row actions while editing
     rowActions: editing.isEditing ? [(_, rowId, table) => {
       const tableMeta = table.options.meta;
-      return /*#__PURE__*/React__default.createElement(EditingActionMenu, {
+      return /*#__PURE__*/React__default.createElement(EditingActionsMenu, {
         hasChanges: editing.hasChanges(rowId),
         hasErrors: editing.hasRowErrors(rowId),
-        onDiscard: () => editing.discardChanges(rowId, table),
+        onDiscard: () => {
+          if (editing.temporaryRows.length) {
+            tableMeta.rowActive.setRowActiveIndex(undefined);
+            setTimeout(() => {
+              var _editing$createRowBut;
+              return (_editing$createRowBut = editing.createRowButtonRef.current) === null || _editing$createRowBut === void 0 ? void 0 : _editing$createRowBut.focus();
+            }, 50);
+          }
+          editing.discardChanges(rowId, table);
+        },
         onEditingSave: function () {
           try {
             return Promise.resolve(editing.saveChanges(table, rowId)).then(function () {});
@@ -20006,7 +20028,7 @@ function CreateNewRow(props) {
   };
   const shortcut = {
     key: 'Enter',
-    shift: true
+    meta: true
   };
   let tooltip;
   if (isSaving) {