@elastic/eui 114.3.0 → 116.0.0

package/lib/components/datagrid/body/data_grid_body_virtualized.js

@@ -499,22 +499,28 @@ EuiDataGridBodyVirtualized.propTypes = {
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
         /**
-             * Size of the label text
-             */
-        size: _propTypes.default.any,
+           * Controls the disabled behavior via the native `disabled` attribute.
+           */
+        isDisabled: _propTypes.default.bool,
+        /**
+           * NOTE: Beta feature, may be changed or removed in the future
+           *
+           * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+           * This results in a semantically disabled button without the default browser handling of the disabled state.
+           *
+           * Use e.g. when a disabled button should have a tooltip.
+           */
+        hasAriaDisabled: _propTypes.default.bool,
         /**
              * By default the item will get the color `text`.
              * You can customize the color of the item by passing a color name.
+             * @default 'text'
              */
         color: _propTypes.default.any,
         /**
              * Apply styles indicating an item is active
              */
         isActive: _propTypes.default.bool,
-        /**
-             * Apply styles indicating an item is disabled
-             */
-        isDisabled: _propTypes.default.bool,
         /**
              * Make the list item label a link.
              * While permitted, `href` and `onClick` should not be used together in most cases and may create problems.
@@ -635,10 +641,10 @@ EuiDataGridBodyVirtualized.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,
@@ -679,10 +685,10 @@ EuiDataGridBodyVirtualized.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,
@@ -723,10 +729,10 @@ EuiDataGridBodyVirtualized.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,
@@ -767,10 +773,10 @@ EuiDataGridBodyVirtualized.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,
@@ -811,10 +817,10 @@ EuiDataGridBodyVirtualized.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,

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

@@ -144,7 +144,7 @@ var ColumnActions = exports.ColumnActions = /*#__PURE__*/(0, _react.memo)(functi
   var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_header_cell.euiDataGridHeaderCellStyles);
   return (0, _react2.jsx)(_popover.EuiPopover, _extends({
     display: "block",
-    panelPaddingSize: "none",
+    panelPaddingSize: "s",
     offset: 7,
     anchorPosition: "downRight",
     css: styles.euiDataGridHeaderCell__popover,
@@ -163,7 +163,6 @@ var ColumnActions = exports.ColumnActions = /*#__PURE__*/(0, _react.memo)(functi
     closePopover: closePopover
   }, popoverArrowNavigationProps), (0, _react2.jsx)(_list_group.EuiListGroup, {
     listItems: columnActions,
-    gutterSize: "none",
     "data-test-subj": "dataGridHeaderCellActionGroup-".concat(id)
   }));
 });

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

