@elastic/eui 92.0.0 → 92.1.1

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

@@ -1,4 +1,4 @@
-var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "schema", "schemaDetectors", "columnWidths", "defaultColumnWidth", "className", "setColumnWidth", "setVisibleColumns", "switchColumnPos", "headerIsInteractive", "data-test-subj"];
+var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "schema", "schemaDetectors", "columnWidths", "defaultColumnWidth", "className", "setColumnWidth", "setVisibleColumns", "switchColumnPos", "data-test-subj"];
 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -31,7 +31,6 @@ var EuiDataGridHeaderRow = /*#__PURE__*/forwardRef(function (props, ref) {
     setColumnWidth = props.setColumnWidth,
     setVisibleColumns = props.setVisibleColumns,
     switchColumnPos = props.switchColumnPos,
-    headerIsInteractive = props.headerIsInteractive,
     _dataTestSubj = props['data-test-subj'],
     rest = _objectWithoutProperties(props, _excluded);
   var classes = classnames('euiDataGridHeader', className);
@@ -45,8 +44,7 @@ var EuiDataGridHeaderRow = /*#__PURE__*/forwardRef(function (props, ref) {
     return ___EmotionJSX(EuiDataGridControlHeaderCell, {
       key: controlColumn.id,
       index: index,
-      controlColumn: controlColumn,
-      headerIsInteractive: headerIsInteractive
+      controlColumn: controlColumn
     });
   }), columns.map(function (column, index) {
     return ___EmotionJSX(EuiDataGridHeaderCell, {
@@ -60,15 +58,13 @@ var EuiDataGridHeaderRow = /*#__PURE__*/forwardRef(function (props, ref) {
       setColumnWidth: setColumnWidth,
       setVisibleColumns: setVisibleColumns,
       switchColumnPos: switchColumnPos,
-      defaultColumnWidth: defaultColumnWidth,
-      headerIsInteractive: headerIsInteractive
+      defaultColumnWidth: defaultColumnWidth
     });
   }), trailingControlColumns.map(function (controlColumn, index) {
     return ___EmotionJSX(EuiDataGridControlHeaderCell, {
       key: controlColumn.id,
       index: index + leadingControlColumns.length + columns.length,
-      controlColumn: controlColumn,
-      headerIsInteractive: headerIsInteractive
+      controlColumn: controlColumn
     });
   }));
 });
@@ -607,8 +603,7 @@ EuiDataGridHeaderRow.propTypes = {
   defaultColumnWidth: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.oneOf([null])]),
   setColumnWidth: PropTypes.func.isRequired,
   setVisibleColumns: PropTypes.func.isRequired,
-  switchColumnPos: PropTypes.func.isRequired,
-  headerIsInteractive: PropTypes.bool.isRequired
+  switchColumnPos: PropTypes.func.isRequired
 };
 EuiDataGridHeaderRow.displayName = 'EuiDataGridHeaderRow';
 export { EuiDataGridHeaderRow };

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

@@ -1,4 +1,3 @@
-var _excluded = ["handleHeaderMutation"];
 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."); }
@@ -6,8 +5,6 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -17,25 +14,18 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  */
 
 import React, { useState, useMemo } from 'react';
-import { useMutationObserver } from '../../../observer/mutation_observer';
 import { useResizeObserver } from '../../../observer/resize_observer';
-import { useHeaderFocusWorkaround } from '../../utils/focus';
 import { EuiDataGridHeaderRow } from './data_grid_header_row';
-import { jsx as ___EmotionJSX } from "@emotion/react";
+
 /**
  * DRY out setting up the grid header and its refs & observers
  */
-export var useDataGridHeader = function useDataGridHeader(_ref) {
-  var handleHeaderMutation = _ref.handleHeaderMutation,
-    props = _objectWithoutProperties(_ref, _excluded);
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var useDataGridHeader = function useDataGridHeader(props) {
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     headerRowRef = _useState2[0],
     setHeaderRowRef = _useState2[1];
-  useMutationObserver(headerRowRef, handleHeaderMutation, {
-    subtree: true,
-    childList: true
-  });
   var _useResizeObserver = useResizeObserver(headerRowRef, 'height'),
     headerRowHeight = _useResizeObserver.height;
   var headerRow = useMemo(function () {
@@ -44,7 +34,6 @@ export var useDataGridHeader = function useDataGridHeader(_ref) {
     }, props));
   }, Object.values(props)); // eslint-disable-line react-hooks/exhaustive-deps
 
