@elastic/eui 105.0.0 → 106.0.0

package/test-env/components/date_picker/date_picker_range.styles.js

@@ -7,6 +7,8 @@ exports.euiDatePickerRangeStyles = exports.euiDatePickerRangeInlineStyles = void
 var _react = require("@emotion/react");
 var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _global_styling = require("../../global_styling");
+var _services = require("../../services");
+var _form = require("../form/form.styles");
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -14,8 +16,12 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var euiDatePickerRangeStyles = exports.euiDatePickerRangeStyles = {
-  euiDatePickerRange: /*#__PURE__*/(0, _react.css)(".euiPopover,.react-datepicker__input-container,.euiDatePicker{", (0, _global_styling.logicalCSS)('height', '100%'), ";}.euiPopover{flex:1;};label:euiDatePickerRange;")
+var euiDatePickerRangeStyles = exports.euiDatePickerRangeStyles = function euiDatePickerRangeStyles(euiThemeContext) {
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
+  var refreshStyles = "\n      .euiPopover:last-child {\n        ".concat((0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), "\n        ").concat((0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), "\n\n        * {\n          ").concat((0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), "\n          ").concat((0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), "\n        }\n      }\n    ");
+  return {
+    euiDatePickerRange: /*#__PURE__*/(0, _react.css)(".euiPopover,.react-datepicker__input-container,.euiDatePicker{", (0, _global_styling.logicalCSS)('height', '100%'), ";}.euiPopover{flex:1;}", isRefreshVariant && refreshStyles, ";;label:euiDatePickerRange;")
+  };
 };
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "bicgs9-noShadow",
@@ -27,6 +33,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 var euiDatePickerRangeInlineStyles = exports.euiDatePickerRangeInlineStyles = function euiDatePickerRangeInlineStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
 
   // Use a container query to stack date pickers vertically if the container is
   // not wide enough to fit both. We need a fn for this to render two width queries,
@@ -36,12 +43,12 @@ var euiDatePickerRangeInlineStyles = exports.euiDatePickerRangeInlineStyles = fu
     return "\n    display: block;\n    container-type: inline-size;\n\n    .euiFormControlLayout__childrenWrapper {\n      /* Use static px widths for now, since render behavior comes from a third party library */\n      @container (max-width: ".concat(datePickerWidth * 2 + delimiterWidth, "px) {\n        /* Unset grid display */\n        display: block !important;\n\n        /* Center and point the default delimiter arrow downwards */\n        .euiFormControlLayoutDelimited__delimiter .euiIcon {\n          transform: rotate(90deg);\n          margin-inline: auto;\n        }\n      }\n    }");
   };
   return {
-    euiDatePickerRangeInline: /*#__PURE__*/(0, _react.css)(".euiFormControlLayoutDelimited{", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('width', 'fit-content'), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " border:none;padding:0;.euiFormControlLayout__childrenWrapper{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto;align-items:stretch;background-color:transparent;}.euiFormControlLayoutIcons{justify-content:center;grid-column:1/span 3;", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.s), ";}}.react-datepicker{position:relative;};label:euiDatePickerRangeInline;"),
+    euiDatePickerRangeInline: /*#__PURE__*/(0, _react.css)(".euiFormControlLayoutDelimited{", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('width', 'fit-content'), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " border:none;padding:0;", isRefreshVariant && "\n          &::after {\n            display: none;\n          }\n        ", ";.euiFormControlLayout__childrenWrapper{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto;align-items:stretch;background-color:transparent;}.euiFormControlLayoutIcons{justify-content:center;grid-column:1/span 3;", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.s), ";}}.react-datepicker{position:relative;};label:euiDatePickerRangeInline;"),
     responsive: /*#__PURE__*/(0, _react.css)(containerQuery(268), ";;label:responsive;"),
     responsiveWithTimeSelect: /*#__PURE__*/(0, _react.css)(containerQuery(374), ";;label:responsiveWithTimeSelect;"),
     shadow: /*#__PURE__*/(0, _react.css)(".euiFormControlLayoutDelimited{", (0, _euiThemeCommon.euiShadowMedium)(euiThemeContext, {
       borderAllInHighContrastMode: true
-    }), ";};label:shadow;"),
+    }), " ", isRefreshVariant && "\n          /* the form layout is not part of the interactive behavior but rather a container in this variant  */\n          ".concat((0, _form.disableFormControlHoverStyles)(), "\n\n          .euiFormControlLayout__childrenWrapper {\n            box-shadow: none;\n            ").concat((0, _form.disableFormControlHoverStyles)(), "\n          }\n        "), ";};label:shadow;"),
     // Applied directly to EuiFormControlLayout so we can check if `disabled`
     // and allow the disabled background-color to take precedence
     formLayout: {

package/test-env/components/date_picker/super_date_picker/super_date_picker.styles.js

@@ -26,6 +26,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSuperDatePickerStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   var forms = (0, _form.euiFormVariables)(euiThemeContext);
   var inputWidth = euiTheme.base * 30;
   var buttonWidth = euiTheme.base * 7; // @see _button_display.styles.ts
@@ -45,6 +46,18 @@ var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSu
   // Needs updating colors
   var needsUpdatingBackgroundColor = euiTheme.components.superDatePickerBackgroundSuccees;
   var needsUpdatingTextColor = (0, _services.makeHighContrastColor)(euiTheme.colors.success)(needsUpdatingBackgroundColor);
+  var formLayoutStyles = "\n      /* using wrapper hover styles instead */\n      .euiDatePopoverButton:not(.euiDatePopoverButton-isSelected):hover {\n        outline: none;\n      }\n\n      .euiPopover {\n        /* mimic input border-radius */\n        border-radius: ".concat(forms.controlBorderRadius, ";\n\n        &:first-child {\n          ").concat((0, _global_styling.logicalCSS)('border-top-left-radius', 'inherit'), "\n          ").concat((0, _global_styling.logicalCSS)('border-bottom-left-radius', 'inherit'), "\n        }\n\n        &:last-child {\n          ").concat((0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), "\n          ").concat((0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), "\n        }\n      }\n\n      .euiDatePopoverButton {\n        background-color: transparent;\n        border-radius: inherit;\n      }\n    ");
+  var popoverButtonFocusStyles = isRefreshVariant ? "\n       ".concat((0, _form.euiFormControlFocusStyles)(euiThemeContext), "\n    ") : "\n      --euiFormControlStateColor: ".concat(euiTheme.colors.primary, ";\n      ").concat((0, _form.euiFormControlShowBackgroundLine)(euiThemeContext, euiTheme.colors.primary), "\n    ");
+  var invalidStyles = isRefreshVariant ? "\n      &:has(.euiPopover-isOpen, .euiDatePopoverButton:focus) {\n        --euiFormControlStateColor: ".concat(forms.borderColor, ";\n        --euiFormControlStateHoverColor: ").concat(forms.borderHovered, ";\n      }\n\n      &:not(:has(.euiPopover-isOpen, .euiDatePopoverButton:focus)) {\n        ").concat((0, _form.euiFormControlInvalidStyles)(euiThemeContext), "\n      }\n\n      .euiDatePopoverButton:focus,\n      .euiPopover-isOpen .euiDatePopoverButton {\n        ").concat((0, _form.euiFormControlFocusStyles)(euiThemeContext), "\n      }\n    ") : "\n      ".concat((0, _form.euiFormControlInvalidStyles)(euiThemeContext), "\n    ");
+  var needsUpdatingStyles = "\n      --euiFormControlStateColor: ".concat(euiTheme.colors.success, ";\n      --euiFormControlStateHoverColor: ").concat(euiTheme.colors.success, ";\n      --euiFormControlStateWidth: ").concat(euiTheme.border.width.thin, ";\n      ").concat(_form.euiFormControlHighlightBorderStyles, "\n  \n      &:has(.euiPopover-isOpen),\n      &:focus-within {\n        --euiFormControlStateColor: ").concat(forms.borderColor, ";\n        --euiFormControlStateHoverColor: ").concat(forms.borderHovered, ";\n      }\n    ");
+  var needsUpdatingPopoverButtonFocusStyles = isRefreshVariant ? "\n      ".concat((0, _form.euiFormControlFocusStyles)(euiThemeContext), "\n    ") : "\n      --euiFormControlStateColor: ".concat(euiTheme.colors.success, ";\n      ").concat((0, _form.euiFormControlShowBackgroundLine)(euiThemeContext, euiTheme.colors.success), "\n\n      ").concat((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+    // Force the fill color of all icons/svgs to give a bit more indication of state,
+    // since Windows high contrast themes otherwise override background/text color
+    forced: "\n          svg,\n          & + * svg {\n            fill: ".concat(euiTheme.colors.success, ";\n          }\n        ")
+  }), "\n    ");
+  var prettyFormatStyles = "\n      --euiFormControlStateHoverColor: ".concat(forms.borderHovered, ";\n      ").concat((0, _form.euiFormControlDefaultShadow)(euiThemeContext), "\n      \n      ").concat((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+    preferred: "\n          border: none;\n        "
+  }), "\n\n      &:focus {\n        ").concat((0, _form.euiFormControlFocusStyles)(euiThemeContext), "\n      }\n    ");
   return {
     euiSuperDatePicker: /*#__PURE__*/(0, _react.css)("display:flex;gap:", gap, ";", (0, _global_styling.logicalCSS)('max-width', '100%'), " ", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiSuperDatePicker;"),
     widths: {
@@ -69,27 +82,23 @@ var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSu
     isQuickSelectOnly: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', 0), ".euiFormControlLayout__prepend{", (0, _global_styling.logicalCSS)('max-width', 'none'), ";};label:isQuickSelectOnly;"),
     euiSuperDatePicker__range: _ref,
     euiSuperDatePicker__rangeInput: /*#__PURE__*/(0, _react.css)("flex-grow:1;", (0, _global_styling.logicalCSS)('width', 'auto'), " overflow:hidden;;label:euiSuperDatePicker__rangeInput;"),
-    euiSuperDatePicker__prettyFormat: /*#__PURE__*/(0, _react.css)(_buttonStyles(euiThemeContext), " text-align:start;;label:euiSuperDatePicker__prettyFormat;"),
+    euiSuperDatePicker__prettyFormat: /*#__PURE__*/(0, _react.css)(_buttonStyles(euiThemeContext), " text-align:start;", isRefreshVariant && prettyFormatStyles, ";;label:euiSuperDatePicker__prettyFormat;"),
     // Form states
     states: {
-      euiSuperDatePicker__formControlLayout: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " ", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      euiSuperDatePicker__formControlLayout: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{--euiFormControlStateHoverColor:", forms.borderHovered, ";", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " ", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
         none: 'box-shadow: none;',
         preferred: 'border: none;'
-      }), ";};label:euiSuperDatePicker__formControlLayout;"),
-      default: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", forms.textColor, ";background-color:", forms.backgroundColor, ";}.euiDatePopoverButton{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
+      }), " ", isRefreshVariant && formLayoutStyles, ";};label:euiSuperDatePicker__formControlLayout;"),
+      default: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", forms.textColor, ";background-color:", forms.backgroundColor, ";}.euiDatePopoverButton{--euiFormControlStateHoverColor:", forms.borderHovered, ";", !isRefreshVariant && (0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
         withBorder: false,
         withBackgroundColor: false
-      }), ";}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.primary, ";", (0, _form.euiFormControlShowBackgroundUnderline)(euiThemeContext, euiTheme.colors.primary), ";};label:default;"),
+      }), " box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{", popoverButtonFocusStyles, ";};label:default;"),
       disabled: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{", (0, _form.euiFormControlDisabledStyles)(euiThemeContext), ";};label:disabled;"),
