@elastic/eui 102.1.0 → 102.2.0

package/lib/components/datagrid/body/data_grid_body_virtualized.js

@@ -312,6 +312,48 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
       footerRow: footerRow
     };
   }, [headerRowHeight, headerRow, footerRow]);
+  var onScroll = (0, _react.useCallback)(function (args) {
+    // check only if a callback is passed
+    if (typeof (virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.onScroll) !== 'function') return;
+    var enhancedArgs = _objectSpread(_objectSpread({}, args), {}, {
+      scrollHeight: 0,
+      scrollWidth: 0,
+      clientHeight: 0,
+      clientWidth: 0,
+      isScrolledToBlockStart: args.scrollTop === 0,
+      isScrolledToBlockEnd: false,
+      isScrolledToInlineStart: args.scrollLeft === 0,
+      isScrolledToInlineEnd: false
+    });
+    if (outerGridRef.current) {
+      var _outerGridRef$current = outerGridRef.current,
+        scrollTop = _outerGridRef$current.scrollTop,
+        scrollLeft = _outerGridRef$current.scrollLeft,
+        scrollHeight = _outerGridRef$current.scrollHeight,
+        scrollWidth = _outerGridRef$current.scrollWidth,
+        clientHeight = _outerGridRef$current.clientHeight,
+        clientWidth = _outerGridRef$current.clientWidth;
+      var isScrollableVertical = scrollHeight > clientHeight;
+      var isScrolledToBlockStart = scrollTop === 0;
+      var isScrollableHorizontal = scrollWidth > clientWidth;
+      var isScrolledToInlineStart = scrollLeft === 0;
+      var isScrolledToBlockEnd = isScrollableVertical && !isScrolledToBlockStart && scrollHeight - scrollTop <= clientHeight;
+      var isScrolledToInlineEnd = isScrollableHorizontal && !isScrolledToInlineStart && scrollWidth - scrollLeft <= clientWidth;
+      enhancedArgs = _objectSpread(_objectSpread({}, enhancedArgs), {}, {
+        scrollTop: scrollTop,
+        scrollLeft: scrollLeft,
+        scrollHeight: scrollHeight,
+        scrollWidth: scrollWidth,
+        clientHeight: clientHeight,
+        clientWidth: clientWidth,
+        isScrolledToBlockStart: isScrolledToBlockStart,
+        isScrolledToBlockEnd: isScrolledToBlockEnd,
+        isScrolledToInlineStart: isScrolledToInlineStart,
+        isScrolledToInlineEnd: isScrolledToInlineEnd
+      });
+    }
+    return virtualizationOptions === null || virtualizationOptions === void 0 ? void 0 : virtualizationOptions.onScroll(enhancedArgs);
+  }, [outerGridRef, virtualizationOptions]);
   return _utils.IS_JEST_ENVIRONMENT || finalWidth > 0 ? (0, _react2.jsx)(DataGridWrapperRowsContext.Provider, {
     value: rowWrapperContextValue
   }, (0, _react2.jsx)(_reactWindow.VariableSizeGrid, _extends({}, virtualizationOptions, {
@@ -327,7 +369,8 @@ var EuiDataGridBodyVirtualized = exports.EuiDataGridBodyVirtualized = /*#__PURE_
     height: finalHeight,
     rowHeight: getRowHeight,
     itemData: itemData,
-    rowCount: _utils.IS_JEST_ENVIRONMENT || headerRowHeight > 0 ? visibleRowCount : 0
+    rowCount: _utils.IS_JEST_ENVIRONMENT || headerRowHeight > 0 ? visibleRowCount : 0,
+    onScroll: onScroll
   }), Cell), scrollBorderOverlay) : null;
 });
 EuiDataGridBodyVirtualized.propTypes = {
@@ -434,12 +477,12 @@ EuiDataGridBodyVirtualized.propTypes = {
     defaultSortDirection: _propTypes.default.oneOf(["asc", "desc"]),
     /**
        * A Schema to use for the column.
-       * Built-in values are [`boolean`, `currency`, `datetime`, `numeric`, `json`] but can be expanded by defining your own #EuiDataGrid `schemaDetectors` (for in-memory detection).
+       * Built-in values are [`boolean`, `currency`, `datetime`, `numeric`, `json`] but can be expanded by defining your own {@link EuiDataGrid} `schemaDetectors` (for in-memory detection).
        * In general, it is advised to pass in a value here when you are sure of the schema ahead of time, so that you don't need to rely on the automatic detection.
        */
     schema: _propTypes.default.string,
     /**
-       * Configuration of column actions. Set to false to disable or use #EuiDataGridColumnActions to configure the actions displayed in the header cell of the column.
+       * Configuration of column actions. Set to false to disable or use {@link EuiDataGridColumnActions} to configure the actions displayed in the header cell of the column.
        */
     actions: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.shape({
       /**
@@ -488,7 +531,7 @@ EuiDataGridBodyVirtualized.propTypes = {
              */
         showToolTip: _propTypes.default.bool,
         /**
-             * An object of #EuiListGroupItemExtraAction props.
+             * An object of {@link EuiListGroupItemExtraAction} props.
              * Adds an `EuiButtonIcon` to the right side of the item; `iconType` is required;
              * pass `alwaysShow` if you don't want the default behavior of only showing on hover
              */
@@ -798,7 +841,7 @@ EuiDataGridBodyVirtualized.propTypes = {
   schema: _propTypes.default.shape({}).isRequired,
   schemaDetectors: _propTypes.default.arrayOf(_propTypes.default.shape({
     /**
-       * The name of this data type, matches #EuiDataGridColumn / `schema`
+       * The name of this data type, matches {@link EuiDataGridColumn} / `schema`
        */
     type: _propTypes.default.string.isRequired,
     /**
@@ -826,7 +869,7 @@ EuiDataGridBodyVirtualized.propTypes = {
        */
     sortTextDesc: _propTypes.default.node.isRequired,
     /**
-       * Whether columns with this schema are sortable (defaults to true). Can be overridden at the individual #EuiDataGridColumn level
+       * Whether columns with this schema are sortable (defaults to true). Can be overridden at the individual {@link EuiDataGridColumn} level
        */
     isSortable: _propTypes.default.bool,
     /**
@@ -834,7 +877,7 @@ EuiDataGridBodyVirtualized.propTypes = {
        */
     textTransform: _propTypes.default.oneOf(["uppercase", "lowercase", "capitalize"]),
     /**
-       * Default sort direction of columns with this schema. Can be overridden at the individual #EuiDataGridColumn level
+       * Default sort direction of columns with this schema. Can be overridden at the individual {@link EuiDataGridColumn} level
        */
     defaultSortDirection: _propTypes.default.oneOf(["asc", "desc"])
   }).isRequired).isRequired,
@@ -867,7 +910,12 @@ EuiDataGridBodyVirtualized.propTypes = {
   setVisibleColumns: _propTypes.default.func.isRequired,
   switchColumnPos: _propTypes.default.func.isRequired,
   onColumnResize: _propTypes.default.func,
-  virtualizationOptions: _propTypes.default.any,
+  virtualizationOptions: _propTypes.default.shape({
+    /**
+           * Called when the grid scroll positions changes, as a result of user scrolling or scroll-to method calls.
+           */
+    onScroll: _propTypes.default.func
+  }),
   rowHeightsOptions: _propTypes.default.shape({
     /**
        * Defines the default size for all rows. It can be line count or just height.
@@ -888,7 +936,7 @@ EuiDataGridBodyVirtualized.propTypes = {
        * Defines the height for a specific row. It can be line count or just height.
        *
        * When using row height overrides, we strongly setting the `showDisplaySelector: allowRowHeight`
-       * toolbar control to `false` in #EuiDataGridToolBarVisibilityOptions
+       * toolbar control to `false` in {@link EuiDataGridToolBarVisibilityOptions}
        */
     rowHeights: _propTypes.default.any,
     /**
@@ -931,7 +979,7 @@ EuiDataGridBodyVirtualized.propTypes = {
        */
     stripes: _propTypes.default.bool,
     /**
-       * Visual style for the column headers. Recommendation is to use the `underline` style in times when #EuiDataGrid `toolbarVisibility` is set to `false`.
+       * Visual style for the column headers. Recommendation is to use the `underline` style in times when {@link EuiDataGrid} `toolbarVisibility` is set to `false`.
        * @default shade
        */
     header: _propTypes.default.oneOf(["shade", "underline"]),

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

@@ -182,12 +182,12 @@ EuiDataGridHeaderCell.propTypes = {
     defaultSortDirection: _propTypes.default.oneOf(["asc", "desc"]),
     /**
        * A Schema to use for the column.
-       * Built-in values are [`boolean`, `currency`, `datetime`, `numeric`, `json`] but can be expanded by defining your own #EuiDataGrid `schemaDetectors` (for in-memory detection).
+       * Built-in values are [`boolean`, `currency`, `datetime`, `numeric`, `json`] but can be expanded by defining your own {@link EuiDataGrid} `schemaDetectors` (for in-memory detection).
        * In general, it is advised to pass in a value here when you are sure of the schema ahead of time, so that you don't need to rely on the automatic detection.
        */
     schema: _propTypes.default.string,
     /**
-       * Configuration of column actions. Set to false to disable or use #EuiDataGridColumnActions to configure the actions displayed in the header cell of the column.
+       * Configuration of column actions. Set to false to disable or use {@link EuiDataGridColumnActions} to configure the actions displayed in the header cell of the column.
        */
     actions: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.shape({
       /**
@@ -236,7 +236,7 @@ EuiDataGridHeaderCell.propTypes = {
              */
         showToolTip: _propTypes.default.bool,
         /**
-             * An object of #EuiListGroupItemExtraAction props.
+             * An object of {@link EuiListGroupItemExtraAction} props.
              * Adds an `EuiButtonIcon` to the right side of the item; `iconType` is required;
              * pass `alwaysShow` if you don't want the default behavior of only showing on hover
              */

package/lib/components/datagrid/body/header/draggable_columns.js

@@ -221,7 +221,7 @@ DraggableColumn.propTypes = {
        */
     stripes: _propTypes.default.bool,
     /**
-       * Visual style for the column headers. Recommendation is to use the `underline` style in times when #EuiDataGrid `toolbarVisibility` is set to `false`.
+       * Visual style for the column headers. Recommendation is to use the `underline` style in times when {@link EuiDataGrid} `toolbarVisibility` is set to `false`.
        * @default shade
        */
     header: _propTypes.default.oneOf(["shade", "underline"]),

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

@@ -316,12 +316,12 @@ DataGridSortingControl.propTypes = {
     defaultSortDirection: _propTypes.default.oneOf(["asc", "desc"]),
     /**
        * A Schema to use for the column.
-       * Built-in values are [`boolean`, `currency`, `datetime`, `numeric`, `json`] but can be expanded by defining your own #EuiDataGrid `schemaDetectors` (for in-memory detection).
+       * Built-in values are [`boolean`, `currency`, `datetime`, `numeric`, `json`] but can be expanded by defining your own {@link EuiDataGrid} `schemaDetectors` (for in-memory detection).
        * In general, it is advised to pass in a value here when you are sure of the schema ahead of time, so that you don't need to rely on the automatic detection.
        */
     schema: _propTypes.default.string,
     /**
-       * Configuration of column actions. Set to false to disable or use #EuiDataGridColumnActions to configure the actions displayed in the header cell of the column.
+       * Configuration of column actions. Set to false to disable or use {@link EuiDataGridColumnActions} to configure the actions displayed in the header cell of the column.
        */
     actions: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.shape({
       /**
@@ -370,7 +370,7 @@ DataGridSortingControl.propTypes = {
              */
         showToolTip: _propTypes.default.bool,
         /**
-             * An object of #EuiListGroupItemExtraAction props.
+             * An object of {@link EuiListGroupItemExtraAction} props.
              * Adds an `EuiButtonIcon` to the right side of the item; `iconType` is required;
              * pass `alwaysShow` if you don't want the default behavior of only showing on hover
              */
@@ -680,7 +680,7 @@ DataGridSortingControl.propTypes = {
   schema: _propTypes.default.shape({}).isRequired,
   schemaDetectors: _propTypes.default.arrayOf(_propTypes.default.shape({
     /**
-       * The name of this data type, matches #EuiDataGridColumn / `schema`
+       * The name of this data type, matches {@link EuiDataGridColumn} / `schema`
        */
     type: _propTypes.default.string.isRequired,
     /**
@@ -708,7 +708,7 @@ DataGridSortingControl.propTypes = {
        */
     sortTextDesc: _propTypes.default.node.isRequired,
     /**
-       * Whether columns with this schema are sortable (defaults to true). Can be overridden at the individual #EuiDataGridColumn level
+       * Whether columns with this schema are sortable (defaults to true). Can be overridden at the individual {@link EuiDataGridColumn} level
        */
     isSortable: _propTypes.default.bool,
     /**
@@ -716,7 +716,7 @@ DataGridSortingControl.propTypes = {
        */
     textTransform: _propTypes.default.oneOf(["uppercase", "lowercase", "capitalize"]),
     /**
-       * Default sort direction of columns with this schema. Can be overridden at the individual #EuiDataGridColumn level
+       * Default sort direction of columns with this schema. Can be overridden at the individual {@link EuiDataGridColumn} level
        */
     defaultSortDirection: _propTypes.default.oneOf(["asc", "desc"])
   }).isRequired).isRequired

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

@@ -201,7 +201,7 @@ EuiDataGridColumnSortingDraggable.propTypes = {
   schema: _propTypes.default.shape({}).isRequired,
   schemaDetectors: _propTypes.default.arrayOf(_propTypes.default.shape({
     /**
-       * The name of this data type, matches #EuiDataGridColumn / `schema`
+       * The name of this data type, matches {@link EuiDataGridColumn} / `schema`
        */
     type: _propTypes.default.string.isRequired,
     /**
@@ -229,7 +229,7 @@ EuiDataGridColumnSortingDraggable.propTypes = {
        */
     sortTextDesc: _propTypes.default.node.isRequired,
     /**
-       * Whether columns with this schema are sortable (defaults to true). Can be overridden at the individual #EuiDataGridColumn level
+       * Whether columns with this schema are sortable (defaults to true). Can be overridden at the individual {@link EuiDataGridColumn} level
        */
     isSortable: _propTypes.default.bool,
     /**
@@ -237,7 +237,7 @@ EuiDataGridColumnSortingDraggable.propTypes = {
        */
     textTransform: _propTypes.default.oneOf(["uppercase", "lowercase", "capitalize"]),
     /**
-       * Default sort direction of columns with this schema. Can be overridden at the individual #EuiDataGridColumn level
+       * Default sort direction of columns with this schema. Can be overridden at the individual {@link EuiDataGridColumn} level
        */
     defaultSortDirection: _propTypes.default.oneOf(["asc", "desc"])
   }).isRequired).isRequired,

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

@@ -242,12 +242,12 @@ EuiDataGridInMemoryRenderer.propTypes = {
     defaultSortDirection: _propTypes.default.oneOf(["asc", "desc"]),
     /**
        * A Schema to use for the column.
-       * Built-in values are [`boolean`, `currency`, `datetime`, `numeric`, `json`] but can be expanded by defining your own #EuiDataGrid `schemaDetectors` (for in-memory detection).
+       * Built-in values are [`boolean`, `currency`, `datetime`, `numeric`, `json`] but can be expanded by defining your own {@link EuiDataGrid} `schemaDetectors` (for in-memory detection).
        * In general, it is advised to pass in a value here when you are sure of the schema ahead of time, so that you don't need to rely on the automatic detection.
        */
     schema: _propTypes.default.string,
     /**
-       * Configuration of column actions. Set to false to disable or use #EuiDataGridColumnActions to configure the actions displayed in the header cell of the column.
+       * Configuration of column actions. Set to false to disable or use {@link EuiDataGridColumnActions} to configure the actions displayed in the header cell of the column.
        */
     actions: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.shape({
       /**
@@ -296,7 +296,7 @@ EuiDataGridInMemoryRenderer.propTypes = {
              */
         showToolTip: _propTypes.default.bool,
         /**
-             * An object of #EuiListGroupItemExtraAction props.
+             * An object of {@link EuiListGroupItemExtraAction} props.
              * Adds an `EuiButtonIcon` to the right side of the item; `iconType` is required;
              * pass `alwaysShow` if you don't want the default behavior of only showing on hover
              */

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

@@ -23,6 +23,7 @@ function _asyncToGenerator(n) { return function () { var t = this, e = arguments
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+var ACTIONS_MENU_HEIGHT = 21;
 /**
  * The primary goal of this scroll logic is to ensure keyboard navigation works accessibly,
  * but there are other scenarios where it applies (e.g. clicking partially-visible cells)
@@ -176,7 +177,8 @@ var useScrollCellIntoView = exports.useScrollCellIntoView = function useScrollCe
               if (topHeightOutOfView > 0) {
                 // Note: This overrides the bottom side being out of bounds, as we want to prefer
                 // showing the top-left corner of items if a cell is larger than the grid container
-                adjustedScrollTop = cellTopPos - headerRowHeight;
+                // Additionally, add an offset for the actions menu
+                adjustedScrollTop = cellTopPos - headerRowHeight - ACTIONS_MENU_HEIGHT;
               }
             }
 

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

@@ -191,7 +191,8 @@ var EuiQuickSelect = exports.EuiQuickSelect = /*#__PURE__*/function (_Component)
         default: "Previous time window"
       }, function (previousLabel) {
         return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
-          content: previousLabel
+          content: previousLabel,
+          disableScreenReaderOutput: true
         }, (0, _react2.jsx)(_button.EuiButtonIcon, {
           "aria-label": previousLabel,
           iconType: "arrowLeft",
@@ -204,7 +205,8 @@ var EuiQuickSelect = exports.EuiQuickSelect = /*#__PURE__*/function (_Component)
         default: "Next time window"
       }, function (nextLabel) {
         return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
-          content: nextLabel
+          content: nextLabel,
+          disableScreenReaderOutput: true
         }, (0, _react2.jsx)(_button.EuiButtonIcon, {
           "aria-label": nextLabel,
           iconType: "arrowRight",

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

@@ -641,7 +641,7 @@ EuiSuperDatePickerInternal.propTypes = {
      */
   isQuickSelectOnly: _propTypes.default.bool,
   /**
-     * Props passed to the update button #EuiSuperUpdateButtonProps
+     * Props passed to the update button {@link EuiSuperUpdateButtonProps}
      */
   updateButtonProps: _propTypes.default.shape({
     /**
@@ -671,7 +671,7 @@ EuiSuperDatePickerInternal.propTypes = {
     responsive: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired])
   }),
   /**
-     * Props passed to the quick select button #EuiQuickSelectButtonProps
+     * Props passed to the quick select button {@link EuiQuickSelectButtonProps}
      */
   quickSelectButtonProps: _propTypes.default.any,
   /**
@@ -836,7 +836,7 @@ EuiSuperDatePicker.propTypes = {
      */
   isQuickSelectOnly: _propTypes.default.bool,
   /**
-     * Props passed to the update button #EuiSuperUpdateButtonProps
+     * Props passed to the update button {@link EuiSuperUpdateButtonProps}
      */
   updateButtonProps: _propTypes.default.shape({
     children: _propTypes.default.node,
@@ -846,7 +846,7 @@ EuiSuperDatePicker.propTypes = {
     responsive: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired])
   }),
   /**
-     * Props passed to the quick select button #EuiQuickSelectButtonProps
+     * Props passed to the quick select button {@link EuiQuickSelectButtonProps}
      */
   quickSelectButtonProps: _propTypes.default.any,
   /**