-  useHeaderFocusWorkaround(props.headerIsInteractive);
   return {
     headerRow: headerRow,
     headerRowHeight: headerRowHeight

package/es/components/datagrid/data_grid.js

@@ -40,8 +40,7 @@ import { useDataGridColumnSelector, useDataGridColumnSorting, useDataGridDisplay
 import { DataGridSortingContext, useSorting } from './utils/sorting';
 import { DataGridFocusContext, useFocus, createKeyDownHandler, preventTabbing } from './utils/focus';
 import { useInMemoryValues, EuiDataGridInMemoryRenderer } from './utils/in_memory';
-import { useHeaderIsInteractive } from './body/header/header_is_interactive';
-import { DataGridCellPopoverContext, useCellPopover } from './body/data_grid_cell_popover';
+import { DataGridCellPopoverContext, useCellPopover } from './body/cell';
 import { computeVisibleRows } from './utils/row_count';
 import { EuiDataGridPaginationRenderer } from './utils/data_grid_pagination';
 import { schemaDetectors as providedSchemaDetectors, useMergedSchema } from './utils/data_grid_schema';
@@ -211,13 +210,7 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
   /**
    * Focus
    */
-  var _useHeaderIsInteracti = useHeaderIsInteractive(contentRef.current),
-    headerIsInteractive = _useHeaderIsInteracti.headerIsInteractive,
-    handleHeaderMutation = _useHeaderIsInteracti.handleHeaderMutation;
-  var _useFocus = useFocus({
-      headerIsInteractive: headerIsInteractive,
-      gridItemsRendered: gridItemsRendered
-    }),
+  var _useFocus = useFocus(),
     wrappingDivFocusProps = _useFocus.focusProps,
     focusContext = _objectWithoutProperties(_useFocus, _excluded2);
 
@@ -345,7 +338,6 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
       rowCount: rowCount,
       pagination: pagination,
       hasFooter: !!renderFooterCellValue,
-      headerIsInteractive: headerIsInteractive,
       focusContext: focusContext
     }),
     "data-test-subj": "euiDataGridBody",
@@ -362,8 +354,6 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
     setVisibleColumns: setVisibleColumns,
     switchColumnPos: switchColumnPos,
     onColumnResize: onColumnResize,
-    headerIsInteractive: headerIsInteractive,
-    handleHeaderMutation: handleHeaderMutation,
     schemaDetectors: allSchemaDetectors,
     pagination: pagination,
     renderCellValue: renderCellValue,

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

@@ -12,7 +12,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * Side Public License, v 1.
  */
 
