@elastic/eui 94.1.0 → 94.2.1

package/optimize/lib/components/selectable/selectable_list/selectable_list.js

@@ -1,11 +1,12 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiSelectableList = void 0;
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
@@ -26,9 +27,9 @@ var _selectable_list_item = require("./selectable_list_item");
 var _react2 = require("@emotion/react");
 var _excluded = ["data"],
   _excluded2 = ["label", "isGroupLabel", "checked", "disabled", "prepend", "append", "ref", "key", "searchableLabel", "data", "truncationProps"],
-  _excluded3 = ["className", "options", "searchValue", "onOptionClick", "renderOption", "height", "windowProps", "rowHeight", "activeOptionIndex", "makeOptionId", "showIcons", "singleSelection", "visibleOptions", "allowExclusions", "bordered", "paddingSize", "searchable", "onFocusBadge", "listId", "setActiveOptionIndex", "aria-label", "aria-labelledby", "aria-describedby", "role", "isVirtualized", "textWrap", "truncationProps"];
+  _excluded3 = ["className", "options", "searchValue", "onOptionClick", "renderOption", "height", "windowProps", "rowHeight", "activeOptionIndex", "makeOptionId", "showIcons", "singleSelection", "visibleOptions", "allowExclusions", "bordered", "paddingSize", "searchable", "onFocusBadge", "listId", "setActiveOptionIndex", "aria-label", "aria-labelledby", "aria-describedby", "role", "isPreFiltered", "isVirtualized", "textWrap", "truncationProps"];
 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; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(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; }
 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; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
@@ -135,6 +136,7 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         setActiveOptionIndex = _this$props2.setActiveOptionIndex,
         searchable = _this$props2.searchable,
         searchValue = _this$props2.searchValue,
+        isPreFiltered = _this$props2.isPreFiltered,
         isVirtualized = _this$props2.isVirtualized;
       if (isGroupLabel) {
         return (0, _react2.jsx)("li", (0, _extends2.default)({
@@ -147,13 +149,17 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
       var id = makeOptionId(index);
       var isFocused = activeOptionIndex === index;
 
+      // Search highlighting
+      var hasSearch = !!searchValue;
+      var highlightSearch = hasSearch && ((0, _typeof2.default)(isPreFiltered) === 'object' ? isPreFiltered.highlightSearch !== false : true);
+
       // Text wrapping
       var canWrap = !isVirtualized;
       var _textWrap = (_option$textWrap = option.textWrap) !== null && _option$textWrap !== void 0 ? _option$textWrap : _this.props.textWrap;
       var textWrap = canWrap ? _textWrap : 'truncate';
 
       // Truncation config (if any). If none, CSS truncation is used
-      var truncationProps = textWrap === 'truncate' ? _this.getTruncationProps(option, isFocused) : undefined;
+      var truncationProps = textWrap === 'truncate' ? _this.getTruncationProps(option, highlightSearch, isFocused) : undefined;
       return (0, _react2.jsx)(_selectable_list_item.EuiSelectableListItem, (0, _extends2.default)({
         key: id,
         id: id,
@@ -181,7 +187,7 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         searchable: searchable,
         textWrap: textWrap
       }, optionRest), renderOption ? renderOption( // @ts-ignore complex
-      _objectSpread(_objectSpread({}, _option), optionData), searchValue) : searchValue ? _this.renderSearchedText(label, truncationProps) : truncationProps ? _this.renderTruncatedText(label, truncationProps) : label);
+      _objectSpread(_objectSpread({}, _option), optionData), searchValue) : highlightSearch ? _this.renderSearchedText(label, truncationProps) : truncationProps ? _this.renderTruncatedText(label, truncationProps) : label);
     }, _reactWindow.areEqual));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderVirtualizedList", function () {
       if (!_this.props.isVirtualized) return null;
