@elastic/eui 118.0.0 → 119.0.0

package/optimize/es/components/button/button.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "buttonRef", "size", "color", "fill"];
+var _excluded = ["className", "buttonRef", "size", "color", "fill", "isDisabled", "hasAriaDisabled", "fullWidth"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -12,7 +12,8 @@ var _excluded = ["className", "buttonRef", "size", "color", "fill"];
 import React from 'react';
 import classNames from 'classnames';
 import { BUTTON_COLORS, useEuiButtonColorCSS, useEuiButtonFocusCSS } from '../../global_styling/mixins/_button';
-import { EuiButtonDisplay, isButtonDisabled } from './button_display/_button_display';
+import { EuiButtonDisplay } from './button_display/_button_display';
+import { useEuiButtonCommonProps } from './use_button_common_props';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var COLORS = BUTTON_COLORS;
 export var SIZES = ['s', 'm'];
@@ -22,21 +23,35 @@ export var SIZES = ['s', 'm'];
 /**
  * EuiButton is largely responsible for providing relevant props
  * and the logic for element-specific attributes
+ * @see {@link https://eui.elastic.co/docs/components/navigation/buttons/button/|EuiButton documentation}
  */
 export var EuiButton = function EuiButton(_ref) {
   var className = _ref.className,
     buttonRef = _ref.buttonRef,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'm' : _ref$size,
+    _size = _ref$size === void 0 ? 'm' : _ref$size,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'primary' : _ref$color,
+    _color = _ref$color === void 0 ? 'primary' : _ref$color,
     fill = _ref.fill,
+    _isDisabled = _ref.isDisabled,
+    _hasAriaDisabled = _ref.hasAriaDisabled,
+    _fullWidth = _ref.fullWidth,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var isDisabled = isButtonDisabled({
-    href: rest.href,
-    isDisabled: rest.isDisabled || rest.disabled,
-    isLoading: rest.isLoading
-  });
+  var _useEuiButtonCommonPr = useEuiButtonCommonProps({
+      size: _size,
+      color: _color,
+      isDisabled: _isDisabled,
+      hasAriaDisabled: _hasAriaDisabled,
+      fullWidth: _fullWidth,
+      href: rest.href,
+      disabled: rest.disabled,
+      isLoading: rest.isLoading
+    }),
+    size = _useEuiButtonCommonPr.size,
+    color = _useEuiButtonCommonPr.color,
+    isDisabled = _useEuiButtonCommonPr.isDisabled,
+    hasAriaDisabled = _useEuiButtonCommonPr.hasAriaDisabled,
+    fullWidth = _useEuiButtonCommonPr.fullWidth;
   var buttonColorStyles = useEuiButtonColorCSS({
     display: fill ? 'fill' : 'base'
   })[isDisabled ? 'disabled' : color];
@@ -47,7 +62,10 @@ export var EuiButton = function EuiButton(_ref) {
     className: classes,
     css: cssStyles,
     ref: buttonRef,
-    size: size
+    size: size,
+    isDisabled: isDisabled,
+    hasAriaDisabled: hasAriaDisabled,
+    fullWidth: fullWidth
   }, rest));
 };
 EuiButton.displayName = 'EuiButton';

package/optimize/es/components/button/button_context.js

@@ -0,0 +1,32 @@
+/*
+ * 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, { createContext } from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+/**
+ * Cascades button props from a parent component (e.g. EuiButtonGroup) down
+ * to button children.
+ *
+ * When set, context values take precedence over the same prop passed directly,
+ * except for `isDisabled`/`hasAriaDisabled` which should only ever be populated
+ * with `true` (never `false`). Otherwise the parent would enable manually
+ * disabled children.
+ */
+export var EuiButtonContext = /*#__PURE__*/createContext({});
+
+/**
+ * Resets inherited EuiButtonContext values for descendant buttons.
+ * Used by components like EuiPopover that render buttons in a separate
+ * visual context where group cascading should not apply.
+ */
+export var EuiButtonResetProvider = function EuiButtonResetProvider(_ref) {
+  var children = _ref.children;
+  return ___EmotionJSX(EuiButtonContext.Provider, {
+    value: {}
+  }, children);
+};

package/optimize/es/components/button/button_empty/button_empty.js

