@elastic/eui 102.1.0 → 102.2.0-snapshot.1748601905883

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

@@ -30,11 +30,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 var _ref = process.env.NODE_ENV === "production" ? {
-  name: "nwv4a2-tooltipWrapper",
-  styles: "overflow:hidden;label:tooltipWrapper;"
+  name: "m6ysua-tooltipWrapper",
+  styles: "overflow:hidden;&:has(:focus-visible){z-index:1;};label:tooltipWrapper;"
 } : {
-  name: "nwv4a2-tooltipWrapper",
-  styles: "overflow:hidden;label:tooltipWrapper;",
+  name: "m6ysua-tooltipWrapper",
+  styles: "overflow:hidden;&:has(:focus-visible){z-index:1;};label:tooltipWrapper;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var _ref2 = process.env.NODE_ENV === "production" ? {
@@ -48,48 +48,70 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 var euiButtonGroupButtonStyles = exports.euiButtonGroupButtonStyles = function euiButtonGroupButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     highContrastMode = euiThemeContext.highContrastMode;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'buttonVariant');
   var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
     controlCompressedHeight = _euiFormVariables.controlCompressedHeight,
     controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius;
   var compressedButtonHeight = (0, _global_styling.mathWithUnits)([controlCompressedHeight, euiTheme.border.width.thin], function (x, y) {
-    return x - y * 2;
+    return isRefreshVariant ? x - y * 6 : x - y * 2;
   });
+  var selectedSelectors = '.euiButtonGroupButton-isSelected, .euiButtonGroup__tooltipWrapper-isSelected';
   var uncompressedBorderRadii = function uncompressedBorderRadii(radiusSize) {
-    return "\n    border-radius: 0;\n\n    &:first-child {\n      ".concat((0, _global_styling.logicalShorthandCSS)('border-radius', "".concat(radiusSize, " 0 0 ").concat(radiusSize)), "\n    }\n\n    &:last-child {\n      ").concat((0, _global_styling.logicalShorthandCSS)('border-radius', "0 ".concat(radiusSize, " ").concat(radiusSize, " 0")), "\n    }\n  ");
+    return "\n    border-radius: 0;\n\n    &:first-child {\n      ".concat((0, _global_styling.logicalShorthandCSS)('border-radius', "".concat(radiusSize, " 0 0 ").concat(radiusSize)), "\n    }\n\n    &:last-child {\n      ").concat((0, _global_styling.logicalShorthandCSS)('border-radius', "0 ".concat(radiusSize, " ").concat(radiusSize, " 0")), "\n    }\n\n    &:first-child:last-child {\n      ").concat((0, _global_styling.logicalShorthandCSS)('border-radius', "".concat(radiusSize)), "\n    }\n  ");
   };