@@ -201,22 +201,28 @@ EuiDataGridHeaderCell.propTypes = {
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
         /**
-             * Size of the label text
-             */
-        size: _propTypes.default.any,
+           * Controls the disabled behavior via the native `disabled` attribute.
+           */
+        isDisabled: _propTypes.default.bool,
+        /**
+           * NOTE: Beta feature, may be changed or removed in the future
+           *
+           * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+           * This results in a semantically disabled button without the default browser handling of the disabled state.
+           *
+           * Use e.g. when a disabled button should have a tooltip.
+           */
+        hasAriaDisabled: _propTypes.default.bool,
         /**
              * By default the item will get the color `text`.
              * You can customize the color of the item by passing a color name.
+             * @default 'text'
              */
         color: _propTypes.default.any,
         /**
              * Apply styles indicating an item is active
              */
         isActive: _propTypes.default.bool,
-        /**
-             * Apply styles indicating an item is disabled
-             */
-        isDisabled: _propTypes.default.bool,
         /**
              * Make the list item label a link.
              * While permitted, `href` and `onClick` should not be used together in most cases and may create problems.
@@ -337,10 +343,10 @@ EuiDataGridHeaderCell.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,
@@ -381,10 +387,10 @@ EuiDataGridHeaderCell.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,
@@ -425,10 +431,10 @@ EuiDataGridHeaderCell.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,
@@ -469,10 +475,10 @@ EuiDataGridHeaderCell.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,
@@ -513,10 +519,10 @@ EuiDataGridHeaderCell.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,

package/lib/components/datagrid/controls/column_sorting.js

@@ -333,22 +333,28 @@ DataGridSortingControl.propTypes = {
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
         /**
-             * Size of the label text
-             */
-        size: _propTypes.default.any,
+           * Controls the disabled behavior via the native `disabled` attribute.
+           */
+        isDisabled: _propTypes.default.bool,
+        /**
+           * NOTE: Beta feature, may be changed or removed in the future
+           *
+           * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+           * This results in a semantically disabled button without the default browser handling of the disabled state.
+           *
+           * Use e.g. when a disabled button should have a tooltip.
+           */
+        hasAriaDisabled: _propTypes.default.bool,
         /**
              * By default the item will get the color `text`.
              * You can customize the color of the item by passing a color name.
+             * @default 'text'
              */
         color: _propTypes.default.any,
         /**
              * Apply styles indicating an item is active
              */
         isActive: _propTypes.default.bool,
-        /**
-             * Apply styles indicating an item is disabled
-             */
-        isDisabled: _propTypes.default.bool,
         /**
              * Make the list item label a link.
              * While permitted, `href` and `onClick` should not be used together in most cases and may create problems.
@@ -469,10 +475,10 @@ DataGridSortingControl.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,
@@ -513,10 +519,10 @@ DataGridSortingControl.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,
@@ -557,10 +563,10 @@ DataGridSortingControl.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,
@@ -601,10 +607,10 @@ DataGridSortingControl.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,
@@ -645,10 +651,10 @@ DataGridSortingControl.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,

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

@@ -368,8 +368,7 @@ var useDataGridDisplaySelector = exports.useDataGridDisplaySelector = function u
       },
       panelClassName: "euiDataGrid__displayPopoverPanel",
       button: (0, _react2.jsx)(_tool_tip.EuiToolTip, {
-        content: buttonLabel,
-        delay: "long"
+        content: buttonLabel
       }, (0, _react2.jsx)(_button.EuiButtonIcon, {
         size: "xs",
         iconType: "controls",

package/lib/components/datagrid/controls/fullscreen_selector.js

@@ -44,8 +44,7 @@ var useDataGridFullScreenSelector = exports.useDataGridFullScreenSelector = func
     fullScreenButtonActive = _useEuiI18n2[1];
   var fullScreenSelector = (0, _react.useMemo)(function () {
     return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
-      content: isFullScreen ? (0, _react2.jsx)(_react.default.Fragment, null, fullScreenButtonActive, " (", (0, _react2.jsx)("kbd", null, "esc"), ")") : fullScreenButton,
-      delay: "long"
+      content: isFullScreen ? (0, _react2.jsx)(_react.default.Fragment, null, fullScreenButtonActive, " (", (0, _react2.jsx)("kbd", null, "esc"), ")") : fullScreenButton
     }, (0, _react2.jsx)(_button.EuiButtonIcon, {
       size: "xs",
       iconType: isFullScreen ? 'fullScreenExit' : 'fullScreen',

package/lib/components/datagrid/controls/keyboard_shortcuts.js

@@ -47,8 +47,7 @@ var useDataGridKeyboardShortcuts = exports.useDataGridKeyboardShortcuts = functi
       anchorPosition: "downRight",
       panelPaddingSize: "none",
       button: (0, _react2.jsx)(_tool_tip.EuiToolTip, {
-        content: title,
-        delay: "long"
+        content: title
       }, (0, _react2.jsx)(_button.EuiButtonIcon, {
         size: "xs",
         iconType: "keyboard",

package/lib/components/datagrid/utils/in_memory.js

@@ -260,22 +260,28 @@ EuiDataGridInMemoryRenderer.propTypes = {
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
         /**
-             * Size of the label text
-             */
-        size: _propTypes.default.any,
+           * Controls the disabled behavior via the native `disabled` attribute.
+           */
+        isDisabled: _propTypes.default.bool,
+        /**
+           * NOTE: Beta feature, may be changed or removed in the future
+           *
+           * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
+           * This results in a semantically disabled button without the default browser handling of the disabled state.
+           *
+           * Use e.g. when a disabled button should have a tooltip.
+           */
+        hasAriaDisabled: _propTypes.default.bool,
         /**
              * By default the item will get the color `text`.
              * You can customize the color of the item by passing a color name.
+             * @default 'text'
              */
         color: _propTypes.default.any,
         /**
              * Apply styles indicating an item is active
              */
         isActive: _propTypes.default.bool,
-        /**
-             * Apply styles indicating an item is disabled
-             */
-        isDisabled: _propTypes.default.bool,
         /**
              * Make the list item label a link.
              * While permitted, `href` and `onClick` should not be used together in most cases and may create problems.
@@ -396,10 +402,10 @@ EuiDataGridInMemoryRenderer.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,
@@ -440,10 +446,10 @@ EuiDataGridInMemoryRenderer.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,
@@ -484,10 +490,10 @@ EuiDataGridInMemoryRenderer.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,
@@ -528,10 +534,10 @@ EuiDataGridInMemoryRenderer.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,
@@ -572,10 +578,10 @@ EuiDataGridInMemoryRenderer.propTypes = {
         "aria-label": _propTypes.default.string,
         "data-test-subj": _propTypes.default.string,
         css: _propTypes.default.any,
-        size: _propTypes.default.any,
+        isDisabled: _propTypes.default.bool,
+        hasAriaDisabled: _propTypes.default.bool,
         color: _propTypes.default.any,
         isActive: _propTypes.default.bool,
-        isDisabled: _propTypes.default.bool,
         href: _propTypes.default.string,
         rel: _propTypes.default.string,
         target: _propTypes.default.string,

package/lib/components/filter_group/filter_group.a11y.js

@@ -239,10 +239,16 @@ describe('EuiFilterGroup multiselect example', function () {
       cy.realPress('Tab');
       cy.repeatRealPress('ArrowDown', 4);
       cy.realPress('Enter');
-      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Dmitri Shostakovich. Checked option. To exclude this option, press Enter.');
+      cy.get('input[role="combobox"]').then(function ($input) {
+        var activeOptionId = $input.attr('aria-activedescendant');
+        cy.get("li[id=\"".concat(activeOptionId, "\"]")).find('span.euiSelectableListItem__text').should('have.text', 'Dmitri Shostakovich. Checked option. To exclude this option, press Enter.');
+      });
       cy.realPress('ArrowDown');
       cy.repeatRealPress('Enter');
-      cy.get('li[aria-selected="true"]').find('span.euiSelectableListItem__text').should('have.text', 'Felix Mendelssohn-Bartholdy. Excluded option. To uncheck this option, press Enter.');
+      cy.get('input[role="combobox"]').then(function ($input) {
+        var activeOptionId = $input.attr('aria-activedescendant');
+        cy.get("li[id=\"".concat(activeOptionId, "\"]")).find('span.euiSelectableListItem__text').should('have.text', 'Felix Mendelssohn-Bartholdy. Excluded option. To uncheck this option, press Enter.');
+      });
       cy.checkAxe();
     });
     it('has zero violations when filtering by searchbox', function () {

package/lib/components/filter_group/filter_select_item.js

@@ -102,6 +102,18 @@ var EuiFilterSelectItemClass = exports.EuiFilterSelectItemClass = /*#__PURE__*/f
   }
   _inherits(EuiFilterSelectItemClass, _Component);
   return _createClass(EuiFilterSelectItemClass, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$props2 = this.props,
+        isFocused = _this$props2.isFocused,
+        toolTipContent = _this$props2.toolTipContent,
+        disabled = _this$props2.disabled,
+        children = _this$props2.children;
+      if ( /*#__PURE__*/(0, _react.isValidElement)(children) && !disabled && toolTipContent) {
+        this.toggleToolTip(isFocused !== null && isFocused !== void 0 ? isFocused : false);
+      }
+    }
+  }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps) {
       if (this.props.isFocused && !prevProps.isFocused) {
@@ -110,31 +122,39 @@ var EuiFilterSelectItemClass = exports.EuiFilterSelectItemClass = /*#__PURE__*/f
           block: 'nearest'
         });
       }
