@elastic/eui 93.2.0 → 93.4.0

package/optimize/lib/components/datagrid/body/header/data_grid_control_header_cell.js

@@ -1,15 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiDataGridControlHeaderCell = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _data_grid_header_cell_wrapper = require("./data_grid_header_cell_wrapper");
 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; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -18,7 +21,7 @@ var _react2 = require("@emotion/react");
  * Side Public License, v 1.
  */
 
-var EuiDataGridControlHeaderCell = function EuiDataGridControlHeaderCell(_ref) {
+var EuiDataGridControlHeaderCell = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var controlColumn = _ref.controlColumn,
     index = _ref.index;
   var HeaderCellRender = controlColumn.headerCellRender,
@@ -33,5 +36,6 @@ var EuiDataGridControlHeaderCell = function EuiDataGridControlHeaderCell(_ref) {
   }), (0, _react2.jsx)("div", {
     className: "euiDataGridHeaderCell__content"
   }, (0, _react2.jsx)(HeaderCellRender, null)));
-};
-exports.EuiDataGridControlHeaderCell = EuiDataGridControlHeaderCell;
+});
+exports.EuiDataGridControlHeaderCell = EuiDataGridControlHeaderCell;
+EuiDataGridControlHeaderCell.displayName = 'EuiDataGridControlHeaderCell';

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

@@ -19,7 +19,6 @@ var _i18n = require("../../../i18n");
 var _icon = require("../../../icon");
 var _list_group = require("../../../list_group");
 var _popover = require("../../../popover");
-var _sorting = require("../../utils/sorting");
 var _focus = require("../../utils/focus");
 var _column_actions = require("./column_actions");
 var _data_grid_column_resizer = require("./data_grid_column_resizer");
@@ -34,7 +33,16 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
                                                                                                                                                                                                                                                                                            * in compliance with, at your election, the Elastic License 2.0 or the Server
                                                                                                                                                                                                                                                                                            * Side Public License, v 1.
                                                                                                                                                                                                                                                                                            */
