@elastic/eui 93.3.0 → 93.4.0

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

@@ -37,11 +37,12 @@ var useDataGridHeader = function useDataGridHeader(props) {
     return (0, _react2.jsx)(_data_grid_header_row.EuiDataGridHeaderRow, _extends({
       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/lib/components/datagrid/controls/column_selector.js

@@ -87,10 +87,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) {
@@ -102,127 +98,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 = _slicedToArray(_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 = _slicedToArray(_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
-      , _extends({}, provided.dragHandleProps, {
-        "aria-hidden": true,
-        tabIndex: -1
-      }), (0, _react2.jsx)("span", {
-        className: "euiDataGridColumnSelector__itemLabel"
-      }, displayValues[id] || id)), isDragEnabled && (0, _react2.jsx)(_flex.EuiFlexItem, _extends({
-        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
+        , _extends({}, provided.dragHandleProps, {
+          "aria-hidden": true,
+          tabIndex: -1
+        }), (0, _react2.jsx)("span", {
+          className: "euiDataGridColumnSelector__itemLabel"
+        }, displayValues[id] || id)), isDragEnabled && (0, _react2.jsx)(_flex.EuiFlexItem, _extends({
+          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
@@ -238,6 +239,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;