@elastic/eui 118.0.0 → 119.0.0

package/optimize/lib/components/bottom_bar/bottom_bar.js

@@ -131,6 +131,10 @@ var _EuiBottomBar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   }))));
   return usePortal ? (0, _react2.jsx)(_portal.EuiPortal, typeof usePortal !== 'boolean' ? usePortal : undefined, bar) : bar;
 });
+
+/**
+ * @see {@link https://eui.elastic.co/docs/components/containers/bottom-bar/|EuiBottomBar documentation}
+ */
 var EuiBottomBar = exports.EuiBottomBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
   var BottomBar = _EuiBottomBar;
   return (0, _react2.jsx)(_services.EuiThemeProvider, {

package/optimize/lib/components/breadcrumbs/breadcrumbs.js

@@ -32,6 +32,10 @@ var responsiveDefault = {
   s: 2,
   m: 4
 };
+
+/**
+ * @see {@link https://eui.elastic.co/docs/components/navigation/breadcrumbs/|EuiBreadcrumbs documentation}
+ */
 var EuiBreadcrumbs = exports.EuiBreadcrumbs = function EuiBreadcrumbs(_ref) {
   var breadcrumbs = _ref.breadcrumbs,
     className = _ref.className,

package/optimize/lib/components/button/button.js

@@ -11,8 +11,9 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _button = require("../../global_styling/mixins/_button");
 var _button_display = require("./button_display/_button_display");
+var _use_button_common_props = require("./use_button_common_props");
 var _react2 = require("@emotion/react");
-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
@@ -28,21 +29,35 @@ var SIZES = exports.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}
  */
 var EuiButton = exports.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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var isDisabled = (0, _button_display.isButtonDisabled)({
-    href: rest.href,
-    isDisabled: rest.isDisabled || rest.disabled,
-    isLoading: rest.isLoading
-  });
+  var _useEuiButtonCommonPr = (0, _use_button_common_props.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 = (0, _button.useEuiButtonColorCSS)({
     display: fill ? 'fill' : 'base'
   })[isDisabled ? 'disabled' : color];
@@ -53,7 +68,10 @@ var EuiButton = exports.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/lib/components/button/button_context.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiButtonResetProvider = exports.EuiButtonContext = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/*
+ * 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.
+ */
+
+/**
+ * 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.
+ */
+var EuiButtonContext = exports.EuiButtonContext = /*#__PURE__*/(0, _react.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.
+ */
+var EuiButtonResetProvider = exports.EuiButtonResetProvider = function EuiButtonResetProvider(_ref) {
+  var children = _ref.children;
+  return (0, _react2.jsx)(EuiButtonContext.Provider, {
+    value: {}
+  }, children);
+};

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

@@ -14,7 +14,7 @@ var _services = require("../../../services");
 var _useEuiDisabledElement = require("../../../services/hooks/useEuiDisabledElement");
 var _button = require("../../../global_styling/mixins/_button");
 var _button_display_content = require("../button_display/_button_display_content");
-var _button_display = require("../button_display/_button_display");
+var _use_button_common_props = require("../use_button_common_props");
 var _button_empty = require("./button_empty.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "iconType", "iconSide", "iconSize", "color", "size", "flush", "isDisabled", "disabled", "hasAriaDisabled", "isLoading", "href", "target", "rel", "type", "buttonRef", "contentProps", "textProps", "isSelected"],
@@ -45,14 +45,13 @@ var EuiButtonEmpty = exports.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,
@@ -64,11 +63,19 @@ var EuiButtonEmpty = exports.EuiButtonEmpty = function EuiButtonEmpty(_ref) {
     textProps = _ref.textProps,
     isSelected = _ref.isSelected,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var isDisabled = (0, _button_display.isButtonDisabled)({
-    isDisabled: _isDisabled || disabled,
-    href: href,
-    isLoading: isLoading
-  });
+  var _useEuiButtonCommonPr = (0, _use_button_common_props.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 = (0, _useEuiDisabledElement.useEuiDisabledElement)({
       isDisabled: isDisabled,
       hasAriaDisabled: hasAriaDisabled,

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

@@ -1,20 +1,23 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiButtonGroup = void 0;
+exports.EuiButtonGroup = exports.BUTTON_GROUP_GUTTER_SIZES = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _services = require("../../../services");
 var _accessibility = require("../../accessibility");
 var _button_group_button = require("./button_group_button");
+var _button_context = require("../button_context");
 var _button_group = require("./button_group.styles");
 var _react2 = require("@emotion/react");
-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
@@ -22,7 +25,9 @@ var _excluded = ["className", "buttonSize", "color", "idSelected", "idToSelected
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var EuiButtonGroup = exports.EuiButtonGroup = function EuiButtonGroup(_ref) {
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var EuiButtonGroupOptions = function EuiButtonGroupOptions(_ref) {
   var className = _ref.className,
     _ref$buttonSize = _ref.buttonSize,
     buttonSize = _ref$buttonSize === void 0 ? 's' : _ref$buttonSize,
@@ -50,7 +55,7 @@ var EuiButtonGroup = exports.EuiButtonGroup = function EuiButtonGroup(_ref) {
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var wrapperCssStyles = [_button_group.euiButtonGroupStyles.euiButtonGroup, isFullWidth && _button_group.euiButtonGroupStyles.fullWidth];
   var styles = (0, _services.useEuiMemoizedStyles)(_button_group.euiButtonGroupButtonsStyles);
-  var cssStyles = [styles.euiButtonGroup__buttons, isFullWidth && styles.fullWidth, styles[buttonSize]];
+  var cssStyles = [styles.euiButtonGroup__buttons, isFullWidth && styles.fullWidth, styles.size[buttonSize]];
   var classes = (0, _classnames.default)('euiButtonGroup', {
     'euiButtonGroup-isDisabled': isDisabled
   }, className);
@@ -82,4 +87,65 @@ var EuiButtonGroup = exports.EuiButtonGroup = function EuiButtonGroup(_ref) {
       isIconOnly: isIconOnly
     }));
   })));
+};
+var BUTTON_GROUP_GUTTER_SIZES = exports.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 = (0, _objectWithoutProperties2.default)(_ref2, _excluded2);
+  var wrapperCssStyles = [_button_group.euiButtonGroupStyles.euiButtonGroup, isFullWidth && _button_group.euiButtonGroupStyles.fullWidth];
+  var styles = (0, _services.useEuiMemoizedStyles)(_button_group.euiButtonGroupButtonsStyles);
+  var cssStyles = [styles.euiButtonGroup__buttons, isFullWidth && styles.fullWidth, gutterSize && gutterSize !== 'none' && styles.gutterSize[gutterSize]];
+  var classes = (0, _classnames.default)('euiButtonGroup', {
+    'euiButtonGroup-isDisabled': isDisabled
+  }, className);
+  var contextValue = (0, _react.useMemo)(function () {
+    return {
+      size: buttonSize,
+      isDisabled: isDisabled || undefined,
+      hasAriaDisabled: hasAriaDisabled || undefined,
+      fullWidth: isFullWidth
+    };
+  }, [buttonSize, isDisabled, hasAriaDisabled, isFullWidth]);
+  return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: wrapperCssStyles,
+    className: classes,
+    role: "group",
+    "data-variant": variant,
+    "data-size": buttonSize,
+    "aria-label": legend,
+    "aria-disabled": isDisabled || undefined
+  }, rest), (0, _react2.jsx)("div", {
+    css: cssStyles,
+    className: "euiButtonGroup__buttons"
+  }, (0, _react2.jsx)(_button_context.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.
+var EuiButtonGroup = exports.EuiButtonGroup = function EuiButtonGroup(props) {
+  var options = props.options;
+  if (options) {
+    return (0, _react2.jsx)(EuiButtonGroupOptions, props);
+  }
+  return (0, _react2.jsx)(EuiButtonGroupChildren, props);
 };

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

@@ -28,6 +28,10 @@ var euiButtonGroupStyles = exports.euiButtonGroupStyles = {
 };
 var euiButtonGroupButtonsStyles = exports.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 = (0, _form.euiFormVariables)(euiThemeContext),
     controlCompressedHeight = _euiFormVariables.controlCompressedHeight,
     controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius,
@@ -35,12 +39,21 @@ var euiButtonGroupButtonsStyles = exports.euiButtonGroupButtonsStyles = function
     borderColor = _euiFormVariables.borderColor;
   return {
     // Base
-    euiButtonGroup__buttons: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', '100%'), " display:flex;align-items:center;;label:euiButtonGroup__buttons;"),
-    fullWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), " .euiButtonGroupButton,.euiButtonGroup__tooltipWrapper{flex:1;", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:fullWidth;"),
+    euiButtonGroup__buttons: /*#__PURE__*/(0, _react.css)((0, _global_styling.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__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '100%'), " .euiButtonGroupButton,.euiButtonGroup__tooltipWrapper{flex:1;", (0, _global_styling.logicalCSS)('width', '100%'), ";}.euiButton{flex-grow:1;inline-size:auto;}.euiButtonEmpty{flex-shrink:0;};label:fullWidth;"),
     // Sizes
-    m: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";", _highContrastStyles(euiThemeContext), ";;label:m;"),
-    s: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.small, ";", _highContrastStyles(euiThemeContext), ";;label:s;"),
-    compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', controlCompressedHeight), " background-color:", backgroundColor, ";border:", euiTheme.border.width.thin, " solid ", borderColor, ";border-radius:", controlCompressedBorderRadius, ";", _highContrastStyles(euiThemeContext, true), ";;label:compressed;")
+    size: {
+      m: /*#__PURE__*/(0, _react.css)(buttonSizes.m, ";;label:m;"),
+      s: /*#__PURE__*/(0, _react.css)(buttonSizes.s, ";;label:s;"),
+      compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', controlCompressedHeight), " background-color:", backgroundColor, ";border:", euiTheme.border.width.thin, " solid ", borderColor, ";border-radius:", controlCompressedBorderRadius, ";", _highContrastStyles(euiThemeContext, true), ";;label:compressed;")
+    },
+    gutterSize: {
+      xs: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.xs, ";;label:xs;"),
+      s: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.s, ";;label:s;"),
+      m: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.base, ";;label:m;"),
+      l: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.l, ";;label:l;"),
+      xl: /*#__PURE__*/(0, _react.css)("gap:", euiTheme.size.xl, ";;label:xl;")
+    }
   };
 };
 var _highContrastStyles = function _highContrastStyles(euiThemeContext, compressed) {

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

@@ -76,7 +76,7 @@ var euiButtonGroupButtonStyles = exports.euiButtonGroupButtonStyles = function e
 
         // "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((0, _global_styling.logicalCSS)('left', 0), "\n              ").concat((0, _global_styling.logicalCSS)('vertical', "-".concat(euiTheme.border.width.thin)), "\n              ").concat((0, _global_styling.logicalCSS)('border-left-style', 'solid'), "\n              ").concat((0, _global_styling.logicalCSS)('border-left-width', euiTheme.border.width.thin), "\n              pointer-events: none;\n\n              ").concat((0, _global_styling.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((0, _global_styling.logicalCSS)('left', 0), "\n              ").concat((0, _global_styling.logicalCSS)('vertical', "-".concat(euiTheme.border.width.thin)), "\n              ").concat((0, _global_styling.logicalCSS)('border-left-style', 'solid'), "\n              ").concat((0, _global_styling.logicalCSS)('border-left-width', euiTheme.border.width.thin), "\n              pointer-events: none;\n\n              ").concat((0, _global_styling.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__*/(0, _react.css)(this.borders, " ", uncompressedBorderRadii(euiTheme.border.radius.small), ";;label:s;");

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

@@ -11,10 +11,10 @@ var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../../services");
 var _useEuiDisabledElement = require("../../../services/hooks/useEuiDisabledElement");
+var _button = require("../../../global_styling/mixins/_button");
 var _icon = require("../../icon");
 var _loading = require("../../loading");
-var _button = require("../../../global_styling/mixins/_button");
-var _button_display = require("../button_display/_button_display");
+var _use_button_common_props = require("../use_button_common_props");
 var _button_icon = require("./button_icon.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "iconType", "iconSize", "color", "isDisabled", "disabled", "hasAriaDisabled", "href", "type", "display", "target", "rel", "size", "buttonRef", "isSelected", "isLoading"],
@@ -34,11 +34,10 @@ var EuiButtonIcon = exports.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,
@@ -47,16 +46,25 @@ var EuiButtonIcon = exports.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 = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var isDisabled = (0, _button_display.isButtonDisabled)({
-    isDisabled: _isDisabled || disabled,
-    href: href,
-    isLoading: isLoading
-  });
+  var _useEuiButtonCommonPr = (0, _use_button_common_props.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 = (0, _useEuiDisabledElement.useEuiDisabledElement)({
       isDisabled: isDisabled,
       hasAriaDisabled: hasAriaDisabled,

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

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useEuiButtonCommonProps = useEuiButtonCommonProps;
+var _react = require("react");
+var _button_context = require("./button_context");
+var _button_display = require("./button_display/_button_display");
+/*
+ * 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.
+ */
+
+/**
+ * Resolves inherited button props from EuiButtonContext,
+ * popover boundary isolation and isDisabled computation.
+ */
+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 = (0, _react.useContext)(_button_context.EuiButtonContext);
+  var groupContext = buttonContext;
+  var isDisabled = (0, _button_display.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/lib/components/call_out/call_out.js

@@ -50,6 +50,9 @@ var COLOR_TO_NOTIFICATION_ICON_MAP = exports.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}
+ */
 var EuiCallOut = exports.EuiCallOut = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var title = _ref.title,
     text = _ref.text,

package/optimize/lib/components/card/card.js

@@ -41,6 +41,9 @@ var ALIGNMENTS = exports.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}
+ */
 var EuiCard = exports.EuiCard = function EuiCard(_ref) {
   var className = _ref.className,
     description = _ref.description,

package/optimize/lib/components/code/code.js

@@ -25,6 +25,9 @@ var _excluded = ["transparentBackground", "language", "children", "className"];
  */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/**
+ * @see {@link https://eui.elastic.co/docs/components/display/code/|EuiCode documentation}
+ */
 var EuiCode = exports.EuiCode = function EuiCode(_ref) {
   var _ref$transparentBackg = _ref.transparentBackground,
     transparentBackground = _ref$transparentBackg === void 0 ? false : _ref$transparentBackg,

package/optimize/lib/components/collapsible_nav/collapsible_nav.js

@@ -29,6 +29,9 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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) { (0, _defineProperty2.default)(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; }
+/**
+ * @see {@link https://eui.elastic.co/docs/components/navigation/collapsible-nav/|EuiCollapsibleNav documentation}
+ */
 var EuiCollapsibleNav = exports.EuiCollapsibleNav = function EuiCollapsibleNav(_ref) {
   var id = _ref.id,
     children = _ref.children,

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

@@ -30,6 +30,9 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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) { (0, _defineProperty2.default)(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; }
+/**
+ * @see {@link https://eui.elastic.co/docs/components/forms/other/palette-picker/|EuiColorPalettePicker documentation}
+ */
 var EuiColorPalettePicker = exports.EuiColorPalettePicker = function EuiColorPalettePicker(_ref) {
   var className = _ref.className,
     _ref$compressed = _ref.compressed,

package/optimize/lib/components/color_picker/color_picker.js

@@ -63,6 +63,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}
+ */
 var EuiColorPicker = exports.EuiColorPicker = function EuiColorPicker(_ref) {
   var button = _ref.button,
     className = _ref.className,

package/optimize/lib/components/comment_list/comment_list.js

@@ -20,6 +20,9 @@ var _excluded = ["children", "className", "comments", "gutterSize"];
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+/**
+ * @see {@link https://eui.elastic.co/docs/components/display/comment-list/|EuiCommentList documentation}
+ */
 var EuiCommentList = exports.EuiCommentList = function EuiCommentList(_ref) {
   var children = _ref.children,
     className = _ref.className,

package/optimize/lib/components/context_menu/context_menu.js

@@ -344,6 +344,9 @@ var EuiContextMenuClass = exports.EuiContextMenuClass = /*#__PURE__*/function (_
     }
   }]);
 }(_react.Component);
+/**
+ * @see {@link https://eui.elastic.co/docs/components/navigation/context-menu/|EuiContextMenu documentation}
+ */
 (0, _defineProperty2.default)(EuiContextMenuClass, "defaultProps", {
   panels: []
 });

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

@@ -17,7 +17,7 @@ var _icon = require("../icon");
 var _context_menu_item = require("./context_menu_item.styles");
 var _list_item_layout = require("../list_item_layout");
 var _react2 = require("@emotion/react");
-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"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -50,6 +50,7 @@ var EuiContextMenuItem = exports.EuiContextMenuItem = function EuiContextMenuIte
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'text' : _ref$color,
     external = _ref.external,
+    hasAriaDisabled = _ref.hasAriaDisabled,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var isHrefValid = !href || (0, _href_validator.validateHref)(href);
   var disabled = _disabled || !isHrefValid;
@@ -111,6 +112,7 @@ var EuiContextMenuItem = exports.EuiContextMenuItem = function EuiContextMenuIte
     append: arrow,
     textWrap: "wrap",
     isDisabled: disabled,
+    hasAriaDisabled: hasAriaDisabled,
     textProps: {
       className: 'euiContextMenuItem__text',
       css: textStyles