-import { createContext, useContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { createContext, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { tabbable } from 'tabbable';
 import { keys } from '../../../services';
 export var DataGridFocusContext = /*#__PURE__*/createContext({
@@ -27,9 +27,7 @@ export var DataGridFocusContext = /*#__PURE__*/createContext({
 /**
  * Main focus context and overarching focus state management
  */
-export var useFocus = function useFocus(_ref) {
-  var headerIsInteractive = _ref.headerIsInteractive,
-    gridItemsRendered = _ref.gridItemsRendered;
+export var useFocus = function useFocus() {
   // Maintain a map of focus cell state callbacks
   var cellsUpdateFocus = useRef(new Map());
   var onFocusUpdate = useCallback(function (cell, updateFocus) {
@@ -50,14 +48,17 @@ export var useFocus = function useFocus(_ref) {
     focusedCell = _useState4[0],
     _setFocusedCell = _useState4[1];
   var setFocusedCell = useCallback(function (nextFocusedCell) {
-    // If the x/y coordinates remained the same, don't update. This keeps the focusedCell
-    // reference stable, and allows it to be used in places that need reference equality.
-    if (nextFocusedCell[0] === (focusedCell === null || focusedCell === void 0 ? void 0 : focusedCell[0]) && nextFocusedCell[1] === (focusedCell === null || focusedCell === void 0 ? void 0 : focusedCell[1])) {
-      return;
-    }
-    _setFocusedCell(nextFocusedCell);
-    setIsFocusedCellInView(true); // scrolling.ts ensures focused cells are fully in view
-  }, [focusedCell]);
+    _setFocusedCell(function (prevFocusedCell) {
+      // If the x/y coordinates remained the same, don't update. This keeps the focusedCell
+      // reference stable, and allows it to be used in places that need reference equality.
+      if (nextFocusedCell[0] === (prevFocusedCell === null || prevFocusedCell === void 0 ? void 0 : prevFocusedCell[0]) && nextFocusedCell[1] === (prevFocusedCell === null || prevFocusedCell === void 0 ? void 0 : prevFocusedCell[1])) {
+        return prevFocusedCell;
+      } else {
+        setIsFocusedCellInView(true); // scrolling.ts ensures focused cells are fully in view
+        return nextFocusedCell;
+      }
+    });
+  }, []);
   var previousCell = useRef(undefined);
   useEffect(function () {
     if (previousCell.current) {
@@ -69,19 +70,8 @@ export var useFocus = function useFocus(_ref) {
     }
   }, [cellsUpdateFocus, focusedCell]);
   var focusFirstVisibleInteractiveCell = useCallback(function () {
-    if (headerIsInteractive) {
-      // The header (rowIndex -1) is sticky and will always be in view
-      setFocusedCell([0, -1]);
-    } else if (gridItemsRendered.current) {
-      var _gridItemsRendered$cu = gridItemsRendered.current,
-        visibleColumnStartIndex = _gridItemsRendered$cu.visibleColumnStartIndex,
-        visibleRowStartIndex = _gridItemsRendered$cu.visibleRowStartIndex;
-      setFocusedCell([visibleColumnStartIndex, visibleRowStartIndex]);
-    } else {
-      // If the header is non-interactive and there are no rendered cells,
-      // there's nothing to do - we might as well leave focus on the grid body wrapper
-    }
-  }, [setFocusedCell, headerIsInteractive, gridItemsRendered]);
+    setFocusedCell([0, -1]);
+  }, [setFocusedCell]);
   var focusProps = useMemo(function () {
     return isFocusedCellInView ? {
       // FireFox allows tabbing to a div that is scrollable, while Chrome does not
@@ -122,16 +112,15 @@ export var notifyCellOfFocusState = function notifyCellOfFocusState(cellsUpdateF
 /**
  * Keydown handler for connecting focus state with keyboard navigation
  */
-export var createKeyDownHandler = function createKeyDownHandler(_ref2) {
-  var gridElement = _ref2.gridElement,
-    visibleColCount = _ref2.visibleColCount,
-    visibleRowCount = _ref2.visibleRowCount,
-    visibleRowStartIndex = _ref2.visibleRowStartIndex,
-    rowCount = _ref2.rowCount,
-    pagination = _ref2.pagination,
-    hasFooter = _ref2.hasFooter,
-    headerIsInteractive = _ref2.headerIsInteractive,
-    focusContext = _ref2.focusContext;
+export var createKeyDownHandler = function createKeyDownHandler(_ref) {
+  var gridElement = _ref.gridElement,
+    visibleColCount = _ref.visibleColCount,
+    visibleRowCount = _ref.visibleRowCount,
+    visibleRowStartIndex = _ref.visibleRowStartIndex,
+    rowCount = _ref.rowCount,
+    pagination = _ref.pagination,
+    hasFooter = _ref.hasFooter,
+    focusContext = _ref.focusContext;
   return function (event) {
     var focusedCell = focusContext.focusedCell,
       setFocusedCell = focusContext.setFocusedCell;
@@ -165,8 +154,7 @@ export var createKeyDownHandler = function createKeyDownHandler(_ref2) {
       }
     } else if (key === keys.ARROW_UP) {
       event.preventDefault();
-      var minimumIndex = headerIsInteractive ? -1 : 0;
-      if (y > minimumIndex) {
+      if (y > -1) {
         setFocusedCell([x, y - 1]);
       }
     } else if (key === keys.ARROW_RIGHT) {
@@ -253,21 +241,4 @@ export var getParentCellContent = function getParentCellContent(_element) {
     element = element.parentElement;
   }
   return element;
-};
-
-/**
- * Focus fixes & workarounds
- */
-
-// If the focus is on the header, and the header is no longer interactive,
-// move the focus down to the first row
-export var useHeaderFocusWorkaround = function useHeaderFocusWorkaround(headerIsInteractive) {
-  var _useContext = useContext(DataGridFocusContext),
-    focusedCell = _useContext.focusedCell,
-    setFocusedCell = _useContext.setFocusedCell;
-  useEffect(function () {
-    if (!headerIsInteractive && focusedCell && focusedCell[1] === -1) {
-      setFocusedCell([focusedCell[0], 0]);
-    }
-  }, [headerIsInteractive, focusedCell, setFocusedCell]);
 };

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

@@ -11,7 +11,7 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
  */
 
 import React, { useContext, useEffect, useCallback, useMemo } from 'react';
-import { DataGridCellPopoverContext } from '../body/data_grid_cell_popover';
+import { DataGridCellPopoverContext } from '../body/cell';
 import { DataGridFocusContext } from './focus';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 /**

package/es/components/flyout/flyout_resizable.js

@@ -1,4 +1,4 @@
-var _excluded = ["size", "maxWidth", "minWidth", "side", "children"];
+var _excluded = ["size", "maxWidth", "minWidth", "side", "type", "children"];
 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."); }
@@ -19,6 +19,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { forwardRef, useState, useEffect, useRef, useMemo, useCallback } from 'react';
 import { keys, useCombinedRefs, useEuiTheme } from '../../services';
 import { EuiResizableButton } from '../resizable_container';
+import { getPosition } from '../resizable_container/helpers';
 import { EuiFlyout } from './flyout';
 import { euiFlyoutResizableButtonStyles } from './flyout_resizable.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -29,11 +30,13 @@ export var EuiFlyoutResizable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     minWidth = _ref$minWidth === void 0 ? 200 : _ref$minWidth,
     _ref$side = _ref.side,
     side = _ref$side === void 0 ? 'right' : _ref$side,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'overlay' : _ref$type,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
   var euiTheme = useEuiTheme();
   var styles = euiFlyoutResizableButtonStyles(euiTheme);
-  var cssStyles = [styles.euiFlyoutResizableButton, styles[side]];
+  var cssStyles = [styles.euiFlyoutResizableButton, styles[type][side]];
   var getFlyoutMinMaxWidth = useCallback(function (width) {
     return Math.min(Math.max(width, minWidth), maxWidth || Infinity, window.innerWidth - 20 // Leave some offset
     );
@@ -67,7 +70,7 @@ export var EuiFlyoutResizable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     return modifier;
   }, [side, flyoutRef]);
   var onMouseMove = useCallback(function (e) {
-    var mouseOffset = getMouseOrTouchX(e) - initialMouseX.current;
+    var mouseOffset = getPosition(e, true) - initialMouseX.current;
     var changedFlyoutWidth = initialWidth.current + mouseOffset * direction;
     setFlyoutWidth(getFlyoutMinMaxWidth(changedFlyoutWidth));
   }, [getFlyoutMinMaxWidth, direction]);
@@ -80,7 +83,7 @@ export var EuiFlyoutResizable = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, [onMouseMove]);
   var onMouseDown = useCallback(function (e) {
     var _flyoutRef$offsetWidt;
-    initialMouseX.current = getMouseOrTouchX(e);
+    initialMouseX.current = getPosition(e, true);
     initialWidth.current = (_flyoutRef$offsetWidt = flyoutRef === null || flyoutRef === void 0 ? void 0 : flyoutRef.offsetWidth) !== null && _flyoutRef$offsetWidt !== void 0 ? _flyoutRef$offsetWidt : 0;
 
     // Window event listeners instead of React events are used
@@ -110,18 +113,15 @@ export var EuiFlyoutResizable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     size: flyoutWidth || size,
     maxWidth: maxWidth,
     side: side,
+    type: type,
     ref: setRefs
   }), ___EmotionJSX(EuiResizableButton, {
     isHorizontal: true,
+    indicator: "border",
     css: cssStyles,
     onMouseDown: onMouseDown,
     onTouchStart: onMouseDown,
     onKeyDown: onKeyDown
   }), children);
 });
-EuiFlyoutResizable.displayName = 'EuiFlyoutResizable';
-var getMouseOrTouchX = function getMouseOrTouchX(e) {
-  // Some Typescript fooling is needed here
-  var x = e.targetTouches ? e.targetTouches[0].pageX : e.pageX;
-  return x;
-};
+EuiFlyoutResizable.displayName = 'EuiFlyoutResizable';

package/es/components/flyout/flyout_resizable.styles.js

@@ -10,18 +10,24 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { css } from '@emotion/react';
 import { logicalCSS } from '../../global_styling';
 var _ref = process.env.NODE_ENV === "production" ? {
-  name: "6syi0e-euiFlyoutResizableButton",
-  styles: "position:absolute;&::before,&::after{background-color:transparent;};label:euiFlyoutResizableButton;"
+  name: "1gfwqnd-euiFlyoutResizableButton",
+  styles: "position:absolute;label:euiFlyoutResizableButton;"
 } : {
-  name: "6syi0e-euiFlyoutResizableButton",
-  styles: "position:absolute;&::before,&::after{background-color:transparent;};label:euiFlyoutResizableButton;",
+  name: "1gfwqnd-euiFlyoutResizableButton",
+  styles: "position:absolute;label:euiFlyoutResizableButton;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 export var euiFlyoutResizableButtonStyles = function euiFlyoutResizableButtonStyles(_ref2) {
   var euiTheme = _ref2.euiTheme;
   return {
     euiFlyoutResizableButton: _ref,
-    left: /*#__PURE__*/css(logicalCSS('right', "-".concat(euiTheme.border.width.thin)), ";;label:left;"),
-    right: /*#__PURE__*/css(logicalCSS('left', "-".concat(euiTheme.border.width.thin)), ";;label:right;")
+    overlay: {
+      left: /*#__PURE__*/css(logicalCSS('right', 0), ";;label:left;"),
+      right: /*#__PURE__*/css(logicalCSS('left', 0), ";;label:right;")
+    },
+    push: {
+      left: /*#__PURE__*/css(logicalCSS('right', "-".concat(euiTheme.border.width.thin)), ";;label:left;"),
+      right: /*#__PURE__*/css(logicalCSS('left', "-".concat(euiTheme.border.width.thin)), ";;label:right;")
+    }
   };
 };

package/es/components/resizable_container/helpers.js

@@ -20,9 +20,9 @@ function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" =
 
 import { useMemo, useReducer } from 'react';
 import { assertNever } from '../common';
-function isMouseEvent(event) {
-  return _typeof(event) === 'object' && 'pageX' in event && 'pageY' in event;
-}
+export var isTouchEvent = function isTouchEvent(event) {
+  return _typeof(event) === 'object' && 'targetTouches' in event;
+};
 export var pxToPercent = function pxToPercent(proportion, whole) {
   if (whole < 1 || proportion < 0) return 0;
   return proportion / whole * 100;
@@ -49,9 +49,8 @@ export var getPanelMinSize = function getPanelMinSize(panelMinSize, containerSiz
   return Math.max(configMin, paddingMin);
 };
 export var getPosition = function getPosition(event, isHorizontal) {
-  var clientX = isMouseEvent(event) ? event.clientX : event.touches[0].clientX;
-  var clientY = isMouseEvent(event) ? event.clientY : event.touches[0].clientY;
-  return isHorizontal ? clientX : clientY;
+  var direction = isHorizontal ? 'clientX' : 'clientY';
+  return isTouchEvent(event) ? event.targetTouches[0][direction] : event[direction];
 };
 var getSiblingPanel = function getSiblingPanel(element, adjacency) {
   if (!element) return null;

package/es/components/resizable_container/resizable_button.js

@@ -1,4 +1,4 @@
-var _excluded = ["isHorizontal", "alignIndicator", "className"],
+var _excluded = ["isHorizontal", "indicator", "alignIndicator", "className"],
   _excluded2 = ["registration", "id", "disabled", "onFocus"];
 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(); }
@@ -31,14 +31,17 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
  */
 export var EuiResizableButton = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var isHorizontal = _ref.isHorizontal,
+    _ref$indicator = _ref.indicator,
+    indicator = _ref$indicator === void 0 ? 'handle' : _ref$indicator,
     _ref$alignIndicator = _ref.alignIndicator,
     alignIndicator = _ref$alignIndicator === void 0 ? 'center' : _ref$alignIndicator,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiResizableButton', className);
+  var resizeDirection = isHorizontal ? 'horizontal' : 'vertical';
   var euiTheme = useEuiTheme();
   var styles = euiResizableButtonStyles(euiTheme);
-  var cssStyles = [styles.euiResizableButton, isHorizontal ? styles.horizontal : styles.vertical, styles.alignIndicator[alignIndicator]];
+  var cssStyles = [styles.euiResizableButton, styles[indicator], styles["".concat(indicator, "Direction")][resizeDirection], styles[resizeDirection], indicator === 'handle' && styles.alignIndicator[alignIndicator]];
   return ___EmotionJSX(EuiI18n, {
     tokens: ['euiResizableButton.horizontalResizerAriaLabel', 'euiResizableButton.verticalResizerAriaLabel'],
     defaults: ['Press the left or right arrow keys to adjust panels size', 'Press the up or down arrow keys to adjust panels size']
@@ -67,8 +70,14 @@ EuiResizableButton.propTypes = {
        */
   isHorizontal: PropTypes.bool,
   /**
-       * Specify the alignment of the initial resize indicator. Defaults to `center`,
-       * but consider using `start` for extremely tall content that scrolls off-screen
+       * By default, EuiResizableButton will show a grab handle to indicate resizability.
+       * This indicator can be optionally hidden to show a plain border instead.
+       */
+  indicator: PropTypes.oneOf(["handle", "border"]),
+  /**
+       * Allows customizing the alignment of grab `handle` indicators (does nothing for
+       * border indicators). Defaults to `center`, but consider using `start` for extremely
+       * tall content that scrolls off-screen
        */
   alignIndicator: PropTypes.oneOf(["center", "start", "end"]),
   /**

package/es/components/resizable_container/resizable_button.styles.js

@@ -42,21 +42,31 @@ export var euiResizableButtonStyles = function euiResizableButtonStyles(euiTheme
   var transitionSpeed = euiTheme.animation.fast;
   var transition = "".concat(transitionSpeed, " ease");
   return {
-    // Mimics the "grab" icon with CSS psuedo-elements.
-    // 1. The "grab" icon transforms into a thicker straight line on :hover and :focus
-    // 2. Start/end aligned handles should have a slight margin offset that disappears on hover/focus
+    // Creates a resizable indicator (either a grab handle or a plain border) with CSS psuedo-elements.
+    // 1. The "grab" handle transforms into a thicker straight line on :hover and :focus
+    // 2. Start/end aligned grab handles should have a slight margin offset that disappears on hover/focus
     // 3. CSS hack to smooth out/anti-alias the 1px wide handles at various zoom levels
-    euiResizableButton: /*#__PURE__*/css("z-index:1;flex-shrink:0;display:flex;justify-content:center;gap:", mathWithUnits(grabHandleHeight, function (x) {
-      return x * 2;
-    }), ";&:disabled{display:none;}&:hover,&:focus{gap:0;justify-content:center;}", euiCanAnimate, "{transition:gap ", transition, ",justify-content ", transition, ";}&::before,&::after{content:'';display:block;background-color:", euiTheme.colors.darkestShade, ";transform:translateZ(0);", euiCanAnimate, "{transition:width ", transition, ",height ", transition, ",margin ", transition, ",background-color ", transition, ";}}&:hover{&::before,&::after{background-color:", euiTheme.colors.mediumShade, ";", euiCanAnimate, "{transition-delay:", transitionSpeed, ";}}}&:focus,&:active{background-color:", transparentize(euiTheme.colors.primary, 0.1), ";&::before,&::after{background-color:", euiTheme.colors.primary, ";", euiCanAnimate, "{transition:width ", transition, ",height ", transition, ";transition-delay:", mathWithUnits(transitionSpeed, function (x) {
+    euiResizableButton: /*#__PURE__*/css("z-index:1;flex-shrink:0;display:flex;justify-content:center;&:disabled{display:none;}&::before,&::after{content:'';display:block;", euiCanAnimate, "{transition:width ", transition, ",height ", transition, ",margin ", transition, ",background-color ", transition, ";}}&:hover{&::before,&::after{background-color:", euiTheme.colors.mediumShade, ";}}&:focus,&:active{background-color:", transparentize(euiTheme.colors.primary, 0.1), ";&::before,&::after{background-color:", euiTheme.colors.primary, ";", euiCanAnimate, "{transition:width ", transition, ",height ", transition, ";transition-delay:", mathWithUnits(transitionSpeed, function (x) {
       return x / 2;
     }), ";}}};label:euiResizableButton;"),
     horizontal: /*#__PURE__*/css("cursor:col-resize;", logicalCSS('height', '100%'), " ", logicalCSS('width', buttonSize), " margin-inline:", mathWithUnits(buttonSize, function (x) {
       return x / -2;
-    }), ";&::before,&::after{", logicalCSS('width', grabHandleHeight), " ", logicalCSS('height', grabHandleWidth), " margin-block:", euiTheme.size.base, ";}&:hover,&:focus,&:active{&::before,&::after{", logicalCSS('height', '100%'), " margin-block:0;transform:none;}};label:horizontal;"),
+    }), ";;label:horizontal;"),
     vertical: /*#__PURE__*/css("flex-direction:column;cursor:row-resize;", logicalCSS('width', '100%'), " ", logicalCSS('height', buttonSize), " margin-block:", mathWithUnits(buttonSize, function (x) {
       return x / -2;
-    }), ";&::before,&::after{", logicalCSS('height', grabHandleHeight), " ", logicalCSS('width', grabHandleWidth), " margin-inline:", euiTheme.size.base, ";}&:hover,&:focus,&:active{&::before,&::after{", logicalCSS('width', '100%'), " margin-inline:0;transform:none;}};label:vertical;"),
+    }), ";;label:vertical;"),
+    border: /*#__PURE__*/css("&::before,&::after{background-color:", euiTheme.border.color, ";};label:border;"),
+    borderDirection: {
+      horizontal: /*#__PURE__*/css("&::before{", logicalCSS('width', euiTheme.border.width.thin), " ", logicalCSS('height', '100%'), ";}&:hover,&:focus,&:active{&::after{", logicalCSS('width', euiTheme.border.width.thin), " ", logicalCSS('height', '100%'), ";}};label:horizontal;"),
+      vertical: /*#__PURE__*/css("&::before{", logicalCSS('height', euiTheme.border.width.thin), " ", logicalCSS('width', '100%'), ";}&:hover,&:focus,&:active{&::after{", logicalCSS('height', euiTheme.border.width.thin), " ", logicalCSS('width', '100%'), ";}};label:vertical;")
+    },
+    handle: /*#__PURE__*/css("gap:", mathWithUnits(grabHandleHeight, function (x) {
+      return x * 2;
+    }), ";&:hover,&:focus,&:active{gap:0;}", euiCanAnimate, "{transition:gap ", transition, ";}&::before,&::after{background-color:", euiTheme.colors.darkestShade, ";transform:translateZ(0);}&:hover{&::before,&::after{", euiCanAnimate, "{transition-delay:", transitionSpeed, ";}}};label:handle;"),
+    handleDirection: {
+      horizontal: /*#__PURE__*/css("&::before,&::after{", logicalCSS('width', grabHandleHeight), " ", logicalCSS('height', grabHandleWidth), " margin-block:", euiTheme.size.base, ";}&:hover,&:focus,&:active{&::before,&::after{", logicalCSS('height', '100%'), " margin-block:0;transform:none;}};label:horizontal;"),
+      vertical: /*#__PURE__*/css("&::before,&::after{", logicalCSS('height', grabHandleHeight), " ", logicalCSS('width', grabHandleWidth), " margin-inline:", euiTheme.size.base, ";}&:hover,&:focus,&:active{&::before,&::after{", logicalCSS('width', '100%'), " margin-inline:0;transform:none;}};label:vertical;")
+    },
     alignIndicator: {
       center: _ref3,
       start: _ref2,

package/es/components/resizable_container/resizable_container.js

@@ -109,16 +109,33 @@ export var EuiResizableContainer = function EuiResizableContainer(_ref) {
       prevPanelId: prevPanelId,
       nextPanelId: nextPanelId
     });
-  }, [actions, isHorizontal, resizeStart]);
-  var onMouseMove = useCallback(function (event) {
-    if (!reducerState.prevPanelId || !reducerState.nextPanelId || !reducerState.isDragging) return;
-    var position = getPosition(event, isHorizontal);
-    actions.dragMove({
-      position: position,
-      prevPanelId: reducerState.prevPanelId,
-      nextPanelId: reducerState.nextPanelId
-    });
-  }, [actions, isHorizontal, reducerState.prevPanelId, reducerState.nextPanelId, reducerState.isDragging]);
+
+    // Window event listeners instead of React events are used to continue
+    // detecting movement even if the user's mouse leaves the container
+
+    var onMouseMove = function onMouseMove(event) {
+      var position = getPosition(event, isHorizontal);
+      actions.dragMove({
+        position: position,
+        prevPanelId: prevPanelId,
+        nextPanelId: nextPanelId
+      });
+    };
+    var onMouseUp = function onMouseUp() {
+      if (resizeContext.current.trigger === 'pointer') {
+        resizeEnd();
+      }
+      actions.reset();
+      window.removeEventListener('mousemove', onMouseMove);
+      window.removeEventListener('mouseup', onMouseUp);
+      window.removeEventListener('touchmove', onMouseMove);
+      window.removeEventListener('touchend', onMouseUp);
+    };
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+    window.addEventListener('touchmove', onMouseMove);
+    window.addEventListener('touchend', onMouseUp);
+  }, [actions, isHorizontal, resizeStart, resizeEnd]);
   var getKeyMoveDirection = useCallback(function (key) {
     var direction = null;
     if (isHorizontal && key === keys.ARROW_LEFT || !isHorizontal && key === keys.ARROW_UP) {
@@ -156,12 +173,6 @@ export var EuiResizableContainer = function EuiResizableContainer(_ref) {
       resizeEnd();
     }
   }, [getKeyMoveDirection, resizeEnd]);
-  var onMouseUp = useCallback(function () {
-    if (resizeContext.current.trigger === 'pointer') {
-      resizeEnd();
-    }
-    actions.reset();
-  }, [actions, resizeEnd]);
   var onBlur = useCallback(function () {
     if (resizeContext.current.trigger === 'key') {
       resizeEnd();
@@ -220,12 +231,7 @@ export var EuiResizableContainer = function EuiResizableContainer(_ref) {
   }, ___EmotionJSX("div", _extends({
     css: cssStyles,
     className: classes,
-    ref: containerRef,
-    onMouseMove: reducerState.isDragging ? onMouseMove : undefined,
-    onMouseUp: onMouseUp,
-    onMouseLeave: onMouseUp,
-    onTouchMove: onMouseMove,
-    onTouchEnd: onMouseUp
+    ref: containerRef
   }, rest), render()));
 };
 EuiResizableContainer.propTypes = {

package/es/components/steps/step_number.styles.js

@@ -9,7 +9,6 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { mathWithUnits, logicalCSS, euiFontSizeFromScale, euiCanAnimate, euiAnimScale } from '../../global_styling';
-import { makeHighContrastColor } from '../../services';
 import { euiStepVariables } from './step.styles';
 import { euiButtonFillColor } from '../../themes/amsterdam/global_styling/mixins';
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -42,12 +41,12 @@ export var euiStepNumberStyles = function euiStepNumberStyles(euiThemeContext) {
     xs: /*#__PURE__*/css(createStepsNumber(euiStep.numberXSSize, euiFontSizeFromScale('xs', euiTheme)), ";;label:xs;"),
     // status
     incomplete: /*#__PURE__*/css("background-color:transparent;color:", euiTheme.colors.text, ";border:", euiTheme.border.thick, ";;label:incomplete;"),
-    disabled: /*#__PURE__*/css("background-color:", euiButtonFillColor(euiThemeContext, 'disabled').backgroundColor, ";color:", makeHighContrastColor(euiTheme.colors.disabledText)(euiButtonFillColor(euiThemeContext, 'disabled').backgroundColor), ";;label:disabled;"),
+    disabled: /*#__PURE__*/css(euiButtonFillColor(euiThemeContext, 'disabled'), ";;label:disabled;"),
     loading: _ref,
-    warning: /*#__PURE__*/css("color:", euiButtonFillColor(euiThemeContext, 'warning').color, ";background-color:", euiButtonFillColor(euiThemeContext, 'warning').backgroundColor, ";", euiCanAnimate, "{animation:", euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:warning;"),
-    danger: /*#__PURE__*/css("color:", euiButtonFillColor(euiThemeContext, 'danger').color, ";background-color:", euiButtonFillColor(euiThemeContext, 'danger').backgroundColor, ";", euiCanAnimate, "{animation:", euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:danger;"),
-    complete: /*#__PURE__*/css("color:", euiButtonFillColor(euiThemeContext, 'success').color, ";background-color:", euiButtonFillColor(euiThemeContext, 'success').backgroundColor, ";", euiCanAnimate, "{animation:", euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:complete;"),
-    current: /*#__PURE__*/css("border:2px solid ", euiTheme.colors.body, ";box-shadow:0 0 0 2px ", euiTheme.colors.primary, ";.euiStepNumber__number{display:inline-block;transform:translateY(-2px);};label:current;")
+    warning: /*#__PURE__*/css(euiButtonFillColor(euiThemeContext, 'warning'), " ", euiCanAnimate, "{animation:", euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:warning;"),
+    danger: /*#__PURE__*/css(euiButtonFillColor(euiThemeContext, 'danger'), " ", euiCanAnimate, "{animation:", euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:danger;"),
+    complete: /*#__PURE__*/css(euiButtonFillColor(euiThemeContext, 'success'), " ", euiCanAnimate, "{animation:", euiAnimScale, " ", euiTheme.animation.fast, " ", euiTheme.animation.bounce, ";};label:complete;"),
+    current: /*#__PURE__*/css("border:", euiTheme.border.width.thick, " solid ", euiTheme.colors.body, ";box-shadow:0 0 0 ", euiTheme.border.width.thick, " ", euiTheme.colors.primary, ";;label:current;")
   };
 };
 export var euiStepNumberContentStyles = function euiStepNumberContentStyles(_ref3) {
@@ -67,6 +66,6 @@ export var euiStepNumberContentStyles = function euiStepNumberContentStyles(_ref
     incomplete: /*#__PURE__*/css("display:unset;position:relative;inset-block-start:-", euiTheme.border.width.thick, ";;label:incomplete;"),
     loading: /*#__PURE__*/css(";label:loading;"),
     disabled: /*#__PURE__*/css(";label:disabled;"),
-    current: /*#__PURE__*/css(";label:current;")
+    current: /*#__PURE__*/css("display:inline-block;transform:translateY(-", euiTheme.border.width.thick, ");;label:current;")
   };
 };