@elastic/eui 64.0.2 → 64.0.4

package/es/components/accordion/accordion.js

@@ -207,10 +207,10 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
 
       if (_arrowDisplay !== 'none') {
         iconButton = ___EmotionJSX(EuiButtonIcon, _extends({
-          color: "text"
+          color: "text",
+          css: cssIconButtonStyles
         }, arrowProps, {
           className: iconButtonClasses,
-          css: cssIconButtonStyles,
           iconType: "arrowRight",
           onClick: this.onToggle,
           "aria-controls": id,
@@ -246,10 +246,11 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         childrenContent = children;
       }
 
-      var button = ___EmotionJSX(ButtonElement, _extends({}, buttonProps, {
+      var button = ___EmotionJSX(ButtonElement, _extends({
+        css: cssButtonStyles
+      }, buttonProps, {
         id: buttonId,
         className: buttonClasses,
-        css: cssButtonStyles,
         "aria-controls": id,
         "aria-expanded": isOpen,
         onClick: isDisabled ? undefined : this.onToggle,

package/es/components/basic_table/in_memory_table.js

@@ -1099,6 +1099,10 @@ EuiInMemoryTable.propTypes = {
         operator: PropTypes.oneOf(["eq", "exact", "gt", "gte", "lt", "lte"])
       }).isRequired).isRequired,
       available: PropTypes.func
+    }).isRequired, PropTypes.shape({
+      type: PropTypes.oneOf(["custom_component"]).isRequired,
+      component: PropTypes.elementType.isRequired,
+      available: PropTypes.func
     }).isRequired]).isRequired),
 
     /**

package/es/components/header/header_section/header_section_item.js

@@ -29,10 +29,11 @@ export var EuiHeaderSectionItem = function EuiHeaderSectionItem(_ref) {
       className = _ref.className,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var classes = classNames('euiHeaderSectionItem', borderToClassNameMap[border], className);
-  return ___EmotionJSX("div", _extends({
+  var classes = classNames('euiHeaderSectionItem', borderToClassNameMap[border], className); // we check if there is any children and if not, we don't render anything
+
+  return children ? ___EmotionJSX("div", _extends({
     className: classes
-  }, rest), children);
+  }, rest), children) : null;
 };
 EuiHeaderSectionItem.propTypes = {
   className: PropTypes.string,

package/es/components/image/image_wrapper.js

@@ -56,10 +56,10 @@ export var EuiImageWrapper = function EuiImageWrapper(_ref) {
       optionalCaptionText = _useInnerText2[1];
 
   return ___EmotionJSX("figure", _extends({
-    "aria-label": optionalCaptionText
-  }, wrapperProps, {
-    className: classes,
+    "aria-label": optionalCaptionText,
     css: cssFigureStyles
+  }, wrapperProps, {
+    className: classes
   }), allowFullScreen ? ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiImageButton, {
     hasAlt: !!alt,
     hasShadow: hasShadow,

package/es/components/page/page_header/page_header_content.js

@@ -59,7 +59,7 @@ export var EuiPageHeaderContent = function EuiPageHeaderContent(_ref) {
 
   var isResponsiveBreakpoint = useIsWithinBreakpoints(['xs', 's'], !!responsive);
   var useTheme = useEuiTheme();
-  var classes = classNames('euiPageHeaderContent');
+  var classes = classNames('euiPageHeaderContent', className);
   var pageHeaderStyles = euiPageHeaderStyles(useTheme);
   var contentStyles = euiPageHeaderContentStyles(useTheme);
   var styles = setStyleForRestrictedPageWidth(restrictWidth, style);

package/es/components/page/page_section/page_section.js

@@ -47,12 +47,11 @@ export var EuiPageSection = function EuiPageSection(_ref) {
   var colors = useEuiBackgroundColorCSS();
   var cssStyles = [styles.euiPageSection, grow && styles.grow, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, alignment && styles[alignment], colors[color]];
   var contentStyles = euiPageSectionContentStyles();
-  var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth];
+  var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth, (contentProps === null || contentProps === void 0 ? void 0 : contentProps.css) && contentProps.css];
   return ___EmotionJSX(Component, _extends({
     css: cssStyles
-  }, rest), ___EmotionJSX("div", _extends({
-    css: cssContentStyles
-  }, contentProps, {
+  }, rest), ___EmotionJSX("div", _extends({}, contentProps, {
+    css: cssContentStyles,
     style: widthStyles
   }), children));
 };

package/es/components/progress/progress.js

@@ -84,9 +84,9 @@ export var EuiProgress = function EuiProgress(_ref) {
     }, label && ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {
       return ___EmotionJSX("span", _extends({
         title: innerText,
-        ref: ref
+        ref: ref,
+        css: labelCssStyles
       }, labelProps, {
-        css: labelCssStyles,
         className: labelClasses
       }), label);
     }), valueRender && ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {

package/es/components/search_bar/filters/custom_component_filter.js

@@ -0,0 +1,16 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+export var CustomComponentFilter = function CustomComponentFilter(props) {
+  var CustomComponent = props.config.component;
+  return ___EmotionJSX(CustomComponent, {
+    query: props.query,
+    onChange: props.onChange
+  });
+};

package/es/components/search_bar/filters/filters.js

@@ -12,6 +12,7 @@ import { IsFilter } from './is_filter';
 import { FieldValueSelectionFilter } from './field_value_selection_filter';
 import { FieldValueToggleFilter } from './field_value_toggle_filter';
 import { FieldValueToggleGroupFilter } from './field_value_toggle_group_filter';
+import { CustomComponentFilter } from './custom_component_filter';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var createFilter = function createFilter(index, config, query, onChange) {
   var props = {
@@ -45,6 +46,11 @@ export var createFilter = function createFilter(index, config, query, onChange)
         config: config
       }));
 
+    case 'custom_component':
+      return ___EmotionJSX(CustomComponentFilter, _extends({}, props, {
+        config: config
+      }));
+
     default:
       // @ts-ignore TS knows that we've checked `config.type` exhaustively
       throw new Error("Unknown search filter type [".concat(config.type, "]"));

package/es/components/search_bar/query/ast.js

@@ -543,6 +543,18 @@ export var _AST = /*#__PURE__*/function () {
         return !Is.isInstance(clause) || clause.flag !== flag;
       }));
     }