+  var refreshVariantStyles = "\n      &:is(".concat(selectedSelectors, ") {\n        ").concat((0, _global_styling.highContrastModeStyles)(euiThemeContext, {
+    forced: "\n            --highContrastHoverIndicatorColor: ".concat(euiTheme.colors.textInverse, ";\n            border: none;\n\n            /* styles the content manually instead of the button itself to preserve the system\n            focus style, as otherwise preventForcedColors() would require manual styling */\n            > [class*=\"euiButtonDisplayContent\"] {\n              ").concat((0, _global_styling.preventForcedColors)(euiThemeContext), "\n              color: ").concat(euiTheme.colors.emptyShade, ";\n              border: none;\n            }\n          ")
+  }), "\n      }\n    ");
+  var uncompressedStyles = isRefreshVariant ? "\n      &:is(".concat(selectedSelectors, "):not(:disabled) {\n        z-index: 1;\n        /* prevent layout jumps due to missing border for selected/filled buttons */\n        border: ").concat(euiTheme.border.width.thin, " solid transparent;\n\n        ").concat((0, _global_styling.highContrastModeStyles)(euiThemeContext, {
+    forced: "\n            /* use inset focus outline to ensure visibility, same as custom hover.\n            NOTE: temp solution - this will be revisited once we handle global focus styles */\n            &:focus-visible {\n              outline-color: ".concat(euiTheme.colors.textInverse, ";\n              /* has to be inset due to overflow: hidden */\n              outline-offset: -").concat((0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
+      return x * 4;
+    }), ";\n            }\n          ")
+  }), "\n      }\n    ") : "\n      &:is(.euiButtonGroupButton-isSelected) {\n        font-weight: ".concat(euiTheme.font.weight.bold, ";\n      }\n    ");
+  var compressedStyles = isRefreshVariant ? "\n      margin: ".concat(euiTheme.size.xxs, ";\n      border-radius: ").concat((0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
+    return x / 2;
+  }), ";\n\n      & + .euiButtonGroupButton {\n        ").concat((0, _global_styling.logicalCSS)('margin-left', '0'), "\n      }\n\n      &:is(").concat(selectedSelectors, "):not(:disabled) {\n        /* prevent layout jumps due to missing border for non-selected buttons */\n        border: none;\n\n        ").concat((0, _global_styling.highContrastModeStyles)(euiThemeContext, {
+    forced: "\n            /* use inset focus outline to ensure visibility, same as custom hover.\n            NOTE: temp solution - this will be revisited once we handle global focus styles */\n            &:focus-visible {\n              outline-color: ".concat(euiTheme.colors.textInverse, ";\n              /* has to be inset due to overflow: hidden */\n              outline-offset: -").concat((0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
+      return x * 3;
+    }), ";\n            }\n          ")
+  }), "\n      }\n    ") : "\n      background-clip: content-box;\n      /* Tweak border radius to account for the padding & background-clip */\n      border-radius: ".concat((0, _global_styling.mathWithUnits)([controlCompressedBorderRadius, euiTheme.border.width.thin], function (x, y) {
+    return x + y;
+  }), ";\n\n      &:is(.euiButtonGroupButton-isSelected) {\n        font-weight: ").concat(euiTheme.font.weight.semiBold, ";\n      }\n    ");
   return {
     // Base
-    euiButtonGroupButton: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', 0), " flex-shrink:1;flex-grow:0;z-index:0;&:focus-visible{z-index:1;}", _global_styling.euiCanAnimate, "{transition:background-color ", euiTheme.animation.normal, " ease-in-out,color ", euiTheme.animation.normal, " ease-in-out;};label:euiButtonGroupButton;"),
+    euiButtonGroupButton: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', 0), " flex-shrink:1;flex-grow:0;z-index:0;&:focus-visible{z-index:2;}", _global_styling.euiCanAnimate, "{transition:background-color ", euiTheme.animation.normal, " ease-in-out,color ", euiTheme.animation.normal, " ease-in-out;}", isRefreshVariant && refreshVariantStyles, ";;label:euiButtonGroupButton;"),
     iconOnly: /*#__PURE__*/(0, _react.css)("padding-inline:", euiTheme.size.s, ";;label:iconOnly;"),
     // Sizes
     uncompressed: {
-      uncompressed: /*#__PURE__*/(0, _react.css)("&:is(.euiButtonGroupButton-isSelected){font-weight:", euiTheme.font.weight.bold, ";}&:focus-visible{", (0, _global_styling.euiOutline)(euiThemeContext, 'inset', euiTheme.components.buttonGroupFocusColor), ";};label:uncompressed;"),
+      uncompressed: /*#__PURE__*/(0, _react.css)("&:focus-visible{", (0, _global_styling.euiOutline)(euiThemeContext, 'inset', euiTheme.components.buttonGroupFocusColor), ";}", uncompressedStyles, ";;label:uncompressed;"),
       get borders() {
         // We use pseudo elements to avoid affecing button width, and to allow
         // inheriting high contrast border colors
-        var selectors = '.euiButtonGroupButton-isSelected, .euiButtonGroup__tooltipWrapper-isSelected';
+        var selectors = selectedSelectors;
         var selectedColor = highContrastMode ? euiTheme.colors.emptyShade : euiTheme.components.buttonGroupBorderColorSelected;
         var unselectedColor = highContrastMode ? 'inherit' : euiTheme.components.buttonGroupBorderColor;
+        var borderWidth = euiTheme.border.width.thin;
+        var borderStyles = isRefreshVariant ? "\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              &::before {\n                position: absolute;\n                ".concat((0, _global_styling.logicalCSS)('left', 0), "\n                ").concat((0, _global_styling.logicalCSS)('vertical', highContrastMode ? "-".concat(euiTheme.border.width.thin) : 0), "\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          ");
 
         // "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          &::before {\n            position: absolute;\n            ".concat((0, _global_styling.logicalCSS)('left', 0), "\n            ").concat((0, _global_styling.logicalCSS)('vertical', highContrastMode ? "-".concat(euiTheme.border.width.thin) : 0), "\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        \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          ".concat(borderStyles, "\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        ");
       },
       get s() {
         return /*#__PURE__*/(0, _react.css)(this.borders, " ", uncompressedBorderRadii(euiTheme.border.radius.small), ";;label:s;");
       },
       get m() {
-        return /*#__PURE__*/(0, _react.css)(this.borders, " ", uncompressedBorderRadii(euiTheme.border.radius.medium), ";;label:m;");
+        var radius = isRefreshVariant ? euiTheme.border.radius.small : euiTheme.border.radius.medium;
+        return /*#__PURE__*/(0, _react.css)(this.borders, " ", uncompressedBorderRadii(radius), ";;label:m;");
       },
       hasToolTip: _ref2
     },
-    compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', compressedButtonHeight), " line-height:", compressedButtonHeight, ";padding:", (0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
+    compressed: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', compressedButtonHeight), " line-height:", compressedButtonHeight, ";font-weight:", euiTheme.font.weight.regular, ";padding:", isRefreshVariant ? '0' : (0, _global_styling.mathWithUnits)(euiTheme.border.width.thin, function (x) {
       return x * 2;
-    }), ";background-clip:content-box;border-radius:", (0, _global_styling.mathWithUnits)([controlCompressedBorderRadius, euiTheme.border.width.thin], function (x, y) {
-      return x + y;
-    }), ";font-weight:", euiTheme.font.weight.regular, ";&:is(.euiButtonGroupButton-isSelected){font-weight:", euiTheme.font.weight.semiBold, ";};label:compressed;"),
+    }), ";", compressedStyles, ";;label:compressed;"),
     // States
