@elastic/eui 88.4.1 → 88.5.1

package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js

@@ -5,14 +5,13 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiCollapsibleNavSubItem = exports.EuiCollapsibleNavItem = void 0;
+exports.EuiCollapsibleNavSubItems = exports.EuiCollapsibleNavSubItem = exports.EuiCollapsibleNavItemTitle = exports.EuiCollapsibleNavItem = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../services");
 var _icon = require("../../icon");
-var _title = require("../../title");
 var _context = require("../context");
 var _collapsed = require("./collapsed");
 var _collapsible_nav_accordion = require("./collapsible_nav_accordion");
@@ -20,8 +19,9 @@ var _collapsible_nav_link = require("./collapsible_nav_link");
 var _collapsible_nav_item = require("./collapsible_nav_item.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["isSubItem", "title", "titleElement", "icon", "iconProps", "items", "children"],
-  _excluded2 = ["isGroupTitle", "className"],
-  _excluded3 = ["className"];
+  _excluded2 = ["renderItem", "className"],
+  _excluded3 = ["items", "isSubItem", "isGroup", "className"],
+  _excluded4 = ["className"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -89,23 +89,17 @@ var EuiCollapsibleNavItemTitle = function EuiCollapsibleNavItemTitle(_ref2) {
 };
 
 /**
- * Sub-items can either be a group title, to visually separate sections
- * of nav links, or they can simply be more links or accordions
+ * Sub-items can either be a totally custom rendered item,
+ * or they can simply be more links or accordions
  */
+exports.EuiCollapsibleNavItemTitle = EuiCollapsibleNavItemTitle;
 var EuiCollapsibleNavSubItem = function EuiCollapsibleNavSubItem(_ref3) {
-  var isGroupTitle = _ref3.isGroupTitle,
+  var renderItem = _ref3.renderItem,
     className = _ref3.className,
     props = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _collapsible_nav_item.euiCollapsibleNavSubItemGroupTitleStyles)(euiTheme);
   var classes = (0, _classnames.default)('euiCollapsibleNavSubItem', className);
-  if (isGroupTitle) {
-    var TitleElement = props.titleElement || 'div';
-    return (0, _react2.jsx)(_title.EuiTitle, {
-      size: "xxxs",
-      css: styles.euiCollapsibleNavItem__groupTitle,
-      className: "euiCollapsibleNavItem__groupTitle eui-textTruncate"
-    }, (0, _react2.jsx)(TitleElement, null, props.title));
+  if (renderItem) {
+    return (0, _react2.jsx)(_react.default.Fragment, null, renderItem());
   }
   return (0, _react2.jsx)(EuiCollapsibleNavItemDisplay, (0, _extends2.default)({
     className: classes
@@ -115,12 +109,52 @@ var EuiCollapsibleNavSubItem = function EuiCollapsibleNavSubItem(_ref3) {
 };
 
 /**
- * The actual exported component
+ * Reuseable component for rendering a group of sub items
+ * Used by both `EuiCollapsibleNavGroup` and `EuiCollapsibleNavAccordion`
  */
 exports.EuiCollapsibleNavSubItem = EuiCollapsibleNavSubItem;
-var EuiCollapsibleNavItem = function EuiCollapsibleNavItem(_ref4) {
-  var className = _ref4.className,
-    props = (0, _objectWithoutProperties2.default)(_ref4, _excluded3);
+var EuiCollapsibleNavSubItems = function EuiCollapsibleNavSubItems(_ref4) {
+  var items = _ref4.items,
+    isSubItem = _ref4.isSubItem,
+    isGroup = _ref4.isGroup,
+    className = _ref4.className,
+    rest = (0, _objectWithoutProperties2.default)(_ref4, _excluded3);
+  var classes = (0, _classnames.default)('euiCollapsibleNavItem__items', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _collapsible_nav_item.euiCollapsibleNavSubItemsStyles)(euiTheme);
+  var cssStyles = [styles.euiCollapsibleNavItem__items, isGroup ? styles.isGroup : isSubItem ? styles.isSubItem : styles.isTopItem];
+  var itemsHaveIcons = (0, _react.useMemo)(function () {
+    return items.some(function (item) {
+      return !!item.icon;
+    });
+  }, [items]);
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    className: classes,
+    css: cssStyles
+  }, rest), items.map(function (item, index) {
+    // If any of the sub items have an icon, default to an
+    // icon of `empty` so that all text lines up vertically
+    if (!item.renderItem && itemsHaveIcons && !item.icon) {
+      item.icon = 'empty';
+    }
+    return (
+      // This is an intentional circular dependency between the accordion & parent item display.
+      // EuiSideNavItem is purposely recursive to support any amount of nested sub items,
+      // and split up into separate files/components for better dev readability
+      (0, _react2.jsx)(EuiCollapsibleNavSubItem, (0, _extends2.default)({
+        key: index
+      }, item))
+    );
+  }));
+};
+
+/**
+ * The actual exported component
+ */
+exports.EuiCollapsibleNavSubItems = EuiCollapsibleNavSubItems;
+var EuiCollapsibleNavItem = function EuiCollapsibleNavItem(_ref5) {
+  var className = _ref5.className,
+    props = (0, _objectWithoutProperties2.default)(_ref5, _excluded4);
   var classes = (0, _classnames.default)('euiCollapsibleNavItem', className);
   var _useContext = (0, _react.useContext)(_context.EuiCollapsibleNavContext),
     isCollapsed = _useContext.isCollapsed,

package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiCollapsibleNavSubItemGroupTitleStyles = exports.euiCollapsibleNavItemVariables = exports.euiCollapsibleNavItemTitleStyles = void 0;
+exports.euiCollapsibleNavSubItemsStyles = exports.euiCollapsibleNavItemVariables = exports.euiCollapsibleNavItemTitleStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
 var _global_styling = require("../../../global_styling");
@@ -51,11 +51,20 @@ var euiCollapsibleNavItemTitleStyles = {
     toString: _EMOTION_STRINGIFIED_CSS_ERROR__
   }
 };
+
+/**
+ * Sub item groups
+ */
 exports.euiCollapsibleNavItemTitleStyles = euiCollapsibleNavItemTitleStyles;
-var euiCollapsibleNavSubItemGroupTitleStyles = function euiCollapsibleNavSubItemGroupTitleStyles(_ref) {
+var euiCollapsibleNavSubItemsStyles = function euiCollapsibleNavSubItemsStyles(_ref) {
   var euiTheme = _ref.euiTheme;
   return {
-    euiCollapsibleNavItem__groupTitle: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-top', euiTheme.size.base), " ", (0, _global_styling.logicalShorthandCSS)('padding', "".concat(euiTheme.size.xs, " ").concat(euiTheme.size.s)), ";;label:euiCollapsibleNavItem__groupTitle;")
+    euiCollapsibleNavItem__items: /*#__PURE__*/(0, _react.css)(";label:euiCollapsibleNavItem__items;"),
+    isGroup: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-top', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), ";;label:isGroup;"),
+    isTopItem: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-top', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.xl), ";;label:isTopItem;"),
+    isSubItem: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-left', euiTheme.border.thin), " ", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('padding-left', (0, _global_styling.mathWithUnits)([euiTheme.size.s, euiTheme.border.width.thin], function (x, y) {
+      return x - y;
+    })), ";;label:isSubItem;")
   };
 };
-exports.euiCollapsibleNavSubItemGroupTitleStyles = euiCollapsibleNavSubItemGroupTitleStyles;
+exports.euiCollapsibleNavSubItemsStyles = euiCollapsibleNavSubItemsStyles;

package/optimize/lib/components/combo_box/combo_box.js

@@ -91,10 +91,6 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
         });
       }
     });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "autoSizeInputRefInstance", null);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "autoSizeInputRefCallback", function (ref) {
-      _this.autoSizeInputRefInstance = ref;
-    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "searchInputRefInstance", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "searchInputRefCallback", function (ref) {
       _this.searchInputRefInstance = ref;
@@ -567,15 +563,7 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
   (0, _createClass2.default)(EuiComboBox, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this2 = this;
       this._isMounted = true;
-
-      // TODO: This will need to be called once the actual stylesheet loads.
-      setTimeout(function () {
-        if (_this2.autoSizeInputRefInstance) {
-          _this2.autoSizeInputRefInstance.copyInputStyles();
-        }
-      }, 100);
     }
   }, {
     key: "componentDidUpdate",
@@ -608,7 +596,7 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
+      var _this2 = this;
       var _this$props8 = this.props,
         dataTestSubj = _this$props8['data-test-subj'],
         async = _this$props8.async,
@@ -679,32 +667,32 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
           default: "Choose from the following options"
         }, function (listboxAriaLabel) {
           return (0, _react2.jsx)(_combo_box_options_list.EuiComboBoxOptionsList, {
-            zIndex: _this3.state.listZIndex,
-            activeOptionIndex: _this3.state.activeOptionIndex,
-            areAllOptionsSelected: _this3.areAllOptionsSelected(),
+            zIndex: _this2.state.listZIndex,
+            activeOptionIndex: _this2.state.activeOptionIndex,
+            areAllOptionsSelected: _this2.areAllOptionsSelected(),
             customOptionText: customOptionText,
             "data-test-subj": optionsListDataTestSubj,
             fullWidth: fullWidth,
             isCaseSensitive: isCaseSensitive,
             isLoading: isLoading,
-            listRef: _this3.listRefCallback,
+            listRef: _this2.listRefCallback,
             matchingOptions: matchingOptions,
-            onCloseList: _this3.closeList,
+            onCloseList: _this2.closeList,
             onCreateOption: onCreateOption,
-            onOptionClick: _this3.onOptionClick,
-            onOptionEnterKey: _this3.onOptionEnterKey,
-            onScroll: _this3.onOptionListScroll,
-            optionRef: _this3.optionRefCallback,
+            onOptionClick: _this2.onOptionClick,
+            onOptionEnterKey: _this2.onOptionEnterKey,
+            onScroll: _this2.onOptionListScroll,
+            optionRef: _this2.optionRefCallback,
             options: options,
             position: listPosition,
             singleSelection: singleSelection,
             renderOption: renderOption,
-            rootId: _this3.rootId,
+            rootId: _this2.rootId,
             rowHeight: rowHeight,
             scrollToIndex: activeOptionIndex,
             searchValue: searchValue,
             selectedOptions: selectedOptions,
-            updatePosition: _this3.updatePosition,
+            updatePosition: _this2.updatePosition,
             width: width,
             delimiter: delimiter,
             getSelectedOptionForSearchValue: _matching_options.getSelectedOptionForSearchValue,
@@ -728,7 +716,6 @@ var EuiComboBox = /*#__PURE__*/function (_Component) {
           onBlur: this.onContainerBlur,
           ref: this.comboBoxRefCallback
         }), (0, _react2.jsx)(_combo_box_input.EuiComboBoxInput, {
-          autoSizeInputRef: this.autoSizeInputRefCallback,
           compressed: compressed,
           focusedOptionId: this.hasActiveOption() ? this.rootId("_option-".concat(this.state.activeOptionIndex)) : undefined,
           fullWidth: fullWidth,

package/optimize/lib/components/combo_box/combo_box_input/combo_box_input.js

@@ -18,8 +18,8 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _reactInputAutosize = _interopRequireDefault(require("react-input-autosize"));
 var _services = require("../../../services");
+var _text_truncate = require("../../text_truncate");
 var _accessibility = require("../../accessibility");
 var _form_control_layout = require("../../form/form_control_layout");
 var _num_icons = require("../../form/form_control_layout/_num_icons");
@@ -47,8 +47,27 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
     }
     _this = _super.call.apply(_super, [this].concat(args));
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      inputWidth: 2,
       hasFocus: false
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "widthUtils", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "inputRefCallback", function (el) {
+      var _this$props$inputRef, _this$props;
+      _this.widthUtils = new _text_truncate.CanvasTextUtils({
+        container: el
+      });
+      (_this$props$inputRef = (_this$props = _this.props).inputRef) === null || _this$props$inputRef === void 0 ? void 0 : _this$props$inputRef.call(_this$props, el);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateInputSize", function (inputValue) {
+      if (!_this.widthUtils) return;
+      _this.widthUtils.setTextToCheck(inputValue);
+      // Canvas has minute subpixel differences in rendering compared to DOM
+      // We'll buffer the input by ~2px just to ensure sufficient width
+      var inputWidth = Math.ceil(_this.widthUtils.textWidth) + 2;
+      _this.setState({
+        inputWidth: inputWidth
+      });
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updatePosition", function () {
       // Wait a beat for the DOM to update, since we depend on DOM elements' bounds.
       requestAnimationFrame(function () {
@@ -70,13 +89,13 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
       });
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onKeyDown", function (event) {
-      var _this$props = _this.props,
-        searchValue = _this$props.searchValue,
-        selectedOptions = _this$props.selectedOptions,
-        onRemoveOption = _this$props.onRemoveOption,
-        singleSelection = _this$props.singleSelection,
-        isListOpen = _this$props.isListOpen,
-        onOpenListClick = _this$props.onOpenListClick;
+      var _this$props2 = _this.props,
+        searchValue = _this$props2.searchValue,
+        selectedOptions = _this$props2.selectedOptions,
+        onRemoveOption = _this$props2.onRemoveOption,
+        singleSelection = _this$props2.singleSelection,
+        isListOpen = _this$props2.isListOpen,
+        onOpenListClick = _this$props2.onOpenListClick;
 
       // When backspacing from an empty input, delete the last pill option in the list
       var searchIsEmpty = !searchValue.length;
@@ -89,18 +108,10 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
       }
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "inputOnChange", function (event) {
-      var _this$props2 = _this.props,
-        onChange = _this$props2.onChange,
-        searchValue = _this$props2.searchValue;
-      if (onChange) {
-        onChange(event.target.value);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "inputRefCallback", function (ref) {
-      var autoSizeInputRef = _this.props.autoSizeInputRef;
-      if (autoSizeInputRef) {
-        autoSizeInputRef(ref);
-      }
+      var _this$props$onChange, _this$props3;
+      var value = event.target.value;
+      _this.updateInputSize(value);
+      (_this$props$onChange = (_this$props3 = _this.props).onChange) === null || _this$props$onChange === void 0 ? void 0 : _this$props$onChange.call(_this$props3, value);
     });
     return _this;
   }
@@ -118,35 +129,34 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this$props3 = this.props,
-        compressed = _this$props3.compressed,
-        focusedOptionId = _this$props3.focusedOptionId,
-        fullWidth = _this$props3.fullWidth,
-        hasSelectedOptions = _this$props3.hasSelectedOptions,
-        id = _this$props3.id,
-        inputRef = _this$props3.inputRef,
-        isDisabled = _this$props3.isDisabled,
-        isListOpen = _this$props3.isListOpen,
-        noIcon = _this$props3.noIcon,
-        onClear = _this$props3.onClear,
-        onClick = _this$props3.onClick,
-        onCloseListClick = _this$props3.onCloseListClick,
-        onOpenListClick = _this$props3.onOpenListClick,
-        onRemoveOption = _this$props3.onRemoveOption,
-        placeholder = _this$props3.placeholder,
-        rootId = _this$props3.rootId,
-        searchValue = _this$props3.searchValue,
-        selectedOptions = _this$props3.selectedOptions,
-        singleSelectionProp = _this$props3.singleSelection,
-        toggleButtonRef = _this$props3.toggleButtonRef,
-        value = _this$props3.value,
-        prepend = _this$props3.prepend,
-        append = _this$props3.append,
-        isLoading = _this$props3.isLoading,
-        isInvalid = _this$props3.isInvalid,
-        autoFocus = _this$props3.autoFocus,
-        ariaLabel = _this$props3['aria-label'],
-        ariaLabelledby = _this$props3['aria-labelledby'];
+      var _this$props4 = this.props,
+        compressed = _this$props4.compressed,
+        focusedOptionId = _this$props4.focusedOptionId,
+        fullWidth = _this$props4.fullWidth,
+        hasSelectedOptions = _this$props4.hasSelectedOptions,
+        id = _this$props4.id,
+        isDisabled = _this$props4.isDisabled,
+        isListOpen = _this$props4.isListOpen,
+        noIcon = _this$props4.noIcon,
+        onClear = _this$props4.onClear,
+        onClick = _this$props4.onClick,
+        onCloseListClick = _this$props4.onCloseListClick,
+        onOpenListClick = _this$props4.onOpenListClick,
+        onRemoveOption = _this$props4.onRemoveOption,
+        placeholder = _this$props4.placeholder,
+        rootId = _this$props4.rootId,
+        searchValue = _this$props4.searchValue,
+        selectedOptions = _this$props4.selectedOptions,
+        singleSelectionProp = _this$props4.singleSelection,
+        toggleButtonRef = _this$props4.toggleButtonRef,
+        value = _this$props4.value,
+        prepend = _this$props4.prepend,
+        append = _this$props4.append,
+        isLoading = _this$props4.isLoading,
+        isInvalid = _this$props4.isInvalid,
+        autoFocus = _this$props4.autoFocus,
+        ariaLabel = _this$props4['aria-label'],
+        ariaLabelledby = _this$props4['aria-labelledby'];
       var singleSelection = Boolean(singleSelectionProp);
       var asPlainText = singleSelectionProp && (0, _typeof2.default)(singleSelectionProp) === 'object' && singleSelectionProp.asPlainText || false;
       var pills = selectedOptions ? selectedOptions.map(function (option) {
@@ -238,7 +248,7 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         "data-test-subj": "comboBoxInput",
         onClick: onClick,
         tabIndex: -1 // becomes onBlur event's relatedTarget, otherwise relatedTarget is null when clicking on this div
-      }, !singleSelection || !searchValue ? pills : null, placeholderMessage, (0, _react2.jsx)(_reactInputAutosize.default, {
+      }, !singleSelection || !searchValue ? pills : null, placeholderMessage, (0, _react2.jsx)("input", {
         "aria-activedescendant": focusedOptionId,
         "aria-autocomplete": "list",
         "aria-controls": isListOpen ? rootId('listbox') : '',
@@ -250,7 +260,6 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         "data-test-subj": "comboBoxSearchInput",
         disabled: isDisabled,
         id: id,
-        inputRef: inputRef,
         onBlur: this.onBlur,
         onChange: this.inputOnChange,
         onFocus: this.onFocus,
@@ -258,7 +267,7 @@ var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         ref: this.inputRefCallback,
         role: "combobox",
         style: {
-          fontSize: 14
+          inlineSize: this.state.inputWidth
         },
         value: searchValue,
         autoFocus: autoFocus

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

@@ -36,19 +36,35 @@ var EuiDataGridToolbar = function EuiDataGridToolbar(_ref) {
     keyboardShortcuts = _ref.keyboardShortcuts,
     displaySelector = _ref.displaySelector,
     columnSelector = _ref.columnSelector,
-    columnSorting = _ref.columnSorting;
+    columnSorting = _ref.columnSorting,
+    renderCustomToolbar = _ref.renderCustomToolbar;
   // Enables/disables grid controls based on available width
   var hasRoomForGridControls = _utils.IS_JEST_ENVIRONMENT ? true : gridWidth > minSizeForControls || isFullScreen;
+  var columnControl = checkOrDefaultToolBarDisplayOptions(toolbarVisibility, 'showColumnSelector') ? columnSelector : null;
+  var columnSortingControl = checkOrDefaultToolBarDisplayOptions(toolbarVisibility, 'showSortSelector') ? columnSorting : null;
+  var keyboardShortcutsControl = checkOrDefaultToolBarDisplayOptions(toolbarVisibility, 'showKeyboardShortcuts') ? keyboardShortcuts : (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, {
+    showOnFocus: true
+  }, (0, _react2.jsx)("span", null, keyboardShortcuts));
+  var displayControl = checkOrDefaultToolBarDisplayOptions(toolbarVisibility, 'showDisplaySelector') ? displaySelector : null;
+  var fullScreenControl = checkOrDefaultToolBarDisplayOptions(toolbarVisibility, 'showFullScreenSelector') ? fullScreenSelector : null;
+  if (renderCustomToolbar) {
+    return renderCustomToolbar({
+      hasRoomForGridControls: hasRoomForGridControls,
+      columnControl: columnControl,
+      columnSortingControl: columnSortingControl,
+      keyboardShortcutsControl: keyboardShortcutsControl,
+      displayControl: displayControl,
+      fullScreenControl: fullScreenControl
+    });
+  }
   return (0, _react2.jsx)("div", {
     className: "euiDataGrid__controls",
     "data-test-subj": "dataGridControls"
   }, hasRoomForGridControls && (0, _react2.jsx)("div", {
     className: "euiDataGrid__leftControls"
-  }, renderAdditionalControls(toolbarVisibility, 'left.prepend'), checkOrDefaultToolBarDisplayOptions(toolbarVisibility, 'showColumnSelector') ? columnSelector : null, checkOrDefaultToolBarDisplayOptions(toolbarVisibility, 'showSortSelector') ? columnSorting : null, renderAdditionalControls(toolbarVisibility, 'left.append')), (0, _react2.jsx)("div", {
+  }, renderAdditionalControls(toolbarVisibility, 'left.prepend'), columnControl, columnSortingControl, renderAdditionalControls(toolbarVisibility, 'left.append')), (0, _react2.jsx)("div", {
     className: "euiDataGrid__rightControls"
-  }, renderAdditionalControls(toolbarVisibility, 'right'), checkOrDefaultToolBarDisplayOptions(toolbarVisibility, 'showKeyboardShortcuts') ? keyboardShortcuts : (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, {
-    showOnFocus: true
-  }, (0, _react2.jsx)("span", null, keyboardShortcuts)), checkOrDefaultToolBarDisplayOptions(toolbarVisibility, 'showDisplaySelector') ? displaySelector : null, checkOrDefaultToolBarDisplayOptions(toolbarVisibility, 'showFullScreenSelector') ? fullScreenSelector : null));
+  }, renderAdditionalControls(toolbarVisibility, 'right'), keyboardShortcutsControl, displayControl, fullScreenControl));
 };
 
 /**

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

@@ -67,11 +67,6 @@ var convertGridStylesToSelection = function convertGridStylesToSelection(gridSty
   return '';
 };
 
-// Used to correctly format the icon name for the grid density icon
-var capitalizeDensityString = function capitalizeDensityString(s) {
-  return s[0].toUpperCase() + s.slice(1);
-};
-
 // Row height options and utilities
 var rowHeightButtonOptions = ['undefined', 'auto', 'lineCount'];
 var convertRowHeightsOptionsToSelection = function convertRowHeightsOptionsToSelection(rowHeightsOptions) {
@@ -88,13 +83,15 @@ var convertRowHeightsOptionsToSelection = function convertRowHeightsOptionsToSel
   return rowHeightButtonOptions[0];
 };
 var useDataGridDisplaySelector = function useDataGridDisplaySelector(showDisplaySelector, initialStyles, initialRowHeightsOptions) {
-  var _rowHeightsOptions$de2;
+  var _showDisplaySelector$, _rowHeightsOptions$de2;
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isOpen = _useState2[0],
     setIsOpen = _useState2[1];
   var showDensityControls = (0, _data_grid_toolbar.getNestedObjectOptions)(showDisplaySelector, 'allowDensity');
   var showRowHeightControls = (0, _data_grid_toolbar.getNestedObjectOptions)(showDisplaySelector, 'allowRowHeight');
+  var allowResetButton = (0, _data_grid_toolbar.getNestedObjectOptions)(showDisplaySelector, 'allowResetButton');
+  var additionalDisplaySettings = typeof showDisplaySelector === 'boolean' ? null : (_showDisplaySelector$ = showDisplaySelector === null || showDisplaySelector === void 0 ? void 0 : showDisplaySelector.additionalDisplaySettings) !== null && _showDisplaySelector$ !== void 0 ? _showDisplaySelector$ : null;
 
   // Track styles specified by the user at run time
   var _useState3 = (0, _react.useState)({}),
@@ -176,20 +173,24 @@ var useDataGridDisplaySelector = function useDataGridDisplaySelector(showDisplay
     setShowResetButton = _useState10[1];
   (0, _services.useUpdateEffect)(function () {
     var _initialStyles$onChan;
-    var hasUserChanges = Object.keys(userGridStyles).length > 0;
-    if (hasUserChanges) setShowResetButton(true);
+    if (allowResetButton) {
+      var hasUserChanges = Object.keys(userGridStyles).length > 0;
+      if (hasUserChanges) setShowResetButton(true);
+    }
     var onChange = gridStyles.onChange,
       currentGridStyles = (0, _objectWithoutProperties2.default)(gridStyles, _excluded);
     initialStyles === null || initialStyles === void 0 ? void 0 : (_initialStyles$onChan = initialStyles.onChange) === null || _initialStyles$onChan === void 0 ? void 0 : _initialStyles$onChan.call(initialStyles, currentGridStyles);
-  }, [userGridStyles]);
+  }, [userGridStyles, allowResetButton]);
   (0, _services.useUpdateEffect)(function () {
     var _initialRowHeightsOpt;
-    var hasUserChanges = Object.keys(userRowHeightsOptions).length > 0;
-    if (hasUserChanges) setShowResetButton(true);
+    if (allowResetButton) {
+      var hasUserChanges = Object.keys(userRowHeightsOptions).length > 0;
+      if (hasUserChanges) setShowResetButton(true);
+    }
     var onChange = rowHeightsOptions.onChange,
       currentRowHeightsOptions = (0, _objectWithoutProperties2.default)(rowHeightsOptions, _excluded2);
     initialRowHeightsOptions === null || initialRowHeightsOptions === void 0 ? void 0 : (_initialRowHeightsOpt = initialRowHeightsOptions.onChange) === null || _initialRowHeightsOpt === void 0 ? void 0 : _initialRowHeightsOpt.call(initialRowHeightsOptions, currentRowHeightsOptions);
-  }, [userRowHeightsOptions]);
+  }, [userRowHeightsOptions, allowResetButton]);
 
   // Allow resetting to initial developer-specified configurations
   var resetToInitialState = (0, _react.useCallback)(function () {
@@ -199,7 +200,7 @@ 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 ? (0, _react2.jsx)(_popover.EuiPopover, {
+  var displaySelector = showDensityControls || showRowHeightControls || additionalDisplaySettings ? (0, _react2.jsx)(_popover.EuiPopover, {
     "data-test-subj": "dataGridDisplaySelectorPopover",
     isOpen: isOpen,
     closePopover: function closePopover() {
@@ -213,7 +214,7 @@ var useDataGridDisplaySelector = function useDataGridDisplaySelector(showDisplay
       delay: "long"
     }, (0, _react2.jsx)(_button.EuiButtonIcon, {
       size: "xs",
-      iconType: gridDensity ? "tableDensity".concat(capitalizeDensityString(gridDensity)) : 'tableDensityNormal',
+      iconType: "controlsHorizontal",
       className: "euiDataGrid__controlBtn",
       color: "text",
       "data-test-subj": "dataGridDisplaySelectorButton",
@@ -296,7 +297,7 @@ var useDataGridDisplaySelector = function useDataGridDisplaySelector(showDisplay
       onChange: setLineCountHeight,
       "data-test-subj": "lineCountNumber"
     })));
-  }), showResetButton && (0, _react2.jsx)(_popover.EuiPopoverFooter, null, (0, _react2.jsx)(_flex.EuiFlexGroup, {
+  }), additionalDisplaySettings, showResetButton && (0, _react2.jsx)(_popover.EuiPopoverFooter, null, (0, _react2.jsx)(_flex.EuiFlexGroup, {
     justifyContent: "flexEnd",
     responsive: false
   }, (0, _react2.jsx)(_flex.EuiFlexItem, {

package/optimize/lib/components/datagrid/data_grid.a11y.js

@@ -52,9 +52,9 @@ var columns = [{
 var storeData = [];
 for (var i = 1; i < 11; i++) {
   storeData.push({
-    Name: "".concat(_faker.faker.name.lastName(), ", ").concat(_faker.faker.name.firstName(), " ").concat(_faker.faker.name.suffix()),
+    Name: "".concat(_faker.faker.person.lastName(), ", ").concat(_faker.faker.person.firstName(), " ").concat(_faker.faker.person.suffix()),
     Email: "".concat(_faker.faker.internet.email()),
-    'User ID': "".concat(_faker.faker.datatype.number({
+    'User ID': "".concat(_faker.faker.number.int({
       min: 1000000,
       max: 9999999
     })),

package/optimize/lib/components/datagrid/data_grid.js

@@ -32,7 +32,7 @@ var _data_grid_schema = require("./utils/data_grid_schema");
 var _ref = require("./utils/ref");
 var _data_grid_types = require("./data_grid_types");
 var _react2 = require("@emotion/react");
-var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "columnVisibility", "schemaDetectors", "rowCount", "renderCellValue", "renderCellPopover", "renderFooterCellValue", "className", "gridStyle", "toolbarVisibility", "pagination", "sorting", "inMemory", "onColumnResize", "minSizeForControls", "height", "width", "rowHeightsOptions", "virtualizationOptions", "renderCustomGridBody"],
+var _excluded = ["leadingControlColumns", "trailingControlColumns", "columns", "columnVisibility", "schemaDetectors", "rowCount", "renderCellValue", "renderCellPopover", "renderFooterCellValue", "className", "gridStyle", "toolbarVisibility", "pagination", "sorting", "inMemory", "onColumnResize", "minSizeForControls", "height", "width", "rowHeightsOptions", "virtualizationOptions", "renderCustomGridBody", "renderCustomToolbar"],
   _excluded2 = ["focusProps"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -101,6 +101,7 @@ var EuiDataGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     _rowHeightsOptions = props.rowHeightsOptions,
     virtualizationOptions = props.virtualizationOptions,
     renderCustomGridBody = props.renderCustomGridBody,
+    renderCustomToolbar = props.renderCustomToolbar,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
 
   /**
@@ -317,7 +318,8 @@ var EuiDataGrid = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     keyboardShortcuts: keyboardShortcuts,
     displaySelector: displaySelector,
     columnSelector: columnSelector,
-    columnSorting: columnSorting
+    columnSorting: columnSorting,
+    renderCustomToolbar: renderCustomToolbar
   }), inMemory ? (0, _react2.jsx)(_in_memory.EuiDataGridInMemoryRenderer, {
     inMemory: inMemory,
     renderCellValue: renderCellValue,

package/optimize/lib/components/datagrid/data_grid_types.js

@@ -15,6 +15,10 @@ exports.emptyControlColumns = void 0;
 // since react-window doesn't export a type with the imperative api only we can
 // use this to omit the react-specific class component methods
 
+/**
+ * Props which are available for a custom toolbar rendering
+ */
+
 // An array of [x,y] coordinates. Note that the `y` value expected internally is a `visibleRowIndex`
 
 // Force either aria-label or aria-labelledby to be defined

package/optimize/lib/components/date_picker/date_picker.js

@@ -17,7 +17,7 @@ var _services = require("../../services");
 var _context = require("../context");
 var _reactDatepicker = require("./react-datepicker");
 var _react2 = require("@emotion/react");
-var _excluded = ["adjustDateOnChange", "calendarClassName", "className", "controlOnly", "customInput", "dateFormat", "dayClassName", "disabled", "excludeDates", "filterDate", "fullWidth", "iconType", "injectTimes", "inline", "inputRef", "isInvalid", "isLoading", "locale", "maxDate", "maxTime", "minDate", "minTime", "onChange", "onClear", "openToDate", "placeholder", "popperClassName", "popoverPlacement", "readOnly", "selected", "shadow", "shouldCloseOnSelect", "showIcon", "showTimeSelect", "showTimeSelectOnly", "timeFormat", "utcOffset"];
+var _excluded = ["adjustDateOnChange", "calendarClassName", "className", "compressed", "controlOnly", "customInput", "dateFormat", "dayClassName", "disabled", "excludeDates", "filterDate", "fullWidth", "iconType", "injectTimes", "inline", "inputRef", "isInvalid", "isLoading", "locale", "maxDate", "maxTime", "minDate", "minTime", "onChange", "onClear", "openToDate", "placeholder", "popperClassName", "popoverPlacement", "readOnly", "selected", "shadow", "shouldCloseOnSelect", "showIcon", "showTimeSelect", "showTimeSelectOnly", "timeFormat", "utcOffset"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -64,6 +64,7 @@ var EuiDatePicker = function EuiDatePicker(_ref) {
     adjustDateOnChange = _ref$adjustDateOnChan === void 0 ? true : _ref$adjustDateOnChan,
     calendarClassName = _ref.calendarClassName,
     className = _ref.className,
+    compressed = _ref.compressed,
     controlOnly = _ref.controlOnly,
     customInput = _ref.customInput,
     _ref$dateFormat = _ref.dateFormat,
@@ -115,11 +116,12 @@ var EuiDatePicker = function EuiDatePicker(_ref) {
     isInvalid: isInvalid,
     isLoading: isLoading
   });
-  var datePickerClasses = (0, _classnames.default)('euiDatePicker', 'euiFieldText', numIconsClass, {
+  var datePickerClasses = (0, _classnames.default)('euiDatePicker', 'euiFieldText', numIconsClass, !inline && {
     'euiFieldText--fullWidth': fullWidth,
     'euiFieldText-isLoading': isLoading,
-    'euiFieldText--withIcon': !inline && showIcon,
-    'euiFieldText--isClearable': !inline && selected && onClear
+    'euiFieldText--compressed': compressed,
+    'euiFieldText--withIcon': showIcon,
+    'euiFieldText--isClearable': selected && onClear
   }, className);
   var optionalIcon;
   if (inline || customInput || !showIcon) {
@@ -195,7 +197,8 @@ var EuiDatePicker = function EuiDatePicker(_ref) {
     className: classes
   }, (0, _react2.jsx)(_form.EuiFormControlLayout, {
     icon: optionalIcon,
-    fullWidth: fullWidth,
+    fullWidth: !inline && fullWidth,
+    compressed: !inline && compressed,
     clear: selected && onClear ? {
       onClick: onClear
     } : undefined,