-      invalid: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", euiTheme.colors.textDanger, ";background-color:", forms.backgroundColor, ";", (0, _form.euiFormControlInvalidStyles)(euiThemeContext), ";};label:invalid;"),
-      needsUpdating: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", needsUpdatingTextColor, ";background-color:", needsUpdatingBackgroundColor, ";}.euiFormControlLayoutDelimited__delimiter{color:inherit;}.euiDatePopoverButton{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
+      invalid: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", euiTheme.colors.textDanger, ";background-color:", forms.backgroundColor, ";", invalidStyles, ";};label:invalid;"),
+      needsUpdating: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", needsUpdatingTextColor, ";background-color:", needsUpdatingBackgroundColor, ";", isRefreshVariant && needsUpdatingStyles, ";}.euiFormControlLayoutDelimited__delimiter{color:inherit;}.euiDatePopoverButton{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
         withBorder: false,
         withBackgroundColor: false
-      }), ";}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.success, ";", (0, _form.euiFormControlShowBackgroundUnderline)(euiThemeContext, euiTheme.colors.success), ";}", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
-        // Force the fill color of all icons/svgs to give a bit more indication of state,
-        // since Windows high contrast themes otherwise override background/text color
-        forced: "\n            svg,\n            & + * svg {\n              fill: ".concat(euiTheme.colors.success, ";\n            }\n          ")
-      }), ";;label:needsUpdating;")
+      }), " background-color:inherit;box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{", needsUpdatingPopoverButtonFocusStyles, ";};label:needsUpdating;")
     }
   };
 };

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

@@ -8,19 +8,26 @@ var _react = require("@emotion/react");
 var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _global_styling = require("../../global_styling");
 var _flyout = require("./flyout.styles");
-/*
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; } /*
  * 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.
  */
-
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1ffeobd-inside",
+  styles: "background-color:transparent;label:inside;"
+} : {
+  name: "1ffeobd-inside",
+  styles: "background-color:transparent;label:inside;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 var euiFlyoutCloseButtonStyles = exports.euiFlyoutCloseButtonStyles = function euiFlyoutCloseButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiFlyout__closeButton: /*#__PURE__*/(0, _react.css)("position:absolute;", (0, _global_styling.logicalCSS)('right', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('top', euiTheme.size.s), " z-index:3;;label:euiFlyout__closeButton;"),
-    inside: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.components.flyoutCloseButtonInsideBackground, ";;label:inside;"),
+    inside: _ref,
     outside: /*#__PURE__*/(0, _react.css)((0, _euiThemeCommon.euiShadowXLarge)(euiThemeContext, {
       borderAllInHighContrastMode: true
     }), "animation:none!important;;label:outside;"),

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

@@ -18,7 +18,7 @@ var _flyout_context = require("./flyout_context");
 var _flyout_body = require("./flyout_body");
 var _focus_trap = require("../focus_trap");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "banner", "hideCloseButton", "onClose", "scrollableTabIndex", "size"];
