@elastic/eui 72.1.0 → 73.0.0

package/es/components/tool_tip/tool_tip.js

@@ -1,6 +1,6 @@
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-var _excluded = ["children", "className", "anchorClassName", "anchorProps", "content", "title", "delay", "display"];
+var _excluded = ["children", "className", "anchorClassName", "anchorProps", "content", "title", "delay", "display", "repositionOnScroll"];
 
 function _extends() { _extends = Object.assign || 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); }
 
@@ -41,13 +41,14 @@ import React, { Component } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { keysOf } from '../common';
+import { findPopoverPosition, htmlIdGenerator } from '../../services';
+import { enqueueStateChange } from '../../services/react';
+import { EuiResizeObserver } from '../observer/resize_observer';
 import { EuiPortal } from '../portal';
+import { EuiToolTipPopover } from './tool_tip_popover';
 import { EuiToolTipAnchor } from './tool_tip_anchor';
 import { EuiToolTipArrow } from './tool_tip_arrow';
-import { EuiToolTipPopover } from './tool_tip_popover';
-import { enqueueStateChange } from '../../services/react';
-import { findPopoverPosition, htmlIdGenerator } from '../../services';
-import { EuiResizeObserver } from '../observer/resize_observer';
+import { toolTipManager } from './tool_tip_manager';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var positionsToClassNameMap = {
   top: 'euiToolTip--top',
@@ -142,9 +143,11 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
       if (!_this.timeoutId) {
         _this.timeoutId = setTimeout(function () {
           enqueueStateChange(function () {
-            return _this.setState({
+            _this.setState({
               visible: true
             });
+
+            toolTipManager.registerTooltip(_this.hideToolTip);
           });
         }, delayToMsMap[_this.props.delay]);
       }
@@ -205,6 +208,8 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
             toolTipStyles: DEFAULT_TOOLTIP_STYLES,
             arrowStyles: undefined
           });
+
+          toolTipManager.deregisterToolTip(_this.hideToolTip);
         }
       });
     });
