@elastic/eui 111.1.0 → 112.0.0-snapshot.1769177525113

package/optimize/es/components/call_out/call_out.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["title", "color", "size", "iconType", "children", "className", "heading", "onDismiss", "announceOnMount"];
+var _excluded = ["title", "color", "size", "iconType", "children", "className", "heading", "onDismiss", "dismissButtonProps", "announceOnMount"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -38,6 +38,7 @@ export var EuiCallOut = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$heading = _ref.heading,
     heading = _ref$heading === void 0 ? 'p' : _ref$heading,
     onDismiss = _ref.onDismiss,
+    dismissButtonProps = _ref.dismissButtonProps,
     _ref$announceOnMount = _ref.announceOnMount,
     announceOnMount = _ref$announceOnMount === void 0 ? false : _ref$announceOnMount,
     rest = _objectWithoutProperties(_ref, _excluded);
@@ -51,14 +52,15 @@ export var EuiCallOut = /*#__PURE__*/forwardRef(function (_ref, ref) {
       token: "euiCallOut.dismissAriaLabel",
       default: "Dismiss this callout"
     }, function (dismissAriaLabel) {
-      return ___EmotionJSX(EuiButtonIcon, {
-        iconType: "cross",
-        onClick: onDismiss,
+      return ___EmotionJSX(EuiButtonIcon, _extends({
+        "data-test-subj": "euiDismissCalloutButton",
         "aria-label": dismissAriaLabel,
-        css: cssStyles,
+        css: cssStyles
+      }, dismissButtonProps, {
+        iconType: "cross",
         color: color,
-        "data-test-subj": "euiDismissCalloutButton"
-      });
+        onClick: onDismiss
+      }));
     });
   }, [onDismiss, styles, color, size]);
   var headerStyles = useEuiMemoizedStyles(euiCallOutHeaderStyles);

package/optimize/es/components/context_menu/context_menu.js

@@ -8,7 +8,8 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["isSeparator", "key"],
   _excluded2 = ["panel", "name", "key", "icon", "onClick"],