@@ -19,7 +19,7 @@ import { useEuiMemoizedStyles, getSecureRelForTarget, useCombinedRefs } from '..
 import { useEuiDisabledElement } from '../../../services/hooks/useEuiDisabledElement';
 import { useEuiButtonColorCSS } from '../../../global_styling/mixins/_button';
 import { EuiButtonDisplayContent } from '../button_display/_button_display_content';
-import { isButtonDisabled } from '../button_display/_button_display';
+import { useEuiButtonCommonProps } from '../use_button_common_props';
 import { euiButtonEmptyStyles } from './button_empty.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var SIZES = ['xs', 's', 'm'];
@@ -39,14 +39,13 @@ export var EuiButtonEmpty = function EuiButtonEmpty(_ref) {
     _ref$iconSize = _ref.iconSize,
     iconSize = _ref$iconSize === void 0 ? 'm' : _ref$iconSize,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'primary' : _ref$color,
+    _color = _ref$color === void 0 ? 'primary' : _ref$color,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'm' : _ref$size,
+    _size = _ref$size === void 0 ? 'm' : _ref$size,
     flush = _ref.flush,
     _isDisabled = _ref.isDisabled,
     disabled = _ref.disabled,
-    _ref$hasAriaDisabled = _ref.hasAriaDisabled,
-    hasAriaDisabled = _ref$hasAriaDisabled === void 0 ? false : _ref$hasAriaDisabled,
+    _hasAriaDisabled = _ref.hasAriaDisabled,
     isLoading = _ref.isLoading,
     href = _ref.href,
     target = _ref.target,
@@ -58,11 +57,19 @@ export var EuiButtonEmpty = function EuiButtonEmpty(_ref) {
     textProps = _ref.textProps,
     isSelected = _ref.isSelected,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var isDisabled = isButtonDisabled({
-    isDisabled: _isDisabled || disabled,
-    href: href,
-    isLoading: isLoading
-  });
+  var _useEuiButtonCommonPr = useEuiButtonCommonProps({
+      size: _size,
+      color: _color,
+      isDisabled: _isDisabled,
+      hasAriaDisabled: _hasAriaDisabled,
+      href: href,
+      disabled: disabled,
+      isLoading: isLoading
+    }),
+    size = _useEuiButtonCommonPr.size,
+    color = _useEuiButtonCommonPr.color,
+    isDisabled = _useEuiButtonCommonPr.isDisabled,
+    hasAriaDisabled = _useEuiButtonCommonPr.hasAriaDisabled;
   var _useEuiDisabledElemen = useEuiDisabledElement({
       isDisabled: isDisabled,
       hasAriaDisabled: hasAriaDisabled,

package/optimize/es/components/button/button_group/button_group.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "buttonSize", "color", "idSelected", "idToSelectedMap", "isDisabled", "hasAriaDisabled", "isFullWidth", "isIconOnly", "legend", "name", "onChange", "options", "type"];
+var _excluded = ["className", "buttonSize", "color", "idSelected", "idToSelectedMap", "isDisabled", "hasAriaDisabled", "isFullWidth", "isIconOnly", "legend", "name", "onChange", "options", "type"],
+  _excluded2 = ["className", "children", "legend", "buttonSize", "variant", "gutterSize", "isDisabled", "hasAriaDisabled", "isFullWidth", "onChange"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -10,13 +11,14 @@ var _excluded = ["className", "buttonSize", "color", "idSelected", "idToSelected
  */
 
 import classNames from 'classnames';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { useEuiMemoizedStyles } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiButtonGroupButton } from './button_group_button';
+import { EuiButtonContext } from '../button_context';
 import { euiButtonGroupStyles, euiButtonGroupButtonsStyles } from './button_group.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiButtonGroup = function EuiButtonGroup(_ref) {
+var EuiButtonGroupOptions = function EuiButtonGroupOptions(_ref) {
   var className = _ref.className,
     _ref$buttonSize = _ref.buttonSize,
     buttonSize = _ref$buttonSize === void 0 ? 's' : _ref$buttonSize,
@@ -44,7 +46,7 @@ export var EuiButtonGroup = function EuiButtonGroup(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var wrapperCssStyles = [euiButtonGroupStyles.euiButtonGroup, isFullWidth && euiButtonGroupStyles.fullWidth];
   var styles = useEuiMemoizedStyles(euiButtonGroupButtonsStyles);
-  var cssStyles = [styles.euiButtonGroup__buttons, isFullWidth && styles.fullWidth, styles[buttonSize]];
+  var cssStyles = [styles.euiButtonGroup__buttons, isFullWidth && styles.fullWidth, styles.size[buttonSize]];
   var classes = classNames('euiButtonGroup', {
     'euiButtonGroup-isDisabled': isDisabled
   }, className);
@@ -76,4 +78,65 @@ export var EuiButtonGroup = function EuiButtonGroup(_ref) {
       isIconOnly: isIconOnly
     }));
   })));
