@elastic/eui 77.1.3 → 77.1.5

package/optimize/es/components/code/code_block_copy.js

@@ -12,6 +12,7 @@ import { useInnerText } from '../inner_text';
 import { EuiCopy } from '../copy';
 import { useEuiI18n } from '../i18n';
 import { EuiButtonIcon } from '../button';
+import { NEW_LINE_REGEX_GLOBAL } from './utils';
 
 /**
  * Hook that returns copy-related state/logic/utils
@@ -26,7 +27,17 @@ export var useCopy = function useCopy(_ref) {
     innerTextRef = _useInnerText2[0],
     _innerText = _useInnerText2[1];
   var innerText = useMemo(function () {
-    return (_innerText === null || _innerText === void 0 ? void 0 : _innerText.replace(/[\r\n?]{2}|\n\n/g, '\n')) || '';
+    return (_innerText
+    // Normalize line terminations to match native JS format
+    === null || _innerText
+    // Normalize line terminations to match native JS format
+    === void 0 ? void 0 : _innerText
+    // Normalize line terminations to match native JS format
+    .replace(NEW_LINE_REGEX_GLOBAL, '\n')
+    // Reduce two or more consecutive new line characters to a single one
+    // This is needed primarily because of how syntax highlighting
+    // generated DOM elements affect `innerText` output.
+    .replace(/\n{2,}/g, '\n')) || '';
   }, [_innerText]);
   var textToCopy = isVirtualized ? "".concat(children) : innerText; // Virtualized code blocks do not have inner text
 
@@ -42,7 +53,8 @@ export var useCopy = function useCopy(_ref) {
         onClick: copy,
         iconType: "copyClipboard",
         color: "text",
-        "aria-label": copyAriaLabel
+        "aria-label": copyAriaLabel,
+        "data-test-subj": "euiCodeBlockCopy"
       });
     })) : null;
   }, [showCopyButton, textToCopy, copyAriaLabel]);

package/optimize/es/components/code/code_block_line.styles.js

@@ -44,7 +44,7 @@ export var euiCodeBlockLineStyles = function euiCodeBlockLineStyles(euiThemeCont
     },
     lineNumber: {
       euiCodeBlock__lineNumberWrapper: /*#__PURE__*/css("position:relative;flex-grow:0;flex-shrink:0;user-select:none;padding-inline-end:", euiTheme.size.m, ";box-sizing:content-box;;label:euiCodeBlock__lineNumberWrapper;"),
-      euiCodeBlock__lineNumber: /*#__PURE__*/css("color:", euiTheme.colors.subduedText, ";text-align:end;display:block;;label:euiCodeBlock__lineNumber;")
+      euiCodeBlock__lineNumber: /*#__PURE__*/css("color:", euiTheme.colors.subduedText, ";text-align:end;display:block;&::before{content:attr(data-line-number);};label:euiCodeBlock__lineNumber;")
     }
   };
 };

package/optimize/es/components/code/utils.js

@@ -21,6 +21,22 @@ import { euiCodeBlockLineStyles } from './code_block_line.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var SUPPORTED_LANGUAGES = listLanguages();
 export var DEFAULT_LANGUAGE = 'text';
+
+/**
+ * Platform-agnostic new line regex that safely matches all standard
+ * line termination conventions:
+ * - LF: Unix-based platforms and JS-native sources like text areas
+ * - CRLF: Windows
+ * - CR: Mac Classic; to support files saved a long time ago
+ */
+export var NEW_LINE_REGEX = /\r\n|\r|\n/;
+
+/**
+ * Platform-agnostic global new line regex that safely matches all standard
+ * line termination conventions.
+ * See [NEW_LINE_REGEX]{@link NEW_LINE_REGEX} for more details.
+ */
+export var NEW_LINE_REGEX_GLOBAL = new RegExp(NEW_LINE_REGEX, 'g');
 export var checkSupportedLanguage = function checkSupportedLanguage(language) {
   return SUPPORTED_LANGUAGES.includes(language) ? language : DEFAULT_LANGUAGE;
 };
