@elastic/eui 97.0.0 → 97.2.0

package/optimize/es/components/datagrid/body/header/draggable_columns.js

@@ -0,0 +1,223 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["role", "tabIndex"],
+  _excluded2 = ["canDragAndDropColumns", "children"],
+  _excluded3 = ["canDragAndDropColumns", "children"];
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+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; }
+/*
+ * 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.
+ */
+
+import React, { memo, useCallback, useContext, useRef } from 'react';
+import { useEuiMemoizedStyles, useGeneratedHtmlId } from '../../../../services';
+import { EuiDragDropContext, EuiDroppable, EuiDraggable } from '../../../drag_and_drop';
+import { EuiPortal } from '../../../portal';
+import { DataGridFocusContext } from '../../utils/focus';
+import { euiDataGridStyles } from '../../data_grid.styles';
+import { euiDataGridDraggableHeaderStyles } from './draggable_columns.styles';
+
+/**
+ * Parent context + EuiDroppable wrapper
+ */
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var DroppableColumns = /*#__PURE__*/memo(function (_ref) {
+  var columns = _ref.columns,
+    switchColumnPos = _ref.switchColumnPos,
+    indexOffset = _ref.indexOffset,
+    children = _ref.children;
+  var styles = useEuiMemoizedStyles(euiDataGridDraggableHeaderStyles);
+  var droppableId = useGeneratedHtmlId({
+    prefix: 'euiDataGridHeaderDroppable'
+  });
+  var _useContext = useContext(DataGridFocusContext),
+    setFocusedCell = _useContext.setFocusedCell;
+  var handleOnDragEnd = useCallback(function (_ref2) {
+    var source = _ref2.source,
+      destination = _ref2.destination;
+    if (!source) return;
+    if (destination && destination.index !== source.index) {
+      var sourceColumn = columns[source.index - indexOffset];
+      var destinationColumn = columns[destination.index - indexOffset];
+      if (sourceColumn && destinationColumn) {
+        switchColumnPos(sourceColumn.id, destinationColumn.id);
+      }
+    }
+    // Force focus the cell to prevent the datagrid body from become unfocusable, including on drag cancel
+    setTimeout(function () {
+      var cellToFocus = destination ? destination.index : source.index;
+      setFocusedCell([cellToFocus, -1], true);
+    });
+  }, [columns, indexOffset, switchColumnPos, setFocusedCell]);
+  return ___EmotionJSX(EuiDragDropContext, {
+    onDragEnd: handleOnDragEnd
+  }, ___EmotionJSX(EuiDroppable, {
+    droppableId: droppableId,
+    direction: "horizontal",
+    ignoreContainerClipping: true,
+    css: styles.euiDataGridHeaderDroppable,
+    "data-test-subj": "euiDataGridHeaderDroppable"
+  }, children));
+});
+DroppableColumns.displayName = 'DroppableColumns';
+
+/**
+ * Individual EuiDraggable columns
+ */
+export var DraggableColumn = /*#__PURE__*/memo(function (_ref3) {
+  var id = _ref3.id,
+    index = _ref3.index,
+    gridStyles = _ref3.gridStyles,
+    columnResizer = _ref3.columnResizer,
+    actionsPopoverToggle = _ref3.actionsPopoverToggle,
+    children = _ref3.children;
+  var dataGridStyles = useEuiMemoizedStyles(euiDataGridStyles);
+  var styles = useEuiMemoizedStyles(euiDataGridDraggableHeaderStyles);
+  // Manually re-apply background and border overrides, since
+  // the droppable zone sets its own and confuses :first-of-type CSS
+  var reapplyCellStyles = [styles[gridStyles.header], index !== 0 && styles.noLeadingBorder];
+
+  // Draggable prevents the cell from receiving focus on click.
+  // We manually ensure focus is set on cell mouseDown which
+  // also includes setting focus before dragging
+  var _useContext2 = useContext(DataGridFocusContext),
+    setFocusedCell = _useContext2.setFocusedCell;
+  var handleOnMouseDown = useCallback(function (e) {
+    var openFocusTrap = document.querySelector('[data-focus-lock-disabled="false"]');
+    if (!!openFocusTrap &&
+    // If a focus trap is open somewhere on the page
+    !openFocusTrap.contains(e.target) &&
+    // & the focus trap doesn't belong to this header
+    e.target !== actionsPopoverToggle // & we're not closing the actions popover toggle
+    ) {
+      // Trick the focus trap lib into registering an outside click -
+      // the drag/drop lib otherwise otherwise prevents the event 💀
+      document.dispatchEvent(new MouseEvent('mousedown'));
+    }
+    setTimeout(function () {
+      setFocusedCell([index, -1], true);
+    });
+  }, [setFocusedCell, index, actionsPopoverToggle]);
+
+  // Prevent any other keypresses when dragging
+  var isDraggingRef = useRef(false);
+  var handleOnKeydown = useCallback(function (e) {
+    if (isDraggingRef.current) {
+      e.preventDefault();
+      e.stopPropagation();
+      return false;
+    }
+  }, []);
+
+  // UX polish: add a slight animation frame delay to the dragging ref end
+  // which prevents re-running the hover animation of column header actions
+  var updateDraggingRef = useCallback(function (isDragging) {
+    // Only update if the state has changed from before
+    if (isDragging !== isDraggingRef.current) {
+      if (!isDragging) {
+        requestAnimationFrame(function () {
+          isDraggingRef.current = false;
+        });
+      } else {
+        isDraggingRef.current = true;
+      }
+    }
+  }, []);
+  return ___EmotionJSX("div", {
+    css: styles.euiDataGridHeaderCellDraggableWrapper,
+    onMouseDown: handleOnMouseDown,
+    onKeyDownCapture: handleOnKeydown
+  }, columnResizer, ___EmotionJSX(EuiDraggable, {
+    draggableId: id,
+    className: "euiDataGridHeaderCellDraggable",
+    css: styles.euiDataGridHeaderCellDraggable,
+    index: index,
+    customDragHandle: "custom",
+    hasInteractiveChildren: true,
+    usePortal: true
+  }, function (_ref4, _ref5) {
+    var dragHandleProps = _ref4.dragHandleProps;
+    var isDragging = _ref5.isDragging,
+      mode = _ref5.mode;
+    updateDraggingRef(isDragging);
+    var _ref6 = dragHandleProps !== null && dragHandleProps !== void 0 ? dragHandleProps : {},
+      role = _ref6.role,
+      tabIndex = _ref6.tabIndex,
+      restDragHandleProps = _objectWithoutProperties(_ref6, _excluded);
+    var passedProps = _objectSpread(_objectSpread({}, restDragHandleProps), {}, {
+      css: reapplyCellStyles,
+      'data-column-moving': isDraggingRef.current || undefined,
+      isDragging: isDragging
+    });
+
+    // since the cloned content is in a portal outside the datagrid
+    // we need to re-add styles to the cell as the scoped styles
+    // from the wrapper don't apply
+    var draggingStyles = [styles.euiDataGridHeaderCellDraggable,
+    // ensure height is maintained while dragging
+    dataGridStyles.cellPadding[gridStyles.cellPadding], dataGridStyles.fontSize[gridStyles.fontSize], dataGridStyles.borders[gridStyles.border], mode === 'SNAP' && styles.isKeyboardDragging];
+    return isDragging ? ___EmotionJSX("div", {
+      css: draggingStyles
+    }, ___EmotionJSX(DragOverlay, {
+      isDragging: true,
+      cursor: "grabbing"
+    }), children(passedProps)) : children(passedProps);
+  }));
+});
+DraggableColumn.displayName = 'DraggableColumn';
+
+/**
+ * Components for conditionally rendering drag/drop wrappers
+ * Allows us to conditionally call hooks while not instantiating a bunch
+ * of extra state/etc., since draggable columns isn't yet(?) a default
+ */
+
+export var ConditionalDroppableColumns = /*#__PURE__*/memo(function (_ref7) {
+  var canDragAndDropColumns = _ref7.canDragAndDropColumns,
+    children = _ref7.children,
+    rest = _objectWithoutProperties(_ref7, _excluded2);
+  return canDragAndDropColumns ? ___EmotionJSX(DroppableColumns, rest, children) : ___EmotionJSX(React.Fragment, null, children);
+});
+ConditionalDroppableColumns.displayName = 'ConditionalDroppableColumns';
+export var ConditionalDraggableColumn = /*#__PURE__*/memo(function (_ref8) {
+  var canDragAndDropColumns = _ref8.canDragAndDropColumns,
+    children = _ref8.children,
+    rest = _objectWithoutProperties(_ref8, _excluded3);
+  return canDragAndDropColumns ? ___EmotionJSX(DraggableColumn, rest, children) : ___EmotionJSX(React.Fragment, null, children());
+});
+ConditionalDraggableColumn.displayName = 'ConditionalDraggableColumn';
+
+/**
+ * Creates an invisible overlay that prevents hover interactions/transitions
+ * on other elements that the dragged element is dragged over, and also maintains
+ * the intended drag cursor over any location.
+ *
+ * TODO: If this is useful elsewhere, consider moving it to `src/services`
+ */
+var _ref10 = process.env.NODE_ENV === "production" ? {
+  name: "q8wbl-DragOverlay",
+  styles: "position:fixed;inset:0;label:DragOverlay;"
+} : {
+  name: "q8wbl-DragOverlay",
+  styles: "position:fixed;inset:0;label:DragOverlay;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var DragOverlay = /*#__PURE__*/memo(function (_ref9) {
+  var isDragging = _ref9.isDragging,
+    cursor = _ref9.cursor,
+    _ref9$zIndex = _ref9.zIndex,
+    zIndex = _ref9$zIndex === void 0 ? 9999 : _ref9$zIndex;
+  return isDragging ? ___EmotionJSX(EuiPortal, null, ___EmotionJSX("div", {
+    css: _ref10,
+    style: {
+      cursor: cursor,
+      zIndex: zIndex
+    }
+  })) : null;
+});
+DragOverlay.displayName = 'DragOverlay';