+};
+export var BUTTON_GROUP_GUTTER_SIZES = ['none', 'xs', 's', 'm', 'l', 'xl'];
+var EuiButtonGroupChildren = function EuiButtonGroupChildren(_ref2) {
+  var className = _ref2.className,
+    children = _ref2.children,
+    legend = _ref2.legend,
+    _ref2$buttonSize = _ref2.buttonSize,
+    buttonSize = _ref2$buttonSize === void 0 ? 's' : _ref2$buttonSize,
+    _ref2$variant = _ref2.variant,
+    variant = _ref2$variant === void 0 ? 'default' : _ref2$variant,
+    _ref2$gutterSize = _ref2.gutterSize,
+    gutterSize = _ref2$gutterSize === void 0 ? 's' : _ref2$gutterSize,
+    _ref2$isDisabled = _ref2.isDisabled,
+    isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
+    _ref2$hasAriaDisabled = _ref2.hasAriaDisabled,
+    hasAriaDisabled = _ref2$hasAriaDisabled === void 0 ? false : _ref2$hasAriaDisabled,
+    _ref2$isFullWidth = _ref2.isFullWidth,
+    isFullWidth = _ref2$isFullWidth === void 0 ? false : _ref2$isFullWidth,
+    _onChange = _ref2.onChange,
+    rest = _objectWithoutProperties(_ref2, _excluded2);
+  var wrapperCssStyles = [euiButtonGroupStyles.euiButtonGroup, isFullWidth && euiButtonGroupStyles.fullWidth];
+  var styles = useEuiMemoizedStyles(euiButtonGroupButtonsStyles);
+  var cssStyles = [styles.euiButtonGroup__buttons, isFullWidth && styles.fullWidth, gutterSize && gutterSize !== 'none' && styles.gutterSize[gutterSize]];
+  var classes = classNames('euiButtonGroup', {
+    'euiButtonGroup-isDisabled': isDisabled
+  }, className);
+  var contextValue = useMemo(function () {
+    return {
+      size: buttonSize,
+      isDisabled: isDisabled || undefined,
+      hasAriaDisabled: hasAriaDisabled || undefined,
+      fullWidth: isFullWidth
+    };
+  }, [buttonSize, isDisabled, hasAriaDisabled, isFullWidth]);
+  return ___EmotionJSX("div", _extends({
+    css: wrapperCssStyles,
+    className: classes,
+    role: "group",
+    "data-variant": variant,
+    "data-size": buttonSize,
+    "aria-label": legend,
+    "aria-disabled": isDisabled || undefined
+  }, rest), ___EmotionJSX("div", {
+    css: cssStyles,
+    className: "euiButtonGroup__buttons"
+  }, ___EmotionJSX(EuiButtonContext.Provider, {
+    value: contextValue
+  }, children)));
+};
+
+/* Overloaded call signatures let one `EuiButtonGroup` component support both
+the `options` API and the `children` API, each with its own precise prop
+type, without adding another union layer. */
+
+// Renders either the (legacy) `options` API or the `children` API depending on which props are provided.
+export var EuiButtonGroup = function EuiButtonGroup(props) {
+  var options = props.options;
+  if (options) {
+    return ___EmotionJSX(EuiButtonGroupOptions, props);
+  }
+  return ___EmotionJSX(EuiButtonGroupChildren, props);
 };

package/optimize/es/components/button/button_group/button_group.styles.js

