@elastic/eui 93.3.0 → 93.4.0

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

@@ -27,10 +27,11 @@ export var useDataGridHeader = function useDataGridHeader(props) {
     return ___EmotionJSX(EuiDataGridHeaderRow, _extends({
       ref: setHeaderRowRef
     }, props));
-  }, Object.values(props)); // eslint-disable-line react-hooks/exhaustive-deps
-
-  return {
-    headerRow: headerRow,
-    headerRowHeight: headerRowHeight
-  };
+  }, [props]);
+  return useMemo(function () {
+    return {
+      headerRow: headerRow,
+      headerRowHeight: headerRowHeight
+    };
+  }, [headerRow, headerRowHeight]);
 };

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

@@ -71,10 +71,6 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
   }, [sortedColumns, columnSearchText, displayValues]);
   var isDragEnabled = allowColumnReorder && columnSearchText.length === 0; // only allow drag-and-drop when not filtering columns
   var dragHandleAriaLabel = useEuiI18n('euiColumnSelector.dragHandleAriaLabel', 'Drag handle');
-  var buttonText = ___EmotionJSX(EuiI18n, {
-    token: "euiColumnSelector.button",
-    default: "Columns"
-  });
   var orderedVisibleColumns = useMemo(function () {
     return visibleColumns.map(function (columnId) {
       return availableColumns.find(function (_ref3) {
@@ -86,127 +82,132 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
       return column != null;
     });
   }, [availableColumns, visibleColumns]);
-  var columnSelector = allowColumnHiding || allowColumnReorder ? ___EmotionJSX(EuiPopover, {
-    "data-test-subj": "dataGridColumnSelectorPopover",
-    isOpen: isOpen,
-    closePopover: function closePopover() {
-      return setIsOpen(false);
-    },
-    anchorPosition: "downLeft",
-    panelPaddingSize: "s",
-    hasDragDrop: true,
-    button: ___EmotionJSX(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 && ___EmotionJSX(EuiPopoverTitle, null, ___EmotionJSX(EuiI18n, {
-    tokens: ['euiColumnSelector.search', 'euiColumnSelector.searchcolumns'],
-    defaults: ['Search', 'Search columns']
-  }, function (_ref4) {
-    var _ref5 = _slicedToArray(_ref4, 2),
-      search = _ref5[0],
-      searchcolumns = _ref5[1];
-    return ___EmotionJSX(EuiFieldText, {
-      compressed: true,
-      placeholder: search,
-      "aria-label": searchcolumns,
-      value: columnSearchText,
-      onChange: function onChange(e) {
-        return setColumnSearchText(e.currentTarget.value);
+  var columnSelector = useMemo(function () {
+    return allowColumnHiding || allowColumnReorder ? ___EmotionJSX(EuiPopover, {
+      "data-test-subj": "dataGridColumnSelectorPopover",
+      isOpen: isOpen,
+      closePopover: function closePopover() {
+        return setIsOpen(false);
       },
-      "data-test-subj": "dataGridColumnSelectorSearch"
-    });
-  })), ___EmotionJSX(EuiDragDropContext, {
-    onDragEnd: onDragEnd
-  }, ___EmotionJSX(EuiDroppable, {
-    droppableId: "columnOrder",
-    isDropDisabled: !isDragEnabled,
-    className: "euiDataGrid__controlScroll"
-  }, ___EmotionJSX(React.Fragment, null, filteredColumns.map(function (id, index) {
-    return ___EmotionJSX(EuiDraggable, {
-      key: id,
-      draggableId: id,
-      index: index,
-      isDragDisabled: !isDragEnabled,
-      hasInteractiveChildren: true,
-      customDragHandle: true
-    }, function (provided, state) {
-      return ___EmotionJSX("div", {
-        className: classNames('euiDataGridColumnSelector__item', {
-          'euiDataGridColumnSelector__item-isDragging': state.isDragging
-        }),
-        "data-test-subj": "dataGridColumnSelectorColumnItem-".concat(id)
-      }, ___EmotionJSX(EuiFlexGroup, {
-        responsive: false,
-        gutterSize: "s",
-        alignItems: "center"
-      }, allowColumnHiding && ___EmotionJSX(EuiFlexItem, {
-        grow: false
-      }, ___EmotionJSX(EuiSwitch, {
-        name: id,
-        label: displayValues[id] || id,
-        showLabel: false,
-        checked: visibleColumnIds.has(id),
+      anchorPosition: "downLeft",
+      panelPaddingSize: "s",
+      hasDragDrop: true,
+      button: ___EmotionJSX(EuiDataGridToolbarControl, {
+        badgeContent: numberOfHiddenFields > 0 ? "".concat(orderedVisibleColumns.length, "/").concat(availableColumns.length) : availableColumns.length,
+        iconType: "tableDensityNormal",
+        "data-test-subj": "dataGridColumnSelectorButton",
+        onClick: function onClick() {
+          return setIsOpen(!isOpen);
+        }
+      }, ___EmotionJSX(EuiI18n, {
+        token: "euiColumnSelector.button",
+        default: "Columns"
+      }))
+    }, allowColumnHiding && ___EmotionJSX(EuiPopoverTitle, null, ___EmotionJSX(EuiI18n, {
+      tokens: ['euiColumnSelector.search', 'euiColumnSelector.searchcolumns'],
+      defaults: ['Search', 'Search columns']
+    }, function (_ref4) {
+      var _ref5 = _slicedToArray(_ref4, 2),
+        search = _ref5[0],
+        searchcolumns = _ref5[1];
+      return ___EmotionJSX(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)
-      })), ___EmotionJSX(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
-      , _extends({}, provided.dragHandleProps, {
-        "aria-hidden": true,
-        tabIndex: -1
-      }), ___EmotionJSX("span", {
-        className: "euiDataGridColumnSelector__itemLabel"
-      }, displayValues[id] || id)), isDragEnabled && ___EmotionJSX(EuiFlexItem, _extends({
-        grow: false
-      }, provided.dragHandleProps, {
-        "aria-label": dragHandleAriaLabel
-      }), ___EmotionJSX(EuiIcon, {
-        type: "grab",
-        color: "subdued"
-      }))));
-    });
-  })))), allowColumnHiding && ___EmotionJSX(EuiPopoverFooter, null, ___EmotionJSX(EuiFlexGroup, {
-    gutterSize: "s",
-    responsive: false,
-    justifyContent: "spaceBetween"
-  }, ___EmotionJSX(EuiFlexItem, {
-    grow: false
-  }, ___EmotionJSX(EuiButtonEmpty, {
-    size: "xs",
-    flush: "left",
-    onClick: function onClick() {
-      return setVisibleColumns(sortedColumns);
-    },
-    "data-test-subj": "dataGridColumnSelectorShowAllButton"
-  }, ___EmotionJSX(EuiI18n, {
-    token: "euiColumnSelector.selectAll",
-    default: "Show all"
-  }))), ___EmotionJSX(EuiFlexItem, {
-    grow: false
-  }, ___EmotionJSX(EuiButtonEmpty, {
-    size: "xs",
-    flush: "right",
-    onClick: function onClick() {
-      return setVisibleColumns([]);
-    },
-    "data-test-subj": "dataGridColumnSelectorHideAllButton"
-  }, ___EmotionJSX(EuiI18n, {
-    token: "euiColumnSelector.hideAll",
-    default: "Hide all"
-  })))))) : null;
+        "data-test-subj": "dataGridColumnSelectorSearch"
+      });
+    })), ___EmotionJSX(EuiDragDropContext, {
+      onDragEnd: onDragEnd
+    }, ___EmotionJSX(EuiDroppable, {
+      droppableId: "columnOrder",
+      isDropDisabled: !isDragEnabled,
+      className: "euiDataGrid__controlScroll"
+    }, ___EmotionJSX(React.Fragment, null, filteredColumns.map(function (id, index) {
+      return ___EmotionJSX(EuiDraggable, {
+        key: id,
+        draggableId: id,
+        index: index,
+        isDragDisabled: !isDragEnabled,
+        hasInteractiveChildren: true,
+        customDragHandle: true
+      }, function (provided, state) {
+        return ___EmotionJSX("div", {
+          className: classNames('euiDataGridColumnSelector__item', {
+            'euiDataGridColumnSelector__item-isDragging': state.isDragging
+          }),
+          "data-test-subj": "dataGridColumnSelectorColumnItem-".concat(id)
+        }, ___EmotionJSX(EuiFlexGroup, {
+          responsive: false,
+          gutterSize: "s",
+          alignItems: "center"
+        }, allowColumnHiding && ___EmotionJSX(EuiFlexItem, {
+          grow: false
+        }, ___EmotionJSX(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)
+        })), ___EmotionJSX(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
+        , _extends({}, provided.dragHandleProps, {
+          "aria-hidden": true,
+          tabIndex: -1
+        }), ___EmotionJSX("span", {
+          className: "euiDataGridColumnSelector__itemLabel"
+        }, displayValues[id] || id)), isDragEnabled && ___EmotionJSX(EuiFlexItem, _extends({
+          grow: false
+        }, provided.dragHandleProps, {
+          "aria-label": dragHandleAriaLabel
+        }), ___EmotionJSX(EuiIcon, {
+          type: "grab",
+          color: "subdued"
+        }))));
+      });
+    })))), allowColumnHiding && ___EmotionJSX(EuiPopoverFooter, null, ___EmotionJSX(EuiFlexGroup, {
+      gutterSize: "s",
+      responsive: false,
+      justifyContent: "spaceBetween"
+    }, ___EmotionJSX(EuiFlexItem, {
+      grow: false
+    }, ___EmotionJSX(EuiButtonEmpty, {
+      size: "xs",
+      flush: "left",
+      onClick: function onClick() {
+        return setVisibleColumns(sortedColumns);
+      },
+      "data-test-subj": "dataGridColumnSelectorShowAllButton"
+    }, ___EmotionJSX(EuiI18n, {
+      token: "euiColumnSelector.selectAll",
+      default: "Show all"
+    }))), ___EmotionJSX(EuiFlexItem, {
+      grow: false
+    }, ___EmotionJSX(EuiButtonEmpty, {
+      size: "xs",
+      flush: "right",
+      onClick: function onClick() {
+        return setVisibleColumns([]);
+      },
+      "data-test-subj": "dataGridColumnSelectorHideAllButton"
+    }, ___EmotionJSX(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
@@ -222,5 +223,7 @@ export var useDataGridColumnSelector = function useDataGridColumnSelector(availa
     nextSortedColumns.splice(moveToIdx, 0, fromColId);
     setColumns(nextSortedColumns);
   }, [setColumns, sortedColumns]);
-  return [columnSelector, orderedVisibleColumns, setVisibleColumns, switchColumnPos];
+  return useMemo(function () {
+    return [columnSelector, orderedVisibleColumns, setVisibleColumns, switchColumnPos];
+  }, [columnSelector, orderedVisibleColumns, setVisibleColumns, switchColumnPos]);
 };

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

@@ -1,5 +1,8 @@
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+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
@@ -8,7 +11,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * Side Public License, v 1.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useMemo, useCallback, memo } from 'react';
 import { EuiButtonEmpty } from '../../button';
 import { EuiDragDropContext, euiDragDropReorder, EuiDroppable } from '../../drag_and_drop';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
@@ -20,79 +23,105 @@ import { EuiDataGridToolbarControl } from './data_grid_toolbar_control';
 import { EuiDataGridColumnSortingDraggable } from './column_sorting_draggable';
 import { getDetailsForSchema } from '../utils/data_grid_schema';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var useDataGridColumnSorting = function useDataGridColumnSorting(columns, sorting, schema, schemaDetectors, displayValues) {
+export var useDataGridColumnSorting = function useDataGridColumnSorting(_ref) {
+  var sorting = _ref.sorting,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  return sorting == null ? null : ___EmotionJSX(DataGridSortingControl, _extends({
+    sorting: sorting
+  }, rest));
+};
+export var DataGridSortingControl = /*#__PURE__*/memo(function (_ref2) {
+  var columns = _ref2.columns,
+    sorting = _ref2.sorting,
+    schema = _ref2.schema,
+    schemaDetectors = _ref2.schemaDetectors,
+    displayValues = _ref2.displayValues;
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
+  var sortingButtonText = useEuiI18n('euiColumnSorting.button', 'Sort fields');
+  var sortFieldAriaLabel = useEuiI18n('euiColumnSorting.sortFieldAriaLabel', 'Sort by: ');
   var _useState3 = useState(false),
     _useState4 = _slicedToArray(_useState3, 2),
     availableColumnsIsOpen = _useState4[0],
     setAvailableColumnsIsOpen = _useState4[1];
+  var availableColumnIds = useMemo(function () {
+    return new Set(columns.map(function (_ref3) {
+      var id = _ref3.id;
+      return id;
+    }));
+  }, [columns]);
+
   // prune any non-existent/hidden columns from sorting
   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 = 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 = 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 = useCallback(function (_ref5) {
+    var sourceIndex = _ref5.source.index,
+      destination = _ref5.destination;
     if (destination) {
       var destinationIndex = destination.index;
       var nextColumns = euiDragDropReorder(sorting.columns, sourceIndex, destinationIndex);
       sorting.onSort(nextColumns);
     }
-  };
-  var schemaDetails = function schemaDetails(id) {
+  }, [sorting]);
+  var schemaDetails = useCallback(function (id) {
     return schema.hasOwnProperty(id) && schema[id].columnType != null ? 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 = ___EmotionJSX(EuiPopover, {
+  }, [schema, schemaDetectors]);
+  var inactiveSortableColumns = 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 = useCallback(function (id, defaultSortDirection) {
+    var _schemaDetails;
+    var nextColumns = _toConsumableArray(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 ___EmotionJSX(EuiPopover, {
     "data-test-subj": "dataGridColumnSortingPopover",
     isOpen: isOpen,
     closePopover: function closePopover() {
@@ -114,9 +143,9 @@ export var useDataGridColumnSorting = function useDataGridColumnSorting(columns,
   }, ___EmotionJSX(EuiDroppable, {
     droppableId: "columnSorting",
     className: "euiDataGrid__controlScroll"
-  }, ___EmotionJSX(React.Fragment, null, sorting.columns.map(function (_ref5, index) {
-    var id = _ref5.id,
-      direction = _ref5.direction;
+  }, ___EmotionJSX(React.Fragment, null, sorting.columns.map(function (_ref7, index) {
+    var id = _ref7.id,
+      direction = _ref7.direction;
     return ___EmotionJSX(EuiDataGridColumnSortingDraggable, {
       key: id,
       id: id,
@@ -162,49 +191,38 @@ export var useDataGridColumnSorting = function useDataGridColumnSorting(columns,
       token: "euiColumnSorting.pickFields",
       default: "Pick fields to sort by"
     }))
-  }, ___EmotionJSX(EuiI18n, {
-    token: "euiColumnSorting.sortFieldAriaLabel",
-    default: "Sort by: "
-  }, function (sortFieldAriaLabel) {
-    return ___EmotionJSX("div", {
-      className: "euiDataGridColumnSorting__fieldList",
-      role: "listbox"
-    }, inactiveSortableColumns.map(function (_ref6) {
-      var id = _ref6.id,
-        defaultSortDirection = _ref6.defaultSortDirection;
-      return ___EmotionJSX("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 = _toConsumableArray(sorting.columns);
-          nextColumns.push({
-            id: id,
-            direction: defaultSortDirection || ((_schemaDetails = schemaDetails(id)) === null || _schemaDetails === void 0 ? void 0 : _schemaDetails.defaultSortDirection) || 'asc'
-          });
-          sorting.onSort(nextColumns);
-        }
-      }, ___EmotionJSX(EuiFlexGroup, {
-        alignItems: "center",
-        gutterSize: "s",
-        component: "span",
-        responsive: false
-      }, ___EmotionJSX(EuiFlexItem, {
-        grow: false
-      }, ___EmotionJSX(EuiToken, {
-        iconType: schemaDetails(id) != null ? getDetailsForSchema(schemaDetectors, schema[id].columnType).icon : 'tokenString',
-        color: schemaDetails(id) != null ? getDetailsForSchema(schemaDetectors, schema[id].columnType).color : undefined
-      })), ___EmotionJSX(EuiFlexItem, {
-        grow: false
-      }, ___EmotionJSX(EuiText, {
-        size: "xs"
-      }, displayValues[id]))));
-    }));
-  }))), sorting.columns.length > 0 ? ___EmotionJSX(EuiFlexItem, {
+  }, ___EmotionJSX("div", {
+    className: "euiDataGridColumnSorting__fieldList",
+    role: "listbox"
+  }, inactiveSortableColumns.map(function (_ref8) {
+    var id = _ref8.id,
+      defaultSortDirection = _ref8.defaultSortDirection;
+    return ___EmotionJSX("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);
+      }
+    }, ___EmotionJSX(EuiFlexGroup, {
+      alignItems: "center",
+      gutterSize: "s",
+      component: "span",
+      responsive: false
+    }, ___EmotionJSX(EuiFlexItem, {
+      grow: false
+    }, ___EmotionJSX(EuiToken, {
+      iconType: schemaDetails(id) != null ? getDetailsForSchema(schemaDetectors, schema[id].columnType).icon : 'tokenString',
+      color: schemaDetails(id) != null ? getDetailsForSchema(schemaDetectors, schema[id].columnType).color : undefined
+    })), ___EmotionJSX(EuiFlexItem, {
+      grow: false
+    }, ___EmotionJSX(EuiText, {
+      size: "xs"
+    }, displayValues[id]))));
+  })))), sorting.columns.length > 0 ? ___EmotionJSX(EuiFlexItem, {
     grow: false
   }, ___EmotionJSX(EuiButtonEmpty, {
     size: "xs",
@@ -217,5 +235,5 @@ export var useDataGridColumnSorting = function useDataGridColumnSorting(columns,
     token: "euiColumnSorting.clearAll",
     default: "Clear sorting"
   }))) : null)));
-  return columnSorting;
-};
+});
+DataGridSortingControl.displayName = 'DataGridSortingControl';

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

@@ -10,7 +10,7 @@ var _excluded = ["id", "display", "direction", "index", "sorting", "schema", "sc
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useCallback } from 'react';
 import classNames from 'classnames';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiButtonGroup, EuiButtonIcon } from '../../button';
@@ -54,6 +54,27 @@ export var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSorting
     'data-test-subj': "euiDataGridColumnSorting-sortColumn-".concat(id, "-desc")
   }];
   var dragHandleAriaLabel = useEuiI18n('euiColumnSortingDraggable.dragHandleAriaLabel', 'Drag handle');
+  var removeSort = useCallback(function () {
+    var nextColumns = _toConsumableArray(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 = useCallback(function (_, direction) {
+    var nextColumns = _toConsumableArray(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 ___EmotionJSX(EuiDraggable, _extends({
     draggableId: id,
     index: index,
@@ -91,15 +112,7 @@ export var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSorting
         className: "euiDataGridColumnSorting__button",
         "aria-label": removeSortLabel,
         iconType: "cross",
-        onClick: function onClick() {
-          var nextColumns = _toConsumableArray(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
       });
     })), ___EmotionJSX(EuiFlexItem, _extends({
       className: "euiDataGridColumnSorting__name"
@@ -134,18 +147,7 @@ export var EuiDataGridColumnSortingDraggable = function EuiDataGridColumnSorting
         buttonSize: "compressed",
         className: "euiDataGridColumnSorting__order",
         idSelected: direction === 'asc' ? "".concat(id, "Asc") : "".concat(id, "Desc"),
-        onChange: function onChange(_, direction) {
-          var nextColumns = _toConsumableArray(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
       });
     })), ___EmotionJSX(EuiFlexItem, _extends({
       grow: false