@@ -279,12 +285,12 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         }
       });
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getTruncationProps", function (option, isFocused) {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getTruncationProps", function (option, highlightSearch, isFocused) {
       // Individual truncation settings should override component-wide settings
       var truncationProps = _objectSpread(_objectSpread({}, _this.props.truncationProps), option.truncationProps);
 
       // If we're not actually using EuiTextTruncate, no need to continue
-      var hasComplexTruncation = _this.props.searchValue || Object.keys(truncationProps).length > 0;
+      var hasComplexTruncation = highlightSearch || Object.keys(truncationProps).length > 0;
       if (!hasComplexTruncation) return undefined;
 
       // Determine whether we can use the optimized default option width
@@ -486,6 +492,7 @@ var EuiSelectableList = /*#__PURE__*/function (_Component) {
         ariaLabelledby = _this$props10['aria-labelledby'],
         ariaDescribedby = _this$props10['aria-describedby'],
         role = _this$props10.role,
+        isPreFiltered = _this$props10.isPreFiltered,
         isVirtualized = _this$props10.isVirtualized,
         textWrap = _this$props10.textWrap,
         truncationProps = _this$props10.truncationProps,

package/optimize/lib/components/selectable/selectable_search/selectable_search.js

@@ -13,7 +13,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _form = require("../../form");
 var _matching_options = require("../matching_options");
 var _react2 = require("@emotion/react");
-var _excluded = ["onChange", "options", "value", "placeholder", "isPreFiltered", "listId", "className"];
+var _excluded = ["onChange", "options", "value", "placeholder", "isPreFiltered", "listId", "className", "optionMatcher"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -31,12 +31,18 @@ var EuiSelectableSearch = function EuiSelectableSearch(_ref) {
     isPreFiltered = _ref.isPreFiltered,
     listId = _ref.listId,
     className = _ref.className,
+    optionMatcher = _ref.optionMatcher,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var onChange = (0, _react.useCallback)(function (e) {
     var searchValue = e.target.value;
-    var matchingOptions = (0, _matching_options.getMatchingOptions)(options, searchValue, isPreFiltered);
+    var matchingOptions = (0, _matching_options.getMatchingOptions)({
+      options: options,
+      searchValue: searchValue,
+      isPreFiltered: isPreFiltered,
+      optionMatcher: optionMatcher
+    });
     onChangeCallback(searchValue, matchingOptions);
-  }, [options, isPreFiltered, onChangeCallback]);
+  }, [options, isPreFiltered, onChangeCallback, optionMatcher]);
   var classes = (0, _classnames.default)('euiSelectableSearch', className);
   var ariaPropsIfListIsPresent = listId ? {
     role: 'combobox',

package/optimize/lib/components/steps/step_horizontal.js

@@ -82,6 +82,7 @@ var EuiStepHorizontal = function EuiStepHorizontal(_ref) {
     if (!disabled) onClick(event);
   };
   return (0, _react2.jsx)("button", (0, _extends2.default)({
+    "aria-disabled": status === 'disabled' ? true : undefined,
     className: classes,
     title: titleAttr,
     onClick: onStepClick,

package/optimize/lib/components/table/table_row_cell.styles.js

@@ -56,7 +56,7 @@ var euiTableRowCellStyles = function euiTableRowCellStyles(euiThemeContext) {
   var hasIcons = "line-height: 1;";
   return {
     euiTableRowCell: /*#__PURE__*/(0, _react.css)("color:", euiTheme.colors.text, ";;label:euiTableRowCell;"),
-    rowHeader: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.regular, ";;label:rowHeader;"),
+    rowHeader: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.regular, ";", (0, _global_styling.logicalTextAlignCSS)('left'), ";;label:rowHeader;"),
     isExpander: /*#__PURE__*/(0, _react.css)(hasIcons, ";;label:isExpander;"),
     hasActions: /*#__PURE__*/(0, _react.css)(hasIcons, ";;label:hasActions;"),
     // valign

package/optimize/lib/components/tabs/tabbed_content/tabbed_content.js

@@ -97,7 +97,7 @@ var EuiTabbedContent = /*#__PURE__*/function (_Component) {
     // Only track selection state if it's not controlled externally.
     var selectedTabId;
     if (!_selectedTab) {
-      selectedTabId = initialSelectedTab && initialSelectedTab.id || tabs[0].id;
+      selectedTabId = (initialSelectedTab === null || initialSelectedTab === void 0 ? void 0 : initialSelectedTab.id) || tabs[0].id;
     }
     _this.state = {
       selectedTabId: selectedTabId,
@@ -123,10 +123,10 @@ var EuiTabbedContent = /*#__PURE__*/function (_Component) {
       // Allow the consumer to control tab selection.
       var selectedTab = externalSelectedTab || tabs.find(function (tab) {
         return tab.id === _this2.state.selectedTabId;
-      });
-      var _ref = selectedTab,
-        selectedTabContent = _ref.content,
-        selectedTabId = _ref.id;
+      }) || tabs[0]; // Fall back to the first tab if a selected tab can't be found
+
+      var selectedTabContent = selectedTab.content,
+        selectedTabId = selectedTab.id;
       return (0, _react2.jsx)("div", (0, _extends2.default)({
         className: className
       }, rest), (0, _react2.jsx)(_tabs.EuiTabs, {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "94.1.0",
+  "version": "94.2.1",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -34,6 +34,7 @@
     "test-cypress": "node ./scripts/test-cypress",
     "test-cypress-dev": "yarn test-cypress --dev",
     "test-cypress-a11y": "yarn test-cypress --a11y",
+    "test-visual-regression": "node ./scripts/test-visual-regression.js",
     "combine-test-coverage": "sh ./scripts/combine-coverage.sh",
     "yo-component": "yo ./generator-eui/app/component.js",
     "yo-doc": "yo ./generator-eui/app/documentation.js",
@@ -58,7 +59,7 @@
     "test-staged"
   ],
   "dependencies": {
-    "@hello-pangea/dnd": "^16.3.0",
+    "@hello-pangea/dnd": "^16.6.0",
     "@types/lodash": "^4.14.202",
     "@types/numeral": "^2.0.5",
     "@types/react-window": "^1.8.8",
@@ -83,7 +84,7 @@
     "remark-breaks": "^2.0.2",
     "remark-emoji": "^2.1.0",
     "remark-parse-no-trim": "^8.0.4",
-    "remark-rehype": "^8.0.0",
+    "remark-rehype": "^8.1.0",
     "tabbable": "^5.3.3",
     "text-diff": "^1.0.1",
     "unified": "^9.2.2",
@@ -118,13 +119,14 @@
     "@emotion/react": "^11.11.0",
     "@faker-js/faker": "^8.0.2",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3",
-    "@storybook/addon-essentials": "^7.5.2",
-    "@storybook/addon-interactions": "^7.5.2",
-    "@storybook/addon-links": "^7.5.2",
-    "@storybook/blocks": "^7.5.2",
-    "@storybook/react": "^7.5.2",
-    "@storybook/react-webpack5": "^7.5.2",
-    "@storybook/testing-library": "^0.2.2",
+    "@storybook/addon-essentials": "^8.0.5",
+    "@storybook/addon-interactions": "^8.0.5",
+    "@storybook/addon-links": "^8.0.5",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/blocks": "^8.0.5",
+    "@storybook/react": "^8.0.5",
+    "@storybook/react-webpack5": "^8.0.5",
+    "@storybook/test": "^8.0.5",
     "@svgr/core": "8.0.0",
     "@svgr/plugin-jsx": "^8.0.1",
     "@svgr/plugin-svgo": "^8.0.1",
@@ -151,7 +153,7 @@
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
     "assert": "^2.0.0",
     "autoprefixer": "^9.8.6",
-    "axe-core": "^4.8.2",
+    "axe-core": "^4.9.0",
     "babel-jest": "^24.1.0",
     "babel-loader": "^9.1.2",
     "babel-plugin-add-module-exports": "^1.0.4",
@@ -188,7 +190,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-storybook": "^0.8.0",
     "expose-gc": "^1.0.0",
     "file-loader": "^6.1.0",
     "findup": "^0.1.5",
@@ -200,6 +202,7 @@
     "inquirer": "^9.1.4",
     "jest": "^24.1.0",
     "jest-cli": "^24.1.0",
+    "loki": "^0.35.0",
     "moment": "^2.27.0",
     "moment-timezone": "^0.5.31",
     "path": "^0.12.7",
@@ -233,7 +236,7 @@
     "sass-loader": "^13.2.0",
     "shelljs": "^0.8.4",
     "start-server-and-test": "^1.11.3",
-    "storybook": "^7.5.2",
+    "storybook": "^8.0.5",
     "style-loader": "^3.3.1",
     "stylelint": "^15.7.0",
     "stylelint-config-prettier-scss": "^1.0.0",

package/src/components/color_picker/_color_picker.scss

@@ -3,22 +3,6 @@
   width: $euiColorPickerWidth;
 }
 
-.euiColorPicker__popoverAnchor {
-  // Nested needed for specificity of overriding .euiFieldText
-  .euiColorPicker__input {
-    @include euiFormControlWithIcon($isIconOptional: false, $side: 'right');
-
-    &[class*='--compressed'] {
-      @include euiFormControlWithIcon($isIconOptional: false, $side: 'right', $compressed: true);
-    }
-
-    + .euiFormControlLayoutIcons {
-      // Override :disabled state, which obscures the selected color
-      color: inherit;
-    }
-  }
-}
-
 .euiColorPicker__swatches {
   display: flex;
   flex-wrap: wrap;

package/src/components/date_picker/super_date_picker/date_popover/_date_popover_content.scss

@@ -2,6 +2,10 @@
 .euiDatePopoverContent .react-datepicker {
   width: $euiFormMaxWidth;
   max-width: 100%;
+
+  @include euiBreakpoint('xs') {
+    width: $euiDatePickerCalendarWidth;
+  }
 }
 
 .euiDatePopoverContent__padded {
@@ -11,10 +15,3 @@
 .euiDatePopoverContent__padded--large {
   padding: $euiSize;
 }
-
-@include euiBreakpoint('xs') {
-  .euiDatePopoverContent {
-    // Small screens drop the time selector
-    width: $euiDatePickerCalendarWidth;
-  }
-}

package/test-env/components/accordion/accordion.js

@@ -56,17 +56,6 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         var _this$props$onToggle, _this$props;
         var nextState = !_this.isOpen;
         (_this$props$onToggle = (_this$props = _this.props).onToggle) === null || _this$props$onToggle === void 0 ? void 0 : _this$props$onToggle.call(_this$props, nextState);
-
-        // If the accordion should theoretically be opened, wait a tick (allows
-        // consumer state to update) and attempt to focus the child content.
-        // NOTE: Even if the accordion does not actually open, this is fine -
-        // the `inert` property on the hidden children will prevent focus
-        if (nextState === true) {
-          requestAnimationFrame(function () {
-            var _this$accordionChildr;
-            (_this$accordionChildr = _this.accordionChildrenEl) === null || _this$accordionChildr === void 0 ? void 0 : _this$accordionChildr.focus();
-          });
-        }
       } else {
         _this.setState(function (prevState) {
           return {
@@ -75,21 +64,9 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         }, function () {
           var _this$props$onToggle2, _this$props2;
           (_this$props$onToggle2 = (_this$props2 = _this.props).onToggle) === null || _this$props$onToggle2 === void 0 ? void 0 : _this$props$onToggle2.call(_this$props2, _this.state.isOpen);
-
-          // If the accordion is open, programmatically move focus
-          // from the accordion trigger to the child content
-          if (_this.state.isOpen) {
-            var _this$accordionChildr2;
-            (_this$accordionChildr2 = _this.accordionChildrenEl) === null || _this$accordionChildr2 === void 0 ? void 0 : _this$accordionChildr2.focus();
-          }
         });
       }
     });
-    // Used to focus the accordion children on user trigger click only (vs controlled/programmatic open)
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "accordionChildrenEl", null);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "accordionChildrenRef", function (node) {
-      _this.accordionChildrenEl = node;
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "generatedId", (0, _services.htmlIdGenerator)()());
     return _this;
   }
@@ -158,8 +135,7 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         paddingSize: paddingSize,
         isLoading: isLoading,
         isLoadingMessage: isLoadingMessage,
-        isOpen: this.isOpen,
-        accordionChildrenRef: this.accordionChildrenRef
+        isOpen: this.isOpen
       }, children));
     }
   }]);