@@ -246,18 +251,32 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
     key: "componentDidMount",
     value: function componentDidMount() {
       this._isMounted = true;
+
+      if (this.props.repositionOnScroll) {
+        window.addEventListener('scroll', this.positionToolTip, true);
+      }
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this.clearAnimationTimeout();
       this._isMounted = false;
+      window.removeEventListener('scroll', this.positionToolTip, true);
     }
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
       if (prevState.visible === false && this.state.visible === true) {
         requestAnimationFrame(this.testAnchor);
+      } // update scroll listener
+
+
+      if (prevProps.repositionOnScroll !== this.props.repositionOnScroll) {
+        if (this.props.repositionOnScroll) {
+          window.addEventListener('scroll', this.positionToolTip, true);
+        } else {
+          window.removeEventListener('scroll', this.positionToolTip, true);
+        }
       }
     }
   }, {
@@ -272,6 +291,7 @@ export var EuiToolTip = /*#__PURE__*/function (_Component) {
           title = _this$props.title,
           delay = _this$props.delay,
           display = _this$props.display,
+          repositionOnScroll = _this$props.repositionOnScroll,
           rest = _objectWithoutProperties(_this$props, _excluded);
 
       var _this$state = this.state,
@@ -380,6 +400,14 @@ EuiToolTip.propTypes = {
      */
   position: PropTypes.oneOf(["top", "right", "bottom", "left"]).isRequired,
 
+  /**
+     * When `true`, the tooltip's position is re-calculated when the user
+     * scrolls. This supports having fixed-position tooltip anchors.
+     *
+     * When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true`
+     */
+  repositionOnScroll: PropTypes.bool,
+
   /**
      * If supplied, called when mouse movement causes the tool tip to be
      * hidden.

package/es/components/tool_tip/tool_tip_manager.js

@@ -0,0 +1,42 @@
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/*
+ * 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.
+ */
+
+/**
+ * Manager utility that ensures only one tooltip is visible at a time
+ *
+ * UX rationale (primarily for mouse-only users):
+ * @see https://github.com/elastic/kibana/issues/144482
+ * @see https://github.com/elastic/eui/issues/5883
+ */
+var ToolTipManager = function ToolTipManager() {
+  var _this = this;
+
+  _classCallCheck(this, ToolTipManager);
+
+  _defineProperty(this, "toolTipsToHide", new Set());
+
+  _defineProperty(this, "registerTooltip", function (hideCallback) {
+    _this.toolTipsToHide.forEach(function (hide) {
+      return hide();
+    });
+
+    _this.toolTipsToHide.clear();
+
+    _this.toolTipsToHide.add(hideCallback);
+  });
+
+  _defineProperty(this, "deregisterToolTip", function (hideCallback) {
+    _this.toolTipsToHide.delete(hideCallback);
+  });
+};
+
+export var toolTipManager = new ToolTipManager();

package/es/components/tour/tour.styles.js

@@ -50,7 +50,7 @@ export var euiTourHeaderStyles = function euiTourHeaderStyles(_ref3) {
     euiTourHeader: /*#__PURE__*/css(logicalCSS('border-bottom', 'none'), ";", logicalCSS('margin-bottom', euiTheme.size.s), ";;label:euiTourHeader;"),
     // Elements
     euiTourHeader__title: /*#__PURE__*/css(logicalCSS('margin-top', 0), ";;label:euiTourHeader__title;"),
-    euiTourHeader__subtitle: /*#__PURE__*/css("color:", euiTheme.colors.subduedText, ";;label:euiTourHeader__subtitle;")
+    euiTourHeader__subtitle: /*#__PURE__*/css("color:", euiTheme.colors.subduedText, ";padding-block-end:", euiTheme.size.xs, ";;label:euiTourHeader__subtitle;")
   };
 };
 export var euiTourFooterStyles = function euiTourFooterStyles(_ref4) {

package/eui.d.ts

@@ -5695,6 +5695,16 @@ declare module '@elastic/eui/src/components/tool_tip/tool_tip_arrow' {
 	    position: ToolTipPositions;
 	} & HTMLAttributes<HTMLDivElement>>;
 
+}
+declare module '@elastic/eui/src/components/tool_tip/tool_tip_manager' {
+	 class ToolTipManager {
+	    toolTipsToHide: Set<Function>;
+	    registerTooltip: (hideCallback: Function) => void;
+	    deregisterToolTip: (hideCallback: Function) => void;
+	}
+	export const toolTipManager: ToolTipManager;
+	export {};
+
 }
 declare module '@elastic/eui/src/components/tool_tip/tool_tip' {
 	import { Component, ReactElement, ReactNode, MouseEvent as ReactMouseEvent, HTMLAttributes } from 'react';
@@ -5753,6 +5763,13 @@ declare module '@elastic/eui/src/components/tool_tip/tool_tip' {
 	     * Suggested position. If there is not enough room for it this will be changed.
 	     */
 	    position: ToolTipPositions;
+	    /**
+	     * When `true`, the tooltip's position is re-calculated when the user
+	     * scrolls. This supports having fixed-position tooltip anchors.
+	     *
+	     * When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true`
+	     */
+	    repositionOnScroll?: boolean;
 	    /**
 	     * If supplied, called when mouse movement causes the tool tip to be
 	     * hidden.
@@ -15123,6 +15140,10 @@ declare module '@elastic/eui/src/components/image/image_types' {
 	     * When set to `true` will make the image clickable to a larger version
 	     */
 	    allowFullScreen?: boolean;
+	    /**
+	     * Callback when the image is clicked and `allowFullScreen` is `true`
+	     */
+	    onFullScreen?: (isFullScreen: boolean) => void;
 	    /**
 	     * Changes the color of the icon that floats above the image when it can be clicked to fullscreen.
 	     * The default value of `light` is fine unless your image has a white background, in which case you should change it to `dark`.
@@ -15133,7 +15154,7 @@ declare module '@elastic/eui/src/components/image/image_types' {
 	     */
 	    wrapperProps?: CommonProps & HTMLAttributes<HTMLDivElement>;
 	};
-	export type EuiImageWrapperProps = Pick<EuiImageProps, 'alt' | 'caption' | 'float' | 'margin' | 'hasShadow' | 'wrapperProps' | 'fullScreenIconColor' | 'allowFullScreen'> & {
+	export type EuiImageWrapperProps = Pick<EuiImageProps, 'alt' | 'caption' | 'float' | 'margin' | 'hasShadow' | 'wrapperProps' | 'fullScreenIconColor' | 'allowFullScreen' | 'onFullScreen'> & {
 	    isFullWidth: boolean;
 	    setIsFullScreen: (isFullScreen: boolean) => void;
 	};
@@ -25744,6 +25765,7 @@ declare module '@elastic/eui' {
 "euiDataGridHeaderCell.sortedByAscendingMultiple": any;
 "euiDataGridHeaderCell.sortedByDescendingMultiple": any;
 "euiDataGridHeaderCell.actionsPopoverScreenReaderText": any;
+"euiColumnSelector.dragHandleAriaLabel": any;
 "euiColumnSelector.button": any;
 "euiColumnSelector.buttonActiveSingular": any;
 "euiColumnSelector.buttonActivePlural": any;

package/i18ntokens.json

@@ -1071,17 +1071,33 @@
     },
     "filepath": "src/components/datagrid/body/header/data_grid_header_cell.tsx"
   },
+  {
+    "token": "euiColumnSelector.dragHandleAriaLabel",
+    "defString": "Drag handle",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 119,
+        "column": 30
+      },
+      "end": {
+        "line": 122,
+        "column": 3
+      }
+    },
+    "filepath": "src/components/datagrid/controls/column_selector.tsx"
+  },
   {
     "token": "euiColumnSelector.button",
     "defString": "Columns",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 121,
+        "line": 125,
         "column": 4
       },
       "end": {
-        "line": 121,
+        "line": 125,
         "column": 66
       }
     },