package/optimize/es/components/datagrid/body/header/draggable_columns.styles.js

@@ -0,0 +1,38 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
+var _templateObject;
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+/*
+ * 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.
+ */
+
+import { css, keyframes } from '@emotion/react';
+import { euiCanAnimate, logicalCSS } from '../../../../global_styling';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "pfqu74-euiDataGridHeaderDroppable",
+  styles: "display:flex;label:euiDataGridHeaderDroppable;"
+} : {
+  name: "pfqu74-euiDataGridHeaderDroppable",
+  styles: "display:flex;label:euiDataGridHeaderDroppable;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiDataGridDraggableHeaderStyles = function euiDataGridDraggableHeaderStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
+  return {
+    euiDataGridHeaderDroppable: _ref,
+    // The resizer must be positioned outside the draggable component to ensure both work independently
+    euiDataGridHeaderCellDraggableWrapper: /*#__PURE__*/css("position:relative;.euiDataGridColumnResizer::after{", logicalCSS('margin-left', "-".concat(euiTheme.border.width.thick)), ";};label:euiDataGridHeaderCellDraggableWrapper;"),
+    // override internal styling from @hello-pangea/dnd to ensure positioning
+    euiDataGridHeaderCellDraggable: /*#__PURE__*/css("display:flex;", logicalCSS('height', '100%'), ";;label:euiDataGridHeaderCellDraggable;"),
+    // Add more visual affordance to keyboard drags (raises cell slightly to show green droppable bg)
+    // Using animation as transition doesn't seem to work (a tale as old as EuiDataGrid...)
+    isKeyboardDragging: /*#__PURE__*/css("animation-name:", keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n        from { transform: translateY(0); }\n        to { transform: translateY(-", "); }\n      "])), euiTheme.size.s), ";animation-iteration-count:1;animation-fill-mode:forwards;", euiCanAnimate, "{animation-duration:", euiTheme.animation.fast, ";};label:isKeyboardDragging;"),
+    // Ensure correct cell background colors on drag
+    underline: /*#__PURE__*/css("background-color:", euiTheme.colors.emptyShade, ";;label:underline;"),
+    shade: /*#__PURE__*/css("background-color:", euiTheme.colors.lightestShade, ";;label:shade;"),
+    noLeadingBorder: /*#__PURE__*/css(logicalCSS('border-left', 'none !important'), ";;label:noLeadingBorder;")
+  };
+};

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

@@ -391,7 +391,8 @@ export var EuiDataGrid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (pr
     gridRef: gridRef,
     gridItemsRendered: gridItemsRendered,
     wrapperRef: contentRef,
-    renderCustomGridBody: renderCustomGridBody
+    renderCustomGridBody: renderCustomGridBody,
+    canDragAndDropColumns: columnVisibility.canDragAndDropColumns
   }))), showPagination && props['aria-labelledby'] && ___EmotionJSX("p", {
     id: ariaLabelledById,
     hidden: true

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

@@ -109,9 +109,6 @@ var columns = [{
       "aria-label": "Send email to ".concat(value)
     }, "Send email");
   }]
