@elastic/eui 93.3.0 → 93.4.0

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

@@ -5,9 +5,11 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.useDataGridColumnSorting = void 0;
+exports.useDataGridColumnSorting = exports.DataGridSortingControl = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _button = require("../../button");
 var _drag_and_drop = require("../../drag_and_drop");
@@ -20,8 +22,7 @@ var _data_grid_toolbar_control = require("./data_grid_toolbar_control");
 var _column_sorting_draggable = require("./column_sorting_draggable");
 var _data_grid_schema = require("../utils/data_grid_schema");
 var _react2 = require("@emotion/react");
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _excluded = ["sorting"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -29,80 +30,108 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-
-var useDataGridColumnSorting = function useDataGridColumnSorting(columns, sorting, schema, schemaDetectors, displayValues) {
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var useDataGridColumnSorting = function useDataGridColumnSorting(_ref) {
+  var sorting = _ref.sorting,
+    rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return sorting == null ? null : (0, _react2.jsx)(DataGridSortingControl, (0, _extends2.default)({
+    sorting: sorting
+  }, rest));
+};
+exports.useDataGridColumnSorting = useDataGridColumnSorting;
+var DataGridSortingControl = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
+  var columns = _ref2.columns,
+    sorting = _ref2.sorting,
+    schema = _ref2.schema,
+    schemaDetectors = _ref2.schemaDetectors,
+    displayValues = _ref2.displayValues;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
+  var sortingButtonText = (0, _i18n.useEuiI18n)('euiColumnSorting.button', 'Sort fields');
+  var sortFieldAriaLabel = (0, _i18n.useEuiI18n)('euiColumnSorting.sortFieldAriaLabel', 'Sort by: ');
   var _useState3 = (0, _react.useState)(false),
     _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
     availableColumnsIsOpen = _useState4[0],
     setAvailableColumnsIsOpen = _useState4[1];
+  var availableColumnIds = (0, _react.useMemo)(function () {
+    return new Set(columns.map(function (_ref3) {
+      var id = _ref3.id;
+      return id;
+    }));
+  }, [columns]);
+
   // prune any non-existent/hidden columns from sorting
   (0, _react.useEffect)(function () {
-    if (sorting) {
-      var nextSortingColumns = [];
-      var availableColumnIds = new Set(columns.map(function (_ref) {
-        var id = _ref.id;
-        return id;
-      }));
-      for (var i = 0; i < sorting.columns.length; i++) {
-        var column = sorting.columns[i];
-        if (availableColumnIds.has(column.id)) {
-          nextSortingColumns.push(column);
-        }
+    var nextSortingColumns = [];
+    for (var i = 0; i < sorting.columns.length; i++) {
+      var column = sorting.columns[i];
+      if (availableColumnIds.has(column.id)) {
+        nextSortingColumns.push(column);
       }
+    }
 
-      // if the column array lengths differ then the sorting columns have been pruned
-      if (nextSortingColumns.length !== sorting.columns.length) {
-        sorting.onSort(nextSortingColumns);
-      }
+    // if the column array lengths differ then the sorting columns have been pruned
+    if (nextSortingColumns.length !== sorting.columns.length) {
+      sorting.onSort(nextSortingColumns);
     }
-  }, [columns, sorting]);
-  var sortingButtonText = (0, _i18n.useEuiI18n)('euiColumnSorting.button', 'Sort fields');
-  if (sorting == null) return null;
-  var activeColumnIds = new Set(sorting.columns.map(function (_ref2) {
-    var id = _ref2.id;
-    return id;
-  }));
-  var _columns$reduce = columns.reduce(function (acc, column) {
-      if (activeColumnIds.has(column.id)) {
-        acc.activeColumns.push(column);
-      } else {
-        acc.inactiveColumns.push(column);
-      }
-      return acc;
-    }, {
-      activeColumns: [],
-      inactiveColumns: []
-    }),
-    inactiveColumns = _columns$reduce.inactiveColumns;
-  var onDragEnd = function onDragEnd(_ref3) {
-    var sourceIndex = _ref3.source.index,
-      destination = _ref3.destination;
+  }, [availableColumnIds, sorting]);
+  var _useMemo = (0, _react.useMemo)(function () {
+      var activeColumnIds = new Set(sorting.columns.map(function (_ref4) {
+        var id = _ref4.id;
+        return id;
+      }));
+      return columns.reduce(function (acc, column) {
+        if (activeColumnIds.has(column.id)) {
+          acc.activeColumns.push(column);
+        } else {
+          acc.inactiveColumns.push(column);
+        }
+        return acc;
+      }, {
+        activeColumns: [],
+        inactiveColumns: []
+      });
+    }, [columns, sorting]),
+    inactiveColumns = _useMemo.inactiveColumns;
+  var onDragEnd = (0, _react.useCallback)(function (_ref5) {
+    var sourceIndex = _ref5.source.index,
+      destination = _ref5.destination;
     if (destination) {
       var destinationIndex = destination.index;
       var nextColumns = (0, _drag_and_drop.euiDragDropReorder)(sorting.columns, sourceIndex, destinationIndex);
       sorting.onSort(nextColumns);
     }
-  };
-  var schemaDetails = function schemaDetails(id) {
+  }, [sorting]);
+  var schemaDetails = (0, _react.useCallback)(function (id) {
     return schema.hasOwnProperty(id) && schema[id].columnType != null ? (0, _data_grid_schema.getDetailsForSchema)(schemaDetectors, schema[id].columnType) : null;
-  };
-  var inactiveSortableColumns = inactiveColumns.filter(function (_ref4) {
-    var id = _ref4.id,
-      isSortable = _ref4.isSortable;
-    var schemaDetail = schemaDetails(id);
-    var sortable = true;
-    if (isSortable != null) {
-      sortable = isSortable;
-    } else if (schemaDetail != null) {
-      sortable = schemaDetail.hasOwnProperty('isSortable') ? schemaDetail.isSortable : true;
-    }
-    return sortable;
-  });
-  var columnSorting = (0, _react2.jsx)(_popover.EuiPopover, {
+  }, [schema, schemaDetectors]);
+  var inactiveSortableColumns = (0, _react.useMemo)(function () {
+    return inactiveColumns.filter(function (_ref6) {
+      var id = _ref6.id,
+        isSortable = _ref6.isSortable;
+      var schemaDetail = schemaDetails(id);
+      var sortable = true;
+      if (isSortable != null) {
+        sortable = isSortable;
+      } else if (schemaDetail != null) {
+        sortable = schemaDetail.hasOwnProperty('isSortable') ? schemaDetail.isSortable : true;
+      }
+      return sortable;
+    });
+  }, [inactiveColumns, schemaDetails]);
+  var onButtonClick = (0, _react.useCallback)(function (id, defaultSortDirection) {
+    var _schemaDetails;
+    var nextColumns = (0, _toConsumableArray2.default)(sorting.columns);
+    nextColumns.push({
+      id: id,
+      direction: defaultSortDirection || ((_schemaDetails = schemaDetails(id)) === null || _schemaDetails === void 0 ? void 0 : _schemaDetails.defaultSortDirection) || 'asc'
+    });
+    sorting.onSort(nextColumns);
+  }, [sorting, schemaDetails]);
+  return (0, _react2.jsx)(_popover.EuiPopover, {
     "data-test-subj": "dataGridColumnSortingPopover",
     isOpen: isOpen,
     closePopover: function closePopover() {
@@ -124,9 +153,9 @@ var useDataGridColumnSorting = function useDataGridColumnSorting(columns, sortin
   }, (0, _react2.jsx)(_drag_and_drop.EuiDroppable, {
     droppableId: "columnSorting",
     className: "euiDataGrid__controlScroll"
-  }, (0, _react2.jsx)(_react.default.Fragment, null, sorting.columns.map(function (_ref5, index) {
-    var id = _ref5.id,
-      direction = _ref5.direction;
+  }, (0, _react2.jsx)(_react.default.Fragment, null, sorting.columns.map(function (_ref7, index) {
+    var id = _ref7.id,
+      direction = _ref7.direction;
     return (0, _react2.jsx)(_column_sorting_draggable.EuiDataGridColumnSortingDraggable, {
       key: id,
       id: id,
@@ -172,49 +201,38 @@ var useDataGridColumnSorting = function useDataGridColumnSorting(columns, sortin
       token: "euiColumnSorting.pickFields",
       default: "Pick fields to sort by"
     }))
-  }, (0, _react2.jsx)(_i18n.EuiI18n, {
-    token: "euiColumnSorting.sortFieldAriaLabel",
-    default: "Sort by: "
-  }, function (sortFieldAriaLabel) {
-    return (0, _react2.jsx)("div", {
-      className: "euiDataGridColumnSorting__fieldList",
-      role: "listbox"
-    }, inactiveSortableColumns.map(function (_ref6) {
-      var id = _ref6.id,
-        defaultSortDirection = _ref6.defaultSortDirection;
-      return (0, _react2.jsx)("button", {
-        key: id,
-        className: "euiDataGridColumnSorting__field",
-        "aria-label": "".concat(sortFieldAriaLabel, " ").concat(id),
-        role: "option",
-        "aria-selected": "false",
-        "data-test-subj": "dataGridColumnSortingPopoverColumnSelection-".concat(id),
-        onClick: function onClick() {
-          var _schemaDetails;
-          var nextColumns = (0, _toConsumableArray2.default)(sorting.columns);
-          nextColumns.push({
-            id: id,
-            direction: defaultSortDirection || ((_schemaDetails = schemaDetails(id)) === null || _schemaDetails === void 0 ? void 0 : _schemaDetails.defaultSortDirection) || 'asc'
-          });
-          sorting.onSort(nextColumns);
-        }
-      }, (0, _react2.jsx)(_flex.EuiFlexGroup, {
-        alignItems: "center",
-        gutterSize: "s",
-        component: "span",
-        responsive: false
-      }, (0, _react2.jsx)(_flex.EuiFlexItem, {
-        grow: false
-      }, (0, _react2.jsx)(_token.EuiToken, {
-        iconType: schemaDetails(id) != null ? (0, _data_grid_schema.getDetailsForSchema)(schemaDetectors, schema[id].columnType).icon : 'tokenString',
-        color: schemaDetails(id) != null ? (0, _data_grid_schema.getDetailsForSchema)(schemaDetectors, schema[id].columnType).color : undefined
-      })), (0, _react2.jsx)(_flex.EuiFlexItem, {
-        grow: false
-      }, (0, _react2.jsx)(_text.EuiText, {
-        size: "xs"
-      }, displayValues[id]))));
-    }));
-  }))), sorting.columns.length > 0 ? (0, _react2.jsx)(_flex.EuiFlexItem, {
+  }, (0, _react2.jsx)("div", {
+    className: "euiDataGridColumnSorting__fieldList",
+    role: "listbox"
+  }, inactiveSortableColumns.map(function (_ref8) {
+    var id = _ref8.id,
+      defaultSortDirection = _ref8.defaultSortDirection;
+    return (0, _react2.jsx)("button", {
+      key: id,
+      className: "euiDataGridColumnSorting__field",
+      "aria-label": "".concat(sortFieldAriaLabel, " ").concat(id),
+      role: "option",
+      "aria-selected": "false",
+      "data-test-subj": "dataGridColumnSortingPopoverColumnSelection-".concat(id),
+      onClick: function onClick() {
+        return onButtonClick(id, defaultSortDirection);
+      }
+    }, (0, _react2.jsx)(_flex.EuiFlexGroup, {
+      alignItems: "center",
+      gutterSize: "s",
+      component: "span",
+      responsive: false
+    }, (0, _react2.jsx)(_flex.EuiFlexItem, {
+      grow: false
+    }, (0, _react2.jsx)(_token.EuiToken, {
+      iconType: schemaDetails(id) != null ? (0, _data_grid_schema.getDetailsForSchema)(schemaDetectors, schema[id].columnType).icon : 'tokenString',
+      color: schemaDetails(id) != null ? (0, _data_grid_schema.getDetailsForSchema)(schemaDetectors, schema[id].columnType).color : undefined
+    })), (0, _react2.jsx)(_flex.EuiFlexItem, {
+      grow: false
+    }, (0, _react2.jsx)(_text.EuiText, {
+      size: "xs"
+    }, displayValues[id]))));
+  })))), sorting.columns.length > 0 ? (0, _react2.jsx)(_flex.EuiFlexItem, {
     grow: false
   }, (0, _react2.jsx)(_button.EuiButtonEmpty, {
     size: "xs",
@@ -227,6 +245,6 @@ var useDataGridColumnSorting = function useDataGridColumnSorting(columns, sortin
     token: "euiColumnSorting.clearAll",
     default: "Clear sorting"
   }))) : null)));
-  return columnSorting;
-};
-exports.useDataGridColumnSorting = useDataGridColumnSorting;
+});
+exports.DataGridSortingControl = DataGridSortingControl;
+DataGridSortingControl.displayName = 'DataGridSortingControl';

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

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,7 +9,7 @@ exports.defaultSortDescLabel = exports.defaultSortAscLabel = exports.EuiDataGrid
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _accessibility = require("../../accessibility");
 var _button = require("../../button");
@@ -28,6 +29,8 @@ var _excluded = ["id", "display", "direction", "index", "sorting", "schema", "sc
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 var defaultSortAscLabel = (0, _react2.jsx)(_i18n.EuiI18n, {
   token: "euiColumnSortingDraggable.defaultSortAsc",
   default: "A-Z"
@@ -62,6 +65,27 @@ var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSortingDraggab
     'data-test-subj': "euiDataGridColumnSorting-sortColumn-".concat(id, "-desc")
   }];
   var dragHandleAriaLabel = (0, _i18n.useEuiI18n)('euiColumnSortingDraggable.dragHandleAriaLabel', 'Drag handle');
+  var removeSort = (0, _react.useCallback)(function () {
+    var nextColumns = (0, _toConsumableArray2.default)(sorting.columns);
+    var columnIndex = nextColumns.map(function (_ref2) {
+      var id = _ref2.id;
+      return id;
+    }).indexOf(id);
+    nextColumns.splice(columnIndex, 1);
+    sorting.onSort(nextColumns);
+  }, [id, sorting]);
+  var toggleLegendHandler = (0, _react.useCallback)(function (_, direction) {
+    var nextColumns = (0, _toConsumableArray2.default)(sorting.columns);
+    var columnIndex = nextColumns.map(function (_ref3) {
+      var id = _ref3.id;
+      return id;
+    }).indexOf(id);
+    nextColumns.splice(columnIndex, 1, {
+      id: id,
+      direction: direction
+    });
+    sorting.onSort(nextColumns);
+  }, [id, sorting]);
   return (0, _react2.jsx)(_drag_and_drop.EuiDraggable, (0, _extends2.default)({
     draggableId: id,
     index: index,
@@ -99,15 +123,7 @@ var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSortingDraggab
         className: "euiDataGridColumnSorting__button",
         "aria-label": removeSortLabel,
         iconType: "cross",
-        onClick: function onClick() {
-          var nextColumns = (0, _toConsumableArray2.default)(sorting.columns);
-          var columnIndex = nextColumns.map(function (_ref2) {
-            var id = _ref2.id;
-            return id;
-          }).indexOf(id);
-          nextColumns.splice(columnIndex, 1);
-          sorting.onSort(nextColumns);
-        }
+        onClick: removeSort
       });
     })), (0, _react2.jsx)(_flex.EuiFlexItem, (0, _extends2.default)({
       className: "euiDataGridColumnSorting__name"
@@ -142,18 +158,7 @@ var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSortingDraggab
         buttonSize: "compressed",
         className: "euiDataGridColumnSorting__order",
         idSelected: direction === 'asc' ? "".concat(id, "Asc") : "".concat(id, "Desc"),
-        onChange: function onChange(_, direction) {
-          var nextColumns = (0, _toConsumableArray2.default)(sorting.columns);
-          var columnIndex = nextColumns.map(function (_ref3) {
-            var id = _ref3.id;
-            return id;
-          }).indexOf(id);
-          nextColumns.splice(columnIndex, 1, {
-            id: id,
-            direction: direction
-          });
-          sorting.onSort(nextColumns);
-        }
+        onChange: toggleLegendHandler
       });
     })), (0, _react2.jsx)(_flex.EuiFlexItem, (0, _extends2.default)({
       grow: false

package/optimize/lib/components/datagrid/controls/display_selector.js

@@ -204,114 +204,116 @@ var useDataGridDisplaySelector = function useDataGridDisplaySelector(showDisplay
   }, []);
   var buttonLabel = (0, _i18n.useEuiI18n)('euiDisplaySelector.buttonText', 'Display options');
   var resetButtonLabel = (0, _i18n.useEuiI18n)('euiDisplaySelector.resetButtonText', 'Reset to default');
-  var displaySelector = showDensityControls || showRowHeightControls || additionalDisplaySettings ? (0, _react2.jsx)(_popover.EuiPopover, {
-    "data-test-subj": "dataGridDisplaySelectorPopover",
-    isOpen: isOpen,
-    closePopover: function closePopover() {
-      return setIsOpen(false);
-    },
-    anchorPosition: "downRight",
-    panelPaddingSize: "s",
-    panelClassName: "euiDataGrid__displayPopoverPanel",
-    button: (0, _react2.jsx)(_tool_tip.EuiToolTip, {
-      content: buttonLabel,
-      delay: "long"
-    }, (0, _react2.jsx)(_button.EuiButtonIcon, {
-      size: "xs",
-      iconType: "controlsHorizontal",
-      color: "text",
-      "data-test-subj": "dataGridDisplaySelectorButton",
-      onClick: function onClick() {
-        return setIsOpen(!isOpen);
+  var displaySelector = (0, _react.useMemo)(function () {
+    return showDensityControls || showRowHeightControls || additionalDisplaySettings ? (0, _react2.jsx)(_popover.EuiPopover, {
+      "data-test-subj": "dataGridDisplaySelectorPopover",
+      isOpen: isOpen,
+      closePopover: function closePopover() {
+        return setIsOpen(false);
       },
-      "aria-label": buttonLabel
-    }))
-  }, showDensityControls && (0, _react2.jsx)(_i18n.EuiI18n, {
-    tokens: ['euiDisplaySelector.densityLabel', 'euiDisplaySelector.labelCompact', 'euiDisplaySelector.labelNormal', 'euiDisplaySelector.labelExpanded'],
-    defaults: ['Density', 'Compact', 'Normal', 'Expanded']
-  }, function (_ref) {
-    var _ref2 = (0, _slicedToArray2.default)(_ref, 4),
-      densityLabel = _ref2[0],
-      labelCompact = _ref2[1],
-      labelNormal = _ref2[2],
-      labelExpanded = _ref2[3];
-    return (0, _react2.jsx)(_form.EuiFormRow, {
-      label: densityLabel,
-      display: "columnCompressed"
-    }, (0, _react2.jsx)(_button.EuiButtonGroup, {
-      legend: densityLabel,
-      buttonSize: "compressed",
-      isFullWidth: true,
-      options: [{
-        id: densityOptions[0],
-        label: labelCompact
-      }, {
-        id: densityOptions[1],
-        label: labelNormal
-      }, {
-        id: densityOptions[2],
-        label: labelExpanded
-      }],
-      onChange: setGridStyles,
-      idSelected: gridDensity,
-      "data-test-subj": "densityButtonGroup"
-    }));
-  }), showRowHeightControls && (0, _react2.jsx)(_i18n.EuiI18n, {
-    tokens: ['euiDisplaySelector.rowHeightLabel', 'euiDisplaySelector.labelSingle', 'euiDisplaySelector.labelAuto', 'euiDisplaySelector.labelCustom', 'euiDisplaySelector.lineCountLabel'],
-    defaults: ['Row height', 'Single', 'Auto fit', 'Custom', 'Lines per row']
-  }, function (_ref3) {
-    var _ref4 = (0, _slicedToArray2.default)(_ref3, 5),
-      rowHeightLabel = _ref4[0],
-      labelSingle = _ref4[1],
-      labelAuto = _ref4[2],
-      labelCustom = _ref4[3],
-      lineCountLabel = _ref4[4];
-    return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_form.EuiFormRow, {
-      label: rowHeightLabel,
-      display: "columnCompressed"
-    }, (0, _react2.jsx)(_button.EuiButtonGroup, {
-      legend: rowHeightLabel,
-      buttonSize: "compressed",
-      isFullWidth: true,
-      options: [{
-        id: rowHeightButtonOptions[0],
-        label: labelSingle
-      }, {
-        id: rowHeightButtonOptions[1],
-        label: labelAuto
-      }, {
-        id: rowHeightButtonOptions[2],
-        label: labelCustom
-      }],
-      onChange: setRowHeight,
-      idSelected: rowHeightSelection,
-      "data-test-subj": "rowHeightButtonGroup"
-    })), rowHeightSelection === rowHeightButtonOptions[2] && (0, _react2.jsx)(_form.EuiFormRow, {
-      label: lineCountLabel,
-      display: "columnCompressed"
-    }, (0, _react2.jsx)(_form.EuiRange, {
-      compressed: true,
-      fullWidth: true,
-      showInput: true,
-      min: 1,
-      max: 20,
-      step: 1,
-      required: true,
-      value: lineCountInput,
-      onChange: setLineCountHeight,
-      "data-test-subj": "lineCountNumber"
-    })));
-  }), additionalDisplaySettings, showResetButton && (0, _react2.jsx)(_popover.EuiPopoverFooter, null, (0, _react2.jsx)(_flex.EuiFlexGroup, {
-    justifyContent: "flexEnd",
-    responsive: false
-  }, (0, _react2.jsx)(_flex.EuiFlexItem, {
-    grow: false
-  }, (0, _react2.jsx)("div", null, (0, _react2.jsx)(_button.EuiButtonEmpty, {
-    flush: "both",
-    size: "xs",
-    onClick: resetToInitialState,
-    "data-test-subj": "resetDisplaySelector"
-  }, resetButtonLabel)))))) : null;
+      anchorPosition: "downRight",
+      panelPaddingSize: "s",
+      panelClassName: "euiDataGrid__displayPopoverPanel",
+      button: (0, _react2.jsx)(_tool_tip.EuiToolTip, {
+        content: buttonLabel,
+        delay: "long"
+      }, (0, _react2.jsx)(_button.EuiButtonIcon, {
+        size: "xs",
+        iconType: "controlsHorizontal",
+        color: "text",
+        "data-test-subj": "dataGridDisplaySelectorButton",
+        onClick: function onClick() {
+          return setIsOpen(!isOpen);
+        },
+        "aria-label": buttonLabel
+      }))
+    }, showDensityControls && (0, _react2.jsx)(_i18n.EuiI18n, {
+      tokens: ['euiDisplaySelector.densityLabel', 'euiDisplaySelector.labelCompact', 'euiDisplaySelector.labelNormal', 'euiDisplaySelector.labelExpanded'],
+      defaults: ['Density', 'Compact', 'Normal', 'Expanded']
+    }, function (_ref) {
+      var _ref2 = (0, _slicedToArray2.default)(_ref, 4),
+        densityLabel = _ref2[0],
+        labelCompact = _ref2[1],
+        labelNormal = _ref2[2],
+        labelExpanded = _ref2[3];
+      return (0, _react2.jsx)(_form.EuiFormRow, {
+        label: densityLabel,
+        display: "columnCompressed"
+      }, (0, _react2.jsx)(_button.EuiButtonGroup, {
+        legend: densityLabel,
+        buttonSize: "compressed",
+        isFullWidth: true,
+        options: [{
+          id: densityOptions[0],
+          label: labelCompact
+        }, {
+          id: densityOptions[1],
+          label: labelNormal
+        }, {
+          id: densityOptions[2],
+          label: labelExpanded
+        }],
+        onChange: setGridStyles,
+        idSelected: gridDensity,
+        "data-test-subj": "densityButtonGroup"
+      }));
+    }), showRowHeightControls && (0, _react2.jsx)(_i18n.EuiI18n, {
+      tokens: ['euiDisplaySelector.rowHeightLabel', 'euiDisplaySelector.labelSingle', 'euiDisplaySelector.labelAuto', 'euiDisplaySelector.labelCustom', 'euiDisplaySelector.lineCountLabel'],
+      defaults: ['Row height', 'Single', 'Auto fit', 'Custom', 'Lines per row']
+    }, function (_ref3) {
+      var _ref4 = (0, _slicedToArray2.default)(_ref3, 5),
+        rowHeightLabel = _ref4[0],
+        labelSingle = _ref4[1],
+        labelAuto = _ref4[2],
+        labelCustom = _ref4[3],
+        lineCountLabel = _ref4[4];
+      return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_form.EuiFormRow, {
+        label: rowHeightLabel,
+        display: "columnCompressed"
+      }, (0, _react2.jsx)(_button.EuiButtonGroup, {
+        legend: rowHeightLabel,
+        buttonSize: "compressed",
+        isFullWidth: true,
+        options: [{
+          id: rowHeightButtonOptions[0],
+          label: labelSingle
+        }, {
+          id: rowHeightButtonOptions[1],
+          label: labelAuto
+        }, {
+          id: rowHeightButtonOptions[2],
+          label: labelCustom
+        }],
+        onChange: setRowHeight,
+        idSelected: rowHeightSelection,
+        "data-test-subj": "rowHeightButtonGroup"
+      })), rowHeightSelection === rowHeightButtonOptions[2] && (0, _react2.jsx)(_form.EuiFormRow, {
+        label: lineCountLabel,
+        display: "columnCompressed"
+      }, (0, _react2.jsx)(_form.EuiRange, {
+        compressed: true,
+        fullWidth: true,
+        showInput: true,
+        min: 1,
+        max: 20,
+        step: 1,
+        required: true,
+        value: lineCountInput,
+        onChange: setLineCountHeight,
+        "data-test-subj": "lineCountNumber"
+      })));
+    }), additionalDisplaySettings, showResetButton && (0, _react2.jsx)(_popover.EuiPopoverFooter, null, (0, _react2.jsx)(_flex.EuiFlexGroup, {
+      justifyContent: "flexEnd",
+      responsive: false
+    }, (0, _react2.jsx)(_flex.EuiFlexItem, {
+      grow: false
+    }, (0, _react2.jsx)("div", null, (0, _react2.jsx)(_button.EuiButtonEmpty, {
+      flush: "both",
+      size: "xs",
+      onClick: resetToInitialState,
+      "data-test-subj": "resetDisplaySelector"
+    }, resetButtonLabel)))))) : null;
+  }, [additionalDisplaySettings, buttonLabel, isOpen, resetButtonLabel, showDensityControls, showResetButton, showRowHeightControls, gridDensity, rowHeightSelection, lineCountInput, setGridStyles, setRowHeight, setLineCountHeight, resetToInitialState]);
   return [displaySelector, gridStyles, rowHeightsOptions];
 };
 exports.useDataGridDisplaySelector = useDataGridDisplaySelector;