@@ -1093,11 +1109,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 126,
+        "line": 130,
         "column": 6
       },
       "end": {
-        "line": 130,
+        "line": 134,
         "column": 8
       }
     },
@@ -1109,11 +1125,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 134,
+        "line": 138,
         "column": 6
       },
       "end": {
-        "line": 138,
+        "line": 142,
         "column": 8
       }
     },
@@ -1125,11 +1141,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 167,
+        "line": 171,
         "column": 14
       },
       "end": {
-        "line": 173,
+        "line": 177,
         "column": 15
       }
     },
@@ -1141,11 +1157,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 167,
+        "line": 171,
         "column": 14
       },
       "end": {
-        "line": 173,
+        "line": 177,
         "column": 15
       }
     },
@@ -1157,11 +1173,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 275,
+        "line": 293,
         "column": 18
       },
       "end": {
-        "line": 278,
+        "line": 296,
         "column": 20
       }
     },
@@ -1173,11 +1189,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 288,
+        "line": 306,
         "column": 18
       },
       "end": {
-        "line": 291,
+        "line": 309,
         "column": 20
       }
     },
@@ -1237,11 +1253,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 79,
+        "line": 85,
         "column": 14
       },
       "end": {
-        "line": 83,
+        "line": 89,
         "column": 15
       }
     },
@@ -1253,11 +1269,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 95,
+        "line": 101,
         "column": 14
       },
       "end": {
-        "line": 99,
+        "line": 105,
         "column": 15
       }
     },
@@ -1269,11 +1285,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 133,
+        "line": 157,
         "column": 14
       },
       "end": {
-        "line": 137,
+        "line": 161,
         "column": 15
       }
     },

package/lib/components/accordion/accordion.js