-}, {
-  id: 'location',
-  displayAsText: 'Location'
 }, {
   id: 'account',
   displayAsText: 'Account',
@@ -146,6 +143,9 @@ var columns = [{
       "aria-label": "Send money to ".concat(value)
     }, "Send money");
   }]
+}, {
+  id: 'location',
+  displayAsText: 'Location'
 }, {
   id: 'date',
   displayAsText: 'Date',
@@ -226,7 +226,8 @@ export var defaultStorybookArgs = {
   // setup for easier testing/QA
   columnVisibility: {
     visibleColumns: ['name', 'email', 'account', 'location', 'date', 'amount', 'phone', 'version'],
-    setVisibleColumns: function setVisibleColumns() {}
+    setVisibleColumns: function setVisibleColumns() {},
+    canDragAndDropColumns: false
   },
   inMemory: {
     level: 'sorting'
@@ -337,7 +338,8 @@ export var StatefulDataGrid = function StatefulDataGrid(props) {
   return ___EmotionJSX(EuiDataGrid, _extends({}, rest, {
     columnVisibility: {
       visibleColumns: visibleColumns,
-      setVisibleColumns: setVisibleColumns
+      setVisibleColumns: setVisibleColumns,
+      canDragAndDropColumns: columnVisibility.canDragAndDropColumns
     },
     sorting: {
       columns: sortingColumns,

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

@@ -65,12 +65,10 @@ export var useColumnWidths = function useColumnWidths(_ref) {
     setColumnWidths(function (prevColumnWidths) {
       return _objectSpread(_objectSpread({}, prevColumnWidths), {}, _defineProperty({}, columnId, width));
     });
-    if (onColumnResize) {
-      onColumnResize({
-        columnId: columnId,
-        width: width
-      });
-    }
+    onColumnResize === null || onColumnResize === void 0 || onColumnResize({
+      columnId: columnId,
+      width: width
+    });
   }, [onColumnResize]);
 
   // Used by react-window to determine actual column widths

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

@@ -42,11 +42,11 @@ export var useFocus = function useFocus() {
     _useState4 = _slicedToArray(_useState3, 2),
     focusedCell = _useState4[0],
     _setFocusedCell = _useState4[1];
-  var setFocusedCell = useCallback(function (nextFocusedCell) {
+  var setFocusedCell = useCallback(function (nextFocusedCell, forceUpdate) {
     _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])) {
+      if (!forceUpdate && 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

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

@@ -61,7 +61,8 @@ export var useScrollCellIntoView = function useScrollCellIntoView(_ref) {
     headerRowHeight = _ref.headerRowHeight,
     footerRowHeight = _ref.footerRowHeight,
     visibleRowCount = _ref.visibleRowCount,
-    hasStickyFooter = _ref.hasStickyFooter;
+    hasStickyFooter = _ref.hasStickyFooter,
+    canDragAndDropColumns = _ref.canDragAndDropColumns;
   var scrollCellIntoView = useCallback(
   /*#__PURE__*/
   // Note: in order for this UX to work correctly with react-window's APIs,
@@ -70,7 +71,7 @@ export var useScrollCellIntoView = function useScrollCellIntoView(_ref) {
   function () {
     var _ref3 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(_ref2) {
       var _adjustedScrollLeft;
-      var rowIndex, colIndex, getCell, cell, cellIsInView, _outerGridRef$current, scrollTop, scrollLeft, adjustedScrollTop, adjustedScrollLeft, cellRightPos, rightScrollBound, rightWidthOutOfView, cellLeftPos, leftScrollBound, leftWidthOutOfView, isStickyHeader, isStickyFooter, _adjustedScrollTop, parentRow, cellBottomPos, bottomScrollBound, bottomHeightOutOfView, cellTopPos, topScrollBound, topHeightOutOfView, _adjustedScrollLeft2, _adjustedScrollTop2;
+      var rowIndex, colIndex, getCell, cell, cellIsInView, isStickyHeader, isStickyFooter, isDraggableHeader, isDraggableHeaderCell, _outerGridRef$current, scrollTop, scrollLeft, adjustedScrollTop, adjustedScrollLeft, cellLeftPos, cellRightPos, rightScrollBound, rightWidthOutOfView, leftScrollBound, leftWidthOutOfView, _adjustedScrollTop, parentRow, cellBottomPos, bottomScrollBound, bottomHeightOutOfView, cellTopPos, topScrollBound, topHeightOutOfView, _adjustedScrollLeft2, _adjustedScrollTop2;
       return _regeneratorRuntime.wrap(function _callee$(_context) {
         while (1) switch (_context.prev = _context.next) {
           case 0:
@@ -117,7 +118,10 @@ export var useScrollCellIntoView = function useScrollCellIntoView(_ref) {
             return _context.abrupt("return");
           case 15:
             // If for some reason we can't find a valid cell, short-circuit
-            // We now manually adjust scroll positioning around the cell to ensure it's
+            isStickyHeader = rowIndex === -1;
+            isStickyFooter = hasStickyFooter && rowIndex === visibleRowCount;
+            isDraggableHeader = canDragAndDropColumns && isStickyHeader;
+            isDraggableHeaderCell = isDraggableHeader && cell.offsetLeft === 0 && colIndex !== 0; // We now manually adjust scroll positioning around the cell to ensure it's
             // fully in view on all sides. A couple of notes on this:
             // 1. We're avoiding relying on react-window's scrollToItem for this because it also
             //    does not account for sticky items (see https://github.com/bvaughn/react-window/issues/586)
@@ -126,8 +130,10 @@ export var useScrollCellIntoView = function useScrollCellIntoView(_ref) {
             //    halfway there, but doesn't guarantee the *full* cell in view, or account for
             //    sticky positioned rows or OS scrollbars, hence these workarounds
             _outerGridRef$current = outerGridRef.current, scrollTop = _outerGridRef$current.scrollTop, scrollLeft = _outerGridRef$current.scrollLeft;
-            // Check if the cell's right side is outside the current scrolling bounds
-            cellRightPos = cell.offsetLeft + cell.offsetWidth;
+            // Draggable header columns are nested within EuiDraggables,
+            // and their offsetLeft needs to go up a wrapper as a result
+            cellLeftPos = isDraggableHeaderCell ? cell.offsetParent.offsetLeft : cell.offsetLeft; // Check if the cell's right side is outside the current scrolling bounds
+            cellRightPos = cellLeftPos + cell.offsetWidth;
             rightScrollBound = scrollLeft + outerGridRef.current.clientWidth; // Note: We specifically want clientWidth and not offsetWidth here to account for scrollbars
             rightWidthOutOfView = cellRightPos - rightScrollBound;
             if (rightWidthOutOfView > 0) {
@@ -135,7 +141,6 @@ export var useScrollCellIntoView = function useScrollCellIntoView(_ref) {
             }
 
             // Check if the cell's left side is outside the current scrolling bounds
-            cellLeftPos = cell.offsetLeft;
             leftScrollBound = (_adjustedScrollLeft = adjustedScrollLeft) !== null && _adjustedScrollLeft !== void 0 ? _adjustedScrollLeft : scrollLeft;
             leftWidthOutOfView = leftScrollBound - cellLeftPos;
             if (leftWidthOutOfView > 0) {
@@ -146,8 +151,6 @@ export var useScrollCellIntoView = function useScrollCellIntoView(_ref) {
 
             // Skip top/bottom scroll adjustments for sticky headers & footers
             // since they should always be in view vertically
-            isStickyHeader = rowIndex === -1;
-            isStickyFooter = hasStickyFooter && rowIndex === visibleRowCount;
             if (!isStickyHeader && !isStickyFooter) {
               parentRow = cell.parentNode; // Check if the cell's bottom side is outside the current scrolling bounds
               cellBottomPos = parentRow.offsetTop + cell.offsetHeight;
@@ -177,7 +180,7 @@ export var useScrollCellIntoView = function useScrollCellIntoView(_ref) {
                 scrollTop: (_adjustedScrollTop2 = adjustedScrollTop) !== null && _adjustedScrollTop2 !== void 0 ? _adjustedScrollTop2 : scrollTop
               });
             }
-          case 28:
+          case 30:
           case "end":
             return _context.stop();
         }
@@ -186,7 +189,7 @@ export var useScrollCellIntoView = function useScrollCellIntoView(_ref) {
     return function (_x) {
       return _ref3.apply(this, arguments);
     };
-  }(), [gridRef, outerGridRef, hasGridScrolling, headerRowHeight, footerRowHeight, visibleRowCount, hasStickyFooter]);
+  }(), [gridRef, outerGridRef, hasGridScrolling, headerRowHeight, footerRowHeight, visibleRowCount, hasStickyFooter, canDragAndDropColumns]);
   return {
     scrollCellIntoView: scrollCellIntoView
   };

package/optimize/es/components/date_picker/super_date_picker/date_popover/absolute_tab.js

@@ -32,6 +32,8 @@ export var EuiAbsoluteTab = function EuiAbsoluteTab(_ref) {
     locale = _ref.locale,
     roundUp = _ref.roundUp,
     utcOffset = _ref.utcOffset,
+    minDate = _ref.minDate,
+    maxDate = _ref.maxDate,
     labelPrefix = _ref.labelPrefix;
   var styles = useEuiMemoizedStyles(euiAbsoluteTabDateFormStyles);
   var _useState = useState(function () {
@@ -125,7 +127,9 @@ export var EuiAbsoluteTab = function EuiAbsoluteTab(_ref) {
     dateFormat: dateFormat,
     timeFormat: timeFormat,
     locale: locale,
-    utcOffset: utcOffset
+    utcOffset: utcOffset,
+    minDate: minDate,
+    maxDate: maxDate
   }), ___EmotionJSX(EuiFlexGroup, {
     component: "form",
     onSubmit: function onSubmit(e) {

package/optimize/es/components/date_picker/super_date_picker/date_popover/date_popover_button.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["position", "isDisabled", "isInvalid", "needsUpdating", "value", "buttonProps", "canRoundRelativeUnits", "roundUp", "onChange", "locale", "dateFormat", "utcOffset", "timeFormat", "isOpen", "onPopoverToggle", "onPopoverClose", "compressed", "timeOptions"];
+var _excluded = ["position", "isDisabled", "isInvalid", "needsUpdating", "value", "buttonProps", "canRoundRelativeUnits", "roundUp", "onChange", "locale", "dateFormat", "utcOffset", "minDate", "maxDate", "timeFormat", "isOpen", "onPopoverToggle", "onPopoverClose", "compressed", "timeOptions"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -33,6 +33,8 @@ export var EuiDatePopoverButton = function EuiDatePopoverButton(props) {
     locale = props.locale,
     dateFormat = props.dateFormat,
     utcOffset = props.utcOffset,
+    minDate = props.minDate,
+    maxDate = props.maxDate,
     timeFormat = props.timeFormat,
     isOpen = props.isOpen,
     onPopoverToggle = props.onPopoverToggle,
@@ -93,7 +95,9 @@ export var EuiDatePopoverButton = function EuiDatePopoverButton(props) {
     locale: locale,
     position: position,
     utcOffset: utcOffset,
-    timeOptions: timeOptions
+    timeOptions: timeOptions,
+    minDate: minDate,
+    maxDate: maxDate
   }));
 };
 EuiDatePopoverButton.displayName = 'EuiDatePopoverButton';

package/optimize/es/components/date_picker/super_date_picker/date_popover/date_popover_content.js

@@ -30,7 +30,9 @@ export var EuiDatePopoverContent = function EuiDatePopoverContent(_ref) {
     locale = _ref.locale,
     position = _ref.position,
     utcOffset = _ref.utcOffset,
-    timeOptions = _ref.timeOptions;
+    timeOptions = _ref.timeOptions,
+    minDate = _ref.minDate,
+    maxDate = _ref.maxDate;
   var styles = useEuiMemoizedStyles(euiDatePopoverContentStyles);
   var onTabClick = function onTabClick(selectedTab) {
     switch (selectedTab.id) {
@@ -59,7 +61,9 @@ export var EuiDatePopoverContent = function EuiDatePopoverContent(_ref) {
       onChange: onChange,
       roundUp: roundUp,
       labelPrefix: labelPrefix,
-      utcOffset: utcOffset
+      utcOffset: utcOffset,
+      minDate: minDate,
+      maxDate: maxDate
     }),
     'data-test-subj': 'superDatePickerAbsoluteTab',
     'aria-label': "".concat(labelPrefix, ": ").concat(absoluteLabel)

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

@@ -37,7 +37,7 @@ import { EuiDatePopoverButton } from './date_popover/date_popover_button';
 import { EuiAutoRefresh, EuiAutoRefreshButton } from '../auto_refresh/auto_refresh';
 import { euiSuperDatePickerStyles } from './super_date_picker.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-function isRangeInvalid(start, end) {
+function isRangeInvalid(start, end, minDate, maxDate) {
   if (start === 'now' && end === 'now') {
     return true;
   }
@@ -45,7 +45,7 @@ function isRangeInvalid(start, end) {
   var endMoment = dateMath.parse(end, {
     roundUp: true
   });
-  var isInvalid = !startMoment || !endMoment || !startMoment.isValid() || !endMoment.isValid() || !moment(startMoment).isValid() || !moment(endMoment).isValid() || startMoment.isAfter(endMoment);
+  var isInvalid = !startMoment || !endMoment || !startMoment.isValid() || !endMoment.isValid() || !moment(startMoment).isValid() || !moment(endMoment).isValid() || startMoment.isAfter(endMoment) || endMoment.isBefore(startMoment) || minDate != null && startMoment.isBefore(minDate) || maxDate != null && endMoment.isAfter(maxDate);
   return isInvalid;
 }
 export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
@@ -64,7 +64,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
       },
       start: _this.props.start,
       end: _this.props.end,
-      isInvalid: isRangeInvalid(_this.props.start, _this.props.end),
+      isInvalid: isRangeInvalid(_this.props.start, _this.props.end, _this.props.minDate, _this.props.maxDate),
       hasChanged: false,
       showPrettyDuration: showPrettyDuration(_this.props.start, _this.props.end, _this.props.commonlyUsedRanges),
       isStartDatePopoverOpen: false,
@@ -73,7 +73,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
     _defineProperty(_this, "setTime", function (_ref) {
       var end = _ref.end,
         start = _ref.start;
-      var isInvalid = isRangeInvalid(start, end);
+      var isInvalid = isRangeInvalid(start, end, _this.props.minDate, _this.props.maxDate);
       _this.setState({
         start: start,
         end: end,
@@ -262,6 +262,8 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
         locale = _this$props3.locale,
         timeFormat = _this$props3.timeFormat,
         utcOffset = _this$props3.utcOffset,
+        minDate = _this$props3.minDate,
+        maxDate = _this$props3.maxDate,
         compressed = _this$props3.compressed,
         onFocus = _this$props3.onFocus,
         styles = _this$props3.memoizedStyles;
@@ -336,6 +338,8 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
             utcOffset: utcOffset,
             timeFormat: timeFormat,
             locale: locale || contextLocale,
+            minDate: minDate,
+            maxDate: maxDate,
             canRoundRelativeUnits: canRoundRelativeUnits,
             isOpen: _this.state.isStartDatePopoverOpen,
             onPopoverToggle: _this.onStartDatePopoverToggle,
@@ -358,6 +362,8 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
             utcOffset: utcOffset,
             timeFormat: timeFormat,
             locale: locale || contextLocale,
+            minDate: minDate,
+            maxDate: maxDate,
             canRoundRelativeUnits: canRoundRelativeUnits,
             roundUp: true,
             isOpen: _this.state.isEndDatePopoverOpen,
@@ -463,7 +469,7 @@ export var EuiSuperDatePickerInternal = /*#__PURE__*/function (_Component) {
           },
           start: nextProps.start,
           end: nextProps.end,
-          isInvalid: isRangeInvalid(nextProps.start, nextProps.end),
+          isInvalid: isRangeInvalid(nextProps.start, nextProps.end, nextProps.minDate, nextProps.maxDate),
           hasChanged: false,
           showPrettyDuration: showPrettyDuration(nextProps.start, nextProps.end, nextProps.commonlyUsedRanges)
         };

package/optimize/es/components/drag_and_drop/draggable.js

@@ -45,6 +45,7 @@ export var EuiDraggable = function EuiDraggable(_ref) {
     cloneItems = _useContext.cloneItems;
   var euiTheme = useEuiTheme();
   var styles = euiDraggableStyles(euiTheme);
+  var hasCustomDragHandle = customDragHandle !== false;
   return ___EmotionJSX(Draggable, _extends({
     draggableId: draggableId,
     index: index,
@@ -52,13 +53,14 @@ export var EuiDraggable = function EuiDraggable(_ref) {
   }, rest), function (provided, snapshot, rubric) {
     var _provided$dragHandleP, _provided$dragHandleP2;
     var isDragging = snapshot.isDragging;
+    var isFullyCustomDragHandle = customDragHandle === 'custom';
     var cssStyles = [styles.euiDraggable, cloneItems && !isDragging && styles.hasClone, isDragging && styles.isDragging, isRemovable && styles.isRemovable, styles.spacing[spacing]];
     var classes = classNames('euiDraggable', className);
     var childClasses = classNames('euiDraggable__item', {
       'euiDraggable__item-isDisabled': isDragDisabled
     });
     var DraggableElement = typeof children === 'function' ? children(provided, snapshot, rubric) : children;
-    var content = ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", _extends({}, provided.draggableProps, !customDragHandle ? provided.dragHandleProps : {}, {
+    var content = ___EmotionJSX(React.Fragment, null, ___EmotionJSX("div", _extends({}, provided.draggableProps, !hasCustomDragHandle ? provided.dragHandleProps : {}, {
       ref: provided.innerRef,
       "data-test-subj": dataTestSubj,
       className: classes,
@@ -68,11 +70,14 @@ export var EuiDraggable = function EuiDraggable(_ref) {
       // interactive element. Screen readers will cue users that this is a container
       // and has one or more elements inside that are part of a related group.
       ,
-      role: hasInteractiveChildren ? 'group' : (_provided$dragHandleP = provided.dragHandleProps) === null || _provided$dragHandleP === void 0 ? void 0 : _provided$dragHandleP.role
+      role: isFullyCustomDragHandle ? undefined // prevent wrapper role from removing semantics of the children
+      : hasInteractiveChildren ? 'group' : (_provided$dragHandleP = provided.dragHandleProps) === null || _provided$dragHandleP === void 0 ? void 0 : _provided$dragHandleP.role
       // If the container includes an interactive element, we remove the tabindex=0
       // because [role="group"] does not permit or warrant a tab stop
+      // additionally we remove the tabindex when the child is a fully custom handle
+      // that has its own tabindex and handle props
       ,
-      tabIndex: hasInteractiveChildren ? undefined : (_provided$dragHandleP2 = provided.dragHandleProps) === null || _provided$dragHandleP2 === void 0 ? void 0 : _provided$dragHandleP2.tabIndex
+      tabIndex: hasInteractiveChildren || isFullyCustomDragHandle ? undefined : (_provided$dragHandleP2 = provided.dragHandleProps) === null || _provided$dragHandleP2 === void 0 ? void 0 : _provided$dragHandleP2.tabIndex
     }), cloneElementWithCss(DraggableElement, {
       className: classNames(DraggableElement.props.className, childClasses),
       css: [euiDraggableItemStyles.euiDraggable__item, isDragDisabled && euiDraggableItemStyles.disabled]