-  _excluded3 = ["stylesMemoizer", "panels", "onPanelChange", "className", "initialPanelId", "size"];
+  _excluded3 = ["id", "title", "items", "content", "width", "initialFocusedItemIndex", "size"],
+  _excluded4 = ["stylesMemoizer", "panels", "onPanelChange", "className", "initialPanelId", "size"];
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /*
@@ -245,6 +246,14 @@ export var EuiContextMenuClass = /*#__PURE__*/function (_Component) {
       if (!panel) {
         return;
       }
+      var _id = panel.id,
+        title = panel.title,
+        _items = panel.items,
+        content = panel.content,
+        _width = panel.width,
+        initialFocusedItemIndex = panel.initialFocusedItemIndex,
+        _size = panel.size,
+        rest = _objectWithoutProperties(panel, _excluded3);
 
       // As above, we need to wait for EuiOutsideClickDetector to complete its logic before
       // re-rendering via showPanel.
@@ -258,22 +267,22 @@ export var EuiContextMenuClass = /*#__PURE__*/function (_Component) {
         position: 'absolute',
         label: 'euiContextMenu__panel'
       };
-      return ___EmotionJSX(EuiContextMenuPanel, {
+      return ___EmotionJSX(EuiContextMenuPanel, _extends({
         key: panelId,
         size: this.props.size,
         css: cssStyles,
         onHeightChange: transitionType === 'in' ? this.onIncomingPanelHeightChange : undefined,
         onTransitionComplete: transitionType === 'out' ? this.onOutGoingPanelTransitionComplete : undefined,
-        title: panel.title,
+        title: title,
         onClose: onClose,
         transitionType: this.state.isOutgoingPanelVisible ? transitionType : undefined,
         transitionDirection: this.state.isOutgoingPanelVisible ? this.state.transitionDirection : undefined,
         items: this.state.idToRenderedItemsMap[panelId],
-        initialFocusedItemIndex: this.state.isUsingKeyboardToNavigate ? this.state.focusedItemIndex : panel.initialFocusedItemIndex,
+        initialFocusedItemIndex: this.state.isUsingKeyboardToNavigate ? this.state.focusedItemIndex : initialFocusedItemIndex,
         onUseKeyboardToNavigate: this.onUseKeyboardToNavigate,
         showNextPanel: this.showNextPanel,
         showPreviousPanel: this.showPreviousPanel
-      }, panel.content);
+      }, rest), content);
     }
   }, {
     key: "render",
@@ -285,7 +294,7 @@ export var EuiContextMenuClass = /*#__PURE__*/function (_Component) {
         className = _this$props2.className,
         initialPanelId = _this$props2.initialPanelId,
         size = _this$props2.size,
-        rest = _objectWithoutProperties(_this$props2, _excluded3);
+        rest = _objectWithoutProperties(_this$props2, _excluded4);
       var incomingPanel = this.renderPanel(this.state.incomingPanelId, 'in');
       var outgoingPanel;
       if (this.state.isOutgoingPanelVisible) {

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

@@ -435,6 +435,13 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         cellPropsClassName = _this$state$cellProps2.className,
         cellPropsDataTestSubj = _this$state$cellProps2['data-test-subj'],
         setCellProps = _objectWithoutProperties(_this$state$cellProps2, _excluded3);
+      var row = rowManager && !IS_JEST_ENVIRONMENT ? rowManager.getRow({
+        rowIndex: rowIndex,
+        visibleRowIndex: visibleRowIndex,
+        top: style.top,
+        // comes in as a `{float}px` string from react-window
+        height: style.height // comes in as an integer from react-window
+      }) : undefined;
       var cellProps = _objectSpread(_objectSpread({}, setCellProps), {}, {
         'data-test-subj': classNames('dataGridRowCell', cellPropsDataTestSubj),
         className: classNames(cellClasses, cellPropsClassName)
@@ -447,13 +454,6 @@ export var EuiDataGridCell = /*#__PURE__*/function (_Component) {
         // column width, can be undefined
         lineHeight: (_rowHeightsOptions$li = rowHeightsOptions === null || rowHeightsOptions === void 0 ? void 0 : rowHeightsOptions.lineHeight) !== null && _rowHeightsOptions$li !== void 0 ? _rowHeightsOptions$li : undefined
       }, cellPropsStyle);
-      var row = rowManager && !IS_JEST_ENVIRONMENT ? rowManager.getRow({
-        rowIndex: rowIndex,
-        visibleRowIndex: visibleRowIndex,
-        top: style.top,
-        // comes in as a `{float}px` string from react-window
-        height: style.height // comes in as an integer from react-window
-      }) : undefined;
       return ___EmotionJSX(RenderCellInRow, {
         row: row
       }, ___EmotionJSX(GridCellDiv, _extends({}, cellProps, {

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

@@ -45,7 +45,9 @@ export var EuiDataGridBodyCustomRender = /*#__PURE__*/memo(function (_ref) {
     rowHeightsOptions = _ref.rowHeightsOptions,
     gridWidth = _ref.gridWidth,
     gridStyles = _ref.gridStyles,
-    className = _ref.className;
+    className = _ref.className,
+    _ref$showHeader = _ref.showHeader,
+    showHeader = _ref$showHeader === void 0 ? true : _ref$showHeader;
   /**
    * Columns & widths
    */
@@ -176,10 +178,10 @@ export var EuiDataGridBodyCustomRender = /*#__PURE__*/memo(function (_ref) {
       visibleRowData: visibleRows,
       Cell: Cell,
       setCustomGridBodyProps: setCustomGridBodyProps,
-      headerRow: headerRow,
+      headerRow: showHeader ? headerRow : null,
       footerRow: footerRow
     };
-  }, [gridWidth, visibleColumns, visibleRows, Cell, setCustomGridBodyProps, headerRow, footerRow]);
+  }, [gridWidth, visibleColumns, visibleRows, Cell, setCustomGridBodyProps, headerRow, footerRow, showHeader]);
   var BodyElement = renderCustomGridBody;
   return ___EmotionJSX("div", _extends({}, customGridBodyProps, {
     className: classNames('euiDataGrid__customRenderBody', className, customGridBodyProps === null || customGridBodyProps === void 0 ? void 0 : customGridBodyProps.className)

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

@@ -34,9 +34,11 @@ export var Cell = /*#__PURE__*/memo(function (_ref) {
     data = _ref.data;
   var memoizedStyles = useDeepEqual(style);
   var cellStyles = useMemo(function () {
-    var headerRowHeight = data.headerRowHeight;
+    var headerRowHeight = data.headerRowHeight,
+      showHeader = data.showHeader;
+    var headerOffset = showHeader !== false ? headerRowHeight : 0;
     return _objectSpread(_objectSpread({}, memoizedStyles), {}, {
-      top: "".concat(parseFloat(memoizedStyles.top) + headerRowHeight, "px")
+      top: "".concat(parseFloat(memoizedStyles.top) + headerOffset, "px")
     });
   }, [memoizedStyles, data]);
   return ___EmotionJSX(CellWrapper, _extends({
@@ -105,7 +107,9 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
     gridItemsRendered = _ref3.gridItemsRendered,
     wrapperRef = _ref3.wrapperRef,
     className = _ref3.className,
-    canDragAndDropColumns = _ref3.canDragAndDropColumns;
+    canDragAndDropColumns = _ref3.canDragAndDropColumns,
+    _ref3$showHeader = _ref3.showHeader,
+    showHeader = _ref3$showHeader === void 0 ? true : _ref3$showHeader;
   /**
    * Grid refs & observers
    */
@@ -290,16 +294,17 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
       rowManager: rowManager,
       pagination: pagination,
       headerRowHeight: headerRowHeight,
-      gridStyles: gridStyles
+      gridStyles: gridStyles,
+      showHeader: showHeader
     };
-  }, [schemaDetectors, setRowHeight, leadingControlColumns, trailingControlColumns, columns, visibleColCount, schema, columnWidths, defaultColumnWidth, renderCellValue, cellContext, renderCellPopover, interactiveCellId, rowHeightsOptions, rowHeightUtils, rowManager, pagination, headerRowHeight, gridStyles]);
+  }, [schemaDetectors, setRowHeight, leadingControlColumns, trailingControlColumns, columns, visibleColCount, schema, columnWidths, defaultColumnWidth, renderCellValue, cellContext, renderCellPopover, interactiveCellId, rowHeightsOptions, rowHeightUtils, rowManager, pagination, headerRowHeight, gridStyles, showHeader]);
   var rowWrapperContextValue = useMemo(function () {
     return {
-      headerRowHeight: headerRowHeight,
-      headerRow: headerRow,
+      headerRowHeight: showHeader ? headerRowHeight : 0,
+      headerRow: showHeader ? headerRow : null,
       footerRow: footerRow
     };
-  }, [headerRowHeight, headerRow, footerRow]);
+  }, [headerRowHeight, headerRow, footerRow, showHeader]);
   var onScroll = useCallback(function (args) {
     // check only if a callback is passed
     if (typeof (virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.onScroll) !== 'function') return;
@@ -357,7 +362,7 @@ export var EuiDataGridBodyVirtualized = /*#__PURE__*/memo(function (_ref3) {
     height: finalHeight,
     rowHeight: getRowHeight,
     itemData: itemData,
-    rowCount: IS_JEST_ENVIRONMENT || headerRowHeight > 0 ? visibleRowCount : 0,
+    rowCount: IS_JEST_ENVIRONMENT || headerRowHeight > 0 || showHeader === false && innerGridRef.current ? visibleRowCount : 0,
     onScroll: onScroll
   }), Cell), scrollBorderOverlay) : null;
 });

package/optimize/es/components/datagrid/controls/column_selector.js

@@ -120,7 +120,7 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
     });
   }, [sortedColumns, columnSearchText, displayValues]);
   var isDragEnabled = allowColumnReorder && columnSearchText.length === 0; // only allow drag-and-drop when not filtering columns
-  var dragHandleAriaLabel = useEuiI18n('euiColumnSelector.dragHandleAriaLabel', 'Drag handle');
+  var dragHandleAriaLabel = useEuiI18n('euiColumnSelector.dragHandleAriaLabel', 'drag handle');
   var orderedVisibleColumns = useMemo(function () {
     return visibleColumns.map(function (columnId) {
       return availableColumns.find(function (_ref3) {
@@ -179,6 +179,7 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
       isDropDisabled: !isDragEnabled,
       css: styles.euiDataGridColumnSelector
     }, ___EmotionJSX(React.Fragment, null, filteredColumns.map(function (id, index) {
+      var label = displayValues[id] || id;
       return ___EmotionJSX(EuiDraggable, {
         key: id,
         draggableId: id,
@@ -202,7 +203,7 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
           grow: false
         }, ___EmotionJSX(EuiSwitch, {
           name: id,
-          label: displayValues[id] || id,
+          label: label,
           showLabel: false,
           checked: visibleColumnIds.has(id),
           mini: true,
@@ -223,10 +224,10 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
         }), ___EmotionJSX(EuiText, {
           size: "xs",
           className: "euiDataGridColumnSelector__itemLabel"
-        }, displayValues[id] || id)), isDragEnabled && ___EmotionJSX(EuiFlexItem, _extends({
+        }, label)), isDragEnabled && ___EmotionJSX(EuiFlexItem, _extends({
           grow: false
         }, provided.dragHandleProps, {
-          "aria-label": dragHandleAriaLabel
+          "aria-label": "".concat(label, " ").concat(dragHandleAriaLabel)
         }), ___EmotionJSX(EuiIcon, {
           type: "grab",
           color: "subdued"

package/optimize/es/components/datagrid/data_grid.js

@@ -3,7 +3,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "columnVisibility", "schemaDetectors", "rowCount", "renderCellValue", "cellContext", "renderCellPopover", "renderFooterCellValue", "className", "gridStyle", "toolbarVisibility", "pagination", "sorting", "inMemory", "onColumnResize", "minSizeForControls", "height", "width", "rowHeightsOptions", "virtualizationOptions", "renderCustomGridBody", "renderCustomToolbar", "onFullScreenChange"];
+var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "columnVisibility", "schemaDetectors", "rowCount", "renderCellValue", "cellContext", "renderCellPopover", "renderFooterCellValue", "className", "gridStyle", "toolbarVisibility", "headerVisibility", "pagination", "sorting", "inMemory", "onColumnResize", "minSizeForControls", "height", "width", "rowHeightsOptions", "virtualizationOptions", "renderCustomGridBody", "renderCustomToolbar", "onFullScreenChange"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /*
@@ -83,6 +83,8 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
     gridStyle = props.gridStyle,
     _props$toolbarVisibil = props.toolbarVisibility,
     toolbarVisibility = _props$toolbarVisibil === void 0 ? true : _props$toolbarVisibil,
+    _props$headerVisibili = props.headerVisibility,
+    headerVisibility = _props$headerVisibili === void 0 ? true : _props$headerVisibili,
     _pagination = props.pagination,
     sorting = props.sorting,
     inMemory = props.inMemory,
@@ -273,7 +275,8 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
   }, _defineProperty({
     'euiDataGrid--fullScreen': isFullScreen
   }, fullScreenStyles, isFullScreen), {
-    'euiDataGrid--noControls': !toolbarVisibility
+    'euiDataGrid--noControls': !toolbarVisibility,
+    'euiDataGrid--noHeader': !headerVisibility
   }, className);
 
   /**
@@ -397,7 +400,8 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
     gridItemsRendered: gridItemsRendered,
     wrapperRef: contentRef,
     renderCustomGridBody: renderCustomGridBody,
-    canDragAndDropColumns: columnVisibility.canDragAndDropColumns
+    canDragAndDropColumns: columnVisibility.canDragAndDropColumns,
+    showHeader: !!headerVisibility
   }))), showPagination && props['aria-labelledby'] && ___EmotionJSX("p", {
     id: ariaLabelledById,
     hidden: true

package/optimize/es/components/datagrid/data_grid.stories.utils.js

@@ -260,6 +260,7 @@ export var defaultStorybookArgs = {
     showFullScreenSelector: true,
     additionalControls: null
   },
+  headerVisibility: true,
   minSizeForControls: MINIMUM_WIDTH_FOR_GRID_CONTROLS,
   rowHeightsOptions: {
     defaultHeight: undefined,

package/optimize/es/components/datagrid/data_grid.styles.js

@@ -92,9 +92,9 @@ export var euiDataGridStyles = function euiDataGridStyles(euiThemeContext) {
     },
     borders: {
       none: null,
-      horizontal: /*#__PURE__*/css("label:borders;.euiDataGridRowCell:not(.euiDataGridFooterCell),.euiDataGridFooter,&:not(.euiDataGrid--headerUnderline) .euiDataGridHeader{", logicalCSS('border-bottom', border), ";}&:not(.euiDataGrid--footerOverline) .euiDataGridFooter{", logicalCSS('border-top', border), " ", logicalCSS('margin-top', "-".concat(euiTheme.border.width.thin)), ";}.euiDataGridHeader{", logicalCSS('border-top', border), ";};label:horizontal;"),
+      horizontal: /*#__PURE__*/css("label:borders;.euiDataGridRowCell:not(.euiDataGridFooterCell),.euiDataGridFooter,&:not(.euiDataGrid--headerUnderline) .euiDataGridHeader{", logicalCSS('border-bottom', border), ";}&:not(.euiDataGrid--footerOverline) .euiDataGridFooter{", logicalCSS('border-top', border), " ", logicalCSS('margin-top', "-".concat(euiTheme.border.width.thin)), ";}.euiDataGridHeader{", logicalCSS('border-top', border), ";}&:is(.euiDataGrid--noHeader) .euiDataGridRow:first-of-type .euiDataGridRowCell{", logicalCSS('border-top', border), ";};label:horizontal;"),
       all: /*#__PURE__*/css("label:borders;.euiDataGridRowCell{&:not(.euiDataGridFooterCell){", logicalCSS('border-bottom', border), " ", logicalCSS('border-right', // Visually lighten vertical borders
-      "".concat(euiTheme.border.width.thin, " solid ").concat(borderColors.vertical)), ";}&--firstColumn{", logicalCSS('border-left', border), ";}&--lastColumn{", logicalCSS('border-right-color', euiTheme.components.dataGridBorderColor), ";}}.euiDataGridFooterCell,.euiDataGridHeaderCell{", logicalCSS('border-right', border), " &:first-of-type{", logicalCSS('border-left', border), ";}}.euiDataGridFooter{", logicalCSS('border-bottom', border), ";}&:not(.euiDataGrid--footerOverline) .euiDataGridFooter{", logicalCSS('border-top', border), " ", logicalCSS('margin-top', "-".concat(euiTheme.border.width.thin)), ";}&:not(.euiDataGrid--headerUnderline) .euiDataGridHeader{", logicalCSS('border-bottom', border), ";}&:is(.euiDataGrid--noControls) .euiDataGridHeader{", logicalCSS('border-top', border), ";}.euiDataGrid__controls{border:", border, ";background-color:", euiTheme.colors.body, ";};label:all;")
+      "".concat(euiTheme.border.width.thin, " solid ").concat(borderColors.vertical)), ";}&--firstColumn{", logicalCSS('border-left', border), ";}&--lastColumn{", logicalCSS('border-right-color', euiTheme.components.dataGridBorderColor), ";}}.euiDataGridFooterCell,.euiDataGridHeaderCell{", logicalCSS('border-right', border), " &:first-of-type{", logicalCSS('border-left', border), ";}}.euiDataGridFooter{", logicalCSS('border-bottom', border), ";}&:not(.euiDataGrid--footerOverline) .euiDataGridFooter{", logicalCSS('border-top', border), " ", logicalCSS('margin-top', "-".concat(euiTheme.border.width.thin)), ";}&:not(.euiDataGrid--headerUnderline) .euiDataGridHeader{", logicalCSS('border-bottom', border), ";}&:is(.euiDataGrid--noControls) .euiDataGridHeader{", logicalCSS('border-top', border), ";}&:is(.euiDataGrid--noHeader.euiDataGrid--noControls) .euiDataGridRow:first-of-type .euiDataGridRowCell{", logicalCSS('border-top', border), ";}.euiDataGrid__controls{border:", border, ";background-color:", euiTheme.colors.body, ";};label:all;")
     },
     // Sits below the controls above it and pagination below it
     euiDataGrid__content: /*#__PURE__*/css("z-index:1;position:relative;flex-grow:1;", logicalSizeCSS('100%'), " ", logicalCSS('max-width', '100%'), " overflow:hidden;font-feature-settings:'tnum' 1;;label:euiDataGrid__content;"),

package/optimize/es/components/datagrid/utils/scrolling.js

@@ -9,7 +9,7 @@ import _regeneratorRuntime from "@babel/runtime/regenerator";
  */
 
 import React, { useContext, useEffect, useCallback, useMemo } from 'react';
-import { useEuiMemoizedStyles } from '../../../services';
+import { useEuiMemoizedStyles, useIsPointerDown } from '../../../services';
 import { logicalStyles } from '../../../global_styling';
 import { DataGridCellPopoverContext } from '../body/cell';
 import { DataGridFocusContext } from './focus';
@@ -27,14 +27,20 @@ export var useScroll = function useScroll(args) {
     scrollCellIntoView = _useScrollCellIntoVie.scrollCellIntoView;
   var _useContext = useContext(DataGridFocusContext),
     focusedCell = _useContext.focusedCell;
+  var isPointerDown = useIsPointerDown(args.outerGridRef);
   useEffect(function () {
     if (focusedCell) {
+      var _window;
+      // do not scroll if text is being selected
+      if (isPointerDown || ((_window = window) === null || _window === void 0 || (_window = _window.getSelection()) === null || _window === void 0 ? void 0 : _window.type) === 'Range') {
+        return;
+      }
       scrollCellIntoView({
         rowIndex: focusedCell[1],
         colIndex: focusedCell[0]
       });
     }
-  }, [focusedCell, scrollCellIntoView]);
+  }, [focusedCell, isPointerDown, scrollCellIntoView]);
   var _useContext2 = useContext(DataGridCellPopoverContext),
     popoverIsOpen = _useContext2.popoverIsOpen,
     cellLocation = _useContext2.cellLocation;

package/optimize/es/components/date_picker/super_date_picker/time_window_buttons.js

@@ -17,6 +17,7 @@ import { useEuiMemoizedStyles, useGeneratedHtmlId } from '../../../services';
 import { useEuiI18n } from '../../i18n';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var ZOOM_FACTOR_DEFAULT = 0.5;
+export var ZOOM_DELTA_FALLBACK_MS = 500;
 /**
  * Button group with time window controls for shifting the time window
  * forwards and backwards, and zooming out.
@@ -29,6 +30,8 @@ export var EuiTimeWindowButtons = function EuiTimeWindowButtons(_ref) {
     isDisabled = _ref.isDisabled,
     _ref$showZoomOut = _ref.showZoomOut,
     showZoomOut = _ref$showZoomOut === void 0 ? true : _ref$showZoomOut,
+    _ref$showZoomIn = _ref.showZoomIn,
+    showZoomIn = _ref$showZoomIn === void 0 ? false : _ref$showZoomIn,
     _ref$showShiftArrows = _ref.showShiftArrows,
     showShiftArrows = _ref$showShiftArrows === void 0 ? true : _ref$showShiftArrows,
     _ref$zoomFactor = _ref.zoomFactor,
@@ -44,16 +47,29 @@ export var EuiTimeWindowButtons = function EuiTimeWindowButtons(_ref) {
     isInvalid = _useEuiTimeWindow.isInvalid,
     stepForward = _useEuiTimeWindow.stepForward,
     stepBackward = _useEuiTimeWindow.stepBackward,
-    expandWindow = _useEuiTimeWindow.expandWindow;
+    expandWindow = _useEuiTimeWindow.expandWindow,
+    shrinkWindow = _useEuiTimeWindow.shrinkWindow,
+    isWindowDurationZero = _useEuiTimeWindow.isWindowDurationZero;
+  var previousDescription = useEuiI18n('euiTimeWindowButtons.previousDescription', 'Previous {displayInterval}', {
+    displayInterval: displayInterval
+  });
+  var nextDescription = useEuiI18n('euiTimeWindowButtons.nextDescription', 'Next {displayInterval}', {
+    displayInterval: displayInterval
+  });
   var invalidShiftDescription = useEuiI18n('euiTimeWindowButtons.invalidShiftLabel', 'Cannot shift invalid time window');
+  var invalidZoomInDescription = useEuiI18n('euiTimeWindowButtons.invalidZoomInLabel', 'Cannot zoom in invalid time window');
+  var cannotZoomInDescription = useEuiI18n('euiTimeWindowButtons.cannotZoomInLabel', 'Cannot zoom in any further');
   var invalidZoomOutDescription = useEuiI18n('euiTimeWindowButtons.invalidZoomOutLabel', 'Cannot zoom out invalid time window');
   var previousId = useGeneratedHtmlId({
     prefix: 'previous'
   });
   var previousLabel = useEuiI18n('euiTimeWindowButtons.previousLabel', 'Previous');
-  var previousTooltipContent = useEuiI18n('euiTimeWindowButtons.previousDescription', 'Previous {displayInterval}', {
-    displayInterval: displayInterval
+  var previousTooltipContent = isInvalid ? invalidShiftDescription : previousDescription;
+  var zoomInId = useGeneratedHtmlId({
+    prefix: 'zoom_in'
   });
+  var zoomInLabel = useEuiI18n('euiTimeWindowButtons.zoomInLabel', 'Zoom in');
+  var zoomInTooltipContent = isInvalid ? invalidZoomInDescription : isWindowDurationZero ? cannotZoomInDescription : zoomInLabel;
   var zoomOutId = useGeneratedHtmlId({
     prefix: 'zoom_out'
   });
@@ -63,10 +79,8 @@ export var EuiTimeWindowButtons = function EuiTimeWindowButtons(_ref) {
     prefix: 'next'
   });
   var nextLabel = useEuiI18n('euiTimeWindowButtons.nextLabel', 'Next');
-  var nextTooltipContent = useEuiI18n('euiTimeWindowButtons.nextDescription', 'Next {displayInterval}', {
-    displayInterval: displayInterval
-  });
-  if (!showZoomOut && !showShiftArrows) return null;
+  var nextTooltipContent = isInvalid ? invalidShiftDescription : nextDescription;
+  if (!showZoomIn && !showZoomOut && !showShiftArrows) return null;
   return ___EmotionJSX("div", {
     className: "euiSuperDatePicker__timeWindowButtons",
     css: [styles.euiButtonGroup__buttons, styles[buttonSize], ";label:EuiTimeWindowButtons;"],
@@ -76,15 +90,30 @@ export var EuiTimeWindowButtons = function EuiTimeWindowButtons(_ref) {
     "data-test-subj": "timeWindowButtonsPrevious",
     label: previousLabel,
     title: "",
-    toolTipContent: !isDisabled && (isInvalid ? invalidShiftDescription : previousTooltipContent),
+    toolTipContent: !isDisabled && previousTooltipContent,
     color: buttonColor,
     size: buttonSize,
     iconType: "arrowLeft",
     iconSize: iconSize,
     isIconOnly: true,
-    isSelected: false,
-    isDisabled: isDisabled,
+    isDisabled: isWindowDurationZero || isDisabled,
     onClick: stepBackward
+  }), showZoomIn && ___EmotionJSX(EuiButtonGroupButton, {
+    id: zoomInId,
+    "data-test-subj": "timeWindowButtonsZoomIn",
+    label: zoomInLabel,
+    title: "",
+    toolTipContent: !isDisabled && zoomInTooltipContent,
+    toolTipProps: {
+      disableScreenReaderOutput: zoomInLabel === zoomInTooltipContent
+    },
+    color: buttonColor,
+    size: buttonSize,
+    iconType: "magnifyWithPlus",
+    iconSize: iconSize,
+    isIconOnly: true,
+    isDisabled: isWindowDurationZero || isDisabled,
+    onClick: shrinkWindow
   }), showZoomOut && ___EmotionJSX(EuiButtonGroupButton, {
     id: zoomOutId,
     "data-test-subj": "timeWindowButtonsZoomOut",
@@ -99,7 +128,6 @@ export var EuiTimeWindowButtons = function EuiTimeWindowButtons(_ref) {
     iconType: "magnifyWithMinus",
     iconSize: iconSize,
     isIconOnly: true,
-    isSelected: false,
     isDisabled: isDisabled,
     onClick: expandWindow
   }), showShiftArrows && ___EmotionJSX(EuiButtonGroupButton, {
@@ -107,14 +135,13 @@ export var EuiTimeWindowButtons = function EuiTimeWindowButtons(_ref) {
     "data-test-subj": "timeWindowButtonsNext",
     label: nextLabel,
     title: "",
-    toolTipContent: !isDisabled && (isInvalid ? invalidShiftDescription : nextTooltipContent),
+    toolTipContent: !isDisabled && nextTooltipContent,
     color: buttonColor,
     size: buttonSize,
     iconType: "arrowRight",
     iconSize: iconSize,
     isIconOnly: true,
-    isSelected: false,
-    isDisabled: isDisabled,
+    isDisabled: isWindowDurationZero || isDisabled,
     onClick: stepForward
   }));
 };
@@ -129,9 +156,10 @@ export function useEuiTimeWindow(start, end, apply, options) {
     roundUp: true
   });
   var isInvalid = !min || !min.isValid() || !max || !max.isValid();
-  var windowDuration = isInvalid ? 1 : max.diff(min);
+  var windowDuration = isInvalid ? -1 : max.diff(min);
+  var isWindowDurationZero = windowDuration === 0;
   var zoomFactor = getPercentageMultiplier((_options$zoomFactor = options === null || options === void 0 ? void 0 : options.zoomFactor) !== null && _options$zoomFactor !== void 0 ? _options$zoomFactor : ZOOM_FACTOR_DEFAULT);
-  var zoomAddition = windowDuration * (zoomFactor / 2); // Gets added to each end, that's why it's split in half
+  var zoomDelta = windowDuration * (zoomFactor / 2); // Gets added to each end, that's why it's split in half
   var prettyInterval = usePrettyInterval(false, windowDuration);
   var displayInterval = isInvalid ? '' : prettyInterval;
   if (!isInvalid && !isRelativeToNow(start, end) && !isExactMinuteRange(windowDuration)) {
@@ -142,17 +170,19 @@ export function useEuiTimeWindow(start, end, apply, options) {
     isInvalid: isInvalid,
     stepForward: stepForward,
     stepBackward: stepBackward,
-    expandWindow: expandWindow
+    expandWindow: expandWindow,
+    shrinkWindow: shrinkWindow,
+    isWindowDurationZero: isWindowDurationZero
   };
   function stepForward() {
-    if (isInvalid) return;
+    if (isInvalid || isWindowDurationZero) return;
     apply({
       start: moment(max).toISOString(),
       end: moment(max).add(windowDuration, 'ms').toISOString()
     });
   }
   function stepBackward() {
-    if (isInvalid) return;
+    if (isInvalid || isWindowDurationZero) return;
     apply({
       start: moment(min).subtract(windowDuration, 'ms').toISOString(),
       end: moment(min).toISOString()
@@ -160,20 +190,39 @@ export function useEuiTimeWindow(start, end, apply, options) {
   }
   function expandWindow() {
     if (isInvalid) return;
+    // when the window is 0 it'll remain 0 unless we help it a little
+    var addition = zoomDelta === 0 ? ZOOM_DELTA_FALLBACK_MS : zoomDelta;
     apply({
-      start: moment(min).subtract(zoomAddition, 'ms').toISOString(),
-      end: moment(max).add(zoomAddition, 'ms').toISOString()
+      start: moment(min).subtract(addition, 'ms').toISOString(),
+      end: moment(max).add(addition, 'ms').toISOString()
+    });
+  }
+  function shrinkWindow() {
+    if (isInvalid || isWindowDurationZero) return;
+    apply({
+      start: moment(min).add(zoomDelta, 'ms').toISOString(),
+      end: moment(max).subtract(zoomDelta, 'ms').toISOString()
     });
   }
 }
 
 /**
- * Get a number out of either 0.2 or "20%"
+ * Convert strings with % to a multiplier e.g. "50%" = 0.5
+ * Strings without % are returned as-is as number
  */
 function getPercentageMultiplier(value) {
-  var result = typeof value === 'number' ? value : parseFloat(String(value).replace('%', '').trim());
-  if (isNaN(result)) throw new TypeError('Please provide a valid number or percentage string e.g. "25%"');
-  return result > 1 ? result / 100 : result;
+  if (typeof value === 'string' && value.includes('%')) {
+    var parsed = parseFloat(value.replace('%', '').trim());
+    if (isNaN(parsed)) {
+      throw new TypeError('Invalid percentage string');
+    }
+    return parsed / 100;
+  }
+  var result = typeof value === 'number' ? value : parseFloat(String(value));
+  if (isNaN(result)) {
+    throw new TypeError('Please provide a valid number or percentage string e.g. "25%"');
+  }
+  return result;
 }
 
 /**

package/optimize/es/components/description_list/description_list.js

@@ -92,4 +92,5 @@ export var EuiDescriptionList = function EuiDescriptionList(_ref) {
   }, rest, {
     "data-type": _type
   }), listItems ? renderedListItems : children));
-};
+};
+EuiDescriptionList.displayName = 'EuiDescriptionList';

package/optimize/es/components/description_list/description_list_description.js

@@ -45,4 +45,5 @@ export var EuiDescriptionListDescription = function EuiDescriptionListDescriptio
     className: classes,
     css: cssStyles
   }, rest), children);
-};
+};
+EuiDescriptionListDescription.displayName = 'EuiDescriptionListDescription';

package/optimize/es/components/description_list/description_list_title.js

@@ -49,4 +49,5 @@ export var EuiDescriptionListTitle = function EuiDescriptionListTitle(_ref) {
     className: classes,
     css: cssStyles
   }, rest), children);
-};
+};
+EuiDescriptionListTitle.displayName = 'EuiDescriptionListTitle';

package/optimize/es/components/empty_prompt/empty_prompt.js

@@ -113,4 +113,5 @@ export var EuiEmptyPrompt = function EuiEmptyPrompt(_ref) {
   }, body), actionsNode && (body || title) && ___EmotionJSX(EuiSpacer, {
     size: "l"
   }), actionsNode)), footerNode);
-};
+};
+EuiEmptyPrompt.displayName = 'EuiEmptyPrompt';

package/optimize/es/components/flex/flex_grid.js

@@ -53,4 +53,5 @@ export var EuiFlexGrid = function EuiFlexGrid(_ref) {
     className: classes,
     style: columnDirectionStyles ? _objectSpread(_objectSpread({}, style), columnDirectionStyles) : style
   }, rest), children);
-};
+};
+EuiFlexGrid.displayName = 'EuiFlexGrid';

package/optimize/es/components/flyout/flyout.js

@@ -52,7 +52,8 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (props, ref) {
       return ___EmotionJSX(EuiFlyoutMain, _extends({}, rest, {
         onClose: onClose,
         onActive: onActive,
-        as: "div"
+        as: "div",
+        ref: ref
       }));
     }
 
@@ -61,7 +62,8 @@ export var EuiFlyout = /*#__PURE__*/forwardRef(function (props, ref) {
       return ___EmotionJSX(EuiFlyoutChild, _extends({}, rest, {
         onClose: onClose,
         onActive: onActive,
-        as: "div"
+        as: "div",
+        ref: ref
       }));
     }
   }

package/optimize/es/components/flyout/manager/flyout_child.js

@@ -10,7 +10,7 @@ var _excluded = ["css", "side"];
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { useEuiTheme } from '../../../services';
 import { EuiManagedFlyout } from './flyout_managed';
 import { useCurrentMainFlyout, useFlyoutLayoutMode, useFlyoutWidth } from './hooks';
@@ -28,7 +28,7 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
  * Managed child flyout that renders alongside or stacked over the main flyout,
  * depending on the current layout mode. Handles required managed flyout props.
  */
-export function EuiFlyoutChild(_ref) {
+export var EuiFlyoutChild = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var customCss = _ref.css,
     _ref$side = _ref.side,
     side = _ref$side === void 0 ? DEFAULT_SIDE : _ref$side,
@@ -61,6 +61,7 @@ export function EuiFlyoutChild(_ref) {
     };
   }
   return ___EmotionJSX(EuiManagedFlyout, _extends({}, props, {
+    ref: ref,
     style: style,
     level: LEVEL_CHILD,
     type: "overlay",
@@ -68,4 +69,5 @@ export function EuiFlyoutChild(_ref) {
     side: side,
     css: customCss
   }));
-}
+});
+EuiFlyoutChild.displayName = 'EuiFlyoutChild';