-    disabledAndSelected: /*#__PURE__*/(0, _react.css)("color:", (0, _services.makeDisabledContrastColor)(euiTheme.colors.textDisabled)(euiTheme.components.buttonGroupBackgroundDisabledSelected), ";background-color:", euiTheme.components.buttonGroupBackgroundDisabledSelected, ";border:", highContrastMode && "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.components.buttonGroupBackgroundDisabledSelected), ";;label:disabledAndSelected;"),
+    disabledAndSelected: /*#__PURE__*/(0, _react.css)("color:", isRefreshVariant ? euiTheme.colors.textDisabled : (0, _services.makeDisabledContrastColor)(euiTheme.colors.textDisabled)(euiTheme.components.buttonGroupBackgroundDisabledSelected), ";background-color:", euiTheme.components.buttonGroupBackgroundDisabledSelected, ";border:", highContrastMode ? "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.components.buttonGroupBackgroundDisabledSelected) : isRefreshVariant ? "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.borderBasePlain) : '', ";;label:disabledAndSelected;"),
+    // Skip css`` to avoid generating a className
+    hasBorder: "\n      border: ".concat(euiTheme.border.width.thin, " solid\n        ").concat(euiTheme.colors.borderBasePlain, ";\n    "),
     // Tooltip anchor wrapper
     tooltipWrapper: _ref,
     // Content wrapper
@@ -105,10 +127,12 @@ var euiButtonGroupButtonStyles = exports.euiButtonGroupButtonStyles = function e
   };
 };
 var _compressedButtonFocusColors = exports._compressedButtonFocusColors = function _compressedButtonFocusColors(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'buttonVariant');
   var colors = [].concat(_toConsumableArray(_button.BUTTON_COLORS), ['disabled']);
   return colors.reduce(function (acc, color) {
     var _euiButtonFillColor = (0, _button.euiButtonFillColor)(euiThemeContext, color),
       backgroundColor = _euiButtonFillColor.backgroundColor;
-    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, color, /*#__PURE__*/(0, _react.css)("&:focus-visible{", (0, _global_styling.euiOutline)(euiThemeContext, 'center', backgroundColor), " &:is(.euiButtonGroupButton-isSelected){outline-offset:0;}}")));
+    return _objectSpread(_objectSpread({}, acc), {}, _defineProperty({}, color, /*#__PURE__*/(0, _react.css)("&:focus-visible{", (0, _global_styling.euiOutline)(euiThemeContext, isRefreshVariant ? 'outset' : 'center', isRefreshVariant ? euiTheme.focus.color : backgroundColor), " ", !isRefreshVariant && "\n            &:is(.euiButtonGroupButton-isSelected) {\n              outline-offset: 0;\n            }\n          ", ";}")));
   }, {});
 };

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