+      var _this$props3 = this.props,
+        isFocused = _this$props3.isFocused,
+        toolTipContent = _this$props3.toolTipContent,
+        disabled = _this$props3.disabled,
+        children = _this$props3.children;
+      if ( /*#__PURE__*/(0, _react.isValidElement)(children) && !disabled && toolTipContent && isFocused !== prevProps.isFocused) {
+        this.toggleToolTip(isFocused !== null && isFocused !== void 0 ? isFocused : false);
+      }
     }
   }, {
     key: "render",
     value: function render() {
-      var _this$props2 = this.props,
-        theme = _this$props2.theme,
-        children = _this$props2.children,
-        className = _this$props2.className,
-        disabled = _this$props2.disabled,
-        checked = _this$props2.checked,
-        isFocused = _this$props2.isFocused,
-        showIcons = _this$props2.showIcons,
-        toolTipContent = _this$props2.toolTipContent,
-        toolTipProps = _this$props2.toolTipProps,
-        style = _this$props2.style,
-        truncateContent = _this$props2.truncateContent,
-        forwardRef = _this$props2.forwardRef,
-        rest = _objectWithoutProperties(_this$props2, _excluded);
+      var _this$props4 = this.props,
+        theme = _this$props4.theme,
+        children = _this$props4.children,
+        className = _this$props4.className,
+        disabled = _this$props4.disabled,
+        checked = _this$props4.checked,
+        isFocused = _this$props4.isFocused,
+        showIcons = _this$props4.showIcons,
+        toolTipContent = _this$props4.toolTipContent,
+        toolTipProps = _this$props4.toolTipProps,
+        style = _this$props4.style,
+        truncateContent = _this$props4.truncateContent,
+        forwardRef = _this$props4.forwardRef,
+        rest = _objectWithoutProperties(_this$props4, _excluded);
       var styles = (0, _filter_select_item.euiFilterSelectItemStyles)(theme);
       var cssStyles = [styles.euiFilterSelectItem, isFocused && styles.isFocused];
       var classes = (0, _classnames.default)('euiFilterSelectItem', className);
       var hasToolTip =
       // we're using isValidElement here as EuiToolTipAnchor uses
       // cloneElement to enhance the element with required attributes
-      /*#__PURE__*/_react.default.isValidElement(children) && !disabled && toolTipContent;
+      /*#__PURE__*/(0, _react.isValidElement)(children) && !disabled && toolTipContent;
       var anchorProps = undefined;
       if (hasToolTip) {
         var _toolTipProps$anchorP, _toolTipProps$anchorP2;
@@ -144,7 +164,6 @@ var EuiFilterSelectItemClass = exports.EuiFilterSelectItemClass = /*#__PURE__*/f
         }) : {
           style: style
         };
-        this.toggleToolTip(isFocused !== null && isFocused !== void 0 ? isFocused : false);
       }
       var iconNode;
       if (showIcons) {

package/lib/components/flyout/flyout_menu.js

@@ -78,14 +78,11 @@ var HistoryPopover = function HistoryPopover(_ref) {
     },
     panelPaddingSize: "xs",
     anchorPosition: "downLeft"
-  }, (0, _react2.jsx)(_list_group.EuiListGroup, {
-    gutterSize: "none"
-  }, items.map(function (item, index) {
+  }, (0, _react2.jsx)(_list_group.EuiListGroup, null, items.map(function (item, index) {
     return (0, _react2.jsx)(_list_group.EuiListGroupItem, {
       key: "history-item-".concat(index),
       label: item.title,
       iconType: item.iconType,
-      size: "s",
       onClick: function onClick() {
         item.onClick();
         setIsPopoverOpen(false);

package/lib/components/form/checkbox/checkbox.js

@@ -9,7 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../services");
-var _icon = require("../../icon");
+var _checkbox_control = require("./checkbox_control");
 var _checkbox = require("./checkbox.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "id", "checked", "label", "onChange", "type", "disabled", "readOnly", "indeterminate", "inputRef", "labelProps"];
@@ -45,10 +45,9 @@ var EuiCheckbox = exports.EuiCheckbox = function EuiCheckbox(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = (0, _classnames.default)('euiCheckbox', className);
   var styles = (0, _services.useEuiMemoizedStyles)(_checkbox.euiCheckboxStyles);
-  var inputStyles = [styles.input.euiCheckbox__square, !!label && styles.input.hasLabel, disabled ? checked || indeterminate ? styles.input.disabled.selected : styles.input.disabled.unselected : checked || indeterminate ? styles.input.enabled.selected : styles.input.enabled.unselected, readOnly && styles.input.readOnly];
+  var inputStyles = [styles.input.euiCheckbox__square, !!label && styles.input.hasLabel, readOnly && styles.input.readOnly];
   var labelClasses = (0, _classnames.default)('euiCheckbox__label', labelProps === null || labelProps === void 0 ? void 0 : labelProps.className);
   var labelStyles = [styles.label.euiCheckbox__label, disabled ? styles.label.disabled : styles.label.enabled, readOnly && styles.label.readOnly, labelProps === null || labelProps === void 0 ? void 0 : labelProps.css];
-  var iconStyles = [styles.input.icon.euiCheckbox__icon, indeterminate ? styles.input.icon.indeterminate : styles.input.icon.check];
 
   // @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox#indeterminate_state_checkboxes
   var setIndeterminateState = (0, _react.useCallback)(function (input) {
@@ -61,9 +60,10 @@ var EuiCheckbox = exports.EuiCheckbox = function EuiCheckbox(_ref) {
   }, (0, _react2.jsx)("div", {
     css: inputStyles,
     className: "euiCheckbox__square"
-  }, (0, _react2.jsx)(_icon.EuiIcon, {
-    css: iconStyles,
-    type: indeterminate ? 'stopFill' : checked ? 'check' : 'empty'
+  }, (0, _react2.jsx)(_checkbox_control.EuiCheckboxControl, {
+    checked: checked,
+    indeterminate: indeterminate,
+    disabled: disabled
   }), (0, _react2.jsx)("input", _extends({
     css: styles.input.euiCheckbox__input,
     className: "euiCheckbox__input",

package/lib/components/form/checkbox/checkbox.styles.js

@@ -21,14 +21,6 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "cursor:default;label:readOnly;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
-var _ref2 = process.env.NODE_ENV === "production" ? {
-  name: "u54glv-indeterminate",
-  styles: "transform:scale(0.5);label:indeterminate;"
-} : {
-  name: "u54glv-indeterminate",
-  styles: "transform:scale(0.5);label:indeterminate;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
 var euiCheckboxStyles = exports.euiCheckboxStyles = function euiCheckboxStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   var controlStyles = (0, _form.euiFormCustomControlStyles)(euiThemeContext);
@@ -37,25 +29,12 @@ var euiCheckboxStyles = exports.euiCheckboxStyles = function euiCheckboxStyles(e
   return {
     euiCheckbox: /*#__PURE__*/(0, _react.css)(controlStyles.wrapper, ";label:euiCheckbox;"),
     input: {
-      euiCheckbox__square: /*#__PURE__*/(0, _react.css)(controlStyles.input.fauxInput, " border-radius:", euiTheme.border.radius.small, ";;label:euiCheckbox__square;"),
+      euiCheckbox__square: /*#__PURE__*/(0, _react.css)("position:relative;", controlStyles.input.focusVisible, " border-radius:", euiTheme.border.radius.small, ";;label:euiCheckbox__square;"),
       hasLabel: controlStyles.input.hasLabel,
       // Skip css`` className generation
-      enabled: {
-        selected: /*#__PURE__*/(0, _react.css)(controlStyles.input.enabled.selected, ";label:selected;"),
-        unselected: /*#__PURE__*/(0, _react.css)(controlStyles.input.enabled.unselected, ";label:unselected;")
-      },
-      disabled: {
-        selected: /*#__PURE__*/(0, _react.css)(controlStyles.input.disabled.selected, ";label:selected;"),
-        unselected: /*#__PURE__*/(0, _react.css)(controlStyles.input.disabled.unselected, ";label:unselected;")
-      },
       // Readonly checkboxes are used by EuiMarkdownEditor
       // Maintain the initial color to enforce that clicks are not doing anything
       readOnly: /*#__PURE__*/(0, _react.css)("&:has(input:focus-visible){outline:", euiTheme.focus.width, " solid ", unselectedBorder, ";}&:has(input:focus){border-color:", unselectedBorder, ";};label:readOnly;"),
-      icon: {
-        euiCheckbox__icon: /*#__PURE__*/(0, _react.css)(";label:euiCheckbox__icon;"),
-        check: /*#__PURE__*/(0, _react.css)(controlStyles.input.icon, " stroke:currentColor;;label:check;"),
-        indeterminate: _ref2
-      },
       euiCheckbox__input: /*#__PURE__*/(0, _react.css)(controlStyles.input.hiddenInput, " &[readonly]{cursor:default;};label:euiCheckbox__input;")
     },
     label: {