@elastic/eui 75.1.2 → 76.0.0

package/optimize/lib/components/datagrid/body/data_grid_body.js

@@ -9,8 +9,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiDataGridBody = exports.DataGridWrapperRowsContext = exports.Cell = void 0;
 
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
@@ -23,16 +21,14 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactWindow = require("react-window");
 
-var _mutation_observer = require("../../observer/mutation_observer");
-
 var _resize_observer = require("../../observer/resize_observer");
 
 var _data_grid_cell = require("./data_grid_cell");
 
-var _data_grid_footer_row = require("./data_grid_footer_row");
-
 var _header = require("./header");
 
+var _footer = require("./footer");
+
 var _data_grid_cell_popover = require("./data_grid_cell_popover");
 
 var _data_grid_row_manager = require("./data_grid_row_manager");
@@ -43,8 +39,6 @@ var _col_widths = require("../utils/col_widths");
 
 var _row_heights = require("../utils/row_heights");
 
-var _focus = require("../utils/focus");
-
 var _scrolling = require("../utils/scrolling");
 
 var _sorting = require("../utils/sorting");
@@ -264,73 +258,47 @@ var EuiDataGridBody = function EuiDataGridBody(props) {
       setColumnWidth = _useColumnWidths.setColumnWidth,
       getColumnWidth = _useColumnWidths.getColumnWidth;
   /**
-   * Header
-   */
-
-
-  var _useState = (0, _react.useState)(null),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      headerRowRef = _useState2[0],
-      setHeaderRowRef = _useState2[1];
-
-  (0, _mutation_observer.useMutationObserver)(headerRowRef, handleHeaderMutation, {
-    subtree: true,
-    childList: true
-  });
-
-  var _useResizeObserver = (0, _resize_observer.useResizeObserver)(headerRowRef, 'height'),
-      headerRowHeight = _useResizeObserver.height;
-
-  var headerRow = (0, _react.useMemo)(function () {
-    return (0, _react2.jsx)(_header.EuiDataGridHeaderRow, {
-      ref: setHeaderRowRef,
-      switchColumnPos: switchColumnPos,
-      setVisibleColumns: setVisibleColumns,
-      leadingControlColumns: leadingControlColumns,
-      trailingControlColumns: trailingControlColumns,
-      columns: columns,
-      columnWidths: columnWidths,
-      defaultColumnWidth: defaultColumnWidth,
-      setColumnWidth: setColumnWidth,
-      schema: schema,
-      schemaDetectors: schemaDetectors,
-      headerIsInteractive: headerIsInteractive
-    });
-  }, [switchColumnPos, setVisibleColumns, leadingControlColumns, trailingControlColumns, columns, columnWidths, defaultColumnWidth, setColumnWidth, schema, schemaDetectors, headerIsInteractive]);
-  (0, _focus.useHeaderFocusWorkaround)(headerIsInteractive);
-  /**
-   * Footer
+   * Header & footer
    */
 
-  var _useState3 = (0, _react.useState)(null),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      footerRowRef = _useState4[0],
-      setFooterRowRef = _useState4[1];
 
-  var _useResizeObserver2 = (0, _resize_observer.useResizeObserver)(footerRowRef, 'height'),
-      footerRowHeight = _useResizeObserver2.height;
-
-  var footerRow = (0, _react.useMemo)(function () {
-    if (renderFooterCellValue == null) return null;
-    return (0, _react2.jsx)(_data_grid_footer_row.EuiDataGridFooterRow, {
-      ref: setFooterRowRef,
-      leadingControlColumns: leadingControlColumns,
-      trailingControlColumns: trailingControlColumns,
-      columns: columns,
-      schema: schema,
-      columnWidths: columnWidths,
-      defaultColumnWidth: defaultColumnWidth,
-      renderCellValue: renderFooterCellValue,
-      renderCellPopover: renderCellPopover,
-      rowIndex: visibleRowCount,
-      visibleRowIndex: visibleRowCount,
-      interactiveCellId: interactiveCellId
-    });
-  }, [columnWidths, columns, defaultColumnWidth, interactiveCellId, leadingControlColumns, renderFooterCellValue, renderCellPopover, schema, trailingControlColumns, visibleRowCount]);
+  var _useDataGridHeader = (0, _header.useDataGridHeader)({
+    headerIsInteractive: headerIsInteractive,
+    handleHeaderMutation: handleHeaderMutation,
+    switchColumnPos: switchColumnPos,
+    setVisibleColumns: setVisibleColumns,
+    leadingControlColumns: leadingControlColumns,
+    trailingControlColumns: trailingControlColumns,
+    columns: columns,
+    columnWidths: columnWidths,
+    defaultColumnWidth: defaultColumnWidth,
+    setColumnWidth: setColumnWidth,
+    schema: schema,
+    schemaDetectors: schemaDetectors
+  }),
+      headerRow = _useDataGridHeader.headerRow,
+      headerRowHeight = _useDataGridHeader.headerRowHeight;
+
+  var _useDataGridFooter = (0, _footer.useDataGridFooter)({
+    renderFooterCellValue: renderFooterCellValue,
+    renderCellPopover: renderCellPopover,
+    rowIndex: visibleRowCount,
+    visibleRowIndex: visibleRowCount,
+    interactiveCellId: interactiveCellId,
+    leadingControlColumns: leadingControlColumns,
+    trailingControlColumns: trailingControlColumns,
+    columns: columns,
+    columnWidths: columnWidths,
+    defaultColumnWidth: defaultColumnWidth,
+    schema: schema
+  }),
+      footerRow = _useDataGridFooter.footerRow,
+      footerRowHeight = _useDataGridFooter.footerRowHeight;
   /**
    * Handle scrolling cells fully into view
    */
 
+
   (0, _scrolling.useScroll)({
     gridRef: gridRef,
     outerGridRef: outerGridRef,

package/{test-env/components/datagrid/body → optimize/lib/components/datagrid/body/footer}/data_grid_footer_row.js

@@ -17,9 +17,9 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _data_grid_cell = require("./data_grid_cell");
+var _data_grid_cell = require("../data_grid_cell");
 
-var _data_grid_cell_popover = require("./data_grid_cell_popover");
+var _data_grid_cell_popover = require("../data_grid_cell_popover");
 
 var _react2 = require("@emotion/react");
 
@@ -29,6 +29,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 renderEmpty = function renderEmpty() {
+  return null;
+};
+
 var EuiDataGridFooterRow = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var leadingControlColumns = _ref.leadingControlColumns,
       trailingControlColumns = _ref.trailingControlColumns,
@@ -54,7 +58,6 @@ var EuiDataGridFooterRow = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _reac
     rowIndex: rowIndex,
     visibleRowIndex: visibleRowIndex,
     interactiveCellId: interactiveCellId,
-    isExpandable: true,
     popoverContext: popoverContext
   };
   return (0, _react2.jsx)("div", (0, _extends2.default)({
@@ -64,16 +67,17 @@ var EuiDataGridFooterRow = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _reac
     "data-test-subj": dataTestSubj
   }, rest), leadingControlColumns.map(function (_ref2, i) {
     var id = _ref2.id,
-        width = _ref2.width;
-    return (0, _react2.jsx)(_data_grid_cell.EuiDataGridCell, (0, _extends2.default)({}, sharedCellProps, {
+        width = _ref2.width,
+        footerCellRender = _ref2.footerCellRender,
+        footerCellProps = _ref2.footerCellProps;
+    return (0, _react2.jsx)(_data_grid_cell.EuiDataGridCell, (0, _extends2.default)({}, footerCellProps, sharedCellProps, {
       key: "".concat(id, "-").concat(rowIndex),
       colIndex: i,
       columnId: id,
       width: width,
-      renderCellValue: function renderCellValue() {
-        return null;
-      },
-      className: "euiDataGridFooterCell euiDataGridRowCell--controlColumn"
+      renderCellValue: footerCellRender !== null && footerCellRender !== void 0 ? footerCellRender : renderEmpty,
+      isExpandable: false,
+      className: (0, _classnames.default)('euiDataGridFooterCell', 'euiDataGridRowCell--controlColumn', footerCellProps === null || footerCellProps === void 0 ? void 0 : footerCellProps.className)
     }));
   }), columns.map(function (_ref3, i) {
     var id = _ref3.id;
@@ -89,21 +93,23 @@ var EuiDataGridFooterRow = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _reac
       width: width || undefined,
       renderCellValue: renderCellValue,
       renderCellPopover: renderCellPopover,
+      isExpandable: true,
       className: "euiDataGridFooterCell"
     }));
   }), trailingControlColumns.map(function (_ref4, i) {
     var id = _ref4.id,
-        width = _ref4.width;
+        width = _ref4.width,
+        footerCellRender = _ref4.footerCellRender,
+        footerCellProps = _ref4.footerCellProps;
     var colIndex = i + columns.length + leadingControlColumns.length;
-    return (0, _react2.jsx)(_data_grid_cell.EuiDataGridCell, (0, _extends2.default)({}, sharedCellProps, {
+    return (0, _react2.jsx)(_data_grid_cell.EuiDataGridCell, (0, _extends2.default)({}, footerCellProps, sharedCellProps, {
       key: "".concat(id, "-").concat(rowIndex),
       colIndex: colIndex,
       columnId: id,
       width: width,
-      renderCellValue: function renderCellValue() {
-        return null;
-      },
-      className: "euiDataGridFooterCell euiDataGridRowCell--controlColumn"
+      renderCellValue: footerCellRender !== null && footerCellRender !== void 0 ? footerCellRender : renderEmpty,
+      isExpandable: false,
+      className: (0, _classnames.default)('euiDataGridFooterCell', 'euiDataGridRowCell--controlColumn', footerCellProps === null || footerCellProps === void 0 ? void 0 : footerCellProps.className)
     }));
   }));
 }));

package/optimize/lib/components/datagrid/body/footer/index.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EuiDataGridFooterRow", {
+  enumerable: true,
+  get: function get() {
+    return _data_grid_footer_row.EuiDataGridFooterRow;
+  }
+});
+Object.defineProperty(exports, "useDataGridFooter", {
+  enumerable: true,
+  get: function get() {
+    return _use_data_grid_footer.useDataGridFooter;
+  }
+});
+
+var _data_grid_footer_row = require("./data_grid_footer_row");
+
+var _use_data_grid_footer = require("./use_data_grid_footer");