@@ -46,14 +62,12 @@ export var nodeToHtml = function nodeToHtml(node, idx, nodes) {
     }), children && children.map(function (el, i) {
       return (
         // @ts-ignore - using a custom type here to handle JSX annotations
-        el.type === 'annotation' ?
-        // @ts-ignore - custom keys are passed by annotationElement below
-        ___EmotionJSX(EuiCodeBlockAnnotation, {
+        el.type === 'annotation' ? ___EmotionJSX(EuiCodeBlockAnnotation, {
+          className: "euiCodeBlock__lineAnnotation",
           lineNumber: el.lineNumber,
           children: el.annotation,
           key: i
-        }) // prettier-ignore
-        : nodeToHtml(el, i, nodes, depth + 1)
+        }) : nodeToHtml(el, i, nodes, depth + 1)
       );
     }));
   }
@@ -90,12 +104,12 @@ var addLineData = function addLineData(nodes, data) {
   return nodes.reduce(function (result, node) {
     var lineStart = data.lineNumber;
     if (node.type === 'text') {
-      if (!node.value.match(/\r\n?|\n/)) {
+      if (!node.value.match(NEW_LINE_REGEX)) {
         node.lineStart = lineStart;
         node.lineEnd = lineStart;
         result.push(node);
       } else {
-        var lines = node.value.split(/\r\n?|\n/);
+        var lines = node.value.split(NEW_LINE_REGEX);
         lines.forEach(function (line, i) {
           var num = i === 0 ? data.lineNumber : ++data.lineNumber;
           result.push({
@@ -169,11 +183,12 @@ function wrapLines(nodes, options, euiTheme) {
       var lineNumberWrapperElement = {
         type: 'element',
         tagName: 'span',
-        properties: (_properties = {
+        properties: {
           style: {
             inlineSize: width
-          }
-        }, _defineProperty(_properties, 'data-line-number', lineNumber), _defineProperty(_properties, "className", ['euiCodeBlock__lineNumber', lineNumberWrapperStyles]), _properties),
+          },
+          className: ['euiCodeBlock__lineNumberWrapper', lineNumberWrapperStyles]
+        },
         children: []
       };
 
@@ -182,13 +197,10 @@ function wrapLines(nodes, options, euiTheme) {
       var lineNumberElement = {
         type: 'element',
         tagName: 'span',
-        properties: _defineProperty({
-          className: [lineNumberStyles]
-        }, 'aria-hidden', true),
-        children: [{
-          type: 'text',
-          value: String(lineNumber)
-        }]
+        properties: (_properties = {
+          className: ['euiCodeBlock__lineNumber', lineNumberStyles]
+        }, _defineProperty(_properties, 'data-line-number', lineNumber), _defineProperty(_properties, 'aria-hidden', true), _properties),
+        children: []
       };
       lineNumberWrapperElement.children.push(lineNumberElement);
 

package/optimize/es/components/datagrid/body/data_grid_cell.js

@@ -7,7 +7,7 @@ import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["renderCellValue", "column", "setCellContentsRef", "rowHeightsOptions", "rowIndex", "colIndex", "ariaRowIndex", "rowHeightUtils", "isDefinedHeight"],
+var _excluded = ["renderCellValue", "column", "setCellContentsRef", "rowHeightsOptions", "rowIndex", "colIndex", "ariaRowIndex", "rowHeightUtils", "isDefinedHeight", "isFocused"],
   _excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager", "pagination"],
   _excluded3 = ["isExpandable", "style", "className", "data-test-subj"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
@@ -46,6 +46,7 @@ var EuiDataGridCellContent = /*#__PURE__*/memo(function (_ref) {
     ariaRowIndex = _ref.ariaRowIndex,
     rowHeightUtils = _ref.rowHeightUtils,
     isDefinedHeight = _ref.isDefinedHeight,
+    isFocused = _ref.isFocused,
     rest = _objectWithoutProperties(_ref, _excluded);
   // React is more permissible than the TS types indicate
   var CellElement = renderCellValue;
@@ -60,7 +61,9 @@ var EuiDataGridCellContent = /*#__PURE__*/memo(function (_ref) {
     rowIndex: rowIndex,
     colIndex: colIndex,
     schema: (column === null || column === void 0 ? void 0 : column.schema) || rest.columnType
-  }, rest))), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", null, '- ', ___EmotionJSX(EuiI18n, {
+  }, rest))), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
+    hidden: !isFocused
+  }, '- ', ___EmotionJSX(EuiI18n, {
     token: "euiDataGridCell.position",
     default: "{columnId}, column {col}, row {row}",
     values: {
@@ -526,6 +529,7 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         isExpandable: isExpandable,
         isExpanded: popoverIsOpen,
         isDetails: false,
+        isFocused: this.state.isFocused,
         setCellContentsRef: this.setCellContentsRef,
         rowHeightsOptions: rowHeightsOptions,
         rowHeightUtils: rowHeightUtils,

package/optimize/lib/components/code/code_block_annotations.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.EuiCodeBlockAnnotation = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _services = require("../../services");
 var _i18n = require("../i18n");
@@ -16,19 +17,13 @@ var _icon = require("../icon");
 var _button = require("../../themes/amsterdam/global_styling/mixins/button");
 var _code_block_annotations = require("./code_block_annotations.style");
 var _react2 = require("@emotion/react");
+var _excluded = ["lineNumber", "children"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
 var EuiCodeBlockAnnotation = function EuiCodeBlockAnnotation(_ref) {
   var lineNumber = _ref.lineNumber,
-    children = _ref.children;
+    children = _ref.children,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isOpen = _useState2[0],
@@ -43,7 +38,9 @@ var EuiCodeBlockAnnotation = function EuiCodeBlockAnnotation(_ref) {
   var buttonIconFocusStyle = (0, _button.useEuiButtonFocusCSS)();
   var cssButtonIconStyles = [styles.euiCodeBlockAnnotation__buttonIcon, buttonIconFocusStyle];
   var isDarkMode = colorMode === 'DARK';
-  return (0, _react2.jsx)(_popover.EuiPopover, {
+  return (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
+    css: styles.euiCodeBlockAnnotation
+  }, rest, {
     isOpen: isOpen,
     closePopover: function closePopover() {
       return setIsOpen(false);
@@ -60,14 +57,13 @@ var EuiCodeBlockAnnotation = function EuiCodeBlockAnnotation(_ref) {
       size: "s",
       color: isDarkMode ? euiTheme.colors.ink : 'ghost'
     })),
-    css: styles.euiCodeBlockAnnotation,
     zIndex: Number(euiTheme.levels.mask) + 1 // Ensure fullscreen annotation popovers sit above the mask
     ,
     anchorPosition: "downLeft",
     panelProps: {
       'data-test-subj': 'euiCodeBlockAnnotationPopover'
     }
-  }, children);
+  }), children);
 };
 exports.EuiCodeBlockAnnotation = EuiCodeBlockAnnotation;
 var AnnotationInfoIcon = function AnnotationInfoIcon(props) {

package/optimize/lib/components/code/code_block_copy.js

@@ -12,6 +12,7 @@ var _inner_text = require("../inner_text");
 var _copy = require("../copy");
 var _i18n = require("../i18n");
 var _button = require("../button");
+var _utils = require("./utils");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -35,7 +36,17 @@ var useCopy = function useCopy(_ref) {
     innerTextRef = _useInnerText2[0],
     _innerText = _useInnerText2[1];
   var innerText = (0, _react.useMemo)(function () {
-    return (_innerText === null || _innerText === void 0 ? void 0 : _innerText.replace(/[\r\n?]{2}|\n\n/g, '\n')) || '';
+    return (_innerText
+    // Normalize line terminations to match native JS format
+    === null || _innerText
+    // Normalize line terminations to match native JS format
+    === void 0 ? void 0 : _innerText
+    // Normalize line terminations to match native JS format
+    .replace(_utils.NEW_LINE_REGEX_GLOBAL, '\n')
+    // Reduce two or more consecutive new line characters to a single one
+    // This is needed primarily because of how syntax highlighting
+    // generated DOM elements affect `innerText` output.
+    .replace(/\n{2,}/g, '\n')) || '';
   }, [_innerText]);
   var textToCopy = isVirtualized ? "".concat(children) : innerText; // Virtualized code blocks do not have inner text
 
@@ -51,7 +62,8 @@ var useCopy = function useCopy(_ref) {
         onClick: copy,
         iconType: "copyClipboard",
         color: "text",
-        "aria-label": copyAriaLabel
+        "aria-label": copyAriaLabel,
+        "data-test-subj": "euiCodeBlockCopy"
       });
     })) : null;
   }, [showCopyButton, textToCopy, copyAriaLabel]);

package/optimize/lib/components/code/code_block_line.styles.js

@@ -35,7 +35,7 @@ var euiCodeBlockLineStyles = function euiCodeBlockLineStyles(euiThemeContext) {
     },
     lineNumber: {
       euiCodeBlock__lineNumberWrapper: /*#__PURE__*/(0, _css.css)("position:relative;flex-grow:0;flex-shrink:0;user-select:none;padding-inline-end:", euiTheme.size.m, ";box-sizing:content-box;;label:euiCodeBlock__lineNumberWrapper;"),
-      euiCodeBlock__lineNumber: /*#__PURE__*/(0, _css.css)("color:", euiTheme.colors.subduedText, ";text-align:end;display:block;;label:euiCodeBlock__lineNumber;")
+      euiCodeBlock__lineNumber: /*#__PURE__*/(0, _css.css)("color:", euiTheme.colors.subduedText, ";text-align:end;display:block;&::before{content:attr(data-line-number);};label:euiCodeBlock__lineNumber;")
     }
   };
 };

package/optimize/lib/components/code/utils.js

@@ -5,7 +5,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.parseLineRanges = exports.nodeToHtml = exports.isAstElement = exports.highlightByLine = exports.getHtmlContent = exports.checkSupportedLanguage = exports.SUPPORTED_LANGUAGES = exports.DEFAULT_LANGUAGE = void 0;
+exports.parseLineRanges = exports.nodeToHtml = exports.isAstElement = exports.highlightByLine = exports.getHtmlContent = exports.checkSupportedLanguage = exports.SUPPORTED_LANGUAGES = exports.NEW_LINE_REGEX_GLOBAL = exports.NEW_LINE_REGEX = exports.DEFAULT_LANGUAGE = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _refractor = require("refractor");
@@ -20,7 +20,25 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var SUPPORTED_LANGUAGES = (0, _refractor.listLanguages)();
 exports.SUPPORTED_LANGUAGES = SUPPORTED_LANGUAGES;
 var DEFAULT_LANGUAGE = 'text';
+
+/**
+ * Platform-agnostic new line regex that safely matches all standard
+ * line termination conventions:
+ * - LF: Unix-based platforms and JS-native sources like text areas
+ * - CRLF: Windows
+ * - CR: Mac Classic; to support files saved a long time ago
+ */
 exports.DEFAULT_LANGUAGE = DEFAULT_LANGUAGE;
+var NEW_LINE_REGEX = /\r\n|\r|\n/;
+
+/**
+ * Platform-agnostic global new line regex that safely matches all standard
+ * line termination conventions.
+ * See [NEW_LINE_REGEX]{@link NEW_LINE_REGEX} for more details.
+ */
+exports.NEW_LINE_REGEX = NEW_LINE_REGEX;
+var NEW_LINE_REGEX_GLOBAL = new RegExp(NEW_LINE_REGEX, 'g');
+exports.NEW_LINE_REGEX_GLOBAL = NEW_LINE_REGEX_GLOBAL;
 var checkSupportedLanguage = function checkSupportedLanguage(language) {
   return SUPPORTED_LANGUAGES.includes(language) ? language : DEFAULT_LANGUAGE;
 };
@@ -49,14 +67,12 @@ var nodeToHtml = function nodeToHtml(node, idx, nodes) {
     }), children && children.map(function (el, i) {
       return (
         // @ts-ignore - using a custom type here to handle JSX annotations
-        el.type === 'annotation' ?
-        // @ts-ignore - custom keys are passed by annotationElement below
-        (0, _react2.jsx)(_code_block_annotations.EuiCodeBlockAnnotation, {
+        el.type === 'annotation' ? (0, _react2.jsx)(_code_block_annotations.EuiCodeBlockAnnotation, {
+          className: "euiCodeBlock__lineAnnotation",
           lineNumber: el.lineNumber,
           children: el.annotation,
           key: i
-        }) // prettier-ignore
-        : nodeToHtml(el, i, nodes, depth + 1)
+        }) : nodeToHtml(el, i, nodes, depth + 1)
       );
     }));
   }
