@economic/taco 2.45.0-alpha.2 → 2.45.0-alpha.3

package/dist/taco.cjs.development.js

@@ -4385,7 +4385,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) {
@@ -12421,7 +12421,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,
@@ -12797,7 +12798,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, {
@@ -12822,21 +12825,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) {
@@ -12979,10 +12987,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,
@@ -16859,7 +16870,11 @@ function TableGrid(props) {
     style: table.style,
     tabIndex: -1
   }), /*#__PURE__*/React__default.createElement("thead", null, table.instance.getHeaderGroups().map(headerGroup => (/*#__PURE__*/React__default.createElement("tr", {
-    key: headerGroup.id
+    key: headerGroup.id,
+    onFocus: event => {
+      // prevents rowActive.handleFocus from running when clicking on column-header menus.
+      event.stopPropagation();
+    }
   }, headerGroup.headers.map(props => (/*#__PURE__*/React__default.createElement(Header$5, {
     key: props.id,
     header: props,
@@ -19617,7 +19632,7 @@ function DiscardChangesConfirmationDialog(props) {
   }, texts.table3.editing.clearChangesConfirmationDialog.confirm))))));
 }
 
-function EditingActionMenu(props) {
+function EditingActionsMenu(props) {
   const {
     hasChanges,
     hasErrors,
@@ -19786,10 +19801,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 () {});
@@ -19970,7 +19994,7 @@ function Editing(props) {
 }
 
 function CreateNewRow(props) {
-  var _temporaryRows$0$tabl, _temporaryRows$, _table$getState$colum;
+  var _temporaryRows$0$tabl, _temporaryRows$, _table$getState$colum, _tableRef$current2;
   const {
     buttonRef,
     onEditingCreate: handleEditingCreate,
@@ -20016,16 +20040,17 @@ function CreateNewRow(props) {
   };
   // allow programmatic access to creating rows from outside the table
   React__default.useEffect(() => {
-    if (tableRef.current) {
+    var _tableRef$current;
+    if (tableRef !== null && tableRef !== void 0 && (_tableRef$current = tableRef.current) !== null && _tableRef$current !== void 0 && _tableRef$current.instance) {
       tableRef.current.instance.createRow = createRow;
     }
-  }, [tableRef.current, createRow]);
+  }, [tableRef === null || tableRef === void 0 ? void 0 : (_tableRef$current2 = tableRef.current) === null || _tableRef$current2 === void 0 ? void 0 : _tableRef$current2.instance, createRow]);
   const handleCreate = function () {
     return createRow();
   };
   const shortcut = {
     key: 'Enter',
-    shift: true
+    meta: true
   };
   let tooltip;
   if (isSaving) {