package/optimize/lib/components/datagrid/body/footer/use_data_grid_footer.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDataGridFooter = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _resize_observer = require("../../../observer/resize_observer");
+
+var _data_grid_footer_row = require("./data_grid_footer_row");
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["renderFooterCellValue"];
+
+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; }
+
+/**
+ * DRY out setting up the grid footer and its refs & observers
+ */
+var useDataGridFooter = function useDataGridFooter(props) {
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      footerRowRef = _useState2[0],
+      setFooterRowRef = _useState2[1];
+
+  var _useResizeObserver = (0, _resize_observer.useResizeObserver)(footerRowRef, 'height'),
+      footerRowHeight = _useResizeObserver.height;
+
+  var footerRow = (0, _react.useMemo)(function () {
+    var renderFooterCellValue = props.renderFooterCellValue,
+        footerProps = (0, _objectWithoutProperties2.default)(props, _excluded);
+    if (renderFooterCellValue == null) return null;
+    return (0, _react2.jsx)(_data_grid_footer_row.EuiDataGridFooterRow, (0, _extends2.default)({
+      ref: setFooterRowRef,
+      renderCellValue: renderFooterCellValue
+    }, footerProps));
+  }, Object.values(props)); // eslint-disable-line react-hooks/exhaustive-deps
+
+  return {
+    footerRow: footerRow,
+    footerRowHeight: footerRowHeight
+  };
+};
+
+exports.useDataGridFooter = useDataGridFooter;

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