@@ -24,6 +24,10 @@ export var euiButtonGroupStyles = {
 };
 export var euiButtonGroupButtonsStyles = function euiButtonGroupButtonsStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var buttonSizes = {
+    s: "\n      border-radius: ".concat(euiTheme.border.radius.small, ";\n      ").concat(_highContrastStyles(euiThemeContext), "\n    "),
+    m: "\n      border-radius: ".concat(euiTheme.border.radius.medium, ";\n      ").concat(_highContrastStyles(euiThemeContext), "\n    ")
+  };
   var _euiFormVariables = euiFormVariables(euiThemeContext),
     controlCompressedHeight = _euiFormVariables.controlCompressedHeight,
     controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius,
@@ -31,12 +35,21 @@ export var euiButtonGroupButtonsStyles = function euiButtonGroupButtonsStyles(eu
     borderColor = _euiFormVariables.borderColor;
   return {
     // Base
-    euiButtonGroup__buttons: /*#__PURE__*/css(logicalCSS('max-width', '100%'), " display:flex;align-items:center;;label:euiButtonGroup__buttons;"),
-    fullWidth: /*#__PURE__*/css(logicalCSS('width', '100%'), " .euiButtonGroupButton,.euiButtonGroup__tooltipWrapper{flex:1;", logicalCSS('width', '100%'), ";};label:fullWidth;"),
+    euiButtonGroup__buttons: /*#__PURE__*/css(logicalCSS('max-width', '100%'), " display:flex;align-items:center;&:where([data-variant='default'] &){flex-wrap:wrap;}&:where([data-size='s'] &){", buttonSizes.s, ";}&:where([data-size='m'] &){", buttonSizes.m, ";};label:euiButtonGroup__buttons;"),
+    fullWidth: /*#__PURE__*/css(logicalCSS('width', '100%'), " .euiButtonGroupButton,.euiButtonGroup__tooltipWrapper{flex:1;", logicalCSS('width', '100%'), ";}.euiButton{flex-grow:1;inline-size:auto;}.euiButtonEmpty{flex-shrink:0;};label:fullWidth;"),
     // Sizes
-    m: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";", _highContrastStyles(euiThemeContext), ";;label:m;"),
-    s: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.small, ";", _highContrastStyles(euiThemeContext), ";;label:s;"),
-    compressed: /*#__PURE__*/css(logicalCSS('height', controlCompressedHeight), " background-color:", backgroundColor, ";border:", euiTheme.border.width.thin, " solid ", borderColor, ";border-radius:", controlCompressedBorderRadius, ";", _highContrastStyles(euiThemeContext, true), ";;label:compressed;")
+    size: {
+      m: /*#__PURE__*/css(buttonSizes.m, ";;label:m;"),
+      s: /*#__PURE__*/css(buttonSizes.s, ";;label:s;"),
+      compressed: /*#__PURE__*/css(logicalCSS('height', controlCompressedHeight), " background-color:", backgroundColor, ";border:", euiTheme.border.width.thin, " solid ", borderColor, ";border-radius:", controlCompressedBorderRadius, ";", _highContrastStyles(euiThemeContext, true), ";;label:compressed;")
+    },
+    gutterSize: {
+      xs: /*#__PURE__*/css("gap:", euiTheme.size.xs, ";;label:xs;"),
+      s: /*#__PURE__*/css("gap:", euiTheme.size.s, ";;label:s;"),
+      m: /*#__PURE__*/css("gap:", euiTheme.size.base, ";;label:m;"),
+      l: /*#__PURE__*/css("gap:", euiTheme.size.l, ";;label:l;"),
+      xl: /*#__PURE__*/css("gap:", euiTheme.size.xl, ";;label:xl;")
+    }
   };
 };
 var _highContrastStyles = function _highContrastStyles(euiThemeContext, compressed) {

package/optimize/es/components/button/button_group/button_group_button.styles.js

@@ -71,7 +71,7 @@ export var euiButtonGroupButtonStyles = function euiButtonGroupButtonStyles(euiT
 
         // "Borders" between buttons should be present between two of the same colored buttons,
         // and absent between selected vs non-selected buttons (different colors)
-        return "\n          position: relative;\n\n          &:not(:first-child) {\n            margin-inline-start: -".concat(borderWidth, ";\n          }\n\n          &:is(").concat(selectors, ") {\n            &::before {\n              position: absolute;\n              z-index: 1;\n              ").concat(logicalCSS('left', 0), "\n              ").concat(logicalCSS('vertical', "-".concat(euiTheme.border.width.thin)), "\n              ").concat(logicalCSS('border-left-style', 'solid'), "\n              ").concat(logicalCSS('border-left-width', euiTheme.border.width.thin), "\n              pointer-events: none;\n\n              ").concat(preventForcedColors(euiThemeContext), "\n            }\n          }\n\n          &:not(").concat(selectors, ") + *:not(").concat(selectors, ") {\n            &::before {\n              content: '';\n              border-color: ").concat(unselectedColor, ";\n            }\n          }\n\n          &:is(").concat(selectors, ") + *:is(").concat(selectors, ") {\n            &::before {\n              content: '';\n              border-color: ").concat(selectedColor, ";\n            }\n          }\n        ");
+        return "\n          position: relative;\n\n          &:not(:first-child) {\n            margin-inline-start: -".concat(borderWidth, ";\n          }\n\n          &:is(").concat(selectors, ") {\n            &::before {\n              position: absolute;\n              z-index: 1;\n              ").concat(logicalCSS('left', 0), "\n              ").concat(logicalCSS('vertical', "-".concat(euiTheme.border.width.thin)), "\n              ").concat(logicalCSS('border-left-style', 'solid'), "\n              ").concat(logicalCSS('border-left-width', euiTheme.border.width.thin), "\n              pointer-events: none;\n\n              ").concat(preventForcedColors(euiThemeContext), "\n            }\n          }\n\n          &:not(").concat(selectors, ") + *:not(").concat(selectors, ") {\n            &::before {\n              content: '';\n              border-color: ").concat(unselectedColor, ";\n              inset-inline-start: -").concat(borderWidth, ";\n            }\n          }\n\n          &:is(").concat(selectors, ") + *:is(").concat(selectors, ") {\n            &::before {\n              content: '';\n              border-color: ").concat(selectedColor, ";\n              inset-inline-start: -").concat(borderWidth, ";\n            }\n          }\n        ");
       },
       get s() {
         return /*#__PURE__*/css(this.borders, " ", uncompressedBorderRadii(euiTheme.border.radius.small), ";;label:s;");

package/optimize/es/components/button/button_icon/button_icon.js

@@ -14,10 +14,10 @@ import React from 'react';
 import classNames from 'classnames';
 import { getSecureRelForTarget, useCombinedRefs, useEuiMemoizedStyles } from '../../../services';
 import { useEuiDisabledElement } from '../../../services/hooks/useEuiDisabledElement';
+import { useEuiButtonColorCSS, useEuiButtonFocusCSS } from '../../../global_styling/mixins/_button';
 import { EuiIcon } from '../../icon';
 import { EuiLoadingSpinner } from '../../loading';
-import { useEuiButtonColorCSS, useEuiButtonFocusCSS } from '../../../global_styling/mixins/_button';
-import { isButtonDisabled } from '../button_display/_button_display';
+import { useEuiButtonCommonProps } from '../use_button_common_props';
 import { euiButtonIconStyles } from './button_icon.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var SIZES = ['xs', 's', 'm'];
@@ -28,11 +28,10 @@ export var EuiButtonIcon = function EuiButtonIcon(_ref) {
     _ref$iconSize = _ref.iconSize,
     iconSize = _ref$iconSize === void 0 ? 'm' : _ref$iconSize,
     _ref$color = _ref.color,
-    color = _ref$color === void 0 ? 'primary' : _ref$color,
+    _color = _ref$color === void 0 ? 'primary' : _ref$color,
     _isDisabled = _ref.isDisabled,
     disabled = _ref.disabled,
-    _ref$hasAriaDisabled = _ref.hasAriaDisabled,
-    hasAriaDisabled = _ref$hasAriaDisabled === void 0 ? false : _ref$hasAriaDisabled,
+    _hasAriaDisabled = _ref.hasAriaDisabled,
     href = _ref.href,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
@@ -41,16 +40,25 @@ export var EuiButtonIcon = function EuiButtonIcon(_ref) {
     target = _ref.target,
     rel = _ref.rel,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'xs' : _ref$size,
+    _size = _ref$size === void 0 ? 'xs' : _ref$size,
     buttonRef = _ref.buttonRef,
     isSelected = _ref.isSelected,
     isLoading = _ref.isLoading,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var isDisabled = isButtonDisabled({
-    isDisabled: _isDisabled || disabled,
-    href: href,
-    isLoading: isLoading
-  });
+  var _useEuiButtonCommonPr = useEuiButtonCommonProps({
+      size: _size,
+      color: _color,
+      isDisabled: _isDisabled,
+      hasAriaDisabled: _hasAriaDisabled,
+      href: href,
+      disabled: disabled,
+      isLoading: isLoading
+    }),
+    size = _useEuiButtonCommonPr.size,
+    color = _useEuiButtonCommonPr.color,
+    isDisabled = _useEuiButtonCommonPr.isDisabled,
+    _useEuiButtonCommonPr2 = _useEuiButtonCommonPr.hasAriaDisabled,
+    hasAriaDisabled = _useEuiButtonCommonPr2 === void 0 ? false : _useEuiButtonCommonPr2;
   var _useEuiDisabledElemen = useEuiDisabledElement({
       isDisabled: isDisabled,
       hasAriaDisabled: hasAriaDisabled,

package/optimize/es/components/button/use_button_common_props.js

@@ -0,0 +1,40 @@
+/*
+ * 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 { useContext } from 'react';
+import { EuiButtonContext } from './button_context';
+import { isButtonDisabled } from './button_display/_button_display';
+/**
+ * Resolves inherited button props from EuiButtonContext,
+ * popover boundary isolation and isDisabled computation.
+ */
+export function useEuiButtonCommonProps(_ref) {
+  var _groupContext$isDisab, _groupContext$size, _groupContext$color, _groupContext$hasAria, _groupContext$fullWid;
+  var size = _ref.size,
+    color = _ref.color,
+    _isDisabled = _ref.isDisabled,
+    hasAriaDisabled = _ref.hasAriaDisabled,
+    fullWidth = _ref.fullWidth,
+    href = _ref.href,
+    disabled = _ref.disabled,
+    isLoading = _ref.isLoading;
+  var buttonContext = useContext(EuiButtonContext);
+  var groupContext = buttonContext;
+  var isDisabled = isButtonDisabled({
+    href: href,
+    isDisabled: ((_groupContext$isDisab = groupContext.isDisabled) !== null && _groupContext$isDisab !== void 0 ? _groupContext$isDisab : _isDisabled) || disabled,
+    isLoading: isLoading
+  });
+  return {
+    size: (_groupContext$size = groupContext.size) !== null && _groupContext$size !== void 0 ? _groupContext$size : size,
+    color: (_groupContext$color = groupContext.color) !== null && _groupContext$color !== void 0 ? _groupContext$color : color,
+    isDisabled: isDisabled,
+    hasAriaDisabled: (_groupContext$hasAria = groupContext.hasAriaDisabled) !== null && _groupContext$hasAria !== void 0 ? _groupContext$hasAria : hasAriaDisabled,
+    fullWidth: (_groupContext$fullWid = groupContext.fullWidth) !== null && _groupContext$fullWid !== void 0 ? _groupContext$fullWid : fullWidth
+  };
+}

package/optimize/es/components/call_out/call_out.js

@@ -41,6 +41,9 @@ export var COLOR_TO_NOTIFICATION_ICON_MAP = {
 var getCallOutColor = function getCallOutColor(color) {
   return typeof color === 'string' && COLOR_TO_NOTIFICATION_ICON_MAP.hasOwnProperty(color) ? color : 'primary';
 };
+/**
+ * @see {@link https://eui.elastic.co/docs/components/display/callout/|EuiCallOut documentation}
+ */
 export var EuiCallOut = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var title = _ref.title,
     text = _ref.text,

package/optimize/es/components/card/card.js

@@ -32,6 +32,9 @@ export var ALIGNMENTS = ['left', 'center', 'right'];
  * Certain props are only allowed when the layout is vertical
  */
 
+/**
+ * @see {@link https://eui.elastic.co/docs/components/containers/card/|EuiCard documentation}
+ */
 export var EuiCard = function EuiCard(_ref) {
   var className = _ref.className,
     description = _ref.description,

package/optimize/es/components/code/code.js

@@ -16,6 +16,9 @@ import { DEFAULT_LANGUAGE, checkSupportedLanguage, getHtmlContent } from './util
 import { useEuiMemoizedStyles } from '../../services';
 import { euiCodeStyles } from './code.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+/**
+ * @see {@link https://eui.elastic.co/docs/components/display/code/|EuiCode documentation}
+ */
 export var EuiCode = function EuiCode(_ref) {
   var _ref$transparentBackg = _ref.transparentBackground,
     transparentBackground = _ref$transparentBackg === void 0 ? false : _ref$transparentBackg,

package/optimize/es/components/collapsible_nav/collapsible_nav.js

@@ -21,6 +21,9 @@ import { euiCollapsibleNavStyles } from './collapsible_nav.styles';
 
 // Extend all the flyout props except `onClose` because we handle this internally
 import { jsx as ___EmotionJSX } from "@emotion/react";
+/**
+ * @see {@link https://eui.elastic.co/docs/components/navigation/collapsible-nav/|EuiCollapsibleNav documentation}
+ */
 export var EuiCollapsibleNav = function EuiCollapsibleNav(_ref) {
   var id = _ref.id,
     children = _ref.children,

package/optimize/es/components/color_picker/color_palette_picker/color_palette_picker.js

@@ -21,6 +21,9 @@ import { EuiSuperSelect } from '../../form/super_select'; // Note: needs to be p
 import { EuiColorPaletteDisplay } from '../color_palette_display';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+/**
+ * @see {@link https://eui.elastic.co/docs/components/forms/other/palette-picker/|EuiColorPalettePicker documentation}
+ */
 export var EuiColorPalettePicker = function EuiColorPalettePicker(_ref) {
   var className = _ref.className,
     _ref$compressed = _ref.compressed,

package/optimize/es/components/color_picker/color_picker.js

@@ -53,6 +53,10 @@ var getHsv = function getHsv(hsv) {
   var hue = isNaN(hsv[0]) ? fallback : hsv[0];
   return [hue, hsv[1], hsv[2]];
 };
+
+/**
+ * @see {@link https://eui.elastic.co/docs/components/forms/other/color-picker/|EuiColorPicker documentation}
+ */
 export var EuiColorPicker = function EuiColorPicker(_ref) {
   var button = _ref.button,
     className = _ref.className,

package/optimize/es/components/comment_list/comment_list.js

@@ -14,6 +14,9 @@ import classNames from 'classnames';
 import { EuiComment } from './comment';
 import { EuiTimeline } from '../timeline';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+/**
+ * @see {@link https://eui.elastic.co/docs/components/display/comment-list/|EuiCommentList documentation}
+ */
 export var EuiCommentList = function EuiCommentList(_ref) {
   var children = _ref.children,
     className = _ref.className,

package/optimize/es/components/context_menu/context_menu.js

@@ -336,6 +336,10 @@ export var EuiContextMenuClass = /*#__PURE__*/function (_Component) {
     }
   }]);
 }(Component);
+
+/**
+ * @see {@link https://eui.elastic.co/docs/components/navigation/context-menu/|EuiContextMenu documentation}
+ */
 _defineProperty(EuiContextMenuClass, "defaultProps", {
   panels: []
 });

package/optimize/es/components/context_menu/context_menu_item.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "hasPanel", "icon", "buttonRef", "disabled", "layoutAlign", "toolTipContent", "toolTipProps", "href", "target", "rel", "color", "external"];
+var _excluded = ["children", "className", "hasPanel", "icon", "buttonRef", "disabled", "layoutAlign", "toolTipContent", "toolTipProps", "href", "target", "rel", "color", "external", "hasAriaDisabled"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /*
@@ -44,6 +44,7 @@ export var EuiContextMenuItem = function EuiContextMenuItem(_ref) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'text' : _ref$color,
     external = _ref.external,
+    hasAriaDisabled = _ref.hasAriaDisabled,
     rest = _objectWithoutProperties(_ref, _excluded);
   var isHrefValid = !href || validateHref(href);
   var disabled = _disabled || !isHrefValid;
@@ -105,6 +106,7 @@ export var EuiContextMenuItem = function EuiContextMenuItem(_ref) {
     append: arrow,
     textWrap: "wrap",
     isDisabled: disabled,
+    hasAriaDisabled: hasAriaDisabled,
     textProps: {
       className: 'euiContextMenuItem__text',
       css: textStyles