@elastic/eui 97.2.0 → 97.3.0

package/es/components/datagrid/utils/row_heights.js

@@ -74,7 +74,7 @@ export var RowHeightUtils = /*#__PURE__*/function () {
     }
   }, {
     key: "getCalculatedHeight",
-    value: function getCalculatedHeight(heightOption, defaultHeight, rowIndex, isRowHeightOverride) {
+    value: function getCalculatedHeight(heightOption, defaultHeight, rowIndex, rowHeightsOptions) {
       if (isObject(heightOption) && heightOption.height) {
         return Math.max(heightOption.height, defaultHeight);
       }
@@ -82,8 +82,13 @@ export var RowHeightUtils = /*#__PURE__*/function () {
         return Math.max(heightOption, defaultHeight);
       }
       if (isObject(heightOption) && heightOption.lineCount) {
-        if (isRowHeightOverride) {
-          return this.getRowHeight(rowIndex) || defaultHeight; // lineCount overrides are stored in the heights cache
+        var _ref = rowHeightsOptions || {},
+          autoBelowLineCount = _ref.autoBelowLineCount; // uses auto height cache
+        var isRowHeightOverride =
+        // lineCount overrides are stored in the heights cache
+        rowIndex != null && this.isRowHeightOverride(rowIndex, rowHeightsOptions);
+        if (autoBelowLineCount || isRowHeightOverride) {
+          return this.getRowHeight(rowIndex) || defaultHeight;
         } else {
           return defaultHeight; // default lineCount height is set in minRowHeight state in grid_row_body
         }
@@ -114,6 +119,14 @@ export var RowHeightUtils = /*#__PURE__*/function () {
       // Assumes both padding-top and bottom are the same
       return contentHeight + padding * 2;
     }
+  }, {
+    key: "isAutoBelowLineCount",
+    value: function isAutoBelowLineCount(options, option) {
+      var _this$getLineCount;
+      if (!(options !== null && options !== void 0 && options.autoBelowLineCount)) return false;
+      if (((_this$getLineCount = this.getLineCount(option)) !== null && _this$getLineCount !== void 0 ? _this$getLineCount : 0) > 1) return true;
+      return false;
+    }
 
     /**
      * Auto height utils
@@ -125,6 +138,9 @@ export var RowHeightUtils = /*#__PURE__*/function () {
       if (height === AUTO_HEIGHT) {
         return true;
       }
+      if (this.isAutoBelowLineCount(rowHeightsOptions, height)) {
+        return true;
+      }
       return false;
     }
   }, {
@@ -154,8 +170,8 @@ export var RowHeightUtils = /*#__PURE__*/function () {
   }, {
     key: "pruneHiddenColumnHeights",
     value: function pruneHiddenColumnHeights(visibleColumns) {
-      var visibleColumnIds = new Set(visibleColumns.map(function (_ref) {
-        var id = _ref.id;
+      var visibleColumnIds = new Set(visibleColumns.map(function (_ref2) {
+        var id = _ref2.id;
         return id;
       }));
       var didModify = false;
@@ -267,10 +283,10 @@ export var RowHeightVirtualizationUtils = /*#__PURE__*/function (_RowHeightUtils
  * Hook for instantiating RowHeightUtils, setting internal class vars,
  * and setting up various row-height-related side effects
  */
-export var useRowHeightUtils = function useRowHeightUtils(_ref2) {
-  var virtualization = _ref2.virtualization,
-    rowHeightsOptions = _ref2.rowHeightsOptions,
-    columns = _ref2.columns;
+export var useRowHeightUtils = function useRowHeightUtils(_ref3) {
+  var virtualization = _ref3.virtualization,
+    rowHeightsOptions = _ref3.rowHeightsOptions,
+    columns = _ref3.columns;
   var forceRenderRef = useLatest(useForceRender());
   var _useState = useState(function () {
       if (virtualization) {
@@ -303,9 +319,9 @@ export var useRowHeightUtils = function useRowHeightUtils(_ref2) {
   }, [rowHeightUtils, columns]);
   return rowHeightUtils;
 };
-export var useDefaultRowHeight = function useDefaultRowHeight(_ref3) {
-  var rowHeightsOptions = _ref3.rowHeightsOptions,
-    rowHeightUtils = _ref3.rowHeightUtils;
+export var useDefaultRowHeight = function useDefaultRowHeight(_ref4) {
+  var rowHeightsOptions = _ref4.rowHeightsOptions,
+    rowHeightUtils = _ref4.rowHeightUtils;
   var _useContext = useContext(DataGridSortedContext),
     getCorrectRowIndex = _useContext.getCorrectRowIndex;
 
@@ -329,7 +345,7 @@ export var useDefaultRowHeight = function useDefaultRowHeight(_ref3) {
     // Account for row-specific height overrides
     var rowHeightOption = rowHeightUtils.getRowHeightOption(correctRowIndex, rowHeightsOptions);
     if (rowHeightOption) {
-      rowHeight = rowHeightUtils.getCalculatedHeight(rowHeightOption, minRowHeight, correctRowIndex, rowHeightUtils.isRowHeightOverride(correctRowIndex, rowHeightsOptions));
+      rowHeight = rowHeightUtils.getCalculatedHeight(rowHeightOption, minRowHeight, correctRowIndex, rowHeightsOptions);
     }
 
     // Use the row-specific height if it exists, if not, fall back to the default

package/es/components/header/header.styles.js

@@ -50,5 +50,12 @@ var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext) {
   var _euiFormVariables = euiFormVariables(euiThemeContext),
     controlPlaceholderText = _euiFormVariables.controlPlaceholderText;
   var backgroundColor = colorMode === 'DARK' ? shade(euiTheme.colors.lightestShade, 0.5) : shade(euiTheme.colors.darkestShade, 0.28);
-  return "\n    background-color: ".concat(backgroundColor, ";\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat(makeHighContrastColor(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat(shade(euiTheme.colors.primary, 0.5), ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      &--group {\n        border-color: ").concat(transparentize(euiTheme.colors.ghost, 0.3), ";\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(euiTheme.colors.ghost, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat(makeHighContrastColor(controlPlaceholderText, 8)(backgroundColor), ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append,\n        .euiFormControlLayout__prepend {\n          background-color: transparent;\n        }\n\n        .euiFormLabel {\n          color: inherit;\n        }\n      }\n    }\n  ");
+
+  // Specific color overrides for EuiSelectableTemplateSitewide
+  var selectableSitewide = {
+    color: euiTheme.colors.ghost,
+    borderColor: transparentize(euiTheme.colors.ghost, 0.3),
+    placeholderColor: makeHighContrastColor(controlPlaceholderText, 8)(backgroundColor)
+  };
+  return "\n    background-color: ".concat(backgroundColor, ";\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat(makeHighContrastColor(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat(shade(euiTheme.colors.primary, 0.5), ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      input {\n        box-shadow: inset 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(selectableSitewide.borderColor, ";\n      }\n\n      &--group {\n        border-color: ").concat(selectableSitewide.borderColor, ";\n\n        input {\n          box-shadow: none;\n        }\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(selectableSitewide.color, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat(selectableSitewide.placeholderColor, ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append,\n        .euiFormControlLayout__prepend {\n          background-color: transparent;\n        }\n\n        .euiFormLabel {\n          color: inherit;\n        }\n      }\n    }\n  ");
 };

package/es/services/hooks/useDeepEqual.js

@@ -1,3 +1,9 @@
+function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -6,8 +12,9 @@
  * Side Public License, v 1.
  */
 
-import { useRef } from 'react';
+import { useState } from 'react';
 import isEqual from 'lodash/isEqual';
+import { useUpdateEffect } from './useUpdateEffect';
 
 /**
  * This hook is mostly a performance concern for third-party objs/arrays that EUI
@@ -15,9 +22,14 @@ import isEqual from 'lodash/isEqual';
  * reference on every rerender unless passed through this hook).
  */
 export var useDeepEqual = function useDeepEqual(object) {
-  var ref = useRef(object);
-  if (!isEqual(object, ref.current)) {
-    ref.current = object;
-  }
-  return ref.current;
+  var _useState = useState(object),
+    _useState2 = _slicedToArray(_useState, 2),
+    memoizedObject = _useState2[0],
+    setMemoizedObject = _useState2[1];
+  useUpdateEffect(function () {
+    if (!isEqual(object, memoizedObject)) {
+      setMemoizedObject(object);
+    }
+  }, [object]);
+  return memoizedObject;
 };

package/eui.d.ts

@@ -4579,6 +4579,12 @@ declare module '@elastic/eui/src/components/context_menu/context_menu_panel' {
 	export type EuiContextMenuPanelShowPanelCallback = (currentPanelIndex?: number) => void;
 	export const SIZES: readonly ["s", "m"];
 	export type EuiContextMenuPanelProps = PropsWithChildren & CommonProps & Omit<HTMLAttributes<HTMLDivElement>, 'onKeyDown' | 'tabIndex' | 'onAnimationEnd' | 'title'> & {
+	    /**
+	     * Determines the initially focused menu item for keyboard and screen reader users.
+	     *
+	     * Can be set to `-1` to prevent autofocus (an uncommon case that must have
+	     * keyboard accessibility accounted for manually if used)
+	     */
 	    initialFocusedItemIndex?: number;
 	    items?: ReactElement[];
 	    onClose?: NoArgCallback<void>;
@@ -14211,9 +14217,10 @@ declare module '@elastic/eui/src/components/comment_list/comment_timeline' {
 }
 declare module '@elastic/eui/src/components/comment_list/comment' {
 	import { FunctionComponent } from 'react';
+	import { EuiTimelineItemProps } from '@elastic/eui/src/components/timeline';
 	import { EuiCommentEventProps } from '@elastic/eui/src/components/comment_list/comment_event';
 	import { EuiCommentTimelineProps } from '@elastic/eui/src/components/comment_list/comment_timeline';
-	export interface EuiCommentProps extends EuiCommentEventProps, EuiCommentTimelineProps {
+	export interface EuiCommentProps extends EuiCommentEventProps, EuiCommentTimelineProps, Omit<EuiTimelineItemProps, 'children' | 'icon' | 'iconAriaLabel'> {
 	}
 	export const EuiComment: FunctionComponent<EuiCommentProps>;
 
@@ -14294,12 +14301,12 @@ declare module '@elastic/eui/src/components/datagrid/utils/sorting' {
 declare module '@elastic/eui/src/components/datagrid/utils/row_heights' {
 	import { MutableRefObject } from 'react';
 	import { GridOnItemsRenderedProps } from 'react-window';
-	import { EuiDataGridColumn, EuiDataGridRowHeightOption, EuiDataGridRowHeightsOptions, EuiDataGridScrollAnchorRow, EuiDataGridStyle, ImperativeGridApi } from '@elastic/eui/src/components/datagrid/data_grid_types';
+	import { EuiDataGridColumn, EuiDataGridRowHeightOption, EuiDataGridRowHeightsOptions, EuiDataGridScrollAnchorRow, ImperativeGridApi } from '@elastic/eui/src/components/datagrid/data_grid_types';
 	export type RowHeightUtilsType = RowHeightUtils | RowHeightVirtualizationUtils;
 	export class RowHeightUtils {
 	    getRowHeightOption(rowIndex: number, rowHeightsOptions?: EuiDataGridRowHeightsOptions): EuiDataGridRowHeightOption | undefined;
 	    isRowHeightOverride(rowIndex: number, rowHeightsOptions?: EuiDataGridRowHeightsOptions): boolean;
-	    getCalculatedHeight(heightOption: EuiDataGridRowHeightOption, defaultHeight: number, rowIndex?: number, isRowHeightOverride?: boolean): number;
+	    getCalculatedHeight(heightOption: EuiDataGridRowHeightOption, defaultHeight: number, rowIndex?: number, rowHeightsOptions?: EuiDataGridRowHeightsOptions): number;
 	    /**
 	     * Height types
 	     */
@@ -14309,6 +14316,7 @@ declare module '@elastic/eui/src/components/datagrid/utils/row_heights' {
 	     */
 	    getLineCount(option?: EuiDataGridRowHeightOption): number | undefined;
 	    calculateHeightForLineCount(cellRef: HTMLElement, lineCount: number): number;
+	    isAutoBelowLineCount(options?: EuiDataGridRowHeightsOptions, option?: EuiDataGridRowHeightOption): boolean;
 	    /**
 	     * Auto height utils
 	     */
@@ -14353,7 +14361,6 @@ declare module '@elastic/eui/src/components/datagrid/utils/row_heights' {
 	        gridItemsRenderedRef: MutableRefObject<GridOnItemsRenderedProps | null>;
 	    } | undefined;
 	    rowHeightsOptions?: EuiDataGridRowHeightsOptions | undefined;
-	    gridStyles: EuiDataGridStyle;
 	    columns: EuiDataGridColumn[];
 	}) => RowHeightUtils;
 	export const useDefaultRowHeight: ({ rowHeightsOptions, rowHeightUtils, }: {
@@ -15288,7 +15295,18 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	     * Allows appending additional content to the bottom of the display settings popover
 	     */
 	    additionalDisplaySettings?: ReactNode;
+	    /**
+	     * Allows completely custom rendering of the display selector popover via render prop.
+	     * Passes back the default controls as arguments for optional rendering.
+	     */
+	    customRender?: EuiDataGridDisplaySelectorCustomRender;
 	}
+	export type EuiDataGridDisplaySelectorCustomRender = (args: {
+	    densityControl: ReactNode;
+	    rowHeightControl: ReactNode;
+	    additionalDisplaySettings: ReactNode;
+	    resetButton: ReactNode;
+	}) => ReactNode;
 	export interface EuiDataGridToolBarVisibilityOptions {
 	    /**
 	     * Allows the ability for the user to hide fields and sort columns, boolean or a #EuiDataGridToolBarVisibilityColumnSelectorOptions
@@ -15428,6 +15446,14 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	     * Defines the default size for all rows. It can be line count or just height.
 	     */
 	    defaultHeight?: EuiDataGridRowHeightOption;
+	    /**
+	     * Feature flag for custom `lineCount` behavior, where `lineCount` acts like a
+	     * *max* number of lines (instead of a set number of lines for all rows).
+	     *
+	     * This functionality is in beta and has performance implications;
+	     * we do not yet fully recommend/support it for heavy production usage.
+	     */
+	    autoBelowLineCount?: boolean;
 	    /**
 	     * Defines the height for a specific row. It can be line count or just height.
 	     *
@@ -16463,7 +16489,10 @@ declare module '@elastic/eui/src/components/datagrid/controls/display_selector'
 	import { ReactNode } from 'react';
 	import { EuiDataGridToolBarVisibilityOptions, EuiDataGridStyle, EuiDataGridRowHeightsOptions } from '@elastic/eui/src/components/datagrid/data_grid_types';
 	export const startingStyles: EuiDataGridStyle;
-	export const useDataGridDisplaySelector: (showDisplaySelector: EuiDataGridToolBarVisibilityOptions['showDisplaySelector'], initialStyles: EuiDataGridStyle, initialRowHeightsOptions?: EuiDataGridRowHeightsOptions | undefined) => [ReactNode, EuiDataGridStyle, EuiDataGridRowHeightsOptions];
+	/**
+	 * Display settings/selector popover
+	 */
+	export const useDataGridDisplaySelector: (showDisplaySelector: EuiDataGridToolBarVisibilityOptions['showDisplaySelector'], passedGridStyles: EuiDataGridStyle, passedRowHeightsOptions?: EuiDataGridRowHeightsOptions) => [ReactNode, EuiDataGridStyle, EuiDataGridRowHeightsOptions];
 
 }
 declare module '@elastic/eui/src/components/description_list/description_list_types' {
@@ -31290,17 +31319,16 @@ declare module '@elastic/eui' {
 "euiColumnSorting.pickFields": any;
 "euiColumnSorting.clearAll": any;
 "euiDataGridToolbarControl.badgeAriaLabel": any;
-"euiDisplaySelector.buttonText": any;
-"euiDisplaySelector.resetButtonText": any;
 "euiDisplaySelector.densityLabel": any;
 "euiDisplaySelector.labelCompact": any;
 "euiDisplaySelector.labelNormal": any;
 "euiDisplaySelector.labelExpanded": any;
 "euiDisplaySelector.rowHeightLabel": any;
-"euiDisplaySelector.labelSingle": any;
 "euiDisplaySelector.labelAuto": any;
-"euiDisplaySelector.labelCustom": any;
-"euiDisplaySelector.lineCountLabel": any;
+"euiDisplaySelector.labelStatic": any;
+"euiDisplaySelector.labelMax": any;
+"euiDisplaySelector.buttonText": any;
+"euiDisplaySelector.resetButtonText": any;
 "euiFullscreenSelector.fullscreenButton": any;
 "euiFullscreenSelector.fullscreenButtonActive": any;
 "euiKeyboardShortcuts.title": any;

package/i18ntokens.json

@@ -1031,14 +1031,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 738,
+        "line": 748,
         "column": 23,
-        "index": 23328
+        "index": 23788
       },
       "end": {
-        "line": 742,
+        "line": 752,
         "column": 3,
-        "index": 23475
+        "index": 23935
       }
     },
     "filepath": "src/components/datagrid/body/cell/data_grid_cell.tsx"
@@ -1049,14 +1049,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 743,
+        "line": 753,
         "column": 25,
-        "index": 23502
+        "index": 23962
       },
       "end": {
-        "line": 746,
+        "line": 756,
         "column": 3,
-        "index": 23608
+        "index": 24068
       }
     },
     "filepath": "src/components/datagrid/body/cell/data_grid_cell.tsx"
@@ -1710,199 +1710,181 @@
     "filepath": "src/components/datagrid/controls/data_grid_toolbar_control.tsx"
   },
   {
-    "token": "euiDisplaySelector.buttonText",
-    "defString": "Display options",
-    "highlighting": "string",
-    "loc": {
-      "start": {
-        "line": 228,
-        "column": 22,
-        "index": 7412
-      },
-      "end": {
-        "line": 231,
-        "column": 3,
-        "index": 7486
-      }
-    },
-    "filepath": "src/components/datagrid/controls/display_selector.tsx"
-  },
-  {
-    "token": "euiDisplaySelector.resetButtonText",
-    "defString": "Reset to default",
+    "token": "euiDisplaySelector.densityLabel",
+    "defString": "Density",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 232,
-        "column": 27,
-        "index": 7515
+        "line": 96,
+        "column": 4,
+        "index": 2610
       },
       "end": {
-        "line": 235,
-        "column": 3,
-        "index": 7595
+        "line": 104,
+        "column": 5,
+        "index": 2883
       }
     },
     "filepath": "src/components/datagrid/controls/display_selector.tsx"
   },
   {
-    "token": "euiDisplaySelector.densityLabel",
-    "defString": "Density",
+    "token": "euiDisplaySelector.labelCompact",
+    "defString": "Compact",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 272,
-        "column": 10,
-        "index": 8779
+        "line": 96,
+        "column": 4,
+        "index": 2610
       },
       "end": {
-        "line": 280,
-        "column": 11,
-        "index": 9100
+        "line": 104,
+        "column": 5,
+        "index": 2883
       }
     },
     "filepath": "src/components/datagrid/controls/display_selector.tsx"
   },
   {
-    "token": "euiDisplaySelector.labelCompact",
-    "defString": "Compact",
+    "token": "euiDisplaySelector.labelNormal",
+    "defString": "Normal",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 272,
-        "column": 10,
-        "index": 8779
+        "line": 96,
+        "column": 4,
+        "index": 2610
       },
       "end": {
-        "line": 280,
-        "column": 11,
-        "index": 9100
+        "line": 104,
+        "column": 5,
+        "index": 2883
       }
     },
     "filepath": "src/components/datagrid/controls/display_selector.tsx"
   },
   {
-    "token": "euiDisplaySelector.labelNormal",
-    "defString": "Normal",
+    "token": "euiDisplaySelector.labelExpanded",
+    "defString": "Expanded",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 272,
-        "column": 10,
-        "index": 8779
+        "line": 96,
+        "column": 4,
+        "index": 2610
       },
       "end": {
-        "line": 280,
-        "column": 11,
-        "index": 9100
+        "line": 104,
+        "column": 5,
+        "index": 2883
       }
     },
     "filepath": "src/components/datagrid/controls/display_selector.tsx"
   },
   {
-    "token": "euiDisplaySelector.labelExpanded",
-    "defString": "Expanded",
+    "token": "euiDisplaySelector.rowHeightLabel",
+    "defString": "Lines per row",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 272,
-        "column": 10,
-        "index": 8779
+        "line": 227,
+        "column": 4,
+        "index": 6476
       },
       "end": {
-        "line": 280,
-        "column": 11,
-        "index": 9100
+        "line": 235,
+        "column": 5,
+        "index": 6741
       }
     },
     "filepath": "src/components/datagrid/controls/display_selector.tsx"
   },
   {
-    "token": "euiDisplaySelector.rowHeightLabel",
-    "defString": "Row height",
+    "token": "euiDisplaySelector.labelAuto",
+    "defString": "Auto",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 315,
-        "column": 10,
-        "index": 10207
+        "line": 227,
+        "column": 4,
+        "index": 6476
       },
       "end": {
-        "line": 330,
-        "column": 11,
-        "index": 10680
+        "line": 235,
+        "column": 5,
+        "index": 6741
       }
     },
     "filepath": "src/components/datagrid/controls/display_selector.tsx"
   },
   {
-    "token": "euiDisplaySelector.labelSingle",
-    "defString": "Single",
+    "token": "euiDisplaySelector.labelStatic",
+    "defString": "Static",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 315,
-        "column": 10,
-        "index": 10207
+        "line": 227,
+        "column": 4,
+        "index": 6476
       },
       "end": {
-        "line": 330,
-        "column": 11,
-        "index": 10680
+        "line": 235,
+        "column": 5,
+        "index": 6741
       }
     },
     "filepath": "src/components/datagrid/controls/display_selector.tsx"
   },
   {
-    "token": "euiDisplaySelector.labelAuto",
-    "defString": "Auto fit",
+    "token": "euiDisplaySelector.labelMax",
+    "defString": "Max",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 315,
-        "column": 10,
-        "index": 10207
+        "line": 227,
+        "column": 4,
+        "index": 6476
       },
       "end": {
-        "line": 330,
-        "column": 11,
-        "index": 10680
+        "line": 235,
+        "column": 5,
+        "index": 6741
       }
     },
     "filepath": "src/components/datagrid/controls/display_selector.tsx"
   },
   {
-    "token": "euiDisplaySelector.labelCustom",
-    "defString": "Custom",
+    "token": "euiDisplaySelector.buttonText",
+    "defString": "Display options",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 315,
-        "column": 10,
-        "index": 10207
+        "line": 393,
+        "column": 22,
+        "index": 11825
       },
       "end": {
-        "line": 330,
-        "column": 11,
-        "index": 10680
+        "line": 396,
+        "column": 3,
+        "index": 11899
       }
     },
     "filepath": "src/components/datagrid/controls/display_selector.tsx"
   },
   {
-    "token": "euiDisplaySelector.lineCountLabel",
-    "defString": "Lines per row",
+    "token": "euiDisplaySelector.resetButtonText",
+    "defString": "Reset to default",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 315,
-        "column": 10,
-        "index": 10207
+        "line": 472,
+        "column": 27,
+        "index": 14023
       },
       "end": {
-        "line": 330,
-        "column": 11,
-        "index": 10680
+        "line": 475,
+        "column": 3,
+        "index": 14103
       }
     },
     "filepath": "src/components/datagrid/controls/display_selector.tsx"

package/lib/components/context_menu/context_menu_panel.js

@@ -171,7 +171,7 @@ var EuiContextMenuPanelClass = exports.EuiContextMenuPanelClass = /*#__PURE__*/f
         items: _this.props.items
       },
       menuItems: [],
-      focusedItemIndex: props.onClose && props.initialFocusedItemIndex != null ? props.initialFocusedItemIndex + 1 // Account for panel title back button
+      focusedItemIndex: props.onClose && props.initialFocusedItemIndex != null && props.initialFocusedItemIndex !== -1 ? props.initialFocusedItemIndex + 1 // Account for panel title back button
       : props.initialFocusedItemIndex,
       currentHeight: undefined,
       waitingForInitialPopover: false,
@@ -214,6 +214,16 @@ var EuiContextMenuPanelClass = exports.EuiContextMenuPanelClass = /*#__PURE__*/f
           return;
         }
 
+        // `initialFocusedItemIndex={-1}` should only be used when preventing initial item focus is desired
+        if (_this2.state.focusedItemIndex === -1) {
+          // Resetting the focusedItemIndex to 0 allows keyboard up/down behavior to
+          // still work correctly later if the panel is manually tabbed into
+          return _this2.setState({
+            tookInitialFocus: true,
+            focusedItemIndex: 0
+          });
+        }
+
         // If an item should be focused, focus it (if it exists)
         if (_this2.state.focusedItemIndex != null && _this2.state.menuItems.length) {
           var focusedItem = _this2.state.menuItems[_this2.state.focusedItemIndex];
@@ -406,6 +416,12 @@ EuiContextMenuPanelClass.propTypes = {
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
+  /**
+       * Determines the initially focused menu item for keyboard and screen reader users.
+       *
+       * Can be set to `-1` to prevent autofocus (an uncommon case that must have
+       * keyboard accessibility accounted for manually if used)
+       */
   initialFocusedItemIndex: _propTypes.default.number,
   items: _propTypes.default.arrayOf(_propTypes.default.element.isRequired),
   onClose: _propTypes.default.func,