package/test-env/components/accordion/accordion_children/accordion_children.js

@@ -17,7 +17,7 @@ var _resize_observer = require("../../observer/resize_observer");
 var _accordion_children_loading = require("./accordion_children_loading");
 var _accordion_children = require("./accordion_children.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["role", "children", "accordionChildrenRef", "paddingSize", "isLoading", "isLoadingMessage", "isOpen"];
+var _excluded = ["role", "children", "paddingSize", "isLoading", "isLoadingMessage", "isOpen"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -30,7 +30,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var EuiAccordionChildren = function EuiAccordionChildren(_ref) {
   var role = _ref.role,
     children = _ref.children,
-    accordionChildrenRef = _ref.accordionChildrenRef,
     paddingSize = _ref.paddingSize,
     isLoading = _ref.isLoading,
     isLoadingMessage = _ref.isLoadingMessage,
@@ -73,9 +72,7 @@ var EuiAccordionChildren = function EuiAccordionChildren(_ref) {
     className: "euiAccordion__childWrapper",
     css: wrapperCssStyles,
     style: heightInlineStyle,
-    ref: accordionChildrenRef,
-    role: role,
-    tabIndex: -1
+    role: role
     // @ts-expect-error - inert property not yet available in React TS defs. TODO: Remove this once https://github.com/DefinitelyTyped/DefinitelyTyped/pull/60822 is merged
     ,
     inert: !isOpen ? '' : undefined // Can't pass a boolean currently, Jest throws errors
@@ -93,6 +90,5 @@ var EuiAccordionChildren = function EuiAccordionChildren(_ref) {
 };
 exports.EuiAccordionChildren = EuiAccordionChildren;
 EuiAccordionChildren.propTypes = {
-  isOpen: _propTypes.default.bool.isRequired,
-  accordionChildrenRef: _propTypes.default.any.isRequired
+  isOpen: _propTypes.default.bool.isRequired
 };

package/test-env/components/basic_table/basic_table.js

@@ -635,7 +635,7 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
         content = items.map(function (item, index) {
           // if there's pagination the item's index must be adjusted to the where it is in the whole dataset
           var tableItemIndex = hasPagination(_this4.props) && _this4.pageSize > 0 ? _this4.props.pagination.pageIndex * _this4.pageSize + index : index;
-          return _this4.renderItemRow(item, tableItemIndex);
+          return _this4.renderItemRow(item, tableItemIndex, index);
         });
       }
       return (0, _react2.jsx)(_services.RenderWithEuiTheme, null, function (theme) {
@@ -677,7 +677,7 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "renderItemRow",
-    value: function renderItemRow(item, rowIndex) {
+    value: function renderItemRow(item, rowIndex, displayedRowIndex) {
       var _this5 = this;
       var _this$props10 = this.props,
         columns = _this$props10.columns,
@@ -692,7 +692,7 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
       });
       var rowSelectionDisabled = false;
       if (selection) {
-        var _this$renderItemSelec = this.renderItemSelectionCell(itemId, item, selected),
+        var _this$renderItemSelec = this.renderItemSelectionCell(itemId, item, selected, displayedRowIndex),
           _this$renderItemSelec2 = (0, _slicedToArray2.default)(_this$renderItemSelec, 2),
           checkboxCell = _this$renderItemSelec2[0],
           isDisabled = _this$renderItemSelec2[1];
@@ -753,7 +753,7 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
     }
   }, {
     key: "renderItemSelectionCell",
-    value: function renderItemSelectionCell(itemId, item, selected) {
+    value: function renderItemSelectionCell(itemId, item, selected, displayedRowIndex) {
       var _this6 = this;
       var selection = this.props.selection;
       var key = "_selection_column_".concat(itemId);
@@ -777,7 +777,10 @@ var EuiBasicTable = /*#__PURE__*/function (_Component) {
         key: key
       }, (0, _react2.jsx)(_i18n.EuiI18n, {
         token: "euiBasicTable.selectThisRow",
-        default: "Select this row"
+        default: "Select row {index}",
+        values: {
+          index: displayedRowIndex + 1
+        }
       }, function (selectThisRow) {
         return (0, _react2.jsx)(_form.EuiCheckbox, {
           id: "".concat(_this6.tableId).concat(key, "-checkbox"),

package/test-env/components/breadcrumbs/_breadcrumb_content.js

@@ -266,7 +266,7 @@ EuiBreadcrumbContent.propTypes = {
     /**
        * Minimum distance between the popover and the bounding container;
        * Pass an array of 4 values to adjust each side differently: `[top, right, bottom, left]`
-       * Default is 16
+       * @default 16
        */
     buffer: _propTypes.default.oneOfType([_propTypes.default.number.isRequired, _propTypes.default.any.isRequired]),
     /**