@@ -7,8 +7,12 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiDataGridControlHeaderCell = void 0;
 
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
 var _react = _interopRequireDefault(require("react"));
 
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _data_grid_header_cell_wrapper = require("./data_grid_header_cell_wrapper");
 
 var _react2 = require("@emotion/react");
@@ -25,15 +29,16 @@ var EuiDataGridControlHeaderCell = function EuiDataGridControlHeaderCell(_ref) {
       index = _ref.index,
       headerIsInteractive = _ref.headerIsInteractive;
   var HeaderCellRender = controlColumn.headerCellRender,
+      headerCellProps = controlColumn.headerCellProps,
       width = controlColumn.width,
       id = controlColumn.id;
-  return (0, _react2.jsx)(_data_grid_header_cell_wrapper.EuiDataGridHeaderCellWrapper, {
-    className: "euiDataGridHeaderCell--controlColumn",
+  return (0, _react2.jsx)(_data_grid_header_cell_wrapper.EuiDataGridHeaderCellWrapper, (0, _extends2.default)({}, headerCellProps, {
+    className: (0, _classnames.default)('euiDataGridHeaderCell--controlColumn', headerCellProps === null || headerCellProps === void 0 ? void 0 : headerCellProps.className),
     id: id,
     index: index,
     width: width,
     headerIsInteractive: headerIsInteractive
-  }, (0, _react2.jsx)("div", {
+  }), (0, _react2.jsx)("div", {
     className: "euiDataGridHeaderCell__content"
   }, (0, _react2.jsx)(HeaderCellRender, null)));
 };

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

@@ -72,10 +72,11 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
       headerIsInteractive = _ref.headerIsInteractive;
   var id = column.id,
       display = column.display,
-      displayAsText = column.displayAsText;
+      displayAsText = column.displayAsText,
+      displayHeaderCellProps = column.displayHeaderCellProps;
   var width = columnWidths[id] || defaultColumnWidth;
   var columnType = schema[id] ? schema[id].columnType : null;
-  var classes = (0, _classnames2.default)((0, _defineProperty2.default)({}, "euiDataGridHeaderCell--".concat(columnType), columnType));
+  var classes = (0, _classnames2.default)((0, _defineProperty2.default)({}, "euiDataGridHeaderCell--".concat(columnType), columnType), displayHeaderCellProps === null || displayHeaderCellProps === void 0 ? void 0 : displayHeaderCellProps.className);
 
   var _useContext = (0, _react.useContext)(_focus.DataGridFocusContext),
       setFocusedCell = _useContext.setFocusedCell,
@@ -121,14 +122,14 @@ var EuiDataGridHeaderCell = function EuiDataGridHeaderCell(_ref) {
     prefix: 'euiDataGridCellHeader',
     suffix: 'actions'
   });
-  return (0, _react2.jsx)(_data_grid_header_cell_wrapper.EuiDataGridHeaderCellWrapper, {
+  return (0, _react2.jsx)(_data_grid_header_cell_wrapper.EuiDataGridHeaderCellWrapper, (0, _extends2.default)({}, displayHeaderCellProps, {
+    className: classes,
     id: id,
     index: index,
     width: width,
     headerIsInteractive: headerIsInteractive,
-    className: classes,
     "aria-sort": ariaSort
-  }, column.isResizable !== false && width != null ? (0, _react2.jsx)(_data_grid_column_resizer.EuiDataGridColumnResizer, {
+  }), column.isResizable !== false && width != null ? (0, _react2.jsx)(_data_grid_column_resizer.EuiDataGridColumnResizer, {
     columnId: id,
     columnWidth: width,
     setColumnWidth: setColumnWidth

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

@@ -9,5 +9,13 @@ Object.defineProperty(exports, "EuiDataGridHeaderRow", {
     return _data_grid_header_row.EuiDataGridHeaderRow;
   }
 });
+Object.defineProperty(exports, "useDataGridHeader", {
+  enumerable: true,
+  get: function get() {
+    return _use_data_grid_header.useDataGridHeader;
+  }
+});
+
+var _data_grid_header_row = require("./data_grid_header_row");
 
-var _data_grid_header_row = require("./data_grid_header_row");
+var _use_data_grid_header = require("./use_data_grid_header");

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

@@ -0,0 +1,69 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDataGridHeader = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _mutation_observer = require("../../../observer/mutation_observer");
+
+var _resize_observer = require("../../../observer/resize_observer");
+
+var _focus = require("../../utils/focus");
+
+var _data_grid_header_row = require("./data_grid_header_row");
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["handleHeaderMutation"];
+
+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; }
+
+/**
+ * DRY out setting up the grid header and its refs & observers
+ */
+var useDataGridHeader = function useDataGridHeader(_ref) {
+  var handleHeaderMutation = _ref.handleHeaderMutation,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(null),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      headerRowRef = _useState2[0],
+      setHeaderRowRef = _useState2[1];
+
+  (0, _mutation_observer.useMutationObserver)(headerRowRef, handleHeaderMutation, {
+    subtree: true,
+    childList: true
+  });
+
+  var _useResizeObserver = (0, _resize_observer.useResizeObserver)(headerRowRef, 'height'),
+      headerRowHeight = _useResizeObserver.height;
+
+  var headerRow = (0, _react.useMemo)(function () {
+    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
+
+  (0, _focus.useHeaderFocusWorkaround)(props.headerIsInteractive);
+  return {
+    headerRow: headerRow,
+    headerRowHeight: headerRowHeight
+  };
+};
+
+exports.useDataGridHeader = useDataGridHeader;

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

@@ -100,7 +100,7 @@ var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     className: "euiDatePickerRange__delimeter"
   }, (0, _react2.jsx)(_icon.EuiIcon, {
     color: isInvalid ? 'danger' : 'subdued',
-    type: isInvalid ? 'alert' : 'sortRight'
+    type: isInvalid ? 'warning' : 'sortRight'
   }));
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     className: classes

package/optimize/lib/components/expression/expression.js

@@ -74,7 +74,7 @@ var EuiExpression = function EuiExpression(_ref) {
   }, descriptionStyle) : undefined;
   var invalidIcon = isInvalid ? (0, _react2.jsx)(_icon.EuiIcon, {
     className: "euiExpression__icon",
-    type: "alert",
+    type: "warning",
     css: cssIconStyles,
     color: calculatedColor
   }) : undefined;

package/optimize/lib/components/icon/assets/pivot.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.icon = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var React = _interopRequireWildcard(require("react"));
+
+var _react2 = require("@emotion/react");
+
+var _excluded = ["title", "titleId"];
+
+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 EuiIconPivot = function EuiIconPivot(_ref) {
+  var title = _ref.title,
+      titleId = _ref.titleId,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    fill: "none",
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? (0, _react2.jsx)("title", {
+    id: titleId
+  }, title) : null, (0, _react2.jsx)("path", {
+    fillRule: "evenodd",
+    d: "M2.89 13.847L11.239 5.5a.522.522 0 00-.737-.737L2.154 13.11a.522.522 0 00.738.738zM14 6.696a.522.522 0 11-1.043 0v-3.13a.522.522 0 00-.522-.523h-3.13a.522.522 0 110-1.043h3.13C13.299 2 14 2.7 14 3.565v3.13z",
+    clipRule: "evenodd"
+  }));
+};
+
+var icon = EuiIconPivot;
+exports.icon = icon;

package/optimize/lib/components/icon/assets/{crossInACircleFilled.js → warning.js}

@@ -23,7 +23,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 EuiIconCrossInACircleFilled = function EuiIconCrossInACircleFilled(_ref) {
+var EuiIconWarning = function EuiIconWarning(_ref) {
   var title = _ref.title,
       titleId = _ref.titleId,
       props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
@@ -36,9 +36,11 @@ var EuiIconCrossInACircleFilled = function EuiIconCrossInACircleFilled(_ref) {
   }, props), title ? (0, _react2.jsx)("title", {
     id: titleId
   }, title) : null, (0, _react2.jsx)("path", {
-    d: "M8.746 8l3.1-3.1a.527.527 0 10-.746-.746L8 7.254l-3.1-3.1a.527.527 0 10-.746.746l3.1 3.1-3.1 3.1a.527.527 0 10.746.746l3.1-3.1 3.1 3.1a.527.527 0 10.746-.746L8.746 8zM8 16A8 8 0 118 0a8 8 0 010 16z"
+    d: "M8.55 9.502l.35-3.507a.905.905 0 10-1.8 0l.35 3.507a.552.552 0 001.1 0zM9 12a1 1 0 11-2 0 1 1 0 012 0z"
+  }), (0, _react2.jsx)("path", {
+    d: "M8.864 1.496a1 1 0 00-1.728 0l-7 12A1 1 0 001 15h14a1 1 0 00.864-1.504l-7-12zM1 14L8 2l7 12H1z"
   }));
 };
 
-var icon = EuiIconCrossInACircleFilled;
+var icon = EuiIconWarning;
 exports.icon = icon;

package/optimize/lib/components/icon/icon_glyphs.a11y.js

@@ -18,7 +18,7 @@ var _react2 = require("@emotion/react");
 /// <reference types="../../../cypress/support"/>
 describe('EuiIcons', function () {
   describe('Automated accessibility check for glyph icons', function () {
-    var GlyphIcons = ['accessibility', 'aggregate', 'alert', 'analyzeEvent', 'annotation', 'apmTrace', 'apps', 'arrowDown', 'arrowLeft', 'arrowRight', 'arrowUp', 'arrowStart', 'arrowEnd', 'article', 'asterisk', 'beaker', 'bell', 'bellSlash', 'beta', 'bolt', 'boxesHorizontal', 'boxesVertical', 'branch', 'branchUser', 'broom', 'brush', 'bug', 'bullseye', 'calendar', 'check', 'checkInCircleFilled', 'cheer', 'clock', 'cloudDrizzle', 'cloudStormy', 'cloudSunny', 'cluster', 'color', 'compute', 'console', 'container', 'continuityAbove', 'continuityAboveBelow', 'continuityBelow', 'continuityWithin', 'controlsHorizontal', 'controlsVertical', 'copy', 'copyClipboard', 'cross', 'crosshairs', 'crossInACircleFilled', 'currency', 'cut', 'database', 'desktop', 'discuss', 'document', 'documents', 'documentEdit', 'documentation', 'dot', 'dotInCircle', 'doubleArrowLeft', 'doubleArrowRight', 'download', 'email', 'empty', 'eql', 'eraser', 'exit', 'expand', 'expandMini', 'exportAction', 'eye', 'eyeClosed', 'faceHappy', 'faceNeutral', 'faceSad', 'filter', 'filterExclude', 'filterIgnore', 'filterInclude', 'filterInCircle', 'flag', 'fold', 'folderCheck', 'folderClosed', 'folderExclamation', 'folderOpen', 'frameNext', 'framePrevious', 'fullScreen', 'fullScreenExit', 'function', 'gear', 'glasses', 'globe', 'grab', 'grabHorizontal', 'grid', 'heart', 'heatmap', 'help', 'home', 'iInCircle', 'image', 'importAction', 'indexClose', 'indexEdit', 'indexFlush', 'indexMapping', 'indexOpen', 'indexRuntime', 'indexSettings', 'indexTemporary', 'infinity', 'inputOutput', 'inspect', 'invert', 'ip', 'keyboard', 'kqlField', 'kqlFunction', 'kqlOperand', 'kqlSelector', 'kqlValue', 'kubernetesNode', 'kubernetesPod', 'launch', 'layers', 'lettering', 'lineDashed', 'lineDotted', 'lineSolid', 'link', 'list', 'listAdd', 'lock', 'lockOpen', 'logstashFilter', 'logstashIf', 'logstashInput', 'logstashOutput', 'logstashQueue', 'magnifyWithExclamation', 'magnifyWithMinus', 'magnifyWithPlus', 'magnet', 'mapMarker', 'memory', 'merge', 'menu', 'menuDown', 'menuLeft', 'menuRight', 'menuUp', 'minimize', 'minus', 'minusInCircle', 'minusInCircleFilled', 'mobile', 'moon', 'namespace', 'nested', 'node', 'number', 'offline', 'online', 'package', 'pageSelect', 'pagesSelect', 'paperClip', 'partial', 'pause', 'payment', 'pencil', 'percent', 'pin', 'pinFilled', 'play', 'playFilled', 'plus', 'plusInCircle', 'plusInCircleFilled', 'popout', 'push', 'questionInCircle', 'quote', 'refresh', 'reporter', 'returnKey', 'save', 'scale', 'search', 'securitySignal', 'securitySignalDetected', 'securitySignalResolved', 'sessionViewer', 'shard', 'share', 'snowflake', 'sortable', 'sortAscending', 'sortDescending', 'sortDown', 'sortLeft', 'sortRight', 'sortUp', 'spaces', 'starEmpty', 'starEmptySpace', 'starFilled', 'starFilledSpace', 'starMinusEmpty', 'starMinusFilled', 'starPlusEmpty', 'starPlusFilled', 'stats', 'stop', 'stopFilled', 'stopSlash', 'storage', 'string', 'submodule', 'sun', 'symlink', 'tableOfContents', 'tableDensityExpanded', 'tableDensityCompact', 'tableDensityNormal', 'tag', 'tear', 'temperature', 'timeline', 'timeRefresh', 'timeslider', 'training', 'trash', 'unfold', 'unlink', 'user', 'userAvatar', 'users', 'vector', 'videoPlayer', 'visArea', 'visAreaStacked', 'visBarHorizontal', 'visBarHorizontalStacked', 'visBarVertical', 'visBarVerticalStacked', 'visGauge', 'visGoal', 'visLine', 'visMapCoordinate', 'visMapRegion', 'visMetric', 'visPie', 'visTable', 'visTagCloud', 'visText', 'visTimelion', 'visVega', 'visVisualBuilder', 'wordWrap', 'wordWrapDisabled', 'wrench'];
+    var GlyphIcons = ['accessibility', 'aggregate', 'analyzeEvent', 'annotation', 'apmTrace', 'apps', 'arrowDown', 'arrowLeft', 'arrowRight', 'arrowUp', 'arrowStart', 'arrowEnd', 'article', 'asterisk', 'beaker', 'bell', 'bellSlash', 'beta', 'bolt', 'boxesHorizontal', 'boxesVertical', 'branch', 'branchUser', 'broom', 'brush', 'bug', 'bullseye', 'calendar', 'check', 'checkInCircleFilled', 'cheer', 'clock', 'cloudDrizzle', 'cloudStormy', 'cloudSunny', 'cluster', 'color', 'compute', 'console', 'container', 'continuityAbove', 'continuityAboveBelow', 'continuityBelow', 'continuityWithin', 'controlsHorizontal', 'controlsVertical', 'copy', 'copyClipboard', 'cross', 'crosshairs', 'currency', 'cut', 'database', 'desktop', 'discuss', 'document', 'documents', 'documentEdit', 'documentation', 'dot', 'dotInCircle', 'doubleArrowLeft', 'doubleArrowRight', 'download', 'email', 'empty', 'eql', 'eraser', 'exit', 'expand', 'expandMini', 'exportAction', 'eye', 'eyeClosed', 'faceHappy', 'faceNeutral', 'faceSad', 'filter', 'filterExclude', 'filterIgnore', 'filterInclude', 'filterInCircle', 'flag', 'fold', 'folderCheck', 'folderClosed', 'folderExclamation', 'folderOpen', 'frameNext', 'framePrevious', 'fullScreen', 'fullScreenExit', 'function', 'gear', 'glasses', 'globe', 'grab', 'grabHorizontal', 'grid', 'heart', 'heatmap', 'help', 'home', 'iInCircle', 'image', 'importAction', 'indexClose', 'indexEdit', 'indexFlush', 'indexMapping', 'indexOpen', 'indexRuntime', 'indexSettings', 'indexTemporary', 'infinity', 'inputOutput', 'inspect', 'invert', 'ip', 'keyboard', 'kqlField', 'kqlFunction', 'kqlOperand', 'kqlSelector', 'kqlValue', 'kubernetesNode', 'kubernetesPod', 'launch', 'layers', 'lettering', 'lineDashed', 'lineDotted', 'lineSolid', 'link', 'list', 'listAdd', 'lock', 'lockOpen', 'logstashFilter', 'logstashIf', 'logstashInput', 'logstashOutput', 'logstashQueue', 'magnifyWithExclamation', 'magnifyWithMinus', 'magnifyWithPlus', 'magnet', 'mapMarker', 'memory', 'merge', 'menu', 'menuDown', 'menuLeft', 'menuRight', 'menuUp', 'minimize', 'minus', 'minusInCircle', 'minusInCircleFilled', 'mobile', 'moon', 'namespace', 'nested', 'node', 'number', 'offline', 'online', 'package', 'pageSelect', 'pagesSelect', 'paperClip', 'partial', 'pause', 'payment', 'pencil', 'percent', 'pin', 'pinFilled', 'play', 'playFilled', 'plus', 'plusInCircle', 'plusInCircleFilled', 'popout', 'push', 'questionInCircle', 'quote', 'refresh', 'reporter', 'returnKey', 'save', 'scale', 'search', 'securitySignal', 'securitySignalDetected', 'securitySignalResolved', 'sessionViewer', 'shard', 'share', 'snowflake', 'sortable', 'sortAscending', 'sortDescending', 'sortDown', 'sortLeft', 'sortRight', 'sortUp', 'spaces', 'starEmpty', 'starEmptySpace', 'starFilled', 'starFilledSpace', 'starMinusEmpty', 'starMinusFilled', 'starPlusEmpty', 'starPlusFilled', 'stats', 'stop', 'stopFilled', 'stopSlash', 'storage', 'string', 'submodule', 'sun', 'symlink', 'tableOfContents', 'tableDensityExpanded', 'tableDensityCompact', 'tableDensityNormal', 'tag', 'tear', 'temperature', 'timeline', 'timeRefresh', 'timeslider', 'training', 'trash', 'unfold', 'unlink', 'user', 'userAvatar', 'users', 'vector', 'videoPlayer', 'visArea', 'visAreaStacked', 'visBarHorizontal', 'visBarHorizontalStacked', 'visBarVertical', 'visBarVerticalStacked', 'visGauge', 'visGoal', 'visLine', 'visMapCoordinate', 'visMapRegion', 'visMetric', 'visPie', 'visTable', 'visTagCloud', 'visText', 'visTimelion', 'visVega', 'visVisualBuilder', 'warning', 'wordWrap', 'wordWrapDisabled', 'wrench'];
 
     var GlyphGrid = function GlyphGrid() {
       return (0, _react2.jsx)("div", null, GlyphIcons.map(function (glyph) {

package/optimize/lib/components/icon/icon_map.js

@@ -18,7 +18,6 @@ var typeToPathMap = {
   advancedSettingsApp: 'app_advanced_settings',
   agentApp: 'app_fleet',
   aggregate: 'aggregate',
-  alert: 'alert',
   analyzeEvent: 'analyzeEvent',
   annotation: 'annotation',
   apmApp: 'app_apm',
@@ -79,7 +78,6 @@ var typeToPathMap = {
   createSingleMetricJob: 'ml_create_single_metric_job',
   cross: 'cross',
   crossClusterReplicationApp: 'app_cross_cluster_replication',
-  crossInACircleFilled: 'crossInACircleFilled',
   crosshairs: 'crosshairs',
   currency: 'currency',
   cut: 'cut',
@@ -321,6 +319,7 @@ var typeToPathMap = {
   pin: 'pin',
   pinFilled: 'pin_filled',
   pipelineApp: 'app_pipeline',
+  pivot: 'pivot',
   play: 'play',
   playFilled: 'playFilled',
   plus: 'plus',
@@ -422,6 +421,7 @@ var typeToPathMap = {
   visVega: 'vis_vega',
   visVisualBuilder: 'vis_visual_builder',
   visualizeApp: 'app_visualize',
+  warning: 'warning',
   watchesApp: 'app_watches',
   wordWrap: 'wordWrap',
   wordWrapDisabled: 'wordWrapDisabled',

package/optimize/lib/components/icon/svgs/pivot.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M2.89 13.847 11.239 5.5a.522.522 0 0 0-.737-.737L2.154 13.11a.522.522 0 0 0 .738.738ZM14 6.696a.522.522 0 1 1-1.043 0v-3.13a.522.522 0 0 0-.522-.523h-3.13a.522.522 0 1 1 0-1.043h3.13C13.299 2 14 2.7 14 3.565v3.13Z" clip-rule="evenodd"/>
+</svg>

package/optimize/lib/components/markdown_editor/markdown_editor_footer.js

@@ -144,7 +144,7 @@ var EuiMarkdownEditorFooter = /*#__PURE__*/(0, _react.forwardRef)(function (prop
   if (errors && errors.length) {
     errorsButton = (0, _react2.jsx)(_popover.EuiPopover, {
       button: (0, _react2.jsx)(_button.EuiButtonEmpty, {
-        iconType: "crossInACircleFilled",
+        iconType: "error",
         size: "s",
         color: "danger",
         "aria-label": ariaLabels.showSyntaxErrors,