-var _ref2 = process.env.NODE_ENV === "production" ? {
+var CellContent = function CellContent(_ref) {
+  var children = _ref.children,
+    title = _ref.title,
+    arrow = _ref.arrow;
+  return (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", {
+    title: title,
+    className: "euiDataGridHeaderCell__content"
+  }, children), arrow);
+};
+var _ref3 = process.env.NODE_ENV === "production" ? {
   name: "mc0thx-EuiDataGridHeaderCell",
   styles: "margin-inline-start:auto;label:EuiDataGridHeaderCell;"
 } : {
@@ -42,18 +50,19 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "margin-inline-start:auto;label:EuiDataGridHeaderCell;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
+var EuiDataGridHeaderCell = /*#__PURE__*/(0, _react.memo)(function (_ref2) {
   var _classnames;
-  var column = _ref.column,
-    index = _ref.index,
-    columns = _ref.columns,
-    columnWidths = _ref.columnWidths,
-    schema = _ref.schema,
-    schemaDetectors = _ref.schemaDetectors,
-    defaultColumnWidth = _ref.defaultColumnWidth,
-    setColumnWidth = _ref.setColumnWidth,
-    setVisibleColumns = _ref.setVisibleColumns,
-    switchColumnPos = _ref.switchColumnPos;
+  var index = _ref2.index,
+    column = _ref2.column,
+    columns = _ref2.columns,
+    columnWidths = _ref2.columnWidths,
+    defaultColumnWidth = _ref2.defaultColumnWidth,
+    setColumnWidth = _ref2.setColumnWidth,
+    setVisibleColumns = _ref2.setVisibleColumns,
+    switchColumnPos = _ref2.switchColumnPos,
+    sorting = _ref2.sorting,
+    schema = _ref2.schema,
+    schemaDetectors = _ref2.schemaDetectors;
   var id = column.id,
     display = column.display,
     displayAsText = column.displayAsText,
@@ -63,25 +72,25 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
   var _useContext = (0, _react.useContext)(_focus.DataGridFocusContext),
     setFocusedCell = _useContext.setFocusedCell,
     focusFirstVisibleInteractiveCell = _useContext.focusFirstVisibleInteractiveCell;
-  var _useContext2 = (0, _react.useContext)(_sorting.DataGridSortingContext),
-    sorting = _useContext2.sorting;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isPopoverOpen = _useState2[0],
     setIsPopoverOpen = _useState2[1];
   var popoverArrowNavigationProps = usePopoverArrowNavigation();
-  var columnActions = (0, _column_actions.getColumnActions)({
-    column: column,
-    columns: columns,
-    schema: schema,
-    schemaDetectors: schemaDetectors,
-    setVisibleColumns: setVisibleColumns,
-    focusFirstVisibleInteractiveCell: focusFirstVisibleInteractiveCell,
-    setIsPopoverOpen: setIsPopoverOpen,
-    sorting: sorting,
-    switchColumnPos: switchColumnPos,
-    setFocusedCell: setFocusedCell
-  });
+  var columnActions = (0, _react.useMemo)(function () {
+    return (0, _column_actions.getColumnActions)({
+      column: column,
+      columns: columns,
+      schema: schema,
+      schemaDetectors: schemaDetectors,
+      setVisibleColumns: setVisibleColumns,
+      focusFirstVisibleInteractiveCell: focusFirstVisibleInteractiveCell,
+      setIsPopoverOpen: setIsPopoverOpen,
+      sorting: sorting,
+      switchColumnPos: switchColumnPos,
+      setFocusedCell: setFocusedCell
+    });
+  }, [column, columns, schema, schemaDetectors, setVisibleColumns, focusFirstVisibleInteractiveCell, setIsPopoverOpen, sorting, switchColumnPos, setFocusedCell]);
   var showColumnActions = columnActions && columnActions.length > 0;
   var actionsButtonRef = (0, _react.useRef)(null);
   var focusActionsButton = (0, _react.useCallback)(function () {
@@ -108,11 +117,9 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     prefix: 'euiDataGridCellHeader',
     suffix: 'actions'
   });
-  var cellContent = (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("div", {
-    title: displayAsText || id,
-    className: "euiDataGridHeaderCell__content"
-  }, display || displayAsText || id), sortingArrow);
   var classes = (0, _classnames2.default)((_classnames = {}, (0, _defineProperty2.default)(_classnames, "euiDataGridHeaderCell--".concat(columnType), columnType), (0, _defineProperty2.default)(_classnames, 'euiDataGridHeaderCell--hasColumnActions', showColumnActions), (0, _defineProperty2.default)(_classnames, 'euiDataGridHeaderCell--isActionsPopoverOpen', isPopoverOpen), _classnames), displayHeaderCellProps === null || displayHeaderCellProps === void 0 ? void 0 : displayHeaderCellProps.className);
+  var title = displayAsText || id;
+  var children = display || displayAsText || id;
   return (0, _react2.jsx)(_data_grid_header_cell_wrapper.EuiDataGridHeaderCellWrapper, (0, _extends2.default)({}, displayHeaderCellProps, {
     className: classes,
     id: id,
@@ -126,7 +133,10 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     columnId: id,
     columnWidth: width,
     setColumnWidth: setColumnWidth
-  }) : null, !showColumnActions ? (0, _react2.jsx)(_react.default.Fragment, null, cellContent, sortingScreenReaderText && (0, _react2.jsx)(_accessibility2.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", null, sortingScreenReaderText))) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("button", {
+  }) : null, !showColumnActions ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(CellContent, {
+    title: title,
+    arrow: sortingArrow
+  }, children), sortingScreenReaderText && (0, _react2.jsx)(_accessibility2.EuiScreenReaderOnly, null, (0, _react2.jsx)("p", null, sortingScreenReaderText))) : (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("button", {
     className: "euiDataGridHeaderCell__button",
     onClick: function onClick() {
       return setIsPopoverOpen(function (isPopoverOpen) {
@@ -142,12 +152,15 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     "aria-describedby": "".concat(sortingAriaId, " ").concat(actionsAriaId),
     ref: actionsButtonRef,
     "data-test-subj": "dataGridHeaderCellActionButton-".concat(id)
-  }, cellContent, (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
+  }, (0, _react2.jsx)(CellContent, {
+    title: title,
+    arrow: sortingArrow
+  }, children), (0, _react2.jsx)(_popover.EuiPopover, (0, _extends2.default)({
     display: "block",
     panelPaddingSize: "none",
     offset: 7,
     anchorPosition: "downRight",
-    css: _ref2 // Align to right
+    css: _ref3 // Align to right
     ,
     focusTrapProps: {
       // We need to override the default EuiPopover `onClickOutside` since the anchor is separate from the actual button
@@ -183,17 +196,18 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     token: "euiDataGridHeaderCell.headerActions",
     default: "Click to view column header actions"
   }))));
-};
+});
+exports.EuiDataGridHeaderCell = EuiDataGridHeaderCell;
+EuiDataGridHeaderCell.displayName = 'EuiDataGridHeaderCell';
 
 /**
  * Column sorting utility helpers
  */
-exports.EuiDataGridHeaderCell = EuiDataGridHeaderCell;
-var useSortingUtils = function useSortingUtils(_ref3) {
+var useSortingUtils = function useSortingUtils(_ref4) {
   var _sorting$columns;
-  var sorting = _ref3.sorting,
-    id = _ref3.id,
-    showColumnActions = _ref3.showColumnActions;
+  var sorting = _ref4.sorting,
+    id = _ref4.id,
+    showColumnActions = _ref4.showColumnActions;
   var sortedColumn = (0, _react.useMemo)(function () {
     return sorting === null || sorting === void 0 ? void 0 : sorting.columns.find(function (col) {
       return col.id === id;
@@ -205,12 +219,14 @@ var useSortingUtils = function useSortingUtils(_ref3) {
   /**
    * Arrow icon
    */
-  var sortingArrow = isColumnSorted ? (0, _react2.jsx)(_icon.EuiIcon, {
-    type: sortedColumn.direction === 'asc' ? 'sortUp' : 'sortDown',
-    color: "text",
-    className: "euiDataGridHeaderCell__sortingArrow",
-    "data-test-subj": "dataGridHeaderCellSortingIcon-".concat(id)
-  }) : null;
+  var sortingArrow = (0, _react.useMemo)(function () {
+    return isColumnSorted ? (0, _react2.jsx)(_icon.EuiIcon, {
+      type: sortedColumn.direction === 'asc' ? 'sortUp' : 'sortDown',
+      color: "text",
+      className: "euiDataGridHeaderCell__sortingArrow",
+      "data-test-subj": "dataGridHeaderCellSortingIcon-".concat(id)
+    }) : null;
+  }, [id, isColumnSorted, sortedColumn]);
 
   /**
    * aria-sort attribute - should only be used when a single column is being sorted
@@ -227,9 +243,9 @@ var useSortingUtils = function useSortingUtils(_ref3) {
     var _sorting$columns2;
     if (!isColumnSorted) return null;
     if (!showColumnActions && hasOnlyOneSort) return null; // in this scenario, the `aria-sort` attribute will be used by screen readers
-    return (0, _react2.jsx)(_react.default.Fragment, null, sorting === null || sorting === void 0 ? void 0 : (_sorting$columns2 = sorting.columns) === null || _sorting$columns2 === void 0 ? void 0 : _sorting$columns2.map(function (_ref4, index) {
-      var columnId = _ref4.id,
-        direction = _ref4.direction;
+    return (0, _react2.jsx)(_react.default.Fragment, null, sorting === null || sorting === void 0 ? void 0 : (_sorting$columns2 = sorting.columns) === null || _sorting$columns2 === void 0 ? void 0 : _sorting$columns2.map(function (_ref5, index) {
+      var columnId = _ref5.id,
+        direction = _ref5.direction;
       if (hasOnlyOneSort) {
         if (direction === 'asc') {
           return (0, _react2.jsx)(_i18n.EuiI18n, {

package/optimize/lib/components/datagrid/body/header/data_grid_header_row.js

@@ -14,7 +14,7 @@ var _data_grid_control_header_cell = require("./data_grid_control_header_cell");
 var _data_grid_header_cell = require("./data_grid_header_cell");
 var _data_grid_types = require("../../data_grid_types");
 var _react2 = require("@emotion/react");
-var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "schema", "schemaDetectors", "columnWidths", "defaultColumnWidth", "className", "setColumnWidth", "setVisibleColumns", "switchColumnPos", "data-test-subj"];
+var _excluded = ["className", "data-test-subj", "leadingControlColumns", "trailingControlColumns", "columns", "columnWidths", "defaultColumnWidth", "setColumnWidth", "setVisibleColumns", "switchColumnPos", "sorting", "schema", "schemaDetectors"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -24,21 +24,22 @@ var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "
  */
 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 EuiDataGridHeaderRow = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var _props$leadingControl = props.leadingControlColumns,
+var EuiDataGridHeaderRow = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  var className = props.className,
+    _dataTestSubj = props['data-test-subj'],
+    _props$leadingControl = props.leadingControlColumns,
     leadingControlColumns = _props$leadingControl === void 0 ? _data_grid_types.emptyControlColumns : _props$leadingControl,
     _props$trailingContro = props.trailingControlColumns,
     trailingControlColumns = _props$trailingContro === void 0 ? _data_grid_types.emptyControlColumns : _props$trailingContro,
     columns = props.columns,
-    schema = props.schema,
-    schemaDetectors = props.schemaDetectors,
     columnWidths = props.columnWidths,
     defaultColumnWidth = props.defaultColumnWidth,
-    className = props.className,
     setColumnWidth = props.setColumnWidth,
     setVisibleColumns = props.setVisibleColumns,
     switchColumnPos = props.switchColumnPos,
-    _dataTestSubj = props['data-test-subj'],
+    sorting = props.sorting,
+    schema = props.schema,
+    schemaDetectors = props.schemaDetectors,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var classes = (0, _classnames.default)('euiDataGridHeader', className);
   var dataTestSubj = (0, _classnames.default)('dataGridHeader', _dataTestSubj);
@@ -56,16 +57,17 @@ var EuiDataGridHeaderRow = /*#__PURE__*/(0, _react.forwardRef)(function (props,
   }), columns.map(function (column, index) {
     return (0, _react2.jsx)(_data_grid_header_cell.EuiDataGridHeaderCell, {
       key: column.id,
+      index: index + leadingControlColumns.length,
       column: column,
       columns: columns,
-      index: index + leadingControlColumns.length,
       columnWidths: columnWidths,
-      schema: schema,
-      schemaDetectors: schemaDetectors,
+      defaultColumnWidth: defaultColumnWidth,
       setColumnWidth: setColumnWidth,
       setVisibleColumns: setVisibleColumns,
       switchColumnPos: switchColumnPos,
-      defaultColumnWidth: defaultColumnWidth
+      sorting: sorting,
+      schema: schema,
+      schemaDetectors: schemaDetectors
     });
   }), trailingControlColumns.map(function (controlColumn, index) {
     return (0, _react2.jsx)(_data_grid_control_header_cell.EuiDataGridControlHeaderCell, {
@@ -74,6 +76,6 @@ var EuiDataGridHeaderRow = /*#__PURE__*/(0, _react.forwardRef)(function (props,
       controlColumn: controlColumn
     });
   }));
-});
+}));
 exports.EuiDataGridHeaderRow = EuiDataGridHeaderRow;
 EuiDataGridHeaderRow.displayName = 'EuiDataGridHeaderRow';

package/optimize/lib/components/datagrid/body/header/use_data_grid_header.js

@@ -36,11 +36,12 @@ var useDataGridHeader = function useDataGridHeader(props) {
     return (0, _react2.jsx)(_data_grid_header_row.EuiDataGridHeaderRow, (0, _extends2.default)({
       ref: setHeaderRowRef
     }, props));
-  }, Object.values(props)); // eslint-disable-line react-hooks/exhaustive-deps
-
-  return {
-    headerRow: headerRow,
-    headerRowHeight: headerRowHeight
-  };
+  }, [props]);
+  return (0, _react.useMemo)(function () {
+    return {
+      headerRow: headerRow,
+      headerRowHeight: headerRowHeight
+    };
+  }, [headerRow, headerRowHeight]);
 };
 exports.useDataGridHeader = useDataGridHeader;

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

@@ -81,10 +81,6 @@ var useDataGridColumnSelector = function useDataGridColumnSelector(availableColu
   }, [sortedColumns, columnSearchText, displayValues]);
   var isDragEnabled = allowColumnReorder && columnSearchText.length === 0; // only allow drag-and-drop when not filtering columns
   var dragHandleAriaLabel = (0, _i18n.useEuiI18n)('euiColumnSelector.dragHandleAriaLabel', 'Drag handle');
-  var buttonText = (0, _react2.jsx)(_i18n.EuiI18n, {
-    token: "euiColumnSelector.button",
-    default: "Columns"
-  });
   var orderedVisibleColumns = (0, _react.useMemo)(function () {
     return visibleColumns.map(function (columnId) {
       return availableColumns.find(function (_ref3) {
@@ -96,127 +92,132 @@ var useDataGridColumnSelector = function useDataGridColumnSelector(availableColu
       return column != null;
     });
   }, [availableColumns, visibleColumns]);
-  var columnSelector = allowColumnHiding || allowColumnReorder ? (0, _react2.jsx)(_popover.EuiPopover, {
-    "data-test-subj": "dataGridColumnSelectorPopover",
-    isOpen: isOpen,
-    closePopover: function closePopover() {
-      return setIsOpen(false);
-    },
-    anchorPosition: "downLeft",
-    panelPaddingSize: "s",
-    hasDragDrop: true,
-    button: (0, _react2.jsx)(_data_grid_toolbar_control.EuiDataGridToolbarControl, {
-      badgeContent: numberOfHiddenFields > 0 ? "".concat(orderedVisibleColumns.length, "/").concat(availableColumns.length) : availableColumns.length,
-      iconType: "tableDensityNormal",
-      "data-test-subj": "dataGridColumnSelectorButton",
-      onClick: function onClick() {
-        return setIsOpen(!isOpen);
-      }
-    }, buttonText)
-  }, allowColumnHiding && (0, _react2.jsx)(_popover.EuiPopoverTitle, null, (0, _react2.jsx)(_i18n.EuiI18n, {
-    tokens: ['euiColumnSelector.search', 'euiColumnSelector.searchcolumns'],
-    defaults: ['Search', 'Search columns']
-  }, function (_ref4) {
-    var _ref5 = (0, _slicedToArray2.default)(_ref4, 2),
-      search = _ref5[0],
-      searchcolumns = _ref5[1];
-    return (0, _react2.jsx)(_form.EuiFieldText, {
-      compressed: true,
-      placeholder: search,
-      "aria-label": searchcolumns,
-      value: columnSearchText,
-      onChange: function onChange(e) {
-        return setColumnSearchText(e.currentTarget.value);
+  var columnSelector = (0, _react.useMemo)(function () {
+    return allowColumnHiding || allowColumnReorder ? (0, _react2.jsx)(_popover.EuiPopover, {
+      "data-test-subj": "dataGridColumnSelectorPopover",
+      isOpen: isOpen,
+      closePopover: function closePopover() {
+        return setIsOpen(false);
       },
-      "data-test-subj": "dataGridColumnSelectorSearch"
-    });
-  })), (0, _react2.jsx)(_drag_and_drop.EuiDragDropContext, {
-    onDragEnd: onDragEnd
-  }, (0, _react2.jsx)(_drag_and_drop.EuiDroppable, {
-    droppableId: "columnOrder",
-    isDropDisabled: !isDragEnabled,
-    className: "euiDataGrid__controlScroll"
-  }, (0, _react2.jsx)(_react.default.Fragment, null, filteredColumns.map(function (id, index) {
-    return (0, _react2.jsx)(_drag_and_drop.EuiDraggable, {
-      key: id,
-      draggableId: id,
-      index: index,
-      isDragDisabled: !isDragEnabled,
-      hasInteractiveChildren: true,
-      customDragHandle: true
-    }, function (provided, state) {
-      return (0, _react2.jsx)("div", {
-        className: (0, _classnames.default)('euiDataGridColumnSelector__item', {
-          'euiDataGridColumnSelector__item-isDragging': state.isDragging
-        }),
-        "data-test-subj": "dataGridColumnSelectorColumnItem-".concat(id)
-      }, (0, _react2.jsx)(_flex.EuiFlexGroup, {
-        responsive: false,
-        gutterSize: "s",
-        alignItems: "center"
-      }, allowColumnHiding && (0, _react2.jsx)(_flex.EuiFlexItem, {
-        grow: false
-      }, (0, _react2.jsx)(_form.EuiSwitch, {
-        name: id,
-        label: displayValues[id] || id,
-        showLabel: false,
-        checked: visibleColumnIds.has(id),
+      anchorPosition: "downLeft",
+      panelPaddingSize: "s",
+      hasDragDrop: true,
+      button: (0, _react2.jsx)(_data_grid_toolbar_control.EuiDataGridToolbarControl, {
+        badgeContent: numberOfHiddenFields > 0 ? "".concat(orderedVisibleColumns.length, "/").concat(availableColumns.length) : availableColumns.length,
+        iconType: "tableDensityNormal",
+        "data-test-subj": "dataGridColumnSelectorButton",
+        onClick: function onClick() {
+          return setIsOpen(!isOpen);
+        }
+      }, (0, _react2.jsx)(_i18n.EuiI18n, {
+        token: "euiColumnSelector.button",
+        default: "Columns"
+      }))
+    }, allowColumnHiding && (0, _react2.jsx)(_popover.EuiPopoverTitle, null, (0, _react2.jsx)(_i18n.EuiI18n, {
+      tokens: ['euiColumnSelector.search', 'euiColumnSelector.searchcolumns'],
+      defaults: ['Search', 'Search columns']
+    }, function (_ref4) {
+      var _ref5 = (0, _slicedToArray2.default)(_ref4, 2),
+        search = _ref5[0],
+        searchcolumns = _ref5[1];
+      return (0, _react2.jsx)(_form.EuiFieldText, {
         compressed: true,
-        className: "euiSwitch--mini",
-        onChange: function onChange(event) {
-          var checked = event.target.checked;
-          var nextVisibleColumns = sortedColumns.filter(function (columnId) {
-            return checked ? visibleColumnIds.has(columnId) || id === columnId : visibleColumnIds.has(columnId) && id !== columnId;
-          });
-          setVisibleColumns(nextVisibleColumns);
+        placeholder: search,
+        "aria-label": searchcolumns,
+        value: columnSearchText,
+        onChange: function onChange(e) {
+          return setColumnSearchText(e.currentTarget.value);
         },
-        "data-test-subj": "dataGridColumnSelectorToggleColumnVisibility-".concat(id)
-      })), (0, _react2.jsx)(_flex.EuiFlexItem
-      // This extra column name flex item affords the column more grabbable real estate
-      // for mouse users, while hiding repetition for keyboard/screen reader users
-      , (0, _extends2.default)({}, provided.dragHandleProps, {
-        "aria-hidden": true,
-        tabIndex: -1
-      }), (0, _react2.jsx)("span", {
-        className: "euiDataGridColumnSelector__itemLabel"
-      }, displayValues[id] || id)), isDragEnabled && (0, _react2.jsx)(_flex.EuiFlexItem, (0, _extends2.default)({
-        grow: false
-      }, provided.dragHandleProps, {
-        "aria-label": dragHandleAriaLabel
-      }), (0, _react2.jsx)(_icon.EuiIcon, {
-        type: "grab",
-        color: "subdued"
-      }))));
-    });
-  })))), allowColumnHiding && (0, _react2.jsx)(_popover.EuiPopoverFooter, null, (0, _react2.jsx)(_flex.EuiFlexGroup, {
-    gutterSize: "s",
-    responsive: false,
-    justifyContent: "spaceBetween"
-  }, (0, _react2.jsx)(_flex.EuiFlexItem, {
-    grow: false
-  }, (0, _react2.jsx)(_button.EuiButtonEmpty, {
-    size: "xs",
-    flush: "left",
-    onClick: function onClick() {
-      return setVisibleColumns(sortedColumns);
-    },
-    "data-test-subj": "dataGridColumnSelectorShowAllButton"
-  }, (0, _react2.jsx)(_i18n.EuiI18n, {
-    token: "euiColumnSelector.selectAll",
-    default: "Show all"
-  }))), (0, _react2.jsx)(_flex.EuiFlexItem, {
-    grow: false
-  }, (0, _react2.jsx)(_button.EuiButtonEmpty, {
-    size: "xs",
-    flush: "right",
-    onClick: function onClick() {
-      return setVisibleColumns([]);
-    },
-    "data-test-subj": "dataGridColumnSelectorHideAllButton"
-  }, (0, _react2.jsx)(_i18n.EuiI18n, {
-    token: "euiColumnSelector.hideAll",
-    default: "Hide all"
-  })))))) : null;
+        "data-test-subj": "dataGridColumnSelectorSearch"
+      });
+    })), (0, _react2.jsx)(_drag_and_drop.EuiDragDropContext, {
+      onDragEnd: onDragEnd
+    }, (0, _react2.jsx)(_drag_and_drop.EuiDroppable, {
+      droppableId: "columnOrder",
+      isDropDisabled: !isDragEnabled,
+      className: "euiDataGrid__controlScroll"
+    }, (0, _react2.jsx)(_react.default.Fragment, null, filteredColumns.map(function (id, index) {
+      return (0, _react2.jsx)(_drag_and_drop.EuiDraggable, {
+        key: id,
+        draggableId: id,
+        index: index,
+        isDragDisabled: !isDragEnabled,
+        hasInteractiveChildren: true,
+        customDragHandle: true
+      }, function (provided, state) {
+        return (0, _react2.jsx)("div", {
+          className: (0, _classnames.default)('euiDataGridColumnSelector__item', {
+            'euiDataGridColumnSelector__item-isDragging': state.isDragging
+          }),
+          "data-test-subj": "dataGridColumnSelectorColumnItem-".concat(id)
+        }, (0, _react2.jsx)(_flex.EuiFlexGroup, {
+          responsive: false,
+          gutterSize: "s",
+          alignItems: "center"
+        }, allowColumnHiding && (0, _react2.jsx)(_flex.EuiFlexItem, {
+          grow: false
+        }, (0, _react2.jsx)(_form.EuiSwitch, {
+          name: id,
+          label: displayValues[id] || id,
+          showLabel: false,
+          checked: visibleColumnIds.has(id),
+          compressed: true,
+          className: "euiSwitch--mini",
+          onChange: function onChange(event) {
+            var checked = event.target.checked;
+            var nextVisibleColumns = sortedColumns.filter(function (columnId) {
+              return checked ? visibleColumnIds.has(columnId) || id === columnId : visibleColumnIds.has(columnId) && id !== columnId;
+            });
+            setVisibleColumns(nextVisibleColumns);
+          },
+          "data-test-subj": "dataGridColumnSelectorToggleColumnVisibility-".concat(id)
+        })), (0, _react2.jsx)(_flex.EuiFlexItem
+        // This extra column name flex item affords the column more grabbable real estate
+        // for mouse users, while hiding repetition for keyboard/screen reader users
+        , (0, _extends2.default)({}, provided.dragHandleProps, {
+          "aria-hidden": true,
+          tabIndex: -1
+        }), (0, _react2.jsx)("span", {
+          className: "euiDataGridColumnSelector__itemLabel"
+        }, displayValues[id] || id)), isDragEnabled && (0, _react2.jsx)(_flex.EuiFlexItem, (0, _extends2.default)({
+          grow: false
+        }, provided.dragHandleProps, {
+          "aria-label": dragHandleAriaLabel
+        }), (0, _react2.jsx)(_icon.EuiIcon, {
+          type: "grab",
+          color: "subdued"
+        }))));
+      });
+    })))), allowColumnHiding && (0, _react2.jsx)(_popover.EuiPopoverFooter, null, (0, _react2.jsx)(_flex.EuiFlexGroup, {
+      gutterSize: "s",
+      responsive: false,
+      justifyContent: "spaceBetween"
+    }, (0, _react2.jsx)(_flex.EuiFlexItem, {
+      grow: false
+    }, (0, _react2.jsx)(_button.EuiButtonEmpty, {
+      size: "xs",
+      flush: "left",
+      onClick: function onClick() {
+        return setVisibleColumns(sortedColumns);
+      },
+      "data-test-subj": "dataGridColumnSelectorShowAllButton"
+    }, (0, _react2.jsx)(_i18n.EuiI18n, {
+      token: "euiColumnSelector.selectAll",
+      default: "Show all"
+    }))), (0, _react2.jsx)(_flex.EuiFlexItem, {
+      grow: false
+    }, (0, _react2.jsx)(_button.EuiButtonEmpty, {
+      size: "xs",
+      flush: "right",
+      onClick: function onClick() {
+        return setVisibleColumns([]);
+      },
+      "data-test-subj": "dataGridColumnSelectorHideAllButton"
+    }, (0, _react2.jsx)(_i18n.EuiI18n, {
+      token: "euiColumnSelector.hideAll",
+      default: "Hide all"
+    })))))) : null;
+  }, [availableColumns.length, numberOfHiddenFields, orderedVisibleColumns.length, allowColumnHiding, allowColumnReorder, isOpen, columnSearchText, displayValues, visibleColumnIds, sortedColumns, setVisibleColumns, setIsOpen, onDragEnd, isDragEnabled, dragHandleAriaLabel, filteredColumns]);
 
   /**
    * Used for moving columns left/right, available in the headers actions menu
@@ -232,6 +233,8 @@ var useDataGridColumnSelector = function useDataGridColumnSelector(availableColu
     nextSortedColumns.splice(moveToIdx, 0, fromColId);
     setColumns(nextSortedColumns);
   }, [setColumns, sortedColumns]);
-  return [columnSelector, orderedVisibleColumns, setVisibleColumns, switchColumnPos];
+  return (0, _react.useMemo)(function () {
+    return [columnSelector, orderedVisibleColumns, setVisibleColumns, switchColumnPos];
+  }, [columnSelector, orderedVisibleColumns, setVisibleColumns, switchColumnPos]);
 };
 exports.useDataGridColumnSelector = useDataGridColumnSelector;