+  }, {
+    key: "removeIsClauses",
+    value: function removeIsClauses() {
+      return new _AST(this._clauses.filter(function (clause) {
+        return !Is.isInstance(clause);
+      }));
+    }
+  }, {
+    key: "removeAllClauses",
+    value: function removeAllClauses() {
+      return new _AST();
+    }
   }, {
     key: "getGroupClauses",
     value: function getGroupClauses() {

package/es/components/search_bar/query/query.js

@@ -44,6 +44,11 @@ export var Query = /*#__PURE__*/function () {
   }
 
   _createClass(Query, [{
+    key: "hasClauses",
+    value: function hasClauses() {
+      return this.ast.clauses.length > 0;
+    }
+  }, {
     key: "hasSimpleFieldClause",
     value: function hasSimpleFieldClause(field, value) {
       return this.ast.hasSimpleFieldClause(field, value);
@@ -103,6 +108,12 @@ export var Query = /*#__PURE__*/function () {
       var ast = this.ast.removeOrFieldClauses(field);
       return new Query(ast, this.syntax);
     }
+  }, {
+    key: "removeAllClauses",
+    value: function removeAllClauses() {
+      var ast = this.ast.removeAllClauses();
+      return new Query(ast, this.syntax);
+    }
   }, {
     key: "hasIsClause",
     value: function hasIsClause(flag) {
@@ -131,6 +142,12 @@ export var Query = /*#__PURE__*/function () {
       var ast = this.ast.removeIsClause(flag);
       return new Query(ast, this.syntax);
     }
+  }, {
+    key: "removeIsClauses",
+    value: function removeIsClauses() {
+      var ast = this.ast.removeIsClauses();
+      return new Query(ast, this.syntax);
+    }
     /**
      * Executes this query over the given iterable item and returns
      * an new array of all items that matched this query. Options:

package/es/components/search_bar/search_bar.js

@@ -412,6 +412,10 @@ EuiSearchBar.propTypes = {
       operator: PropTypes.oneOf(["eq", "exact", "gt", "gte", "lt", "lte"])
     }).isRequired).isRequired,
     available: PropTypes.func
+  }).isRequired, PropTypes.shape({
+    type: PropTypes.oneOf(["custom_component"]).isRequired,
+    component: PropTypes.elementType.isRequired,
+    available: PropTypes.func
   }).isRequired]).isRequired),
 
   /**

package/es/components/search_bar/search_filters.js

@@ -156,5 +156,9 @@ EuiSearchFilters.propTypes = {
       operator: PropTypes.oneOf(["eq", "exact", "gt", "gte", "lt", "lte"])
     }).isRequired).isRequired,
     available: PropTypes.func
+  }).isRequired, PropTypes.shape({
+    type: PropTypes.oneOf(["custom_component"]).isRequired,
+    component: PropTypes.elementType.isRequired,
+    available: PropTypes.func
   }).isRequired]).isRequired).isRequired
 };

package/eui.d.ts

@@ -15977,6 +15977,8 @@ declare module '@elastic/eui/src/components/search_bar/query/ast' {
 	    getIsClauses(): IsClause[];
 	    getIsClause(flag: string): IsClause;
 	    removeIsClause(flag: string): _AST;
+	    removeIsClauses(): _AST;
+	    removeAllClauses(): _AST;
 	    getGroupClauses(): GroupClause[];
 	    /**
 	     * Creates and returns a new AST with the given clause added to the current clauses. If
@@ -16289,6 +16291,7 @@ declare module '@elastic/eui/src/components/search_bar/query/query' {
 	    text: string;
 	    private syntax;
 	    constructor(ast: _AST, syntax?: Syntax, text?: string);
+	    hasClauses(): boolean;
 	    hasSimpleFieldClause(field: string, value?: string): boolean;
 	    getSimpleFieldClause(field: string, value?: Value): import ("@elastic/eui/src/components/search_bar/query/ast").FieldClause | undefined;
 	    removeSimpleFieldClauses(field: string): Query;
@@ -16299,11 +16302,13 @@ declare module '@elastic/eui/src/components/search_bar/query/query' {
 	    addOrFieldValue(field: string, value: Value, must?: boolean, operator?: OperatorType): Query;
 	    removeOrFieldValue(field: string, value: Value): Query;
 	    removeOrFieldClauses(field: string): Query;
+	    removeAllClauses(): Query;
 	    hasIsClause(flag: string): boolean;
 	    getIsClause(flag: string): import ("@elastic/eui/src/components/search_bar/query/ast").IsClause;
 	    addMustIsClause(flag: string): Query;
 	    addMustNotIsClause(flag: string): Query;
 	    removeIsClause(flag: string): Query;
+	    removeIsClauses(): Query;
 	    /**
 	     * Executes this query over the given iterable item and returns
 	     * an new array of all items that matched this query. Options:
@@ -17080,6 +17085,30 @@ declare module '@elastic/eui/src/components/search_bar/filters/field_value_toggl
 	    render(): JSX.Element[];
 	}
 
+}
+declare module '@elastic/eui/src/components/search_bar/filters/custom_component_filter' {
+	import React, { FC } from 'react';
+	import { Query } from '@elastic/eui/src/components/search_bar/query';
+	/**
+	 * The props that are passed down to the custom component
+	 */
+	export interface CustomComponentProps {
+	    query: Query;
+	    onChange?: (query: Query) => void;
+	}
+	export interface CustomComponentFilterConfigType<T extends CustomComponentProps = CustomComponentProps> {
+	    type: 'custom_component';
+	    component: React.ComponentType<T>;
+	    available?: () => boolean;
+	}
+	export interface CustomComponentFilterProps<T extends CustomComponentProps = CustomComponentProps> {
+	    index: number;
+	    config: CustomComponentFilterConfigType<T>;
+	    query: Query;
+	    onChange?: (query: Query) => void;
+	}
+	export const CustomComponentFilter: FC<CustomComponentFilterProps>;
+
 }
 declare module '@elastic/eui/src/components/search_bar/filters/filters' {
 	
@@ -17087,9 +17116,10 @@ declare module '@elastic/eui/src/components/search_bar/filters/filters' {
 	import { FieldValueSelectionFilterConfigType } from '@elastic/eui/src/components/search_bar/filters/field_value_selection_filter';
 	import { FieldValueToggleFilterConfigType } from '@elastic/eui/src/components/search_bar/filters/field_value_toggle_filter';
 	import { FieldValueToggleGroupFilterConfigType } from '@elastic/eui/src/components/search_bar/filters/field_value_toggle_group_filter';
+	import { CustomComponentFilterConfigType } from '@elastic/eui/src/components/search_bar/filters/custom_component_filter';
 	import { Query } from '@elastic/eui/src/components/search_bar/query';
 	export const createFilter: (index: number, config: SearchFilterConfig, query: Query, onChange: (query: Query) => void) => JSX.Element;
-	export type SearchFilterConfig = IsFilterConfigType | FieldValueSelectionFilterConfigType | FieldValueToggleFilterConfigType | FieldValueToggleGroupFilterConfigType;
+	export type SearchFilterConfig = IsFilterConfigType | FieldValueSelectionFilterConfigType | FieldValueToggleFilterConfigType | FieldValueToggleGroupFilterConfigType | CustomComponentFilterConfigType;
 
 }
 declare module '@elastic/eui/src/components/search_bar/filters' {

package/lib/components/accordion/accordion.js

@@ -227,10 +227,10 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
 
       if (_arrowDisplay !== 'none') {
         iconButton = (0, _react2.jsx)(_button.EuiButtonIcon, _extends({
-          color: "text"
+          color: "text",
+          css: cssIconButtonStyles
         }, arrowProps, {
           className: iconButtonClasses,
-          css: cssIconButtonStyles,
           iconType: "arrowRight",
           onClick: this.onToggle,
           "aria-controls": id,
@@ -266,10 +266,11 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         childrenContent = children;
       }
 
-      var button = (0, _react2.jsx)(ButtonElement, _extends({}, buttonProps, {
+      var button = (0, _react2.jsx)(ButtonElement, _extends({
+        css: cssButtonStyles
+      }, buttonProps, {
         id: buttonId,
         className: buttonClasses,
-        css: cssButtonStyles,
         "aria-controls": id,
         "aria-expanded": isOpen,
         onClick: isDisabled ? undefined : this.onToggle,

package/lib/components/basic_table/in_memory_table.js

@@ -1114,6 +1114,10 @@ EuiInMemoryTable.propTypes = {
         operator: _propTypes.default.oneOf(["eq", "exact", "gt", "gte", "lt", "lte"])
       }).isRequired).isRequired,
       available: _propTypes.default.func
+    }).isRequired, _propTypes.default.shape({
+      type: _propTypes.default.oneOf(["custom_component"]).isRequired,
+      component: _propTypes.default.elementType.isRequired,
+      available: _propTypes.default.func
     }).isRequired]).isRequired),
 
     /**

package/lib/components/header/header_section/header_section_item.js

@@ -36,10 +36,11 @@ var EuiHeaderSectionItem = function EuiHeaderSectionItem(_ref) {
       className = _ref.className,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var classes = (0, _classnames.default)('euiHeaderSectionItem', borderToClassNameMap[border], className);
-  return (0, _react2.jsx)("div", _extends({
+  var classes = (0, _classnames.default)('euiHeaderSectionItem', borderToClassNameMap[border], className); // we check if there is any children and if not, we don't render anything
+
+  return children ? (0, _react2.jsx)("div", _extends({
     className: classes
-  }, rest), children);
+  }, rest), children) : null;
 };
 
 exports.EuiHeaderSectionItem = EuiHeaderSectionItem;

package/lib/components/image/image_wrapper.js

@@ -67,10 +67,10 @@ var EuiImageWrapper = function EuiImageWrapper(_ref) {
       optionalCaptionText = _useInnerText2[1];
 
   return (0, _react2.jsx)("figure", _extends({
-    "aria-label": optionalCaptionText
-  }, wrapperProps, {
-    className: classes,
+    "aria-label": optionalCaptionText,
     css: cssFigureStyles
+  }, wrapperProps, {
+    className: classes
   }), allowFullScreen ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_image_button.EuiImageButton, {
     hasAlt: !!alt,
     hasShadow: hasShadow,

package/lib/components/page/page_header/page_header_content.js

@@ -80,7 +80,7 @@ var EuiPageHeaderContent = function EuiPageHeaderContent(_ref) {
 
   var isResponsiveBreakpoint = (0, _services.useIsWithinBreakpoints)(['xs', 's'], !!responsive);
   var useTheme = (0, _services.useEuiTheme)();
-  var classes = (0, _classnames.default)('euiPageHeaderContent');
+  var classes = (0, _classnames.default)('euiPageHeaderContent', className);
   var pageHeaderStyles = (0, _page_header.euiPageHeaderStyles)(useTheme);
   var contentStyles = (0, _page_header_content.euiPageHeaderContentStyles)(useTheme);
   var styles = (0, _restrict_width.setStyleForRestrictedPageWidth)(restrictWidth, style);

package/lib/components/page/page_section/page_section.js

@@ -56,12 +56,11 @@ var EuiPageSection = function EuiPageSection(_ref) {
   var colors = (0, _global_styling.useEuiBackgroundColorCSS)();
   var cssStyles = [styles.euiPageSection, grow && styles.grow, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, alignment && styles[alignment], colors[color]];
   var contentStyles = (0, _page_section.euiPageSectionContentStyles)();
-  var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth];
+  var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth, (contentProps === null || contentProps === void 0 ? void 0 : contentProps.css) && contentProps.css];
   return (0, _react2.jsx)(Component, _extends({
     css: cssStyles
-  }, rest), (0, _react2.jsx)("div", _extends({
-    css: cssContentStyles
-  }, contentProps, {
+  }, rest), (0, _react2.jsx)("div", _extends({}, contentProps, {
+    css: cssContentStyles,
     style: widthStyles
   }), children));
 };

package/lib/components/progress/progress.js

@@ -105,9 +105,9 @@ var EuiProgress = function EuiProgress(_ref) {
     }, label && (0, _react2.jsx)(_inner_text.EuiInnerText, null, function (ref, innerText) {
       return (0, _react2.jsx)("span", _extends({
         title: innerText,
-        ref: ref
+        ref: ref,
+        css: labelCssStyles
       }, labelProps, {
-        css: labelCssStyles,
         className: labelClasses
       }), label);
     }), valueRender && (0, _react2.jsx)(_inner_text.EuiInnerText, null, function (ref, innerText) {

package/lib/components/search_bar/filters/custom_component_filter.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CustomComponentFilter = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@emotion/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+var CustomComponentFilter = function CustomComponentFilter(props) {
+  var CustomComponent = props.config.component;
+  return (0, _react2.jsx)(CustomComponent, {
+    query: props.query,
+    onChange: props.onChange
+  });
+};
+
+exports.CustomComponentFilter = CustomComponentFilter;

package/lib/components/search_bar/filters/filters.js

@@ -15,6 +15,8 @@ var _field_value_toggle_filter = require("./field_value_toggle_filter");
 
 var _field_value_toggle_group_filter = require("./field_value_toggle_group_filter");
 
+var _custom_component_filter = require("./custom_component_filter");
+
 var _react2 = require("@emotion/react");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -53,6 +55,11 @@ var createFilter = function createFilter(index, config, query, onChange) {
         config: config
       }));
 
+    case 'custom_component':
+      return (0, _react2.jsx)(_custom_component_filter.CustomComponentFilter, _extends({}, props, {
+        config: config
+      }));
+
     default:
       // @ts-ignore TS knows that we've checked `config.type` exhaustively
       throw new Error("Unknown search filter type [".concat(config.type, "]"));

package/lib/components/search_bar/query/ast.js

@@ -547,6 +547,18 @@ var _AST = /*#__PURE__*/function () {
         return !Is.isInstance(clause) || clause.flag !== flag;
       }));
     }
+  }, {
+    key: "removeIsClauses",
+    value: function removeIsClauses() {
+      return new _AST(this._clauses.filter(function (clause) {
+        return !Is.isInstance(clause);
+      }));
+    }
+  }, {
+    key: "removeAllClauses",
+    value: function removeAllClauses() {
+      return new _AST();
+    }
   }, {
     key: "getGroupClauses",
     value: function getGroupClauses() {

package/lib/components/search_bar/query/query.js

@@ -49,6 +49,11 @@ var Query = /*#__PURE__*/function () {
   }
 
   _createClass(Query, [{
+    key: "hasClauses",
+    value: function hasClauses() {
+      return this.ast.clauses.length > 0;
+    }
+  }, {
     key: "hasSimpleFieldClause",
     value: function hasSimpleFieldClause(field, value) {
       return this.ast.hasSimpleFieldClause(field, value);
@@ -108,6 +113,12 @@ var Query = /*#__PURE__*/function () {
       var ast = this.ast.removeOrFieldClauses(field);
       return new Query(ast, this.syntax);
     }
+  }, {
+    key: "removeAllClauses",
+    value: function removeAllClauses() {
+      var ast = this.ast.removeAllClauses();
+      return new Query(ast, this.syntax);
+    }
   }, {
     key: "hasIsClause",
     value: function hasIsClause(flag) {
@@ -136,6 +147,12 @@ var Query = /*#__PURE__*/function () {
       var ast = this.ast.removeIsClause(flag);
       return new Query(ast, this.syntax);
     }
+  }, {
+    key: "removeIsClauses",
+    value: function removeIsClauses() {
+      var ast = this.ast.removeIsClauses();
+      return new Query(ast, this.syntax);
+    }
     /**
      * Executes this query over the given iterable item and returns
      * an new array of all items that matched this query. Options:

package/lib/components/search_bar/search_bar.js

@@ -437,6 +437,10 @@ EuiSearchBar.propTypes = {
       operator: _propTypes.default.oneOf(["eq", "exact", "gt", "gte", "lt", "lte"])
     }).isRequired).isRequired,
     available: _propTypes.default.func
+  }).isRequired, _propTypes.default.shape({
+    type: _propTypes.default.oneOf(["custom_component"]).isRequired,
+    component: _propTypes.default.elementType.isRequired,
+    available: _propTypes.default.func
   }).isRequired]).isRequired),
 
   /**

package/lib/components/search_bar/search_filters.js

@@ -169,5 +169,9 @@ EuiSearchFilters.propTypes = {
       operator: _propTypes.default.oneOf(["eq", "exact", "gt", "gte", "lt", "lte"])
     }).isRequired).isRequired,
     available: _propTypes.default.func
+  }).isRequired, _propTypes.default.shape({
+    type: _propTypes.default.oneOf(["custom_component"]).isRequired,
+    component: _propTypes.default.elementType.isRequired,
+    available: _propTypes.default.func
   }).isRequired]).isRequired).isRequired
 };

package/optimize/es/components/accordion/accordion.js

@@ -189,10 +189,10 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
 
       if (_arrowDisplay !== 'none') {
         iconButton = ___EmotionJSX(EuiButtonIcon, _extends({
-          color: "text"
+          color: "text",
+          css: cssIconButtonStyles
         }, arrowProps, {
           className: iconButtonClasses,
-          css: cssIconButtonStyles,
           iconType: "arrowRight",
           onClick: this.onToggle,
           "aria-controls": id,
@@ -228,10 +228,11 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         childrenContent = children;
       }
 
-      var button = ___EmotionJSX(ButtonElement, _extends({}, buttonProps, {
+      var button = ___EmotionJSX(ButtonElement, _extends({
+        css: cssButtonStyles
+      }, buttonProps, {
         id: buttonId,
         className: buttonClasses,
-        css: cssButtonStyles,
         "aria-controls": id,
         "aria-expanded": isOpen,
         onClick: isDisabled ? undefined : this.onToggle,

package/optimize/es/components/header/header_section/header_section_item.js

@@ -24,8 +24,9 @@ export var EuiHeaderSectionItem = function EuiHeaderSectionItem(_ref) {
       className = _ref.className,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var classes = classNames('euiHeaderSectionItem', borderToClassNameMap[border], className);
-  return ___EmotionJSX("div", _extends({
+  var classes = classNames('euiHeaderSectionItem', borderToClassNameMap[border], className); // we check if there is any children and if not, we don't render anything
+
+  return children ? ___EmotionJSX("div", _extends({
     className: classes
-  }, rest), children);
+  }, rest), children) : null;
 };

package/optimize/es/components/image/image_wrapper.js

@@ -44,10 +44,10 @@ export var EuiImageWrapper = function EuiImageWrapper(_ref) {
       optionalCaptionText = _useInnerText2[1];
 
   return ___EmotionJSX("figure", _extends({
-    "aria-label": optionalCaptionText
-  }, wrapperProps, {
-    className: classes,
+    "aria-label": optionalCaptionText,
     css: cssFigureStyles
+  }, wrapperProps, {
+    className: classes
   }), allowFullScreen ? ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiImageButton, {
     hasAlt: !!alt,
     hasShadow: hasShadow,

package/optimize/es/components/page/page_header/page_header_content.js

@@ -54,7 +54,7 @@ export var EuiPageHeaderContent = function EuiPageHeaderContent(_ref) {
 
   var isResponsiveBreakpoint = useIsWithinBreakpoints(['xs', 's'], !!responsive);
   var useTheme = useEuiTheme();
-  var classes = classNames('euiPageHeaderContent');
+  var classes = classNames('euiPageHeaderContent', className);
   var pageHeaderStyles = euiPageHeaderStyles(useTheme);
   var contentStyles = euiPageHeaderContentStyles(useTheme);
   var styles = setStyleForRestrictedPageWidth(restrictWidth, style);

package/optimize/es/components/page/page_section/page_section.js

@@ -42,12 +42,11 @@ export var EuiPageSection = function EuiPageSection(_ref) {
   var colors = useEuiBackgroundColorCSS();
   var cssStyles = [styles.euiPageSection, grow && styles.grow, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, alignment && styles[alignment], colors[color]];
   var contentStyles = euiPageSectionContentStyles();
-  var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth];
+  var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth, (contentProps === null || contentProps === void 0 ? void 0 : contentProps.css) && contentProps.css];
   return ___EmotionJSX(Component, _extends({
     css: cssStyles
-  }, rest), ___EmotionJSX("div", _extends({
-    css: cssContentStyles
-  }, contentProps, {
+  }, rest), ___EmotionJSX("div", _extends({}, contentProps, {
+    css: cssContentStyles,
     style: widthStyles
   }), children));
 };

package/optimize/es/components/progress/progress.js

@@ -79,9 +79,9 @@ export var EuiProgress = function EuiProgress(_ref) {
     }, label && ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {
       return ___EmotionJSX("span", _extends({
         title: innerText,
-        ref: ref
+        ref: ref,
+        css: labelCssStyles
       }, labelProps, {
-        css: labelCssStyles,
         className: labelClasses
       }), label);
     }), valueRender && ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {