@elastic/eui 106.7.0 → 107.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "106.7.0",
+  "version": "107.0.1",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
@@ -53,8 +53,8 @@
     "directory": "packages/eui"
   },
   "dependencies": {
-    "@elastic/eui-theme-common": "4.0.0",
-    "@elastic/prismjs-esql": "^1.1.0",
+    "@elastic/eui-theme-common": "5.0.0",
+    "@elastic/prismjs-esql": "^1.1.2",
     "@hello-pangea/dnd": "^16.6.0",
     "@types/lodash": "^4.14.202",
     "@types/numeral": "^2.0.5",
@@ -107,7 +107,7 @@
     "@cypress/webpack-dev-server": "^1.7.0",
     "@elastic/charts": "^64.1.0",
     "@elastic/datemath": "^5.0.3",
-    "@elastic/eui-theme-borealis": "3.5.0",
+    "@elastic/eui-theme-borealis": "3.6.0",
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/cache": "^11.11.0",
     "@emotion/css": "^11.11.0",
@@ -257,7 +257,7 @@
   },
   "peerDependencies": {
     "@elastic/datemath": "^5.0.2",
-    "@elastic/eui-theme-borealis": "3.5.0",
+    "@elastic/eui-theme-borealis": "3.6.0",
     "@emotion/css": "11.x",
     "@emotion/react": "11.x",
     "@types/react": "^17.0 || ^18.0",

package/src/themes/amsterdam/global_styling/mixins/_index.scss

@@ -1,9 +1,9 @@
 // Import base theme first, then override
 @import '../../../../global_styling/mixins/responsive';
-@import '../../../../global_styling/mixins/shadow';
 @import '../../../../global_styling/mixins/size';
 @import '../../../../global_styling/mixins/typography';
 @import 'typography';
+@import 'shadow';
 @import '../../../../global_styling/mixins/helpers';
 @import 'states';
 

package/src/themes/amsterdam/global_styling/mixins/_shadow.scss

@@ -0,0 +1,100 @@
+@function shadowOpacity($opacity) {
+  @if (lightness($euiColorTextParagraph) < 50) {
+    @return $opacity * 1;
+  } @else {
+    @return $opacity * 2.5;
+  }
+}
+
+@mixin euiSlightShadow($color: $euiShadowColor) {
+  box-shadow:
+    0 .8px .8px rgba($color, shadowOpacity(.04)),
+    0 2.3px 2px rgba($color, shadowOpacity(.03));
+}
+
+@mixin euiBottomShadowSmall($color: $euiShadowColor) {
+  box-shadow:
+    0 .7px 1.4px rgba($color, shadowOpacity(.07)),
+    0 1.9px 4px rgba($color, shadowOpacity(.05)),
+    0 4.5px 10px rgba($color, shadowOpacity(.05));
+}
+
+@mixin euiBottomShadowMedium($color: $euiShadowColor) {
+  box-shadow:
+    0 .9px 4px -1px rgba($color, shadowOpacity(.08)),
+    0 2.6px 8px -1px rgba($color, shadowOpacity(.06)),
+    0 5.7px 12px -1px rgba($color, shadowOpacity(.05)),
+    0 15px 15px -1px rgba($color, shadowOpacity(.04));
+}
+
+// Similar to shadow medium but without the bottom depth. Useful for popovers
+// that drop UP rather than DOWN.
+@mixin euiBottomShadowFlat($color: $euiShadowColor) {
+  box-shadow:
+    0 0 .8px rgba($color, shadowOpacity(.06)),
+    0 0 2px rgba($color, shadowOpacity(.04)),
+    0 0 5px rgba($color, shadowOpacity(.04)),
+    0 0 17px rgba($color, shadowOpacity(.03));
+}
+
+@mixin euiBottomShadow($color: $euiShadowColor) {
+  box-shadow:
+    0 1px 5px rgba($color, shadowOpacity(.1)),
+    0 3.6px 13px rgba($color, shadowOpacity(.07)),
+    0 8.4px 23px rgba($color, shadowOpacity(.06)),
+    0 23px 35px rgba($color, shadowOpacity(.05));
+}
+
+@mixin euiBottomShadowLarge(
+  $color: $euiShadowColor,
+  $opacity: 0,
+  $reverse: false
+) {
+  @if ($reverse) {
+    box-shadow:
+      0 -2.7px 9px rgba($color, shadowOpacity(.13)),
+      0 -9.4px 24px rgba($color, shadowOpacity(.09)),
+      0 -21.8px 43px rgba($color, shadowOpacity(.08));
+  } @else {
+    box-shadow:
+      0 2.7px 9px rgba($color, shadowOpacity(.13)),
+      0 9.4px 24px rgba($color, shadowOpacity(.09)),
+      0 21.8px 43px rgba($color, shadowOpacity(.08));
+  }
+}
+
+// stylelint-disable color-named
+@mixin euiOverflowShadow($direction: 'y', $side: 'both') {
+  $hideHeight: $euiScrollBarCornerThin * 1.25;
+  $gradient: null;
+  $gradientStart:
+    transparentize(red, .9) 0%,
+    transparentize(red, 0) $hideHeight;
+  $gradientEnd:
+    transparentize(red, 0) calc(100% - #{$hideHeight}),
+    transparentize(red, .9) 100%;
+  @if ($side == 'both' or $side == 'start' or $side == 'end') {
+    @if ($side == 'both') {
+      $gradient: $gradientStart, $gradientEnd;
+    } @else if ($side == 'start') {
+      $gradient: $gradientStart;
+    } @else {
+      $gradient: $gradientEnd;
+    }
+  } @else {
+    @warn "euiOverflowShadow() expects side to be 'both', 'start' or 'end' but got '#{$side}'";
+  }
+
+  @if ($direction == 'y') {
+    mask-image: linear-gradient(to bottom, #{$gradient});
+  } @else if ($direction == 'x') {
+    mask-image: linear-gradient(to right, #{$gradient});
+  } @else {
+    @warn "euiOverflowShadow() expects direction to be 'y' or 'x' but got '#{$direction}'";
+  }
+
+  // Chrome+Edge has a very bizarre edge case bug where `mask-image` stops working
+  // This workaround forces a stacking context on the scrolling container, which
+  // hopefully addresses the bug. @see https://github.com/elastic/eui/pull/7855
+  transform: translateZ(0);
+}

package/src/themes/amsterdam/global_styling/variables/_index.scss

@@ -4,4 +4,5 @@
 
 @import 'colors_vis';
 @import 'typography';
+@import 'shadows';
 @import 'forms';

package/src/themes/amsterdam/global_styling/variables/_shadows.scss

@@ -0,0 +1,20 @@
+// Shadows
+$euiShadowColor: $euiColorInk !default;
+
+$euiShadowDownXS: 0 0.8px 0.8px 0 hsla(from $euiShadowColor h s l / 0.04), 0 2.3px 2px 0 hsla(from $euiShadowColor h s l / 0.03);
+$euiShadowDownS: 0 0.7px 1.4px 0 hsla(from $euiShadowColor h s l / 0.07), 0 1.9px 4px 0 hsla(from $euiShadowColor h s l / 0.05), 0 4.5px 10 0 hsla(from $euiShadowColor h s l / 0.05);
+$euiShadowDownM: 0 0.9px 4px 0 hsla(from $euiShadowColor h s l / 0.08), 0 2.6px 8px 0 hsla(from $euiShadowColor h s l / 0.06), 0 5.7px 12px 0 hsla(from $euiShadowColor h s l / 0.05), 0 15px 15px 0 hsla(from $euiShadowColor h s l / 0.04);
+$euiShadowDownL: 0 1px 5px 0 hsla(from $euiShadowColor h s l / 0.1), 0 3.6px 13px 0 hsla(from $euiShadowColor h s l / 0.07), 0 8.4px 23px 0 hsla(from $euiShadowColor h s l / 0.06), 0 23px 35px 0 hsla(from $euiShadowColor h s l / 0.05);
+$euiShadowDownXL: 0 2.7px 9px 0 hsla(from $euiShadowColor h s l / 0.13), 0 9.4px 24px 0 hsla(from $euiShadowColor h s l / 0.09), 0 21.8px 43px 0 hsla(from $euiShadowColor h s l / 0.08);
+
+$euiShadowUpXS: 0 0.8px 0.8px 0 hsla(from $euiShadowColor h s l / 0.04), 0 -2.3px 2px 0 hsla(from $euiShadowColor h s l / 0.03);
+$euiShadowUpS: 0 0.7px 1.4px 0 hsla(from $euiShadowColor h s l / 0.07), 0 -1.9px 4px 0 hsla(from $euiShadowColor h s l / 0.05), 0 -4.5px 10 0 hsla(from $euiShadowColor h s l / 0.05);
+$euiShadowUpM: 0 0.9px 4px 0 hsla(from $euiShadowColor h s l / 0.08), 0 -2.6px 8px 0 hsla(from $euiShadowColor h s l / 0.06), 0 -5.7px 12px 0 hsla(from $euiShadowColor h s l / 0.05), 0 -15px 15px 0 hsla(from $euiShadowColor h s l / 0.04);
+$euiShadowUpL: 0 1px 5px 0 hsla(from $euiShadowColor h s l / 0.1), 0 -3.6px 13px 0 hsla(from $euiShadowColor h s l / 0.07), 0 -8.4px 23px 0 hsla(from $euiShadowColor h s l / 0.06), 0 -23px 35px 0 hsla(from $euiShadowColor h s l / 0.05);
+$euiShadowUpXL: 0 2.7px 9px 0 hsla(from $euiShadowColor h s l / 0.13), 0 -9.4px 24px 0 hsla(from $euiShadowColor h s l / 0.09), 0 -21.8px 43px 0 hsla(from $euiShadowColor h s l / 0.08);
+
+$euiShadowHoverDown: 0 1.9px 4px 0 hsla(from $euiShadowColor h s l / 0.05), 0 4.5px 10 0 hsla(from $euiShadowColor h s l / 0.05);
+$euiShadowHoverXLDown: none;
+
+$euiShadowHoverUp: 0 1.9px 4px 0 hsla(from $euiShadowColor h s l / 0.05), 0 -4.5px 10 0 hsla(from $euiShadowColor h s l / 0.05);
+$euiShadowHoverXLUp: none;

package/test-env/components/badge/beta_badge/beta_badge.js

@@ -111,6 +111,7 @@ var EuiBetaBadge = exports.EuiBetaBadge = function EuiBetaBadge(_ref) {
         anchorProps: anchorProps
       }, (0, _react2.jsx)("span", (0, _extends2.default)({
         tabIndex: 0,
+        role: "button",
         css: cssStyles,
         className: classes
       }, rest), icon || label));

package/test-env/components/basic_table/basic_table.styles.js

@@ -17,9 +17,11 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 var tableLoadingLine = (0, _react.keyframes)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  from {\n    ", "\n    ", "\n  }\n\n  20% {\n    ", "\n    ", "\n  }\n\n  80% {\n    ", "\n    ", "\n  }\n\n  100% {\n    ", "\n    ", "\n  }\n"])), (0, _global_styling.logicalCSS)('left', 0), (0, _global_styling.logicalCSS)('width', 0), (0, _global_styling.logicalCSS)('left', 0), (0, _global_styling.logicalCSS)('width', '40%'), (0, _global_styling.logicalCSS)('left', '60%'), (0, _global_styling.logicalCSS)('width', '40%'), (0, _global_styling.logicalCSS)('left', '100%'), (0, _global_styling.logicalCSS)('width', 0));
-var euiBasicTableBodyLoading = exports.euiBasicTableBodyLoading = function euiBasicTableBodyLoading(_ref) {
-  var euiTheme = _ref.euiTheme;
-  return /*#__PURE__*/(0, _react.css)("position:relative;overflow:hidden;&::before{position:absolute;content:'';", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('height', euiTheme.border.width.thick), " background-color:", euiTheme.colors.primary, ";animation:", tableLoadingLine, " 1s linear infinite;", _global_styling.euiCantAnimate, "{animation-duration:2s;}};label:euiBasicTableBodyLoading;");
+var euiBasicTableBodyLoading = exports.euiBasicTableBodyLoading = function euiBasicTableBodyLoading(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return /*#__PURE__*/(0, _react.css)("position:relative;overflow:hidden;&::before{position:absolute;content:'';", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('height', euiTheme.border.width.thick), " background-color:", euiTheme.colors.primary, ";animation:", tableLoadingLine, " 1s linear infinite;", _global_styling.euiCantAnimate, "{animation:none;background:repeating-linear-gradient(\n          -45deg,\n          ", euiTheme.colors.backgroundBasePlain, ",\n          ", euiTheme.colors.backgroundBasePlain, " ", euiTheme.size.xs, ",\n          ", euiTheme.colors.primary, " ", euiTheme.size.xs, ",\n          ", euiTheme.colors.primary, " ", euiTheme.size.s, "\n        );", (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
+    forced: "\n              ".concat((0, _global_styling.preventForcedColors)(euiThemeContext), "\n            ")
+  }), ";}};label:euiBasicTableBodyLoading;");
 };
 
 // Fix to make the loading indicator position correctly in Safari

package/test-env/components/bottom_bar/bottom_bar.styles.js

@@ -25,8 +25,10 @@ var euiBottomBarStyles = exports.euiBottomBarStyles = function euiBottomBarStyle
     // Base
     // `color` is inherited from the wrapping `EuiThemeProvider colorMode="dark"`
     euiBottomBar: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.components.bottomBarBackground, ";", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), " ", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
-      none: (0, _euiThemeCommon.euiShadowFlat)(euiThemeContext)
-    }), " ", _global_styling.euiCanAnimate, "{animation:", euiBottomBarAppear, " ", euiTheme.animation.slow, " ", euiTheme.animation.resistance, ";};label:euiBottomBar;"),
+      none: (0, _euiThemeCommon.euiShadowFlat)(euiThemeContext, {
+        border: 'none'
+      })
+    }), "clip-path:polygon(0 -100vh, 100% -100vh, 100% 100%, 0 100%);", _global_styling.euiCanAnimate, "{animation:", euiBottomBarAppear, " ", euiTheme.animation.slow, " ", euiTheme.animation.resistance, ";};label:euiBottomBar;"),
     static: /*#__PURE__*/(0, _react.css)(";label:static;"),
     // Default
     fixed: /*#__PURE__*/(0, _react.css)("position:fixed;z-index:", Number(euiTheme.levels.header) - 2, ";;label:fixed;"),

package/test-env/components/code/code_syntax.styles.js

@@ -56,7 +56,7 @@ var euiCodeSyntaxVariables = exports.euiCodeSyntaxVariables = function euiCodeSy
     selectorClassColor: euiTheme.components.codeSelectorClassColor,
     selectorIdColor: euiTheme.components.codeSelectorIdColor,
     get tokensCss() {
-      return "\n  .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n    opacity: ".concat(highContrastMode ? '1' : '.7', ";\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata,\n  .token.coord,\n  .token.blockquote {\n    color: ").concat(this.commentColor, ";\n    font-style: italic;\n  }\n\n  .token.selector {\n    color: ").concat(this.selectorTagColor, ";\n  }\n\n  .token.string,\n  .token.interpolation,\n  .token.interpolation-punctuation,\n  .token.doc-comment .token.keyword,\n  .token.attr-value,\n  .token.url .token.content {\n    color: ").concat(this.stringColor, ";\n  }\n\n  .token.number,\n  .token.boolean,\n  .token.keyword.nil,\n  .token.regex,\n  .token.variable,\n  .token.unit,\n  .token.hexcode,\n  .token.attr-name,\n  .token.attr-equals {\n    color: ").concat(this.numberColor, ";\n  }\n\n  .token.atrule .token.rule,\n  .token.keyword {\n    color: ").concat(this.keywordColor, ";\n  }\n\n  .token.function {\n    color: ").concat(this.functionTitleColor, ";\n  }\n\n  .token.tag {\n    color: ").concat(this.tagColor, ";\n  }\n\n  .token.class-name {\n    color: ").concat(this.typeColor, ";\n  }\n\n  .token.property {\n    color: ").concat(this.attributeColor, ";\n  }\n\n  .token.console,\n  .token.list-punctuation,\n  .token.url-reference,\n  .token.url .token.url {\n    color: ").concat(this.symbolColor, ";\n  }\n\n  .token.paramater {\n    color: ").concat(this.paramsColor, ";\n  }\n\n  .token.meta,\n  .token.important {\n    color: ").concat(this.metaColor, ";\n  }\n\n  .token.title {\n    color: ").concat(this.titleColor, ";\n  }\n\n  .token.section {\n    color: ").concat(this.sectionColor, ";\n  }\n\n  .token.prefix.inserted,\n  .token.prefix.deleted {\n    padding-inline-start: -").concat(euiTheme.size.xs, ";\n    margin-inline-start:  -").concat(euiTheme.size.xs, ";\n  }\n\n  .token.prefix.inserted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.additionColor, ";\n    color: ").concat(this.additionColor, ";\n  }\n\n  .token.prefix.deleted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.deletionColor, ";\n    color: ").concat(this.deletionColor, ";\n  }\n\n  .token.selector .token.class {\n    color: ").concat(this.selectorClassColor, ";\n  }\n\n  .token.selector .token.id {\n    color: ").concat(this.selectorIdColor, ";\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: ").concat(euiTheme.font.weight.bold, ";\n  }\n\n  .token.url-reference,\n  .token.url .token.url {\n    text-decoration: underline;\n  }\n\n  .token.entity {\n    cursor: help;\n  }");
+      return "\n  .token.punctuation:not(.interpolation-punctuation):not([class*='attr-']) {\n    opacity: ".concat(highContrastMode ? '1' : '.7', ";\n  }\n\n  .token.comment,\n  .token.prolog,\n  .token.doctype,\n  .token.cdata,\n  .token.coord,\n  .token.blockquote {\n    color: ").concat(this.commentColor, ";\n    font-style: italic;\n  }\n\n  .token.selector {\n    color: ").concat(this.selectorTagColor, ";\n  }\n\n  .token.string,\n  .token.interpolation,\n  .token.interpolation-punctuation,\n  .token.doc-comment .token.keyword,\n  .token.attr-value,\n  .token.url .token.content {\n    color: ").concat(this.stringColor, ";\n  }\n\n  .token.number,\n  .token.boolean,\n  .token.keyword.nil,\n  .token.regex,\n  .token.variable,\n  .token.unit,\n  .token.hexcode,\n  .token.attr-name,\n  .token.attr-equals {\n    color: ").concat(this.numberColor, ";\n  }\n\n  .token.atrule .token.rule,\n  .token.key.atrule,\n  .token.keyword {\n    color: ").concat(this.keywordColor, ";\n  }\n\n  .token.function {\n    color: ").concat(this.functionTitleColor, ";\n  }\n\n  .token.tag {\n    color: ").concat(this.tagColor, ";\n  }\n\n  .token.class-name {\n    color: ").concat(this.typeColor, ";\n  }\n\n  .token.property {\n    color: ").concat(this.attributeColor, ";\n  }\n\n  .token.console,\n  .token.list-punctuation,\n  .token.url-reference,\n  .token.url .token.url {\n    color: ").concat(this.symbolColor, ";\n  }\n\n  .token.paramater {\n    color: ").concat(this.paramsColor, ";\n  }\n\n  .token.meta,\n  .token.important {\n    color: ").concat(this.metaColor, ";\n  }\n\n  .token.title {\n    color: ").concat(this.titleColor, ";\n  }\n\n  .token.section {\n    color: ").concat(this.sectionColor, ";\n  }\n\n  .token.prefix.inserted,\n  .token.prefix.deleted {\n    padding-inline-start: -").concat(euiTheme.size.xs, ";\n    margin-inline-start:  -").concat(euiTheme.size.xs, ";\n  }\n\n  .token.prefix.inserted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.additionColor, ";\n    color: ").concat(this.additionColor, ";\n  }\n\n  .token.prefix.deleted {\n    box-shadow: -").concat(euiTheme.size.xs, " 0 ").concat(this.deletionColor, ";\n    color: ").concat(this.deletionColor, ";\n  }\n\n  .token.selector .token.class {\n    color: ").concat(this.selectorClassColor, ";\n  }\n\n  .token.selector .token.id {\n    color: ").concat(this.selectorIdColor, ";\n  }\n\n  .token.italic {\n    font-style: italic;\n  }\n\n  .token.important,\n  .token.bold {\n    font-weight: ").concat(euiTheme.font.weight.bold, ";\n  }\n\n  .token.url-reference,\n  .token.url .token.url {\n    text-decoration: underline;\n  }\n\n  .token.entity {\n    cursor: help;\n  }");
     }
   };
 };

package/test-env/components/collapsible_nav_beta/collapsible_nav_beta.js

@@ -152,7 +152,7 @@ var _EuiCollapsibleNavBeta = function _EuiCollapsibleNavBeta(_ref) {
   }, [_focusTrapProps]);
   var classes = (0, _classnames.default)('euiCollapsibleNav', 'euiCollapsibleNavBeta', className);
   var styles = (0, _services.useEuiMemoizedStyles)(_collapsible_nav_beta.euiCollapsibleNavBetaStyles);
-  var cssStyles = [styles.euiCollapsibleNavBeta, styles[side], isPush && styles.isPush, isPush && isCollapsed && styles.isPushCollapsed, isOverlayFullWidth && styles.isOverlayFullWidth];
+  var cssStyles = [styles.euiCollapsibleNavBeta, isPush && styles.isPush, styles[side], isPush && isCollapsed && styles.isPushCollapsed, isOverlayFullWidth && styles.isOverlayFullWidth];
   var flyout = (0, _react2.jsx)(_flyout.EuiFlyout, (0, _extends2.default)({
     "aria-label": defaultAriaLabel
   }, rest, {

package/test-env/components/collapsible_nav_beta/collapsible_nav_beta.styles.js

@@ -29,7 +29,9 @@ var euiCollapsibleNavBetaStyles = exports.euiCollapsibleNavBetaStyles = function
     euiCollapsibleNavBeta: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('top', fixedHeaderOffset), (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.xs), ";;label:euiCollapsibleNavBeta;"),
     left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-right', euiTheme.border.thin), ";;label:left;"),
     right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-left', euiTheme.border.thin), ";;label:right;"),
-    isPush: /*#__PURE__*/(0, _react.css)((0, _themes.euiShadowFlat)(euiThemeContext), ";;label:isPush;"),
+    isPush: /*#__PURE__*/(0, _react.css)((0, _themes.euiShadowFlat)(euiThemeContext, {
+      border: 'none'
+    }), ";;label:isPush;"),
     isPushCollapsed: /*#__PURE__*/(0, _react.css)(_collapsible_nav_body_footer.hideScrollbars, ";;label:isPushCollapsed;"),
     isOverlayFullWidth: /*#__PURE__*/(0, _react.css)("&.euiFlyout{", (0, _global_styling.logicalCSS)('max-width', '100% !important'), ";};label:isOverlayFullWidth;")
   };

package/test-env/components/flyout/flyout.styles.js

@@ -29,9 +29,16 @@ var _ref = process.env.NODE_ENV === "production" ? {
   styles: "animation-duration:0s!important;label:noAnimation;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "rks1ev-overlay",
+  styles: "&:has(.euiResizableButton){border-inline:none;};label:overlay;"
+} : {
+  name: "rks1ev-overlay",
+  styles: "&:has(.euiResizableButton){border-inline:none;};label:overlay;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 var euiFlyoutStyles = exports.euiFlyoutStyles = function euiFlyoutStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme,
-    colorMode = euiThemeContext.colorMode;
+  var euiTheme = euiThemeContext.euiTheme;
   return {
     euiFlyout: /*#__PURE__*/(0, _react.css)("position:fixed;", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('top', 'var(--euiFixedHeadersOffset, 0)'), " ", (0, _global_styling.logicalCSS)('height', 'inherit'), " z-index:", euiTheme.levels.flyout, ";background:", euiTheme.colors.emptyShade, ";display:flex;flex-direction:column;align-items:stretch;&:focus{outline:none;}", maxedFlyoutWidth(euiThemeContext), ";;label:euiFlyout;"),
     // Flyout sizes
@@ -46,11 +53,15 @@ var euiFlyoutStyles = exports.euiFlyoutStyles = function euiFlyoutStyles(euiThem
     left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('left', 0), " clip-path:polygon(0 0, 150% 0, 150% 100%, 0 100%);", _global_styling.euiCanAnimate, "{animation:", euiFlyoutSlideInLeft, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";};label:left;"),
     // Type
     overlay: {
-      overlay: /*#__PURE__*/(0, _react.css)((0, _euiThemeCommon.euiShadowXLarge)(euiThemeContext, {
-        borderAllInHighContrastMode: true
-      }), " &:has(.euiResizableButton){border-inline:none;};label:overlay;"),
-      left: /*#__PURE__*/(0, _react.css)("border-inline-end:", colorMode === 'DARK' ? "".concat(euiTheme.border.width.thin, " solid\n          ").concat(euiTheme.colors.borderBaseFloating) : 'none', ";;label:left;"),
-      right: /*#__PURE__*/(0, _react.css)("border-inline-start:", colorMode === 'DARK' ? "".concat(euiTheme.border.width.thin, " solid\n          ").concat(euiTheme.colors.borderBaseFloating) : 'none', ";;label:right;")
+      overlay: _ref2,
+      left: /*#__PURE__*/(0, _react.css)((0, _euiThemeCommon.euiShadowXLarge)(euiThemeContext, {
+        borderAllInHighContrastMode: true,
+        border: 'right'
+      }), ";;label:left;"),
+      right: /*#__PURE__*/(0, _react.css)((0, _euiThemeCommon.euiShadowXLarge)(euiThemeContext, {
+        borderAllInHighContrastMode: true,
+        border: 'left'
+      }), ";;label:right;")
     },
     push: {
       push: /*#__PURE__*/(0, _react.css)("clip-path:none;z-index:", Number(euiTheme.levels.flyout) - 1, ";;label:push;"),

package/test-env/components/header/header.styles.js

@@ -31,7 +31,9 @@ var euiHeaderStyles = exports.euiHeaderStyles = function euiHeaderStyles(euiThem
     height = _euiHeaderVariables.height,
     padding = _euiHeaderVariables.padding;
   return {
-    euiHeader: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:space-between;", (0, _global_styling.logicalCSS)('height', height), " ", (0, _global_styling.logicalCSS)('padding-horizontal', padding), " ", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), " ", (0, _euiThemeCommon.euiShadowXSmall)(euiThemeContext), ";;label:euiHeader;"),
+    euiHeader: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:space-between;", (0, _global_styling.logicalCSS)('height', height), " ", (0, _global_styling.logicalCSS)('padding-horizontal', padding), " ", (0, _global_styling.logicalCSS)('border-bottom', euiTheme.border.thin), " ", (0, _euiThemeCommon.euiShadowXSmall)(euiThemeContext, {
+      border: 'none'
+    }), "&+.euiHeader{clip-path:polygon(0 0, 100% 0, 100% 100vh, 0 100vh);};label:euiHeader;"),
     // Position
     static: /*#__PURE__*/(0, _react.css)("z-index:", Number(euiTheme.levels.header) - 1, ";position:relative;;label:static;"),
     fixed: /*#__PURE__*/(0, _react.css)("z-index:", Number(euiTheme.levels.header) + 1, ";position:fixed;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('horizontal', 0), ";;label:fixed;"),

package/test-env/components/icon/icon_map.js

@@ -507,7 +507,7 @@ var typeToPathMap = exports.typeToPathMap = {
   vulnerabilityManagementApp: 'app_vulnerability_management',
   warning: 'warning',
   warningFilled: 'warning',
-  // NOTE: To be deprecated in favor of `export`
+  // NOTE: To be deprecated in favor of `warning`
   watchesApp: 'app_watches',
   web: 'web',
   wordWrap: 'wordWrap',

package/test-env/components/page_template/inner/page_inner.styles.js

@@ -19,7 +19,9 @@ var euiPageInnerStyles = exports.euiPageInnerStyles = function euiPageInnerStyle
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiPageInner: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;align-items:stretch;flex:1 1 100%;", (0, _global_styling.logicalCSS)('max-width', '100%'), " ", (0, _global_styling.logicalCSS)('min-width', '0'), ";;label:euiPageInner;"),
-    panelled: /*#__PURE__*/(0, _react.css)("background:", euiThemeContext.euiTheme.colors.backgroundBasePlain, ";", (0, _euiThemeCommon.euiShadow)(euiThemeContext, 'm'), ";;label:panelled;"),
+    panelled: /*#__PURE__*/(0, _react.css)("background:", euiThemeContext.euiTheme.colors.backgroundBasePlain, ";", (0, _euiThemeCommon.euiShadow)(euiThemeContext, 'm', {
+      border: 'none'
+    }), ";;label:panelled;"),
     border: {
       top: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), ";;label:top;"),
       left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-left', euiTheme.border.thin), ";;label:left;")

package/test-env/components/panel/panel.styles.js

@@ -27,7 +27,9 @@ var euiPanelBorderStyles = exports.euiPanelBorderStyles = function euiPanelBorde
    euiTheme.colors.borderBaseFloating is enough then */
   var hasVisibleBorder = hasFloatingBorder && colorMode === 'DARK';
   return (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
-    none: "\n      /* Using a pseudo element for the border instead of floating border only \n      because the transparent border might otherwise be visible with arbitrary \n      full-width/height content in light mode. */\n      &::after {\n        content: '';\n        position: absolute;\n        /* ensure to keep on top of flush content */\n        z-index: 0;\n        inset: 0;\n        border: ".concat(euiTheme.border.width.thin, " solid\n          ").concat((borderColor !== null && borderColor !== void 0 ? borderColor : hasVisibleBorder) ? euiTheme.border.color : euiTheme.colors.borderBaseFloating, ";\n        border-radius: inherit;\n        pointer-events: none;\n      }\n    "),
+    none: "\n      /* Using a pseudo element for the border instead of floating border only\n      because the transparent border might otherwise be visible with arbitrary\n      full-width/height content in light mode. */\n      ".concat((0, _euiThemeCommon.euiBorderStyles)(euiThemeContext, {
+      borderColor: (borderColor !== null && borderColor !== void 0 ? borderColor : hasVisibleBorder) ? euiTheme.border.color : euiTheme.colors.borderBaseFloating
+    }), "\n    "),
     preferred: "\n      border: ".concat(euiTheme.border.thin, ";\n    ")
   });
 };
@@ -53,9 +55,7 @@ var euiPanelStyles = exports.euiPanelStyles = function euiPanelStyles(euiThemeCo
     // Base
     euiPanel: _ref2,
     grow: _ref,
-    hasShadow: /*#__PURE__*/(0, _react.css)((0, _euiThemeCommon.euiShadow)(euiThemeContext, 'm'), " ", euiPanelBorderStyles(euiThemeContext, {
-      hasFloatingBorder: false
-    }), ";;label:hasShadow;"),
+    hasShadow: /*#__PURE__*/(0, _react.css)((0, _euiThemeCommon.euiShadow)(euiThemeContext, 'm'), ";;label:hasShadow;"),
     hasBorder: /*#__PURE__*/(0, _react.css)(euiPanelBorderStyles(euiThemeContext, {
       borderColor: euiTheme.border.color,
       hasFloatingBorder: false
@@ -66,7 +66,7 @@ var euiPanelStyles = exports.euiPanelStyles = function euiPanelStyles(euiThemeCo
     },
     // Setup interactive behavior
     isClickable: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{transition:box-shadow ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ",transform ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}&:enabled{display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalTextAlignCSS)('left'), ";}&:hover,&:focus{", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
-      none: (0, _euiThemeCommon.euiShadow)(euiThemeContext, 'l'),
+      none: (0, _euiThemeCommon.euiShadowHover)(euiThemeContext, 'l'),
       // Windows high contrast themes ignore box-shadows - use a filter workaround instead
       preferred: "\n            &:not(.euiPanel--transparent) {\n              filter: drop-shadow(0 ".concat(euiTheme.border.width.thick, " 0 ").concat(euiTheme.border.color, ");\n            }\n          ")
     }), " transform:translateY(-2px);cursor:pointer;};label:isClickable;")

package/test-env/components/table/table_row.styles.js

@@ -53,7 +53,7 @@ var euiTableRowStyles = exports.euiTableRowStyles = function euiTableRowStyles(e
        * Right column styles + border
        * Used for cell actions and row expander arrow
        */
-      hasRightColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-right', mobileSizes.actions.width), " &::after{content:'';position:absolute;", (0, _global_styling.logicalCSS)('vertical', 0), " ", (0, _global_styling.logicalCSS)('right', mobileSizes.actions.width), " ", (0, _global_styling.logicalCSS)('border-right', euiTheme.border.thin), ";};label:hasRightColumn;"),
+      hasRightColumn: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-right', mobileSizes.actions.width), " &::before{content:'';position:absolute;", (0, _global_styling.logicalCSS)('vertical', 0), " ", (0, _global_styling.logicalCSS)('right', mobileSizes.actions.width), " ", (0, _global_styling.logicalCSS)('border-right', euiTheme.border.thin), ";};label:hasRightColumn;"),
       /**
        * Bottom of card - expanded rows
        */
@@ -61,8 +61,8 @@ var euiTableRowStyles = exports.euiTableRowStyles = function euiTableRowStyles(e
       // On mobile, visually move the expanded row to join up with the
       // preceding table row via negative margins
       'margin-top', (0, _global_styling.mathWithUnits)([cellContentPadding, euiTheme.border.width.thin], function (x, y) {
-        return (x + y) * -1;
-      })), (0, _global_styling.logicalCSS)('padding-left', cellContentPadding), " ", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), " ", (0, _global_styling.logicalCSS)('border-top-left-radius', 0), " ", (0, _global_styling.logicalCSS)('border-top-right-radius', 0), ">.euiTableRowCell{", (0, _global_styling.logicalCSS)('width', '100%'), ";}", expandedAnimationCss, ";;label:expanded;")
+        return (x + y * 2) * -1;
+      })), (0, _global_styling.logicalCSS)('padding-left', cellContentPadding), " ", (0, _global_styling.logicalCSS)('border-top', euiTheme.border.thin), " ", (0, _global_styling.logicalCSS)('border-top-left-radius', 0), " ", (0, _global_styling.logicalCSS)('border-top-right-radius', 0), " &:after{", (0, _global_styling.logicalCSS)('border-top', 'none'), ";}clip-path:polygon(-50% 0, 150% 0, 150% 100vh, -50% 100vh);>.euiTableRowCell{", (0, _global_styling.logicalCSS)('width', '100%'), ";}", expandedAnimationCss, ";;label:expanded;")
     }
   };
 };

package/test-env/global_styling/mixins/_shadow.js

@@ -15,6 +15,12 @@ Object.defineProperty(exports, "euiShadowFlat", {
     return _euiThemeCommon.euiShadowFlat;
   }
 });
+Object.defineProperty(exports, "euiShadowHover", {
+  enumerable: true,
+  get: function get() {
+    return _euiThemeCommon.euiShadowHover;
+  }
+});
 Object.defineProperty(exports, "euiShadowLarge", {
   enumerable: true,
   get: function get() {
@@ -51,7 +57,7 @@ Object.defineProperty(exports, "euiSlightShadowHover", {
     return _euiThemeCommon.euiSlightShadowHover;
   }
 });
-exports.useEuiSlightShadowHover = exports.useEuiShadowFlat = exports.useEuiShadow = void 0;
+exports.useEuiSlightShadowHover = exports.useEuiShadowHover = exports.useEuiShadowFlat = exports.useEuiShadow = void 0;
 var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _theme = require("../../services/theme");
 /*
@@ -62,10 +68,15 @@ var _theme = require("../../services/theme");
  * Side Public License, v 1.
  */
 
+/** @deprecated */
+
+/** @deprecated use euiShadowHover/useEuiShadowHover instead */
 var useEuiSlightShadowHover = exports.useEuiSlightShadowHover = function useEuiSlightShadowHover(options) {
   var euiThemeContext = (0, _theme.useEuiTheme)();
   return (0, _euiThemeCommon.euiSlightShadowHover)(euiThemeContext, options);
 };
+
+/** @deprecated - useEuiShadow instead */
 var useEuiShadowFlat = exports.useEuiShadowFlat = function useEuiShadowFlat(options) {
   var euiThemeContext = (0, _theme.useEuiTheme)();
   return (0, _euiThemeCommon.euiShadowFlat)(euiThemeContext, options);
@@ -75,4 +86,10 @@ var useEuiShadow = exports.useEuiShadow = function useEuiShadow() {
   var options = arguments.length > 1 ? arguments[1] : undefined;
   var euiThemeContext = (0, _theme.useEuiTheme)();
   return (0, _euiThemeCommon.euiShadow)(euiThemeContext, size, options);
+};
+var useEuiShadowHover = exports.useEuiShadowHover = function useEuiShadowHover() {
+  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'l';
+  var options = arguments.length > 1 ? arguments[1] : undefined;
+  var euiThemeContext = (0, _theme.useEuiTheme)();
+  return (0, _euiThemeCommon.euiShadowHover)(euiThemeContext, size, options);
 };