@@ -50,6 +50,8 @@ var EuiButtonIcon = exports.EuiButtonIcon = function EuiButtonIcon(_ref) {
     isSelected = _ref.isSelected,
     isLoading = _ref.isLoading,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var euiThemeContext = (0, _services.useEuiTheme)();
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'buttonVariant');
   var isDisabled = (0, _button_display.isButtonDisabled)({
     isDisabled: _isDisabled || disabled,
     href: href,
@@ -66,7 +68,7 @@ var EuiButtonIcon = exports.EuiButtonIcon = function EuiButtonIcon(_ref) {
   var buttonFocusStyle = (0, _button.useEuiButtonFocusCSS)();
   var emptyHoverStyles = (0, _services.useEuiMemoizedStyles)(_button_icon._emptyHoverStyles);
   var styles = (0, _services.useEuiMemoizedStyles)(_button_icon.euiButtonIconStyles);
-  var cssStyles = [styles.euiButtonIcon, styles[size], buttonColorStyles[isDisabled ? 'disabled' : color], buttonFocusStyle, display === 'empty' && !isDisabled && emptyHoverStyles[color], isDisabled && styles.isDisabled];
+  var cssStyles = [styles.euiButtonIcon, styles[size], buttonColorStyles[isDisabled ? 'disabled' : color], buttonFocusStyle, !isRefreshVariant && display === 'empty' && !isDisabled && emptyHoverStyles[color], isDisabled && styles.isDisabled];
   var classes = (0, _classnames.default)('euiButtonIcon', className);
 
   // Add an icon to the button if one exists.

package/lib/components/collapsible_nav/collapsible_nav.js

@@ -214,6 +214,7 @@ EuiCollapsibleNav.propTypes = {
      * Object of props passed to EuiFocusTrap.
      * `shards` specifies an array of elements that will be considered part of the flyout, preventing the flyout from being closed when clicked.
      * `closeOnMouseup` will delay the close callback, allowing time for external toggle buttons to handle close behavior.
+     * `returnFocus` defines the return focus behavior and provides the possibility to check the available target element or opt out of the behavior in favor of manually returning focus
      */
   focusTrapProps: _propTypes.default.any,
   /**

package/lib/components/collapsible_nav_beta/_kibana_solution/collapsible_nav_kibana_solution.js

@@ -219,7 +219,7 @@ KibanaCollapsibleNavSolution.propTypes = {
          */
     showToolTip: _propTypes.default.bool,
     /**
-         * An object of #EuiListGroupItemExtraAction props.
+         * An object of {@link EuiListGroupItemExtraAction} props.
          * Adds an `EuiButtonIcon` to the right side of the item; `iconType` is required;
          * pass `alwaysShow` if you don't want the default behavior of only showing on hover
          */

package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_item.js

@@ -88,7 +88,7 @@ EuiCollapsedNavItem.propTypes = {
   /**
          * Will render either an accordion or group of nested child item links.
          *
-         * Accepts any #EuiCollapsibleNavItemProps. Or, to render completely custom
+         * Accepts any {@link EuiCollapsibleNavItemProps}. Or, to render completely custom
          * subitem content, pass an object with a `renderItem` callback.
          */
   items: _propTypes.default.arrayOf(_propTypes.default.shape({
@@ -136,7 +136,7 @@ EuiCollapsedNavItem.propTypes = {
     /**
            * Will render either an accordion or group of nested child item links.
            *
-           * Accepts any #EuiCollapsibleNavItemProps. Or, to render completely custom
+           * Accepts any {@link EuiCollapsibleNavItemProps}. Or, to render completely custom
            * subitem content, pass an object with a `renderItem` callback.
            */
     items: _propTypes.default.arrayOf(_propTypes.default.any.isRequired),

package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.js

@@ -141,7 +141,7 @@ EuiCollapsedNavPopover.propTypes = {
   /**
          * Will render either an accordion or group of nested child item links.
          *
-         * Accepts any #EuiCollapsibleNavItemProps. Or, to render completely custom
+         * Accepts any {@link EuiCollapsibleNavItemProps}. Or, to render completely custom
          * subitem content, pass an object with a `renderItem` callback.
          */
   items: _propTypes.default.arrayOf(_propTypes.default.shape({
@@ -189,7 +189,7 @@ EuiCollapsedNavPopover.propTypes = {
     /**
            * Will render either an accordion or group of nested child item links.
            *
-           * Accepts any #EuiCollapsibleNavItemProps. Or, to render completely custom
+           * Accepts any {@link EuiCollapsibleNavItemProps}. Or, to render completely custom
            * subitem content, pass an object with a `renderItem` callback.
            */
     items: _propTypes.default.arrayOf(_propTypes.default.any.isRequired),

package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.js

@@ -136,7 +136,7 @@ EuiCollapsibleNavItemDisplay.propTypes = {
   /**
          * Will render either an accordion or group of nested child item links.
          *
-         * Accepts any #EuiCollapsibleNavItemProps. Or, to render completely custom
+         * Accepts any {@link EuiCollapsibleNavItemProps}. Or, to render completely custom
          * subitem content, pass an object with a `renderItem` callback.
          */
   items: _propTypes.default.arrayOf(_propTypes.default.shape({
@@ -251,7 +251,7 @@ EuiCollapsibleNavSubItem.propTypes = {
   /**
          * Will render either an accordion or group of nested child item links.
          *
-         * Accepts any #EuiCollapsibleNavItemProps. Or, to render completely custom
+         * Accepts any {@link EuiCollapsibleNavItemProps}. Or, to render completely custom
          * subitem content, pass an object with a `renderItem` callback.
          */
   items: _propTypes.default.arrayOf(_propTypes.default.any.isRequired),
@@ -357,7 +357,7 @@ EuiCollapsibleNavSubItems.propTypes = {
     /**
            * Will render either an accordion or group of nested child item links.
            *
-           * Accepts any #EuiCollapsibleNavItemProps. Or, to render completely custom
+           * Accepts any {@link EuiCollapsibleNavItemProps}. Or, to render completely custom
            * subitem content, pass an object with a `renderItem` callback.
            */
     items: _propTypes.default.arrayOf(_propTypes.default.any.isRequired),
@@ -439,7 +439,7 @@ EuiCollapsibleNavItem.propTypes = {
   /**
          * Will render either an accordion or group of nested child item links.
          *
-         * Accepts any #EuiCollapsibleNavItemProps. Or, to render completely custom
+         * Accepts any {@link EuiCollapsibleNavItemProps}. Or, to render completely custom
          * subitem content, pass an object with a `renderItem` callback.
          */
   items: _propTypes.default.arrayOf(_propTypes.default.shape({

package/lib/components/color_picker/color_palette_display/color_palette_display.js

@@ -64,10 +64,10 @@ EuiColorPaletteDisplay.propTypes = {
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
   /**
-     * Array of color `strings` or an array of #PaletteColorStop. The stops must be numbers in an ordered range.
+     * Array of color `strings` or an array of {@link PaletteColorStop}. The stops must be numbers in an ordered range.
      */
   /**
-     * Array of color `strings` or an array of #PaletteColorStop. The stops must be numbers in an ordered range.
+     * Array of color `strings` or an array of {@link PaletteColorStop}. The stops must be numbers in an ordered range.
      */
   palette: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired).isRequired, _propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired]).isRequired
 };

package/lib/components/color_picker/color_palette_display/color_palette_display_fixed.js

@@ -54,7 +54,7 @@ EuiColorPaletteDisplayFixed.propTypes = {
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
   /**
-     * Array of color `strings` or an array of #PaletteColorStop. The stops must be numbers in an ordered range.
+     * Array of color `strings` or an array of {@link PaletteColorStop}. The stops must be numbers in an ordered range.
      */
   palette: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired).isRequired, _propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired]).isRequired
 };

package/lib/components/color_picker/color_palette_display/color_palette_display_gradient.js

@@ -48,7 +48,7 @@ EuiColorPaletteDisplayGradient.propTypes = {
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
   /**
-     * Array of color `strings` or an array of #PaletteColorStop. The stops must be numbers in an ordered range.
+     * Array of color `strings` or an array of {@link PaletteColorStop}. The stops must be numbers in an ordered range.
      */
   palette: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired).isRequired, _propTypes.default.arrayOf(_propTypes.default.any.isRequired).isRequired]).isRequired
 };

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

@@ -180,7 +180,7 @@ EuiColorPalettePicker.propTypes = {
        */
   selectionDisplay: _propTypes.default.oneOf(["palette", "title"]),
   /**
-       * An array of one of the following objects: #EuiColorPalettePickerPaletteText, #EuiColorPalettePickerPaletteFixed, #EuiColorPalettePickerPaletteGradient
+       * An array of one of the following objects: {@link EuiColorPalettePickerPaletteText}, {@link EuiColorPalettePickerPaletteFixed}, {@link EuiColorPalettePickerPaletteGradient}
        */
   palettes: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.shape({
     /**
@@ -196,7 +196,7 @@ EuiColorPalettePicker.propTypes = {
        */
     type: _propTypes.default.oneOf(["text"]).isRequired,
     /**
-       * Array of color `strings` or an array of #PaletteColorStop. The stops must be numbers in an ordered range.
+       * Array of color `strings` or an array of {@link PaletteColorStop}. The stops must be numbers in an ordered range.
        */
     palette: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired).isRequired, _propTypes.default.arrayOf(_propTypes.default.shape({
       stop: _propTypes.default.number.isRequired,
@@ -224,7 +224,7 @@ EuiColorPalettePicker.propTypes = {
        */
     type: _propTypes.default.oneOf(["fixed"]).isRequired,
     /**
-       * Array of color `strings` or an array of #PaletteColorStop. The stops must be numbers in an ordered range.
+       * Array of color `strings` or an array of {@link PaletteColorStop}. The stops must be numbers in an ordered range.
        */
     palette: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired).isRequired, _propTypes.default.arrayOf(_propTypes.default.shape({
       stop: _propTypes.default.number.isRequired,
@@ -252,7 +252,7 @@ EuiColorPalettePicker.propTypes = {
        */
     type: _propTypes.default.oneOf(["gradient"]).isRequired,
     /**
-       * Array of color `strings` or an array of #PaletteColorStop. The stops must be numbers in an ordered range.
+       * Array of color `strings` or an array of {@link PaletteColorStop}. The stops must be numbers in an ordered range.
        */
     palette: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.string.isRequired).isRequired, _propTypes.default.arrayOf(_propTypes.default.shape({
       stop: _propTypes.default.number.isRequired,

package/lib/components/combo_box/combo_box_options_list/combo_box_options_list.js

@@ -424,7 +424,7 @@ EuiComboBoxOptionsList.propTypes = {
   onOptionEnterKey: _propTypes.default.func,
   onScroll: _propTypes.default.any,
   /**
-     * Array of EuiComboBoxOptionOption objects. See #EuiComboBoxOptionOption
+     * Array of EuiComboBoxOptionOption objects. See {@link EuiComboBoxOptionOption}
      */
   options: _propTypes.default.arrayOf(_propTypes.default.shape({
     isGroupLabelOption: _propTypes.default.bool,

package/lib/components/comment_list/comment_list.js

@@ -49,7 +49,7 @@ EuiCommentList.propTypes = {
   "data-test-subj": _propTypes.default.string,
   css: _propTypes.default.any,
   /**
-     * List of comments to render. See #EuiComment
+     * List of comments to render. See {@link EuiComment}
      */
   comments: _propTypes.default.arrayOf(_propTypes.default.shape({
     /**

package/lib/components/datagrid/body/cell/data_grid_cell.js

@@ -154,12 +154,12 @@ EuiDataGridCellContent.propTypes = {
     defaultSortDirection: _propTypes.default.oneOf(["asc", "desc"]),
     /**
        * A Schema to use for the column.
-       * Built-in values are [`boolean`, `currency`, `datetime`, `numeric`, `json`] but can be expanded by defining your own #EuiDataGrid `schemaDetectors` (for in-memory detection).
+       * Built-in values are [`boolean`, `currency`, `datetime`, `numeric`, `json`] but can be expanded by defining your own {@link EuiDataGrid} `schemaDetectors` (for in-memory detection).
        * In general, it is advised to pass in a value here when you are sure of the schema ahead of time, so that you don't need to rely on the automatic detection.
        */
     schema: _propTypes.default.string,
     /**
-       * Configuration of column actions. Set to false to disable or use #EuiDataGridColumnActions to configure the actions displayed in the header cell of the column.
+       * Configuration of column actions. Set to false to disable or use {@link EuiDataGridColumnActions} to configure the actions displayed in the header cell of the column.
        */
     actions: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.shape({
       /**
@@ -208,7 +208,7 @@ EuiDataGridCellContent.propTypes = {
              */
         showToolTip: _propTypes.default.bool,
         /**
-             * An object of #EuiListGroupItemExtraAction props.
+             * An object of {@link EuiListGroupItemExtraAction} props.
              * Adds an `EuiButtonIcon` to the right side of the item; `iconType` is required;
              * pass `alwaysShow` if you don't want the default behavior of only showing on hover
              */
@@ -544,7 +544,7 @@ EuiDataGridCellContent.propTypes = {
        * Defines the height for a specific row. It can be line count or just height.
        *
        * When using row height overrides, we strongly setting the `showDisplaySelector: allowRowHeight`
-       * toolbar control to `false` in #EuiDataGridToolBarVisibilityOptions
+       * toolbar control to `false` in {@link EuiDataGridToolBarVisibilityOptions}
        */
     rowHeights: _propTypes.default.any,
     /**
@@ -588,7 +588,7 @@ EuiDataGridCellContent.propTypes = {
        */
     stripes: _propTypes.default.bool,
     /**
-       * Visual style for the column headers. Recommendation is to use the `underline` style in times when #EuiDataGrid `toolbarVisibility` is set to `false`.
+       * Visual style for the column headers. Recommendation is to use the `underline` style in times when {@link EuiDataGrid} `toolbarVisibility` is set to `false`.
        * @default shade
        */
     header: _propTypes.default.oneOf(["shade", "underline"]),
@@ -1090,12 +1090,12 @@ EuiDataGridCell.propTypes = {
     defaultSortDirection: _propTypes.default.oneOf(["asc", "desc"]),
     /**
        * A Schema to use for the column.
-       * Built-in values are [`boolean`, `currency`, `datetime`, `numeric`, `json`] but can be expanded by defining your own #EuiDataGrid `schemaDetectors` (for in-memory detection).
+       * Built-in values are [`boolean`, `currency`, `datetime`, `numeric`, `json`] but can be expanded by defining your own {@link EuiDataGrid} `schemaDetectors` (for in-memory detection).
        * In general, it is advised to pass in a value here when you are sure of the schema ahead of time, so that you don't need to rely on the automatic detection.
        */
     schema: _propTypes.default.string,
     /**
-       * Configuration of column actions. Set to false to disable or use #EuiDataGridColumnActions to configure the actions displayed in the header cell of the column.
+       * Configuration of column actions. Set to false to disable or use {@link EuiDataGridColumnActions} to configure the actions displayed in the header cell of the column.
        */
     actions: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.shape({
       /**
@@ -1414,7 +1414,7 @@ EuiDataGridCell.propTypes = {
        * Defines the height for a specific row. It can be line count or just height.
        *
        * When using row height overrides, we strongly setting the `showDisplaySelector: allowRowHeight`
-       * toolbar control to `false` in #EuiDataGridToolBarVisibilityOptions
+       * toolbar control to `false` in {@link EuiDataGridToolBarVisibilityOptions}
        */
     rowHeights: _propTypes.default.any,
     /**
@@ -1461,7 +1461,7 @@ EuiDataGridCell.propTypes = {
        */
     stripes: _propTypes.default.bool,
     /**
-       * Visual style for the column headers. Recommendation is to use the `underline` style in times when #EuiDataGrid `toolbarVisibility` is set to `false`.
+       * Visual style for the column headers. Recommendation is to use the `underline` style in times when {@link EuiDataGrid} `toolbarVisibility` is set to `false`.
        * @default shade
        */
     header: _propTypes.default.oneOf(["shade", "underline"]),

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

@@ -144,12 +144,12 @@ EuiDataGridBody.propTypes = {
     defaultSortDirection: _propTypes.default.oneOf(["asc", "desc"]),
     /**
        * A Schema to use for the column.
-       * Built-in values are [`boolean`, `currency`, `datetime`, `numeric`, `json`] but can be expanded by defining your own #EuiDataGrid `schemaDetectors` (for in-memory detection).
+       * Built-in values are [`boolean`, `currency`, `datetime`, `numeric`, `json`] but can be expanded by defining your own {@link EuiDataGrid} `schemaDetectors` (for in-memory detection).
        * In general, it is advised to pass in a value here when you are sure of the schema ahead of time, so that you don't need to rely on the automatic detection.
        */
     schema: _propTypes.default.string,
     /**
-       * Configuration of column actions. Set to false to disable or use #EuiDataGridColumnActions to configure the actions displayed in the header cell of the column.
+       * Configuration of column actions. Set to false to disable or use {@link EuiDataGridColumnActions} to configure the actions displayed in the header cell of the column.
        */
     actions: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.shape({
       /**
@@ -198,7 +198,7 @@ EuiDataGridBody.propTypes = {
              */
         showToolTip: _propTypes.default.bool,
         /**
-             * An object of #EuiListGroupItemExtraAction props.
+             * An object of {@link EuiListGroupItemExtraAction} props.
              * Adds an `EuiButtonIcon` to the right side of the item; `iconType` is required;
              * pass `alwaysShow` if you don't want the default behavior of only showing on hover
              */
@@ -508,7 +508,7 @@ EuiDataGridBody.propTypes = {
   schema: _propTypes.default.shape({}).isRequired,
   schemaDetectors: _propTypes.default.arrayOf(_propTypes.default.shape({
     /**
-       * The name of this data type, matches #EuiDataGridColumn / `schema`
+       * The name of this data type, matches {@link EuiDataGridColumn} / `schema`
        */
     type: _propTypes.default.string.isRequired,
     /**
@@ -536,7 +536,7 @@ EuiDataGridBody.propTypes = {
        */
     sortTextDesc: _propTypes.default.node.isRequired,
     /**
-       * Whether columns with this schema are sortable (defaults to true). Can be overridden at the individual #EuiDataGridColumn level
+       * Whether columns with this schema are sortable (defaults to true). Can be overridden at the individual {@link EuiDataGridColumn} level
        */
     isSortable: _propTypes.default.bool,
     /**
@@ -544,7 +544,7 @@ EuiDataGridBody.propTypes = {
        */
     textTransform: _propTypes.default.oneOf(["uppercase", "lowercase", "capitalize"]),
     /**
-       * Default sort direction of columns with this schema. Can be overridden at the individual #EuiDataGridColumn level
+       * Default sort direction of columns with this schema. Can be overridden at the individual {@link EuiDataGridColumn} level
        */
     defaultSortDirection: _propTypes.default.oneOf(["asc", "desc"])
   }).isRequired).isRequired,
@@ -577,7 +577,12 @@ EuiDataGridBody.propTypes = {
   setVisibleColumns: _propTypes.default.func.isRequired,
   switchColumnPos: _propTypes.default.func.isRequired,
   onColumnResize: _propTypes.default.func,
-  virtualizationOptions: _propTypes.default.any,
+  virtualizationOptions: _propTypes.default.shape({
+    /**
+           * Called when the grid scroll positions changes, as a result of user scrolling or scroll-to method calls.
+           */
+    onScroll: _propTypes.default.func
+  }),
   rowHeightsOptions: _propTypes.default.shape({
     /**
        * Defines the default size for all rows. It can be line count or just height.
@@ -598,7 +603,7 @@ EuiDataGridBody.propTypes = {
        * Defines the height for a specific row. It can be line count or just height.
        *
        * When using row height overrides, we strongly setting the `showDisplaySelector: allowRowHeight`
-       * toolbar control to `false` in #EuiDataGridToolBarVisibilityOptions
+       * toolbar control to `false` in {@link EuiDataGridToolBarVisibilityOptions}
        */
     rowHeights: _propTypes.default.any,
     /**
@@ -641,7 +646,7 @@ EuiDataGridBody.propTypes = {
        */
     stripes: _propTypes.default.bool,
     /**
-       * Visual style for the column headers. Recommendation is to use the `underline` style in times when #EuiDataGrid `toolbarVisibility` is set to `false`.
+       * Visual style for the column headers. Recommendation is to use the `underline` style in times when {@link EuiDataGrid} `toolbarVisibility` is set to `false`.
        * @default shade
        */
     header: _propTypes.default.oneOf(["shade", "underline"]),

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

@@ -309,12 +309,12 @@ EuiDataGridBodyCustomRender.propTypes = {
     defaultSortDirection: _propTypes.default.oneOf(["asc", "desc"]),
     /**
        * A Schema to use for the column.
-       * Built-in values are [`boolean`, `currency`, `datetime`, `numeric`, `json`] but can be expanded by defining your own #EuiDataGrid `schemaDetectors` (for in-memory detection).
+       * Built-in values are [`boolean`, `currency`, `datetime`, `numeric`, `json`] but can be expanded by defining your own {@link EuiDataGrid} `schemaDetectors` (for in-memory detection).
        * In general, it is advised to pass in a value here when you are sure of the schema ahead of time, so that you don't need to rely on the automatic detection.
        */
     schema: _propTypes.default.string,
     /**
-       * Configuration of column actions. Set to false to disable or use #EuiDataGridColumnActions to configure the actions displayed in the header cell of the column.
+       * Configuration of column actions. Set to false to disable or use {@link EuiDataGridColumnActions} to configure the actions displayed in the header cell of the column.
        */
     actions: _propTypes.default.oneOfType([_propTypes.default.oneOf([false]), _propTypes.default.shape({
       /**
@@ -363,7 +363,7 @@ EuiDataGridBodyCustomRender.propTypes = {
              */
         showToolTip: _propTypes.default.bool,
         /**
-             * An object of #EuiListGroupItemExtraAction props.
+             * An object of {@link EuiListGroupItemExtraAction} props.
              * Adds an `EuiButtonIcon` to the right side of the item; `iconType` is required;
              * pass `alwaysShow` if you don't want the default behavior of only showing on hover
              */
@@ -673,7 +673,7 @@ EuiDataGridBodyCustomRender.propTypes = {
   schema: _propTypes.default.shape({}).isRequired,
   schemaDetectors: _propTypes.default.arrayOf(_propTypes.default.shape({
     /**
-       * The name of this data type, matches #EuiDataGridColumn / `schema`
+       * The name of this data type, matches {@link EuiDataGridColumn} / `schema`
        */
     type: _propTypes.default.string.isRequired,
     /**
@@ -701,7 +701,7 @@ EuiDataGridBodyCustomRender.propTypes = {
        */
     sortTextDesc: _propTypes.default.node.isRequired,
     /**
-       * Whether columns with this schema are sortable (defaults to true). Can be overridden at the individual #EuiDataGridColumn level
+       * Whether columns with this schema are sortable (defaults to true). Can be overridden at the individual {@link EuiDataGridColumn} level
        */
     isSortable: _propTypes.default.bool,
     /**
@@ -709,7 +709,7 @@ EuiDataGridBodyCustomRender.propTypes = {
        */
     textTransform: _propTypes.default.oneOf(["uppercase", "lowercase", "capitalize"]),
     /**
-       * Default sort direction of columns with this schema. Can be overridden at the individual #EuiDataGridColumn level
+       * Default sort direction of columns with this schema. Can be overridden at the individual {@link EuiDataGridColumn} level
        */
     defaultSortDirection: _propTypes.default.oneOf(["asc", "desc"])
   }).isRequired).isRequired,
@@ -742,7 +742,12 @@ EuiDataGridBodyCustomRender.propTypes = {
   setVisibleColumns: _propTypes.default.func.isRequired,
   switchColumnPos: _propTypes.default.func.isRequired,
   onColumnResize: _propTypes.default.func,
-  virtualizationOptions: _propTypes.default.any,
+  virtualizationOptions: _propTypes.default.shape({
+    /**
+           * Called when the grid scroll positions changes, as a result of user scrolling or scroll-to method calls.
+           */
+    onScroll: _propTypes.default.func
+  }),
   rowHeightsOptions: _propTypes.default.shape({
     /**
        * Defines the default size for all rows. It can be line count or just height.
@@ -763,7 +768,7 @@ EuiDataGridBodyCustomRender.propTypes = {
        * Defines the height for a specific row. It can be line count or just height.
        *
        * When using row height overrides, we strongly setting the `showDisplaySelector: allowRowHeight`
-       * toolbar control to `false` in #EuiDataGridToolBarVisibilityOptions
+       * toolbar control to `false` in {@link EuiDataGridToolBarVisibilityOptions}
        */
     rowHeights: _propTypes.default.any,
     /**
@@ -806,7 +811,7 @@ EuiDataGridBodyCustomRender.propTypes = {
        */
     stripes: _propTypes.default.bool,
     /**
-       * Visual style for the column headers. Recommendation is to use the `underline` style in times when #EuiDataGrid `toolbarVisibility` is set to `false`.
+       * Visual style for the column headers. Recommendation is to use the `underline` style in times when {@link EuiDataGrid} `toolbarVisibility` is set to `false`.
        * @default shade
        */
     header: _propTypes.default.oneOf(["shade", "underline"]),