@elastic/eui 95.10.1 → 95.12.0

package/lib/components/basic_table/basic_table.js

@@ -192,6 +192,10 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         });
       });
     });
+    _defineProperty(_this, "renderCopyChar", function (columnIndex) {
+      var isLastColumn = columnIndex === _this.props.columns.length - 1;
+      return isLastColumn ? _services.tabularCopyMarkers.hiddenNewline : _services.tabularCopyMarkers.hiddenTab;
+    });
     _defineProperty(_this, "resolveColumnSortDirection", function (column) {
       var sorting = _this.props.sorting;
       var _ref5 = column,
@@ -392,13 +396,13 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         loading = _this$props3.loading;
       return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_table.EuiTableHeaderMobile, {
         responsiveBreakpoint: responsiveBreakpoint
-      }, this.renderSelectAll(true), this.renderTableMobileSort()), (0, _react2.jsx)(_table.EuiTable, {
+      }, this.renderSelectAll(true), this.renderTableMobileSort()), (0, _react2.jsx)(_services.OverrideCopiedTabularContent, null, (0, _react2.jsx)(_table.EuiTable, {
         id: this.tableId,
         tableLayout: tableLayout,
         responsiveBreakpoint: responsiveBreakpoint,
         compressed: compressed,
         css: loading && _basic_table.safariLoadingWorkaround
-      }, this.renderTableCaption(), this.renderTableHead(), this.renderTableBody(), this.renderTableFooter()));
+      }, this.renderTableCaption(), this.renderTableHead(), this.renderTableBody(), this.renderTableFooter())));
     }
   }, {
     key: "renderTableMobileSort",
@@ -497,7 +501,7 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
       return (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("caption", {
         css: _table2.euiTableCaptionStyles,
         className: "euiTableCaption"
-      }, (0, _react2.jsx)(_delay_render.EuiDelayRender, null, captionElement)));
+      }, _services.tabularCopyMarkers.hiddenNoCopyBoundary, (0, _react2.jsx)(_delay_render.EuiDelayRender, null, captionElement), _services.tabularCopyMarkers.hiddenNoCopyBoundary));
     }
   }, {
     key: "renderTableHead",
@@ -509,7 +513,8 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
       var headers = [];
       if (selection) {
         headers.push((0, _react2.jsx)(_table.EuiTableHeaderCellCheckbox, {
-          key: "_selection_column_h"
+          key: "_selection_column_h",
+          append: this.renderCopyChar(-1)
         }, this.renderSelectAll(false)));
       }
       columns.forEach(function (column, index) {
@@ -524,16 +529,20 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
           readOnly = _ref8.readOnly,
           description = _ref8.description;
         var columnAlign = align || _this3.getAlignForDataType(dataType);
+        var sharedProps = {
+          width: width,
+          description: description,
+          mobileOptions: mobileOptions,
+          align: columnAlign,
+          append: _this3.renderCopyChar(index)
+        };
 
         // actions column
         if (column.actions) {
-          headers.push((0, _react2.jsx)(_table.EuiTableHeaderCell, {
+          headers.push((0, _react2.jsx)(_table.EuiTableHeaderCell, _extends({}, sharedProps, {
             key: "_actions_h_".concat(index),
-            align: "right",
-            width: width,
-            description: description,
-            mobileOptions: mobileOptions
-          }, name));
+            align: "right"
+          }), name));
           return;
         }
 
@@ -548,13 +557,9 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
             _sorting.onSort = _this3.resolveColumnOnSort(column);
             _sorting.readOnly = _this3.props.sorting.readOnly || readOnly;
           }
-          headers.push((0, _react2.jsx)(_table.EuiTableHeaderCell, _extends({
+          headers.push((0, _react2.jsx)(_table.EuiTableHeaderCell, _extends({}, sharedProps, {
             key: "_computed_column_h_".concat(index),
-            align: columnAlign,
-            width: width,
-            mobileOptions: mobileOptions,
-            "data-test-subj": "tableHeaderCell_".concat(typeof name === 'string' ? name : '', "_").concat(index),
-            description: description
+            "data-test-subj": "tableHeaderCell_".concat(typeof name === 'string' ? name : '', "_").concat(index)
           }, _sorting), name));
           return;
         }
@@ -577,13 +582,9 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
             sorting.readOnly = _this3.props.sorting.readOnly || readOnly;
           }
         }
-        headers.push((0, _react2.jsx)(_table.EuiTableHeaderCell, _extends({
+        headers.push((0, _react2.jsx)(_table.EuiTableHeaderCell, _extends({}, sharedProps, {
           key: "_data_h_".concat(String(field), "_").concat(index),
-          align: columnAlign,
-          width: width,
-          mobileOptions: mobileOptions,
-          "data-test-subj": "tableHeaderCell_".concat(String(field), "_").concat(index),
-          description: description
+          "data-test-subj": "tableHeaderCell_".concat(String(field), "_").concat(index)
         }, sorting), name));
       });
       return (0, _react2.jsx)(_table.EuiTableHeader, null, headers);
@@ -720,7 +721,7 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
           var hasCustomActions = columnActions.some(function (action) {
             return !!action.render;
           });
-          cells.push(_this5.renderItemActionsCell(itemId, item, column, columnIndex, hasCustomActions));
+          cells.push(_this5.renderItemActionsCell(itemId, item, column, columnIndex, rowIndex, hasCustomActions));
           // A table theoretically could have both custom and default action items
           // If it has both, default action mobile row styles take precedence over custom
           hasActions = !hasActions && hasCustomActions ? 'custom' : true;
@@ -749,7 +750,8 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         hasSelection: !!selection
       }, (0, _react2.jsx)(_table.EuiTableRowCell, {
         colSpan: expandedRowColSpan,
-        textOnly: false
+        textOnly: false,
+        append: _services.tabularCopyMarkers.hiddenNewline
       }, itemIdToExpandedRowMap[itemId])) : undefined;
       var rowPropsCallback = this.props.rowProps;
       var rowProps = getRowProps(item, rowPropsCallback);
@@ -788,7 +790,8 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         }
       };
       return [(0, _react2.jsx)(_table.EuiTableRowCellCheckbox, {
-        key: key
+        key: key,
+        append: this.renderCopyChar(-1)
       }, (0, _react2.jsx)(_i18n.EuiI18n, {
         token: "euiBasicTable.selectThisRow",
         default: "Select row {index}",
@@ -809,7 +812,7 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "renderItemActionsCell",
-    value: function renderItemActionsCell(itemId, item, column, columnIndex, hasCustomActions) {
+    value: function renderItemActionsCell(itemId, item, column, columnIndex, rowIndex, hasCustomActions) {
       // Disable all actions if any row(s) are selected
       var allDisabled = this.state.selection.length > 0;
       var actualActions = column.actions.filter(function (action) {
@@ -846,7 +849,8 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
               actions: column.actions,
               actionsDisabled: allDisabled,
               itemId: itemId,
-              item: item
+              item: item,
+              displayedRowIndex: rowIndex
             });
           }
         });
@@ -856,7 +860,8 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         key: key,
         align: "right",
         textOnly: false,
-        hasActions: hasCustomActions ? 'custom' : true
+        hasActions: hasCustomActions ? 'custom' : true,
+        append: this.renderCopyChar(columnIndex)
       }, (0, _react2.jsx)(_expanded_item_actions.ExpandedItemActions, {
         actions: actualActions,
         actionsDisabled: allDisabled,
@@ -874,7 +879,7 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
       var contentRenderer = render || this.getRendererForDataType(dataType);
       var value = (0, _objects.get)(item, field);
       var content = contentRenderer(value, item);
-      return this.renderItemCell(item, column, key, content, setScopeRow);
+      return this.renderItemCell(item, column, columnIndex, key, content, setScopeRow);
     }
   }, {
     key: "renderItemComputedCell",
@@ -883,11 +888,12 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
       var key = "_computed_column_".concat(itemId, "_").concat(columnIndex);
       var contentRenderer = render || this.getRendererForDataType();
       var content = contentRenderer(item);
-      return this.renderItemCell(item, column, key, content, false);
+      return this.renderItemCell(item, column, columnIndex, key, content, false);
     }
   }, {
     key: "renderItemCell",
-    value: function renderItemCell(item, column, key, content, setScopeRow) {
+    value: function renderItemCell(item, column, columnIndex, key, content, setScopeRow) {
+      var _mobileOptions$render, _mobileOptions$header;
       var _ref11 = column,
         align = _ref11.align,
         render = _ref11.render,
@@ -911,10 +917,12 @@ var EuiBasicTable = exports.EuiBasicTable = /*#__PURE__*/function (_Component) {
         textOnly: textOnly || !render,
         setScopeRow: setScopeRow,
         mobileOptions: _objectSpread(_objectSpread({}, mobileOptions), {}, {
-          render: mobileOptions && mobileOptions.render && mobileOptions.render(item),
-          header: mobileOptions && mobileOptions.header === false ? false : name
+          render: mobileOptions === null || mobileOptions === void 0 || (_mobileOptions$render = mobileOptions.render) === null || _mobileOptions$render === void 0 ? void 0 : _mobileOptions$render.call(mobileOptions, item),
+          header: (_mobileOptions$header = mobileOptions === null || mobileOptions === void 0 ? void 0 : mobileOptions.header) !== null && _mobileOptions$header !== void 0 ? _mobileOptions$header : name
         })
-      }, cellProps, rest), content);
+      }, cellProps, rest, {
+        append: this.renderCopyChar(columnIndex)
+      }), content);
     }
   }, {
     key: "getRendererForDataType",

package/lib/components/basic_table/collapsed_item_actions.js

@@ -32,6 +32,7 @@ var CollapsedItemActions = exports.CollapsedItemActions = function CollapsedItem
     itemId = _ref.itemId,
     item = _ref.item,
     actionsDisabled = _ref.actionsDisabled,
+    displayedRowIndex = _ref.displayedRowIndex,
     className = _ref.className;
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
@@ -40,6 +41,11 @@ var CollapsedItemActions = exports.CollapsedItemActions = function CollapsedItem
   var closePopover = (0, _react.useCallback)(function () {
     return setPopoverOpen(false);
   }, []);
+  var allActionsTooltip = (0, _i18n.useEuiI18n)('euiCollapsedItemActions.allActionsTooltip', 'All actions');
+  var allActionsButtonAriaLabel = (0, _i18n.useEuiI18n)('euiCollapsedItemActions.allActions', 'All actions, row {index}', {
+    index: displayedRowIndex + 1
+  });
+  var allActionsButtonDisabledAriaLabel = (0, _i18n.useEuiI18n)('euiCollapsedItemActions.allActionsDisabled', 'Individual item actions are disabled when rows are being selected.');
   var controls = (0, _react.useMemo)(function () {
     return actions.reduce(function (controls, action, index) {
       var _action$available, _action$available2;
@@ -90,37 +96,24 @@ var CollapsedItemActions = exports.CollapsedItemActions = function CollapsedItem
       return controls;
     }, []);
   }, [actions, actionsDisabled, item, closePopover]);
-  var popoverButton = (0, _react2.jsx)(_i18n.EuiI18n, {
-    tokens: ['euiCollapsedItemActions.allActions', 'euiCollapsedItemActions.allActionsDisabled'],
-    defaults: ['All actions', 'Individual item actions are disabled when rows are being selected.']
-  }, function (_ref2) {
-    var _ref3 = _slicedToArray(_ref2, 2),
-      allActions = _ref3[0],
-      allActionsDisabled = _ref3[1];
-    return (0, _react2.jsx)(_button.EuiButtonIcon, {
-      className: className,
-      "aria-label": actionsDisabled ? allActionsDisabled : allActions,
-      title: actionsDisabled ? allActionsDisabled : undefined,
-      iconType: "boxesHorizontal",
-      color: "text",
-      isDisabled: actionsDisabled,
-      onClick: function onClick() {
-        return setPopoverOpen(function (isOpen) {
-          return !isOpen;
-        });
-      },
-      "data-test-subj": "euiCollapsedItemActionsButton"
-    });
-  });
-  var withTooltip = !actionsDisabled && (0, _react2.jsx)(_i18n.EuiI18n, {
-    token: "euiCollapsedItemActions.allActions",
-    default: "All actions"
-  }, function (allActions) {
-    return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
-      content: allActions,
-      delay: "long"
-    }, popoverButton);
+  var popoverButton = (0, _react2.jsx)(_button.EuiButtonIcon, {
+    className: className,
+    "aria-label": actionsDisabled ? allActionsButtonDisabledAriaLabel : allActionsButtonAriaLabel,
+    title: actionsDisabled ? allActionsButtonDisabledAriaLabel : undefined,
+    iconType: "boxesHorizontal",
+    color: "text",
+    isDisabled: actionsDisabled,
+    onClick: function onClick() {
+      return setPopoverOpen(function (isOpen) {
+        return !isOpen;
+      });
+    },
+    "data-test-subj": "euiCollapsedItemActionsButton"
   });
+  var withTooltip = !actionsDisabled && (0, _react2.jsx)(_tool_tip.EuiToolTip, {
+    content: allActionsTooltip,
+    delay: "long"
+  }, popoverButton);
   return (0, _react2.jsx)(_popover.EuiPopover, {
     className: className,
     id: "".concat(itemId, "-actions"),