@@ -94,12 +110,12 @@ var addLineData = function addLineData(nodes, data) {
   return nodes.reduce(function (result, node) {
     var lineStart = data.lineNumber;
     if (node.type === 'text') {
-      if (!node.value.match(/\r\n?|\n/)) {
+      if (!node.value.match(NEW_LINE_REGEX)) {
         node.lineStart = lineStart;
         node.lineEnd = lineStart;
         result.push(node);
       } else {
-        var lines = node.value.split(/\r\n?|\n/);
+        var lines = node.value.split(NEW_LINE_REGEX);
         lines.forEach(function (line, i) {
           var num = i === 0 ? data.lineNumber : ++data.lineNumber;
           result.push({
@@ -173,11 +189,12 @@ function wrapLines(nodes, options, euiTheme) {
       var lineNumberWrapperElement = {
         type: 'element',
         tagName: 'span',
-        properties: (_properties = {
+        properties: {
           style: {
             inlineSize: width
-          }
-        }, (0, _defineProperty2.default)(_properties, 'data-line-number', lineNumber), (0, _defineProperty2.default)(_properties, "className", ['euiCodeBlock__lineNumber', lineNumberWrapperStyles]), _properties),
+          },
+          className: ['euiCodeBlock__lineNumberWrapper', lineNumberWrapperStyles]
+        },
         children: []
       };
 
@@ -186,13 +203,10 @@ function wrapLines(nodes, options, euiTheme) {
       var lineNumberElement = {
         type: 'element',
         tagName: 'span',
-        properties: (0, _defineProperty2.default)({
-          className: [lineNumberStyles]
-        }, 'aria-hidden', true),
-        children: [{
-          type: 'text',
-          value: String(lineNumber)
-        }]
+        properties: (_properties = {
+          className: ['euiCodeBlock__lineNumber', lineNumberStyles]
+        }, (0, _defineProperty2.default)(_properties, 'data-line-number', lineNumber), (0, _defineProperty2.default)(_properties, 'aria-hidden', true), _properties),
+        children: []
       };
       lineNumberWrapperElement.children.push(lineNumberElement);
 

package/optimize/lib/components/datagrid/body/data_grid_cell.js

@@ -29,7 +29,7 @@ var _data_grid_cell_actions = require("./data_grid_cell_actions");
 var _data_grid_cell_popover = require("./data_grid_cell_popover");
 var _utils = require("../../../utils");
 var _react2 = require("@emotion/react");
-var _excluded = ["renderCellValue", "column", "setCellContentsRef", "rowHeightsOptions", "rowIndex", "colIndex", "ariaRowIndex", "rowHeightUtils", "isDefinedHeight"],
+var _excluded = ["renderCellValue", "column", "setCellContentsRef", "rowHeightsOptions", "rowIndex", "colIndex", "ariaRowIndex", "rowHeightUtils", "isDefinedHeight", "isFocused"],
   _excluded2 = ["width", "popoverContext", "interactiveCellId", "columnType", "className", "column", "style", "rowHeightUtils", "rowHeightsOptions", "rowManager", "pagination"],
   _excluded3 = ["isExpandable", "style", "className", "data-test-subj"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -48,6 +48,7 @@ var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     ariaRowIndex = _ref.ariaRowIndex,
     rowHeightUtils = _ref.rowHeightUtils,
     isDefinedHeight = _ref.isDefinedHeight,
+    isFocused = _ref.isFocused,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // React is more permissible than the TS types indicate
   var CellElement = renderCellValue;
@@ -62,7 +63,9 @@ var EuiDataGridCellContent = /*#__PURE__*/(0, _react.memo)(function (_ref) {
     rowIndex: rowIndex,
     colIndex: colIndex,
     schema: (column === null || column === void 0 ? void 0 : column.schema) || rest.columnType
-  }, rest))), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", null, '- ', (0, _react2.jsx)(_i18n.EuiI18n, {
+  }, rest))), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", {
+    hidden: !isFocused
+  }, '- ', (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiDataGridCell.position",
     default: "{columnId}, column {col}, row {row}",
     values: {
@@ -528,6 +531,7 @@ var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         isExpandable: isExpandable,
         isExpanded: popoverIsOpen,
         isDetails: false,
+        isFocused: this.state.isFocused,
         setCellContentsRef: this.setCellContentsRef,
         rowHeightsOptions: rowHeightsOptions,
         rowHeightUtils: rowHeightUtils,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "77.1.3",
+  "version": "77.1.5",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

package/src/components/table/_table.scss

@@ -227,22 +227,20 @@
 }
 
 // Animate expanded row must be on the contents div inside
-
+// This adds a quick pop in animation, but does not attempt to animate to height auto
+// - down that road dragons lie. @see https://github.com/elastic/eui/issues/6770
 .euiTableRow-isExpandedRow .euiTableCellContent {
-  overflow: hidden;
-  animation: $euiAnimSpeedNormal $euiAnimSlightResistance 1 normal forwards growExpandedRow;
+  animation: $euiAnimSpeedFast $euiAnimSlightResistance 1 normal none growExpandedRow;
 }
 
 @keyframes growExpandedRow {
   0% {
-    max-height: 0;
-  }
-
-  99% {
-    max-height: 100vh;
+    opacity: 0;
+    transform: translateY(-$euiSizeM);
   }
 
   100% {
-    max-height: unset;
+    opacity: 1;
+    transform: translateY(0);
   }
 }

package/test-env/components/code/code_block_annotations.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.EuiCodeBlockAnnotation = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _services = require("../../services");
@@ -17,19 +18,13 @@ var _icon = require("../icon");
 var _button = require("../../themes/amsterdam/global_styling/mixins/button");
 var _code_block_annotations = require("./code_block_annotations.style");
 var _react2 = require("@emotion/react");
+var _excluded = ["lineNumber", "children"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
 var EuiCodeBlockAnnotation = function EuiCodeBlockAnnotation(_ref) {
   var lineNumber = _ref.lineNumber,
-    children = _ref.children;
+    children = _ref.children,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isOpen = _useState2[0],
@@ -44,7 +39,9 @@ var EuiCodeBlockAnnotation = function EuiCodeBlockAnnotation(_ref) {
   var buttonIconFocusStyle = (0, _button.useEuiButtonFocusCSS)();
   var cssButtonIconStyles = [styles.euiCodeBlockAnnotation__buttonIcon, buttonIconFocusStyle];
   var isDarkMode = colorMode === 'DARK';
-  return (0, _react2.jsx)(_popover.EuiPopover, {
+  return (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
+    css: styles.euiCodeBlockAnnotation
+  }, rest, {
     isOpen: isOpen,
     closePopover: function closePopover() {
       return setIsOpen(false);
@@ -61,17 +58,20 @@ var EuiCodeBlockAnnotation = function EuiCodeBlockAnnotation(_ref) {
       size: "s",
       color: isDarkMode ? euiTheme.colors.ink : 'ghost'
     })),
-    css: styles.euiCodeBlockAnnotation,
     zIndex: Number(euiTheme.levels.mask) + 1 // Ensure fullscreen annotation popovers sit above the mask
     ,
     anchorPosition: "downLeft",
     panelProps: {
       'data-test-subj': 'euiCodeBlockAnnotationPopover'
     }
-  }, children);
+  }), children);
 };
 exports.EuiCodeBlockAnnotation = EuiCodeBlockAnnotation;
 EuiCodeBlockAnnotation.propTypes = {
+  className: _propTypes.default.string,
+  "aria-label": _propTypes.default.string,
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
   lineNumber: _propTypes.default.number.isRequired
 };
 var AnnotationInfoIcon = function AnnotationInfoIcon(props) {

package/test-env/components/code/code_block_copy.js

@@ -12,6 +12,7 @@ var _inner_text = require("../inner_text");
 var _copy = require("../copy");
 var _i18n = require("../i18n");
 var _button = require("../button");
+var _utils = require("./utils");
 var _react2 = require("@emotion/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -35,7 +36,17 @@ var useCopy = function useCopy(_ref) {
     innerTextRef = _useInnerText2[0],
     _innerText = _useInnerText2[1];
   var innerText = (0, _react.useMemo)(function () {
-    return (_innerText === null || _innerText === void 0 ? void 0 : _innerText.replace(/[\r\n?]{2}|\n\n/g, '\n')) || '';
+    return (_innerText
+    // Normalize line terminations to match native JS format
+    === null || _innerText
+    // Normalize line terminations to match native JS format
+    === void 0 ? void 0 : _innerText
+    // Normalize line terminations to match native JS format
+    .replace(_utils.NEW_LINE_REGEX_GLOBAL, '\n')
+    // Reduce two or more consecutive new line characters to a single one
+    // This is needed primarily because of how syntax highlighting
+    // generated DOM elements affect `innerText` output.
+    .replace(/\n{2,}/g, '\n')) || '';
   }, [_innerText]);
   var textToCopy = isVirtualized ? "".concat(children) : innerText; // Virtualized code blocks do not have inner text
 
@@ -51,7 +62,8 @@ var useCopy = function useCopy(_ref) {
         onClick: copy,
         iconType: "copyClipboard",
         color: "text",
-        "aria-label": copyAriaLabel
+        "aria-label": copyAriaLabel,
+        "data-test-subj": "euiCodeBlockCopy"
       });
     })) : null;
   }, [showCopyButton, textToCopy, copyAriaLabel]);

package/test-env/components/code/code_block_line.styles.js

@@ -35,7 +35,7 @@ var euiCodeBlockLineStyles = function euiCodeBlockLineStyles(euiThemeContext) {
     },
     lineNumber: {
       euiCodeBlock__lineNumberWrapper: /*#__PURE__*/(0, _css.css)("position:relative;flex-grow:0;flex-shrink:0;user-select:none;padding-inline-end:", euiTheme.size.m, ";box-sizing:content-box;;label:euiCodeBlock__lineNumberWrapper;"),
-      euiCodeBlock__lineNumber: /*#__PURE__*/(0, _css.css)("color:", euiTheme.colors.subduedText, ";text-align:end;display:block;;label:euiCodeBlock__lineNumber;")
+      euiCodeBlock__lineNumber: /*#__PURE__*/(0, _css.css)("color:", euiTheme.colors.subduedText, ";text-align:end;display:block;&::before{content:attr(data-line-number);};label:euiCodeBlock__lineNumber;")
     }
   };
 };