+var _excluded = ["children", "backgroundStyle", "className", "banner", "hideCloseButton", "onClose", "scrollableTabIndex", "size"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -37,6 +37,8 @@ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e;
  */
 var EuiFlyoutChild = exports.EuiFlyoutChild = function EuiFlyoutChild(_ref) {
   var children = _ref.children,
+    _ref$backgroundStyle = _ref.backgroundStyle,
+    backgroundStyle = _ref$backgroundStyle === void 0 ? 'default' : _ref$backgroundStyle,
     className = _ref.className,
     banner = _ref.banner,
     _ref$hideCloseButton = _ref.hideCloseButton,
@@ -129,7 +131,7 @@ var EuiFlyoutChild = exports.EuiFlyoutChild = function EuiFlyoutChild(_ref) {
   var styles = (0, _services.useEuiMemoizedStyles)(_flyout_child.euiFlyoutChildStyles);
   var childLayoutMode = flyoutContext.childLayoutMode,
     parentFlyoutRef = flyoutContext.parentFlyoutRef;
-  var flyoutChildCss = [styles.euiFlyoutChild, size === 's' ? styles.s : styles.m, childLayoutMode === 'side-by-side' ? styles.sidePosition : styles.stackedPosition];
+  var flyoutChildCss = [styles.euiFlyoutChild, backgroundStyle === 'shaded' ? styles.backgroundShaded : styles.backgroundDefault, size === 's' ? styles.s : styles.m, childLayoutMode === 'side-by-side' ? styles.sidePosition : styles.stackedPosition];
   return (0, _react2.jsx)(_focus_trap.EuiFocusTrap, {
     returnFocus: function returnFocus() {
       if (parentFlyoutRef !== null && parentFlyoutRef !== void 0 && parentFlyoutRef.current) {
@@ -156,7 +158,6 @@ var EuiFlyoutChild = exports.EuiFlyoutChild = function EuiFlyoutChild(_ref) {
     className: "euiScreenReaderOnly"
   }, flyoutTitleText), !hideCloseButton && (0, _react2.jsx)(_flyout_close_button.EuiFlyoutCloseButton, {
     className: "euiFlyoutChild__closeButton",
-    css: styles.closeButton,
     onClose: handleClose,
     side: "right",
     closeButtonPosition: "inside",
@@ -204,6 +205,10 @@ EuiFlyoutChild.propTypes = {
      * @default 's'
      */
   size: _propTypes.default.oneOf(["s", "m"]),
+  /*
+     * The background of the child flyout can be optionally shaded. Use `shaded` to add the shading.
+     */
+  backgroundStyle: _propTypes.default.oneOf(["shaded", "default"]),
   /**
      * Children are implicitly part of FunctionComponent, but good to have if props type is standalone.
      */

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

@@ -19,13 +19,14 @@ var euiFlyoutChildStyles = exports.euiFlyoutChildStyles = function euiFlyoutChil
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base styles for the child flyout
-    euiFlyoutChild: /*#__PURE__*/(0, _react.css)("position:absolute;inset-block-start:0;inset-inline-start:0;block-size:100%;background:", euiTheme.colors.backgroundBaseSubdued, ";display:flex;flex-direction:column;", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'hidden'), " ", (0, _global_styling.logicalCSS)('height', '100%'), " z-index:", Number(euiTheme.levels.flyout) + 1, ";border-inline-start:", euiTheme.border.thin, ";", (0, _flyout.maxedFlyoutWidth)(euiThemeContext), ";;label:euiFlyoutChild;"),
+    euiFlyoutChild: /*#__PURE__*/(0, _react.css)("position:absolute;inset-block-start:0;inset-inline-start:0;block-size:100%;display:flex;flex-direction:column;", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'hidden'), " ", (0, _global_styling.logicalCSS)('height', '100%'), " z-index:", Number(euiTheme.levels.flyout) + 1, ";border-inline-start:", euiTheme.border.thin, ";", (0, _flyout.maxedFlyoutWidth)(euiThemeContext), ";;label:euiFlyoutChild;"),
+    backgroundDefault: /*#__PURE__*/(0, _react.css)("background:", euiTheme.colors.backgroundBasePlain, ";;label:backgroundDefault;"),
+    backgroundShaded: /*#__PURE__*/(0, _react.css)("background:", euiTheme.colors.backgroundBaseSubdued, ";;label:backgroundShaded;"),
     // Position variants based on screen size
     sidePosition: /*#__PURE__*/(0, _react.css)("transform:translateX(-100%);border-inline-end:", euiTheme.border.thin, ";;label:sidePosition;"),
     stackedPosition: /*#__PURE__*/(0, _react.css)("inset-inline-end:0;inline-size:100%;border-block-end:", euiTheme.border.thin, ";;label:stackedPosition;"),
     s: /*#__PURE__*/(0, _react.css)((0, _flyout.composeFlyoutSizing)(euiThemeContext, 's'), ";;label:s;"),
     m: /*#__PURE__*/(0, _react.css)((0, _flyout.composeFlyoutSizing)(euiThemeContext, 'm'), ";;label:m;"),
-    closeButton: /*#__PURE__*/(0, _react.css)("position:absolute;inset-block-start:", euiTheme.size.s, ";inset-inline-end:", euiTheme.size.s, ";z-index:1;;label:closeButton;"),
     overflow: {
       overflow: /*#__PURE__*/(0, _react.css)("flex-grow:1;display:flex;flex-direction:column;", (0, _global_styling.euiYScroll)(euiThemeContext), ";;label:overflow;"),
       wrapper: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;flex-grow:1;", (0, _global_styling.logicalCSS)('overflow-x', 'auto'), ";;label:wrapper;")

package/test-env/components/flyout/sessions/flyout_provider.js

@@ -49,7 +49,8 @@ var useEuiFlyoutSessionContext = exports.useEuiFlyoutSessionContext = function u
 var EuiFlyoutSessionProvider = exports.EuiFlyoutSessionProvider = function EuiFlyoutSessionProvider(_ref) {
   var children = _ref.children,
     renderMainFlyoutContent = _ref.renderMainFlyoutContent,
-    renderChildFlyoutContent = _ref.renderChildFlyoutContent;
+    renderChildFlyoutContent = _ref.renderChildFlyoutContent,
+    onUnmount = _ref.onUnmount;
   var _useReducer = (0, _react.useReducer)(_flyout_reducer.flyoutReducer, _flyout_reducer.initialFlyoutState),
     _useReducer2 = (0, _slicedToArray2.default)(_useReducer, 2),
     state = _useReducer2[0],
@@ -68,29 +69,13 @@ var EuiFlyoutSessionProvider = exports.EuiFlyoutSessionProvider = function EuiFl
   var mainFlyoutContentNode = null;
   var childFlyoutContentNode = null;
   if (activeFlyoutGroup) {
-    var mainRenderContext = {
-      flyoutProps: activeFlyoutGroup.config.mainFlyoutProps || {},
-      flyoutSize: activeFlyoutGroup.config.mainSize,
-      flyoutType: 'main',
-      dispatch: dispatch,
+    var renderContext = {
       activeFlyoutGroup: activeFlyoutGroup,
-      onCloseFlyout: handleClose,
-      onCloseChildFlyout: handleCloseChild,
       meta: activeFlyoutGroup.meta
     };
-    mainFlyoutContentNode = renderMainFlyoutContent(mainRenderContext);
+    mainFlyoutContentNode = renderMainFlyoutContent(renderContext);
     if (activeFlyoutGroup.isChildOpen && renderChildFlyoutContent) {
-      var childRenderContext = {
-        flyoutProps: activeFlyoutGroup.config.childFlyoutProps || {},
-        flyoutSize: activeFlyoutGroup.config.childSize,
-        flyoutType: 'child',
-        dispatch: dispatch,
-        activeFlyoutGroup: activeFlyoutGroup,
-        onCloseFlyout: handleClose,
-        onCloseChildFlyout: handleCloseChild,
-        meta: activeFlyoutGroup.meta
-      };
-      childFlyoutContentNode = renderChildFlyoutContent(childRenderContext);
+      childFlyoutContentNode = renderChildFlyoutContent(renderContext);
     } else if (activeFlyoutGroup.isChildOpen && !renderChildFlyoutContent) {
       console.warn('EuiFlyoutSessionProvider: A child flyout is open, but renderChildFlyoutContent was not provided.');
     }
@@ -101,7 +86,8 @@ var EuiFlyoutSessionProvider = exports.EuiFlyoutSessionProvider = function EuiFl
   return (0, _react2.jsx)(EuiFlyoutSessionContext.Provider, {
     value: {
       state: state,
-      dispatch: dispatch
+      dispatch: dispatch,
+      onUnmount: onUnmount
     }
   }, children, (activeFlyoutGroup === null || activeFlyoutGroup === void 0 ? void 0 : activeFlyoutGroup.isMainOpen) && (0, _react2.jsx)(_index.EuiFlyout, (0, _extends2.default)({
     onClose: handleClose,

package/test-env/components/flyout/sessions/flyout_reducer.js

@@ -65,8 +65,7 @@ function flyoutReducer(state, action) {
         var _state$activeFlyoutGr, _state$activeFlyoutGr2;
         var _action$payload = action.payload,
           size = _action$payload.size,
-          flyoutProps = _action$payload.flyoutProps,
-          onUnmount = _action$payload.onUnmount;
+          flyoutProps = _action$payload.flyoutProps;
         var newHistory = (0, _toConsumableArray2.default)(state.history);
         if (state.activeFlyoutGroup) {
           newHistory.push(state.activeFlyoutGroup);
@@ -80,8 +79,6 @@ function flyoutReducer(state, action) {
             mainFlyoutProps: flyoutProps,
             childFlyoutProps: {}
           },
-          mainOnUnmount: onUnmount,
-          childOnUnmount: undefined,
           meta: action.payload.meta !== undefined ? ((_state$activeFlyoutGr = state.activeFlyoutGroup) === null || _state$activeFlyoutGr === void 0 ? void 0 : _state$activeFlyoutGr.meta) !== undefined ? _objectSpread(_objectSpread({}, state.activeFlyoutGroup.meta), action.payload.meta) : action.payload.meta : (_state$activeFlyoutGr2 = state.activeFlyoutGroup) === null || _state$activeFlyoutGr2 === void 0 ? void 0 : _state$activeFlyoutGr2.meta
         };
         return {
@@ -97,15 +94,13 @@ function flyoutReducer(state, action) {
         }
         var _action$payload2 = action.payload,
           _size = _action$payload2.size,
-          _flyoutProps = _action$payload2.flyoutProps,
-          _onUnmount = _action$payload2.onUnmount;
+          _flyoutProps = _action$payload2.flyoutProps;
         var updatedActiveGroup = _objectSpread(_objectSpread({}, state.activeFlyoutGroup), {}, {
           isChildOpen: true,
           config: _objectSpread(_objectSpread({}, state.activeFlyoutGroup.config), {}, {
             childSize: _size,
             childFlyoutProps: _flyoutProps
           }),
-          childOnUnmount: _onUnmount,
           meta: action.payload.meta !== undefined ? state.activeFlyoutGroup.meta !== undefined ? _objectSpread(_objectSpread({}, state.activeFlyoutGroup.meta), action.payload.meta) : action.payload.meta : state.activeFlyoutGroup.meta
         });
         return {
@@ -134,8 +129,6 @@ function flyoutReducer(state, action) {
             mainFlyoutProps: main.flyoutProps,
             childFlyoutProps: child.flyoutProps
           },
-          mainOnUnmount: main.onUnmount,
-          childOnUnmount: child.onUnmount,
           meta: meta
         };
         return {
@@ -145,18 +138,15 @@ function flyoutReducer(state, action) {
       }
     case 'CLOSE_CHILD_FLYOUT':
       {
-        var _state$activeFlyoutGr3, _state$activeFlyoutGr4;
         if (!state.activeFlyoutGroup || !state.activeFlyoutGroup.isChildOpen) {
           console.warn('Cannot close child flyout: no child is open or no active group.');
           return state;
         }
-        (_state$activeFlyoutGr3 = (_state$activeFlyoutGr4 = state.activeFlyoutGroup).childOnUnmount) === null || _state$activeFlyoutGr3 === void 0 || _state$activeFlyoutGr3.call(_state$activeFlyoutGr4);
         var _updatedActiveGroup = _objectSpread(_objectSpread({}, state.activeFlyoutGroup), {}, {
           isChildOpen: false,
           config: _objectSpread(_objectSpread({}, state.activeFlyoutGroup.config), {}, {
             childFlyoutProps: {}
-          }),
-          childOnUnmount: undefined
+          })
         });
         return {
           history: state.history,
@@ -165,13 +155,7 @@ function flyoutReducer(state, action) {
       }
     case 'GO_BACK':
       {
-        var _state$activeFlyoutGr7, _state$activeFlyoutGr8;
         if (!state.activeFlyoutGroup) return initialFlyoutState;
-        if (state.activeFlyoutGroup.isChildOpen) {
-          var _state$activeFlyoutGr5, _state$activeFlyoutGr6;
-          (_state$activeFlyoutGr5 = (_state$activeFlyoutGr6 = state.activeFlyoutGroup).childOnUnmount) === null || _state$activeFlyoutGr5 === void 0 || _state$activeFlyoutGr5.call(_state$activeFlyoutGr6);
-        }
-        (_state$activeFlyoutGr7 = (_state$activeFlyoutGr8 = state.activeFlyoutGroup).mainOnUnmount) === null || _state$activeFlyoutGr7 === void 0 || _state$activeFlyoutGr7.call(_state$activeFlyoutGr8);
 
         // Restore from history or return to initial state
         if (state.history.length > 0) {
@@ -191,14 +175,9 @@ function flyoutReducer(state, action) {
           console.warn('Cannot update config: no active flyout group.');
           return state;
         }
-        var _action$payload4 = action.payload,
-          configChanges = _action$payload4.configChanges,
-          newMainOnUnmount = _action$payload4.newMainOnUnmount,
-          newChildOnUnmount = _action$payload4.newChildOnUnmount;
+        var configChanges = action.payload.configChanges;
         var _updatedActiveGroup2 = _objectSpread(_objectSpread({}, state.activeFlyoutGroup), {}, {
-          config: _objectSpread(_objectSpread({}, state.activeFlyoutGroup.config), configChanges),
-          mainOnUnmount: newMainOnUnmount !== undefined ? newMainOnUnmount : state.activeFlyoutGroup.mainOnUnmount,
-          childOnUnmount: newChildOnUnmount !== undefined ? newChildOnUnmount : state.activeFlyoutGroup.childOnUnmount
+          config: _objectSpread(_objectSpread({}, state.activeFlyoutGroup.config), configChanges)
         });
         var finalUpdatedActiveGroup = applySizeConstraints(_updatedActiveGroup2);
         return _objectSpread(_objectSpread({}, state), {}, {

package/test-env/components/flyout/sessions/use_eui_flyout.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useEuiFlyoutSession = useEuiFlyoutSession;
+var _react = require("react");
 var _flyout_provider = require("./flyout_provider");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -27,12 +28,24 @@ var _flyout_provider = require("./flyout_provider");
 
 /**
  * Hook for accessing the flyout API
+ * @public
  */
 function useEuiFlyoutSession() {
   var _state$activeFlyoutGr, _state$activeFlyoutGr2;
   var _useEuiFlyoutSessionC = (0, _flyout_provider.useEuiFlyoutSessionContext)(),
     state = _useEuiFlyoutSessionC.state,
-    dispatch = _useEuiFlyoutSessionC.dispatch;
+    dispatch = _useEuiFlyoutSessionC.dispatch,
+    onUnmount = _useEuiFlyoutSessionC.onUnmount;
+  var isInitialMount = (0, _react.useRef)(true);
+  (0, _react.useEffect)(function () {
+    // When there is no active flyout, we should call the onUnmount callback.
+    // Ensure this is not called on the initial render, only on subsequent state changes.
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+    } else if (state.activeFlyoutGroup === null) {
+      onUnmount === null || onUnmount === void 0 || onUnmount();
+    }
+  }, [state.activeFlyoutGroup, onUnmount]);
   var openFlyout = function openFlyout(options) {
     dispatch({
       type: 'OPEN_MAIN_FLYOUT',
@@ -55,13 +68,11 @@ function useEuiFlyoutSession() {
       payload: {
         main: {
           size: options.main.size,
-          flyoutProps: options.main.flyoutProps,
-          onUnmount: options.main.onUnmount
+          flyoutProps: options.main.flyoutProps
         },
         child: {
           size: options.child.size,
-          flyoutProps: options.child.flyoutProps,
-          onUnmount: options.child.onUnmount
+          flyoutProps: options.child.flyoutProps
         },
         meta: options.meta
       }
@@ -77,23 +88,23 @@ function useEuiFlyoutSession() {
       type: 'GO_BACK'
     });
   };
-  var canGoBack = !!state.activeFlyoutGroup;
-  var isFlyoutOpen = !!((_state$activeFlyoutGr = state.activeFlyoutGroup) !== null && _state$activeFlyoutGr !== void 0 && _state$activeFlyoutGr.isMainOpen);
-  var isChildFlyoutOpen = !!((_state$activeFlyoutGr2 = state.activeFlyoutGroup) !== null && _state$activeFlyoutGr2 !== void 0 && _state$activeFlyoutGr2.isChildOpen);
   var clearHistory = function clearHistory() {
     dispatch({
       type: 'CLEAR_HISTORY'
     });
   };
+  var isFlyoutOpen = !!((_state$activeFlyoutGr = state.activeFlyoutGroup) !== null && _state$activeFlyoutGr !== void 0 && _state$activeFlyoutGr.isMainOpen);
+  var isChildFlyoutOpen = !!((_state$activeFlyoutGr2 = state.activeFlyoutGroup) !== null && _state$activeFlyoutGr2 !== void 0 && _state$activeFlyoutGr2.isChildOpen);
+  var canGoBack = !!state.history.length;
   return {
     openFlyout: openFlyout,
     openChildFlyout: openChildFlyout,
     openFlyoutGroup: openFlyoutGroup,
     closeChildFlyout: closeChildFlyout,
     goBack: goBack,
-    canGoBack: canGoBack,
+    clearHistory: clearHistory,
     isFlyoutOpen: isFlyoutOpen,
     isChildFlyoutOpen: isChildFlyoutOpen,
-    clearHistory: clearHistory
+    canGoBack: canGoBack
   };
 }

package/test-env/components/form/field_number/field_number.styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiFieldNumberStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../../services");
 var _form = require("../form.styles");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -16,9 +17,11 @@ var _form = require("../form.styles");
 
 var euiFieldNumberStyles = exports.euiFieldNumberStyles = function euiFieldNumberStyles(euiThemeContext) {
   var colorMode = euiThemeContext.colorMode;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
+  var invalidStyles = isRefreshVariant ? "\n      &:is(:invalid, [aria-invalid='true']):not(\n        .euiFormControlLayoutDelimited__input, :focus\n      ) {\n          ".concat(formStyles.invalid, "\n        }\n    ") : "\n      /* Account for native validity detection as well via [aria-invalid=\"true\"] */\n      &:is(:invalid, [aria-invalid='true']) {\n        ".concat(formStyles.invalid, "\n      }\n    ");
   return {
-    euiFieldNumber: /*#__PURE__*/(0, _react.css)(formStyles.shared, "color-scheme:", colorMode === 'DARK' ? 'dark' : 'light', ";&:is(:invalid, [aria-invalid='true']){", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldNumber;"),
+    euiFieldNumber: /*#__PURE__*/(0, _react.css)(formStyles.shared, "color-scheme:", colorMode === 'DARK' ? 'dark' : 'light', ";", invalidStyles, " &:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldNumber;"),
     // Skip the css() on the default height to avoid generating a className
     uncompressed: formStyles.uncompressed,
     compressed: /*#__PURE__*/(0, _react.css)(formStyles.compressed, ";label:compressed;"),

package/test-env/components/form/field_text/field_text.styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiFieldTextStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../../services");
 var _form = require("../form.styles");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -15,9 +16,11 @@ var _form = require("../form.styles");
  */
 
 var euiFieldTextStyles = exports.euiFieldTextStyles = function euiFieldTextStyles(euiThemeContext) {
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
+  var invalidStyles = isRefreshVariant ? "\n      &:is(:invalid, [aria-invalid='true']):not(\n        .euiFormControlLayoutDelimited__input, :focus\n      ) {\n          ".concat(formStyles.invalid, "\n        }\n    ") : "\n      &:is(:invalid){\n        ".concat(formStyles.invalid, "\n      }\n    ");
   return {
-    euiFieldText: /*#__PURE__*/(0, _react.css)(formStyles.shared, " &:invalid{", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&[readOnly]{", formStyles.readOnly, ";}&:disabled{", formStyles.disabled, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldText;"),
+    euiFieldText: /*#__PURE__*/(0, _react.css)(formStyles.shared, " ", invalidStyles, " &:focus{", formStyles.focus, ";}&[readOnly]{", formStyles.readOnly, ";}&:disabled{", formStyles.disabled, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldText;"),
     // Skip the css() on the default height to avoid generating a className
     uncompressed: formStyles.uncompressed,
     compressed: /*#__PURE__*/(0, _react.css)(formStyles.compressed, ";label:compressed;"),