@@ -260,7 +260,7 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
           css: cssSpinnerStyles
         }), (0, _react2.jsx)(_text.EuiText, {
           size: "s"
-        }, (0, _react2.jsx)("p", null, isLoadingMessage && isLoadingMessage !== true ? isLoadingMessage : (0, _react2.jsx)(_i18n.EuiI18n, {
+        }, (0, _react2.jsx)("p", null, isLoadingMessage !== true ? isLoadingMessage : (0, _react2.jsx)(_i18n.EuiI18n, {
           token: "euiAccordion.isLoading",
           default: "Loading"
         }))));

package/lib/components/datagrid/controls/column_selector.js

@@ -45,6 +45,8 @@ function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symb
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 
+function _extends() { _extends = Object.assign || 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."); }
@@ -116,6 +118,7 @@ var useDataGridColumnSelector = function useDataGridColumnSelector(availableColu
   }, [sortedColumns, columnSearchText, displayValues]);
   var isDragEnabled = allowColumnReorder && columnSearchText.length === 0; // only allow drag-and-drop when not filtering columns
 
+  var dragHandleAriaLabel = (0, _i18n.useEuiI18n)('euiColumnSelector.dragHandleAriaLabel', 'Drag handle');
   var buttonText = (0, _react2.jsx)(_i18n.EuiI18n, {
     token: "euiColumnSelector.button",
     default: "Columns"
@@ -188,18 +191,23 @@ var useDataGridColumnSelector = function useDataGridColumnSelector(availableColu
       key: id,
       draggableId: id,
       index: index,
-      isDragDisabled: !isDragEnabled
+      isDragDisabled: !isDragEnabled,
+      hasInteractiveChildren: true,
+      customDragHandle: true
     }, function (provided, state) {
       return (0, _react2.jsx)("div", {
         className: "euiDataGridColumnSelector__item ".concat(state.isDragging && 'euiDataGridColumnSelector__item-isDragging'),
         "data-test-subj": "dataGridColumnSelectorColumnItem-".concat(id)
       }, (0, _react2.jsx)(_flex.EuiFlexGroup, {
         responsive: false,
-        gutterSize: "m",
+        gutterSize: "s",
         alignItems: "center"
-      }, (0, _react2.jsx)(_flex.EuiFlexItem, null, allowColumnHiding ? (0, _react2.jsx)(_form.EuiSwitch, {
+      }, allowColumnHiding && (0, _react2.jsx)(_flex.EuiFlexItem, {
+        grow: false
+      }, (0, _react2.jsx)(_form.EuiSwitch, {
         name: id,
         label: displayValues[id] || id,
+        showLabel: false,
         checked: visibleColumnIds.has(id),
         compressed: true,
         className: "euiSwitch--mini",
@@ -211,11 +219,18 @@ var useDataGridColumnSelector = function useDataGridColumnSelector(availableColu
           setVisibleColumns(nextVisibleColumns);
         },
         "data-test-subj": "dataGridColumnSelectorToggleColumnVisibility-".concat(id)
-      }) : (0, _react2.jsx)("span", {
+      })), (0, _react2.jsx)(_flex.EuiFlexItem // This extra column name flex item affords the column more grabbable real estate
+      // for mouse users, while hiding repetition for keyboard/screen reader users
+      , _extends({}, provided.dragHandleProps, {
+        "aria-hidden": true,
+        tabIndex: -1
+      }), (0, _react2.jsx)("span", {
         className: "euiDataGridColumnSelector__itemLabel"
-      }, id)), isDragEnabled && (0, _react2.jsx)(_flex.EuiFlexItem, {
+      }, displayValues[id] || id)), isDragEnabled && (0, _react2.jsx)(_flex.EuiFlexItem, _extends({
         grow: false
-      }, (0, _react2.jsx)(_icon.EuiIcon, {
+      }, provided.dragHandleProps, {
+        "aria-label": dragHandleAriaLabel
+      }), (0, _react2.jsx)(_icon.EuiIcon, {
         type: "grab",
         color: "subdued"
       }))));

package/lib/components/datagrid/controls/column_sorting_draggable.js

@@ -89,7 +89,9 @@ var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSortingDraggab
   var dragHandleAriaLabel = (0, _i18n.useEuiI18n)('euiColumnSortingDraggable.dragHandleAriaLabel', 'Drag handle');
   return (0, _react2.jsx)(_drag_and_drop.EuiDraggable, _extends({
     draggableId: id,
-    index: index
+    index: index,
+    hasInteractiveChildren: true,
+    customDragHandle: true
   }, rest), function (provided, state) {
     return (0, _react2.jsx)("div", {
       className: "euiDataGridColumnSorting__item ".concat(state.isDragging && 'euiDataGridColumnSorting__item-isDragging')
@@ -131,18 +133,25 @@ var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSortingDraggab
           sorting.onSort(nextColumns);
         }
       });
-    })), (0, _react2.jsx)(_flex.EuiFlexItem, {
+    })), (0, _react2.jsx)(_flex.EuiFlexItem, _extends({
+      className: "euiDataGridColumnSorting__name" // This extra column name flex item affords the column more grabbable real estate
+      // for mouse users, while hiding repetition for keyboard/screen reader users
+
+    }, provided.dragHandleProps, {
+      tabIndex: -1,
+      "aria-hidden": true
+    }), (0, _react2.jsx)(_flex.EuiFlexGroup, {
+      gutterSize: "xs",
+      alignItems: "center",
+      responsive: false
+    }, (0, _react2.jsx)(_flex.EuiFlexItem, {
       grow: false
     }, (0, _react2.jsx)(_token.EuiToken, {
       color: schemaDetails != null ? schemaDetails.color : undefined,
       iconType: schemaDetails != null ? schemaDetails.icon : 'tokenString'
-    })), (0, _react2.jsx)(_flex.EuiFlexItem, {
-      "aria-hidden": true
-    }, (0, _react2.jsx)(_text.EuiText, {
+    })), (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_text.EuiText, {
       size: "xs"
-    }, (0, _react2.jsx)("p", null, display))), (0, _react2.jsx)(_flex.EuiFlexItem, {
-      className: "euiDataGridColumnSorting__orderButtons"
-    }, (0, _react2.jsx)(_i18n.EuiI18n, {
+    }, (0, _react2.jsx)("p", null, display))))), (0, _react2.jsx)(_flex.EuiFlexItem, null, (0, _react2.jsx)(_i18n.EuiI18n, {
       token: "euiColumnSortingDraggable.toggleLegend",
       default: "Select sorting method for {display}",
       values: {

package/lib/components/datagrid/data_grid.a11y.js

@@ -188,7 +188,7 @@ describe('EuiDataGrid', function () {
     it('has zero violations on first render', function () {
       cy.checkAxe();
     });
-    it('has zero violations when the columns reorder menu is open', function () {
+    it('has zero violations when the columns visibility menu is open', function () {
       cy.get('button[data-test-subj="dataGridColumnSelectorButton"]').realClick();
       cy.checkAxe();
     });
@@ -241,9 +241,10 @@ describe('EuiDataGrid', function () {
       cy.get('div[data-gridcell-visible-row-index="0"][data-gridcell-column-index="1"]').find('button.euiButtonIcon').last().realClick();
       cy.checkAxe();
     });
-    it('has zero violations when the Favorite Distro column has been sorted', function () {
+    it('has zero violations on sort and when the columns sorting menu is open', function () {
       cy.get('button.euiDataGridHeaderCell__button').last().realClick();
       cy.get('button.euiListGroupItem__button').contains('Sort Alma to Debian').should('exist').realClick();
+      cy.get('button[data-test-subj="dataGridColumnSortingPopover"]').realClick();
       cy.checkAxe();
     });
     it('has zero violations when fullscreen is open', function () {

package/lib/components/date_picker/super_date_picker/super_date_picker.js

@@ -717,6 +717,14 @@ EuiSuperDatePickerInternal.propTypes = {
          */
       position: _propTypes.default.oneOf(["top", "right", "bottom", "left"]).isRequired,
 
+      /**
+         * When `true`, the tooltip's position is re-calculated when the user
+         * scrolls. This supports having fixed-position tooltip anchors.
+         *
+         * When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true`
+         */
+      repositionOnScroll: _propTypes.default.bool,
+
       /**
          * If supplied, called when mouse movement causes the tool tip to be
          * hidden.
@@ -888,6 +896,7 @@ EuiSuperDatePicker.propTypes = {
       title: _propTypes.default.node,
       id: _propTypes.default.string,
       position: _propTypes.default.oneOf(["top", "right", "bottom", "left"]).isRequired,
+      repositionOnScroll: _propTypes.default.bool,
       onMouseOut: _propTypes.default.func
     }),
     iconOnly: _propTypes.default.bool,

package/lib/components/date_picker/super_date_picker/super_update_button.js

@@ -296,6 +296,14 @@ EuiSuperUpdateButton.propTypes = {
        */
     position: _propTypes.default.oneOf(["top", "right", "bottom", "left"]).isRequired,
 
+    /**
+       * When `true`, the tooltip's position is re-calculated when the user
+       * scrolls. This supports having fixed-position tooltip anchors.
+       *
+       * When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true`
+       */
+    repositionOnScroll: _propTypes.default.bool,
+
     /**
        * If supplied, called when mouse movement causes the tool tip to be
        * hidden.

package/lib/components/image/image.js

@@ -25,7 +25,7 @@ var _image_types = require("./image_types");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["className", "alt", "url", "src", "size", "hasShadow", "style", "wrapperProps", "fullScreenIconColor", "allowFullScreen", "caption", "float", "margin"];
+var _excluded = ["className", "alt", "url", "src", "size", "hasShadow", "style", "wrapperProps", "fullScreenIconColor", "allowFullScreen", "caption", "float", "margin", "onFullScreen"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -72,6 +72,7 @@ var EuiImage = function EuiImage(_ref) {
       caption = _ref.caption,
       float = _ref.float,
       margin = _ref.margin,
+      onFullScreen = _ref.onFullScreen,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useState = (0, _react.useState)(false),
@@ -103,7 +104,8 @@ var EuiImage = function EuiImage(_ref) {
     alt: alt,
     caption: caption,
     float: float,
-    margin: margin
+    margin: margin,
+    onFullScreen: onFullScreen
   };
 
   var commonImgProps = _objectSpread({
@@ -177,6 +179,11 @@ EuiImage.propTypes = {
        */
   allowFullScreen: _propTypes.default.bool,
 
+  /**
+       * Callback when the image is clicked and `allowFullScreen` is `true`
+       */
+  onFullScreen: _propTypes.default.func,
+
   /**
        * Changes the color of the icon that floats above the image when it can be clicked to fullscreen.
        * The default value of `light` is fine unless your image has a white background, in which case you should change it to `dark`.

package/lib/components/image/image_fullscreen_wrapper.js

@@ -55,7 +55,8 @@ var EuiImageFullScreenWrapper = function EuiImageFullScreenWrapper(_ref) {
       setIsFullScreen = _ref.setIsFullScreen,
       wrapperProps = _ref.wrapperProps,
       isFullWidth = _ref.isFullWidth,
-      fullScreenIconColor = _ref.fullScreenIconColor;
+      fullScreenIconColor = _ref.fullScreenIconColor,
+      onFullScreen = _ref.onFullScreen;
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _image_fullscreen_wrapper.euiImageFullscreenWrapperStyles)(euiTheme);
   var cssStyles = [styles.euiImageFullscreenWrapper];
@@ -71,6 +72,7 @@ var EuiImageFullScreenWrapper = function EuiImageFullScreenWrapper(_ref) {
 
   var closeFullScreen = function closeFullScreen() {
     setIsFullScreen(false);
+    onFullScreen === null || onFullScreen === void 0 ? void 0 : onFullScreen(false);
   };
 
   var _useInnerText = (0, _inner_text.useInnerText)(),

package/lib/components/image/image_wrapper.js

@@ -50,10 +50,12 @@ var EuiImageWrapper = function EuiImageWrapper(_ref) {
       setIsFullScreen = _ref.setIsFullScreen,
       wrapperProps = _ref.wrapperProps,
       fullScreenIconColor = _ref.fullScreenIconColor,
-      isFullWidth = _ref.isFullWidth;
+      isFullWidth = _ref.isFullWidth,
+      onFullScreen = _ref.onFullScreen;
 
   var openFullScreen = function openFullScreen() {
     setIsFullScreen(true);
+    onFullScreen === null || onFullScreen === void 0 ? void 0 : onFullScreen(true);
   };
 
   var classes = (0, _classnames.default)('euiImageWrapper', wrapperProps && wrapperProps.className);

package/lib/components/markdown_editor/markdown_format.styles.js

@@ -29,16 +29,13 @@ var euiScaleMarkdownFormatText = function euiScaleMarkdownFormatText(euiTheme, o
   var measurement = options.measurement;
   var lineHeightSize = measurement === 'em' ? "".concat(lineHeight, "em") : lineHeight; // Custom scales
 
-  var blockQuoteBorderWidth = (0, _global_styling.mathWithUnits)(fontSize, function (x) {
-    return x / 4;
-  });
   var tablePaddingVertical = (0, _global_styling.mathWithUnits)(fontSize, function (x) {
     return x / 4;
   });
   var tablePaddingHorizontal = (0, _global_styling.mathWithUnits)(fontSize, function (x) {
     return x / 2;
   });
-  return "\n    .euiMarkdownFormat__blockquote {\n      ".concat((0, _global_styling.logicalShorthandCSS)('padding', "0 ".concat(fontSize)), "\n      ").concat((0, _global_styling.logicalCSS)('border-left-width', blockQuoteBorderWidth), "\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label { // Extra specificity necessary to override default checkbox CSS\n      font-size: ").concat(fontSize, ";\n      ").concat((0, _global_styling.logicalCSS)('padding-left', lineHeightSize), "\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .euiCheckbox + *:not(.euiCheckbox) {\n      ").concat((0, _global_styling.logicalCSS)('margin-top', fontSize), "\n    }\n\n    .euiMarkdownFormat__codeblockWrapper {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat((0, _global_styling.logicalCSS)('padding-vertical', tablePaddingVertical), "\n      ").concat((0, _global_styling.logicalCSS)('padding-horizontal', tablePaddingHorizontal), "\n    }\n  ");
+  return "\n    .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label { // Extra specificity necessary to override default checkbox CSS\n      font-size: ".concat(fontSize, ";\n      ").concat((0, _global_styling.logicalCSS)('padding-left', lineHeightSize), "\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .euiCheckbox + *:not(.euiCheckbox) {\n      ").concat((0, _global_styling.logicalCSS)('margin-top', fontSize), "\n    }\n\n    .euiMarkdownFormat__codeblockWrapper {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat((0, _global_styling.logicalCSS)('padding-vertical', tablePaddingVertical), "\n      ").concat((0, _global_styling.logicalCSS)('padding-horizontal', tablePaddingHorizontal), "\n    }\n  ");
 };
 /**
  * Styles