@elastic/eui 80.0.0 → 81.1.0

package/es/components/avatar/avatar.js

@@ -34,6 +34,12 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export var SIZES = ['s', 'm', 'l', 'xl'];
 export var TYPES = ['space', 'user'];
 export var CASING = ['capitalize', 'uppercase', 'lowercase', 'none'];
+
+/**
+ * The avatar can only display one type of content,
+ * initials, or image, or iconType
+ */
+
 export var EuiAvatar = function EuiAvatar(_ref) {
   var _classNames;
   var className = _ref.className,

package/es/components/badge/beta_badge/beta_badge.js

@@ -22,6 +22,11 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export var COLORS = ['accent', 'subdued', 'hollow'];
 export var SIZES = ['s', 'm'];
 export var ALIGNMENTS = ['baseline', 'middle'];
+
+// `label` prop can be a `ReactNode` only if `title` or `tooltipContent` is provided
+
+// Must be `type` instead of `interface`
+// https://github.com/elastic/eui/issues/6085
 export var EuiBetaBadge = function EuiBetaBadge(_ref) {
   var className = _ref.className,
     label = _ref.label,

package/es/components/bottom_bar/bottom_bar.js

@@ -199,7 +199,10 @@ _EuiBottomBar.propTypes = {
 export var EuiBottomBar = /*#__PURE__*/forwardRef(function (props, ref) {
   var BottomBar = _EuiBottomBar;
   return ___EmotionJSX(EuiThemeProvider, {
-    colorMode: 'dark'
+    colorMode: 'dark',
+    wrapperProps: {
+      cloneElement: true
+    }
   }, ___EmotionJSX(BottomBar, _extends({
     ref: ref
   }, props)));

package/es/components/bottom_bar/bottom_bar.styles.js

@@ -17,8 +17,8 @@ export var euiBottomBarStyles = function euiBottomBarStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    // Text color needs to be reapplied to properly scope the forced `colorMode`
-    euiBottomBar: /*#__PURE__*/css(euiShadowFlat(euiThemeContext), ";background:", shade(euiTheme.colors.lightestShade, 0.5), ";color:", euiTheme.colors.text, ";", euiCanAnimate, "{animation:", euiBottomBarAppear, " ", euiTheme.animation.slow, " ", euiTheme.animation.resistance, ";};label:euiBottomBar;"),
+    // `color` is inherited from the wrapping `EuiThemeProvider colorMode="dark"`
+    euiBottomBar: /*#__PURE__*/css(euiShadowFlat(euiThemeContext), ";background:", shade(euiTheme.colors.lightestShade, 0.5), ";", euiCanAnimate, "{animation:", euiBottomBarAppear, " ", euiTheme.animation.slow, " ", euiTheme.animation.resistance, ";};label:euiBottomBar;"),
     static: /*#__PURE__*/css(";label:static;"),
     fixed: /*#__PURE__*/css("z-index:", Number(euiTheme.levels.header) - 2, ";;label:fixed;"),
     sticky: /*#__PURE__*/css("z-index:", Number(euiTheme.levels.header) - 2, ";;label:sticky;"),

package/es/components/breadcrumbs/breadcrumb.js

@@ -28,6 +28,8 @@ import { EuiPopover } from '../popover';
 import { EuiIcon } from '../icon';
 import { useEuiI18n } from '../i18n';
 import { euiBreadcrumbStyles, euiBreadcrumbContentStyles } from './breadcrumb.styles';
+
+// Used internally only by the parent EuiBreadcrumbs
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiBreadcrumb = function EuiBreadcrumb(_ref) {
   var children = _ref.children,

package/es/components/button/_button_content_deprecated.js

@@ -22,6 +22,14 @@ var iconSideToClassNameMap = {
   right: 'euiButtonContent--iconRight'
 };
 export var ICON_SIDES = keysOf(iconSideToClassNameMap);
+
+/**
+ * *INTERNAL ONLY / DEPRECATED*
+ * This component is simply a helper component for reuse within other button components
+ * This component has been deprecated in favor of the new EuiButtonDisplayContent
+ * that can be found in `src/components/button/button_display/_button_display_content.tsx`.
+ */
+
 export var EuiButtonContentDeprecated = function EuiButtonContentDeprecated(_ref) {
   var children = _ref.children,
     textProps = _ref.textProps,

package/es/components/button/button.js

@@ -48,8 +48,6 @@ export var EuiButton = function EuiButton(props) {
     isDisabled: rest.isDisabled || rest.disabled,
     isLoading: rest.isLoading
   });
-
-  // eslint-disable-next-line no-nested-ternary
   var color = buttonIsDisabled ? 'disabled' : _color;
   var buttonColorStyles = useEuiButtonColorCSS({
     display: fill ? 'fill' : 'base'
@@ -59,7 +57,10 @@ export var EuiButton = function EuiButton(props) {
   if (_color === 'ghost') {
     // INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
     return ___EmotionJSX(EuiThemeProvider, {
-      colorMode: "dark"
+      colorMode: "dark",
+      wrapperProps: {
+        cloneElement: true
+      }
     }, ___EmotionJSX(EuiButton, _extends({}, props, {
       color: "text"
     })));

package/es/components/button/button_display/_button_display.js

@@ -28,6 +28,12 @@ import { validateHref } from '../../../services/security/href_validator';
 import { useEuiButtonRadiusCSS } from '../../../themes/amsterdam/global_styling/mixins';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var SIZES = ['xs', 's', 'm'];
+
+/**
+ * Extends EuiButtonDisplayContentProps which provides
+ * `iconType`, `iconSide`, and `textProps`
+ */
+
 export function isButtonDisabled(_ref) {
   var href = _ref.href,
     isDisabled = _ref.isDisabled,

package/es/components/button/button_display/_button_display_content.js

@@ -20,6 +20,12 @@ import classNames from 'classnames';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var ICON_SIZES = ['s', 'm'];
 export var ICON_SIDES = ['left', 'right'];
+
+/**
+ * *INTERNAL ONLY*
+ * This component is simply a helper component for reuse within other button components.
+ */
+
 export var EuiButtonDisplayContent = function EuiButtonDisplayContent(_ref) {
   var children = _ref.children,
     textProps = _ref.textProps,

package/es/components/button/button_empty/button_empty.js

@@ -74,8 +74,6 @@ export var EuiButtonEmpty = function EuiButtonEmpty(props) {
     href: href,
     isLoading: isLoading
   });
-
-  // eslint-disable-next-line no-nested-ternary
   var color = isDisabled ? 'disabled' : _color === 'ghost' ? 'text' : _color;
   var buttonColorStyles = useEuiButtonColorCSS({
     display: 'empty'
@@ -83,7 +81,10 @@ export var EuiButtonEmpty = function EuiButtonEmpty(props) {
   if (_color === 'ghost') {
     // INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
     return ___EmotionJSX(EuiThemeProvider, {
-      colorMode: "dark"
+      colorMode: "dark",
+      wrapperProps: {
+        cloneElement: true
+      }
     }, ___EmotionJSX(EuiButtonEmpty, _extends({}, props, {
       color: "text"
     })));

package/es/components/button/button_group/button_group_button.js

@@ -82,10 +82,7 @@ export var EuiButtonGroupButton = function EuiButtonGroupButton(_ref) {
       }
     });
   }
-
-  // eslint-disable-next-line no-nested-ternary
   var color = isDisabled ? 'disabled' : _color;
-  // eslint-disable-next-line no-nested-ternary
   var display = isSelected ? 'fill' : size === 'compressed' ? 'empty' : 'base';
   var buttonColorStyles = useEuiButtonColorCSS({
     display: display

package/es/components/button/button_icon/button_icon.js

@@ -66,8 +66,6 @@ export var EuiButtonIcon = function EuiButtonIcon(props) {
   if (!rest['aria-label'] && !rest['aria-labelledby'] && !isAriaHidden) {
     console.warn("EuiButtonIcon requires aria-label or aria-labelledby to be specified because icon-only\n      buttons are screen-reader-inaccessible without them.");
   }
-
-  // eslint-disable-next-line no-nested-ternary
   var color = isDisabled ? 'disabled' : _color === 'ghost' ? 'text' : _color;
   var styles = {
     euiButtonIcon: /*#__PURE__*/css(";label:euiButtonIcon;"),
@@ -82,7 +80,10 @@ export var EuiButtonIcon = function EuiButtonIcon(props) {
   if (_color === 'ghost') {
     // INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
     return ___EmotionJSX(EuiThemeProvider, {
-      colorMode: "dark"
+      colorMode: "dark",
+      wrapperProps: {
+        cloneElement: true
+      }
     }, ___EmotionJSX(EuiButtonIcon, _extends({}, props, {
       color: "text"
     })));

package/es/components/card/card.js

@@ -33,6 +33,11 @@ import { EuiSpacer } from '../spacer';
 import { euiCardBetaBadgeStyles, euiCardStyles, euiCardTextStyles } from './card.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var ALIGNMENTS = ['left', 'center', 'right'];
+
+/**
+ * Certain props are only allowed when the layout is vertical
+ */
+
 export var EuiCard = function EuiCard(_ref) {
   var className = _ref.className,
     description = _ref.description,

package/es/components/card/card.styles.js

@@ -65,7 +65,7 @@ export var euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize)
   var halfSpacing = euiPaddingSize(euiThemeContext, halfPaddingKey);
   return {
     card: {
-      euiCard: /*#__PURE__*/css("display:flex;align-items:flex-start;justify-content:space-between;flex-direction:column;&:has([class*='euiCard__text'][class*='-interactive']:focus:focus-visible){outline:", euiTheme.focus.width, " solid currentColor;};label:euiCard;"),
+      euiCard: /*#__PURE__*/css("display:flex;align-items:flex-start;justify-content:space-between;flex-direction:column;&:has(\n            [class*='euiCard__text'][class*='-interactive']:focus:focus-visible\n          ){outline:", euiTheme.focus.width, " solid currentColor;};label:euiCard;"),
       aligned: {
         center: /*#__PURE__*/css(logicalTextAlignCSS('center'), ";align-items:center;;label:center;"),
         left: /*#__PURE__*/css(logicalTextAlignCSS('left'), ";align-items:flex-start;;label:left;"),

package/es/components/card/checkable_card/checkable_card.js

@@ -17,6 +17,10 @@ import { EuiRadio, EuiCheckbox } from '../../form';
 import { EuiSplitPanel } from '../../panel';
 import { useEuiTheme } from '../../../services';
 import { euiCheckableCardStyles } from './checkable_card.styles';
+
+// if `checkableType` is left out or set to 'radio', use EuiRadioProps
+
+// if `checkableType` is set to 'checkbox', use EuiCheckboxProps
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiCheckableCard = function EuiCheckableCard(_ref) {
   var children = _ref.children,

package/es/components/code/code_block.js

@@ -43,6 +43,9 @@ var fontSizeToRowHeightMap = {
 };
 export var FONT_SIZES = ['s', 'm', 'l'];
 export var PADDING_SIZES = ['none', 's', 'm', 'l'];
+
+// This exclusive union enforces specific props based on isVirtualized
+
 export var EuiCodeBlock = function EuiCodeBlock(_ref) {
   var _ref$language = _ref.language,
     _language = _ref$language === void 0 ? DEFAULT_LANGUAGE : _ref$language,

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

@@ -18,7 +18,6 @@ import { css } from '@emotion/css';
 import { euiBackgroundColor } from '../../global_styling';
 // Note: These styles must be in a separate file due to using `css` from `@emotion/css`
 // (i.e., applying styles in vanilla JS / directly to DOM nodes instead of React)
-
 export var euiCodeBlockLineStyles = function euiCodeBlockLineStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {

package/es/components/color_picker/index.js

@@ -14,6 +14,5 @@ export { EuiColorStops } from './color_stops';
 // TODO: Exporting `EuiColorStopsProps` from `'./color_stops'`
 // results in a duplicate d.ts entry that causes build warnings
 // and potential downstream TS project failures.
-
 export { EuiColorPalettePicker } from './color_palette_picker';
 export { EuiColorPaletteDisplay } from './color_palette_display';

package/es/components/combo_box/combo_box.js

@@ -40,6 +40,15 @@ import { EuiComboBoxOptionsList } from './combo_box_options_list';
 import { getMatchingOptions, flattenOptionGroups, getSelectedOptionForSearchValue, transformForCaseSensitivity } from './matching_options';
 import { EuiComboBoxInput } from './combo_box_input/combo_box_input';
 import { getElementZIndex } from '../../services/popover';
+
+/**
+ * Because of how TypeScript's LibraryManagedAttributes is designed to handle defaultProps (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html#support-for-defaultprops-in-jsx)
+ * we can't directly export the above Props definitions, as the defaulted values are not made optional
+ * as it isn't processed by LibraryManagedAttributes. To get around this, we:
+ * - remove the props which have default values applied
+ *   - additionally re-define `options` and `selectedOptions` defaults, necessary as static members can't access generics and become never[]
+ * - export (Props - Defaults) & Partial<Defaults>
+ */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var initialSearchValue = '';
 export var EuiComboBox = /*#__PURE__*/function (_Component) {

package/es/components/common.js

@@ -20,7 +20,6 @@ export var assertNever = function assertNever(x) {
  * To require aria-label or aria-labelledby but not both
  * Example: OneOf<Type, 'aria-label' | 'aria-labelledby'>
  */
-
 /**
  * Wraps Object.keys with proper typescript definition of the resulting array
  */
@@ -32,4 +31,114 @@ export function keysOf(obj) {
  * Like `keyof typeof`, but for getting values instead of keys
  * ValueOf<typeof {key1: 'value1', key2: 'value2'}>
  * Results in `'value1' | 'value2'`
+ */
+
+// Returns the props of a given HTML element
+
+// Utility methods for ApplyClassComponentDefaults
+
+/**
+ * Because of how TypeScript's LibraryManagedAttributes is designed to handle defaultProps (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html#support-for-defaultprops-in-jsx)
+ * we can't directly export the props definition as the defaulted values are not made optional,
+ * because it isn't processed by LibraryManagedAttributes. To get around this, we:
+ * - remove the props which have default values applied
+ * - export (Props - Defaults) & Partial<Defaults>
+ */
+
+// definition of Props, made optional, that are have keys in defaultProps
+/*
+https://github.com/Microsoft/TypeScript/issues/28339
+Problem: Pick and Omit do not distribute over union types, which manifests when
+optional values become required after a Pick or Omit operation. These
+Distributive forms correctly operate on union types, preserving optionality.
+ */
+/*
+TypeScript's discriminated unions are overly permissive: as long as one type of the union is satisfied
+the other types are not validated against. For example:
+
+type Foo = {
+  value: string,
+  foo: string
+};
+type Bar = {
+  value: number,
+  bar: string
+}
+function what(x: Foo | Bar) {
+  return x.value;
+}
+
+As you would expect -
+
+what({ value: 'asdf', foo: 'asdf' }); // fine
+what({ value: 5, foo: 'asdf' }); // error
+what({ value: 5, bar: 'asdf' }); // fine
+what({ value: 'asdf', bar: 'asdf' }); // error
+
+However, if Foo is satisfied then you can pass any value you want to Bar's unique properties:
+what({ value: 'asdf', foo: 'asdf', bar: false }) // works
+
+TypeScript is okay with this as a type guard would detect the object is Foo and prevent accessing `bar`.
+Unfortunately this prevents feedback to the user about potentially unintentional effects, for example:
+
+A common pattern in EUI is to render something as a div OR as a button, depending on if an onClick prop is passed.
+passing additional props down through `...rest`, which can be specified as
+
+type Spanlike = HTMLAttributes<HTMLSpanElement>;
+type Buttonlike = { onClick: MouseEventHandler<HTMLButtonElement> }; // onClick is the discriminant
+React.FunctionComponent<Spanlike | Buttonlike>
+
+Internally, the component would have a type guard to check if props contains `onClick` and resolve to Buttonlike.
+Externally, however, you could use the component as
+
+<Component value="buzz"/>
+
+and no error would occur as the Spanlike type is satisfied and the type guard would prevent accessing button attributes.
+This prevents immediate feedback to the develop, and would actually lead to React warnings as the `value` prop would
+still propagate down to the span's props, which is invalid. The following two utility types provide a solution for
+creating exclusive unions:
+
+React.FunctionComponent<ExclusiveUnion<Spanlike, Buttonlike>>
+ */
+/**
+ * Returns member keys in U not present in T set to never
+ * T = { 'one', 'two', 'three' }
+ * U = { 'three', 'four', 'five' }
+ * returns { 'four': never, 'five': never }
+ */
+/**
+ * Allow either T or U, preventing any additional keys of the other type from being present
+ */
+/**
+ * For components that conditionally render <button> or <a>
+ * Convenience types for extending base props (T) and
+ * element-specific props (P) with standard clickable properties
+ *
+ * These will likely be used together, along with `ExclusiveUnion`:
+ *
+ * type AnchorLike = PropsForAnchor<BaseProps>
+ * type ButtonLike = PropsForButton<BaseProps>
+ * type ComponentProps = ExclusiveUnion<AnchorLike, ButtonLike>
+ * const Component: FunctionComponent<ComponentProps> ...
+ */
+/**
+ * Replaces all properties on any type as optional, includes nested types
+ *
+ * @example
+ * ```ts
+ * interface Person {
+ *  name: string;
+ *  age?: number;
+ *  spouse: Person;
+ *  children: Person[];
+ * }
+ * type PartialPerson = RecursivePartial<Person>;
+ * // results in
+ * interface PartialPerson {
+ *  name?: string;
+ *  age?: number;
+ *  spouse?: RecursivePartial<Person>;
+ *  children?: RecursivePartial<Person>[]
+ * }
+ * ```
  */

package/es/components/context_menu/context_menu.js

@@ -180,7 +180,6 @@ export var EuiContextMenu = /*#__PURE__*/function (_Component) {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       if (prevProps.panels !== this.props.panels) {
-        // eslint-disable-next-line react/no-did-update-set-state
         this.setState({
           idToRenderedItemsMap: this.mapIdsToRenderedItems(this.props.panels)
         });

package/es/components/control_bar/control_bar.js

@@ -44,6 +44,36 @@ import { EuiPortal } from '../portal';
 /**
  * Extends EuiButton excluding `size`. Requires `label` as the `children`.
  */
+
+/**
+ * Creates a `button` visually styles as a tab.
+ * Requires `label` as the `children`.
+ * `onClick` must be provided to handle the content swapping.
+ */
+
+/**
+ * Extends EuiBreadcrumbs
+ */
+
+/**
+ * Simple div controlling color and size text output.
+ * Requires `label` as the `children`.
+ */
+
+/**
+ * Custom props specific to the icon control type
+ */
+
+/**
+ * Icon can extend EuiIcon
+ * Had to omit `onClick` as it's a valid prop of SVGElement
+ * Also omits `type` and `id` as these are also specific to icon control
+ */
+
+/**
+ * Icon can extend EuiButtonIcon
+ * Also omits `iconType` and `id` as these are also specific to icon control
+ */
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiControlBar = /*#__PURE__*/function (_Component) {
   _inherits(EuiControlBar, _Component);

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

@@ -1,5 +1,5 @@
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-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; }
@@ -53,6 +53,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;
@@ -67,7 +68,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: {
@@ -556,6 +559,7 @@ EuiDataGridCellContent.propTypes = {
   setCellContentsRef: PropTypes.any.isRequired,
   isExpanded: PropTypes.bool.isRequired,
   isDefinedHeight: PropTypes.bool.isRequired,
+  isFocused: PropTypes.bool.isRequired,
   ariaRowIndex: PropTypes.number.isRequired
 };
 export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
@@ -799,7 +803,15 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
       }
     });
     return _this;
-  }
+  } // focus tracking is split between the entire grid & individual cells,
+  // the parent grid owns which cell is focused,
+  // but individual cells need to react to changes and also report that
+  // they are focused in response to user actions like clicking on the cell
+  // to avoid focus trap fighting, cells wait a tick after being clicked to allow
+  // any existing traps to disconnect before the cell reports the new focus state to the parent grid
+  // but because of this small delay, multiple cells could queue up focus and
+  // create an infinite loop as the cells activate->deactivate->...
+  // so we track the last timeout id and clear that request if superseded
   _createClass(EuiDataGridCell, [{
     key: "componentDidMount",
     value: function componentDidMount() {
@@ -1014,6 +1026,7 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         isExpandable: isExpandable,
         isExpanded: popoverIsOpen,
         isDetails: false,
+        isFocused: this.state.isFocused,
         setCellContentsRef: this.setCellContentsRef,
         rowHeightsOptions: rowHeightsOptions,
         rowHeightUtils: rowHeightUtils,
@@ -1101,15 +1114,6 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
   }]);
   return EuiDataGridCell;
 }(Component);
-// focus tracking is split between the entire grid & individual cells,
-// the parent grid owns which cell is focused,
-// but individual cells need to react to changes and also report that
-// they are focused in response to user actions like clicking on the cell
-// to avoid focus trap fighting, cells wait a tick after being clicked to allow
-// any existing traps to disconnect before the cell reports the new focus state to the parent grid
-// but because of this small delay, multiple cells could queue up focus and
-// create an infinite loop as the cells activate->deactivate->...
-// so we track the last timeout id and clear that request if superseded
 _defineProperty(EuiDataGridCell, "activeFocusTimeoutId", undefined);
 _defineProperty(EuiDataGridCell, "contextType", DataGridFocusContext);
 EuiDataGridCell.propTypes = {

package/es/components/datagrid/body/data_grid_cell_popover.js

@@ -149,8 +149,7 @@ export var JsonPopoverContent = function JsonPopoverContent(_ref3) {
   var formattedText = cellText;
   try {
     formattedText = JSON.stringify(JSON.parse(formattedText), null, 2);
-  } catch (e) {} // eslint-disable-line no-empty
-
+  } catch (e) {}
   return ___EmotionJSX(EuiCodeBlock, {
     isCopyable: true,
     transparentBackground: true,

package/es/components/datagrid/body/header/data_grid_header_cell.js

@@ -589,9 +589,7 @@ export var useSortingUtils = function useSortingUtils(_ref2) {
    * @see https://www.w3.org/WAI/ARIA/apg/example-index/table/sortable-table.html
    * @see https://github.com/w3c/aria/issues/283 for potential future multi-column usage
    */
-  var ariaSort =
-  // eslint-disable-next-line no-nested-ternary
-  isColumnSorted && hasOnlyOneSort ? sorting.columns[0].direction === 'asc' ? 'ascending' : 'descending' : undefined;
+  var ariaSort = isColumnSorted && hasOnlyOneSort ? sorting.columns[0].direction === 'asc' ? 'ascending' : 'descending' : undefined;
 
   /**
    * Sorting status - screen reader text

package/es/components/datagrid/data_grid_types.js

@@ -8,15 +8,17 @@
 
 // since react-window doesn't export a type with the imperative api only we can
 // use this to omit the react-specific class component methods
-
 // An array of [x,y] coordinates. Note that the `y` value expected internally is a `visibleRowIndex`
-
 // Force either aria-label or aria-labelledby to be defined
-
 /**
  * Props shared between renderCellValue and renderCellPopover
  */
-
 // The empty control column array fallbacks need to be cached, or
 // they'll cause rerendering/remount issues in memoized dependencies
-export var emptyControlColumns = [];
+export var emptyControlColumns = [];
+
+// Types for styling options, passed down through the `gridStyle` prop
+
+// ideally this would use a generic to enforce `pageSize` exists in `pageSizeOptions`,
+// but TypeScript's default understanding of an array is number[] unless `as const` is used
+// which defeats the generic's purpose & functionality as it would check for `number` in `number[]`

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

@@ -42,11 +42,11 @@ export var useInMemoryValues = function useInMemoryValues(inMemory, rowCount) {
     _useState2 = _slicedToArray(_useState, 2),
     inMemoryValuesVersion = _useState2[0],
     setInMemoryValuesVersion = _useState2[1];
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
   var inMemoryValues = useMemo(function () {
     return _objectSpread({}, _inMemoryValues.current);
-  }, [inMemoryValuesVersion]);
+  }, [inMemoryValuesVersion] // eslint-disable-line react-hooks/exhaustive-deps
+  );
+
   var onCellRender = useCallback(function (rowIndex, columnId, value) {
     var nextInMemoryValues = _inMemoryValues.current;
     nextInMemoryValues[rowIndex] = nextInMemoryValues[rowIndex] || {};

package/es/components/date_picker/date_picker.js

@@ -1,4 +1,4 @@
-var _excluded = ["adjustDateOnChange", "calendarClassName", "className", "controlOnly", "customInput", "dateFormat", "dayClassName", "disabled", "excludeDates", "filterDate", "fullWidth", "iconType", "injectTimes", "inline", "inputRef", "isInvalid", "isLoading", "locale", "maxDate", "maxTime", "minDate", "minTime", "onChange", "onClear", "openToDate", "placeholder", "popperClassName", "popoverPlacement", "selected", "shadow", "shouldCloseOnSelect", "showIcon", "showTimeSelect", "showTimeSelectOnly", "timeFormat", "utcOffset"];
+var _excluded = ["adjustDateOnChange", "calendarClassName", "className", "controlOnly", "customInput", "dateFormat", "dayClassName", "disabled", "excludeDates", "filterDate", "fullWidth", "iconType", "injectTimes", "inline", "inputRef", "isInvalid", "isLoading", "locale", "maxDate", "maxTime", "minDate", "minTime", "onChange", "onClear", "openToDate", "placeholder", "popperClassName", "popoverPlacement", "readOnly", "selected", "shadow", "shouldCloseOnSelect", "showIcon", "showTimeSelect", "showTimeSelectOnly", "timeFormat", "utcOffset"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _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."); }
@@ -89,6 +89,7 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
     popperClassName = _ref.popperClassName,
     _ref$popoverPlacement = _ref.popoverPlacement,
     popoverPlacement = _ref$popoverPlacement === void 0 ? 'downLeft' : _ref$popoverPlacement,
+    readOnly = _ref.readOnly,
     selected = _ref.selected,
     _ref$shadow = _ref.shadow,
     shadow = _ref$shadow === void 0 ? true : _ref$shadow,
@@ -104,8 +105,8 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
     utcOffset = _ref.utcOffset,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiDatePicker', {
-    'euiDatePicker--shadow': shadow,
-    'euiDatePicker--inline': inline
+    'euiDatePicker--inline': inline,
+    'euiDatePicker--shadow': inline && shadow
   });
   var numIconsClass = controlOnly ? false : getFormControlClassNameForIconCount({
     isInvalid: isInvalid,
@@ -158,6 +159,7 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
       dateFormat: fullDateFormat,
       dayClassName: dayClassName,
       disabled: disabled,
+      readOnly: readOnly,
       excludeDates: excludeDates,
       filterDate: filterDate,
       injectTimes: injectTimes,
@@ -181,7 +183,7 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
       timeFormat: timeFormat,
       utcOffset: utcOffset,
       yearDropdownItemNumber: 7,
-      accessibleMode: true,
+      accessibleMode: !(disabled || readOnly),
       popperPlacement: popoverPlacement
     }, rest));
   });
@@ -195,7 +197,15 @@ export var EuiDatePicker = function EuiDatePicker(_ref) {
       onClick: onClear
     } : undefined,
     isLoading: isLoading,
-    isInvalid: isInvalid
+    isInvalid: isInvalid,
+    isDisabled: disabled,
+    readOnly: readOnly,
+    className: classNames({
+      // Take advantage of `euiFormControlLayoutDelimited`'s replacement input styling
+      euiFormControlLayoutDelimited: inline,
+      'euiFormControlLayoutDelimited--isInvalid': inline && isInvalid && !disabled && !readOnly
+    }),
+    iconsPosition: inline ? 'static' : undefined
   }, control));
 };
 EuiDatePicker.propTypes = {
@@ -236,7 +246,12 @@ EuiDatePicker.propTypes = {
      */
   placeholder: PropTypes.string,
   /**
-     * Can turn the shadow off if using the inline prop
+     * Displays the date picker calendar on directly on the page.
+     * Will not render `iconType` or `fullWidth`.
+     */
+  inline: PropTypes.bool,
+  /**
+     * Allows turning the shadow off if using the `inline` prop
      */
   shadow: PropTypes.bool,
   /**