@elastic/eui 105.0.0 → 106.0.0

package/optimize/es/components/date_picker/date_picker_range.styles.js

@@ -10,8 +10,14 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { css } from '@emotion/react';
 import { euiShadowMedium } from '@elastic/eui-theme-common';
 import { logicalCSS } from '../../global_styling';
-export var euiDatePickerRangeStyles = {
-  euiDatePickerRange: /*#__PURE__*/css(".euiPopover,.react-datepicker__input-container,.euiDatePicker{", logicalCSS('height', '100%'), ";}.euiPopover{flex:1;};label:euiDatePickerRange;")
+import { isEuiThemeRefreshVariant } from '../../services';
+import { disableFormControlHoverStyles } from '../form/form.styles';
+export var euiDatePickerRangeStyles = function euiDatePickerRangeStyles(euiThemeContext) {
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
+  var refreshStyles = "\n      .euiPopover:last-child {\n        ".concat(logicalCSS('border-top-right-radius', 'inherit'), "\n        ").concat(logicalCSS('border-bottom-right-radius', 'inherit'), "\n\n        * {\n          ").concat(logicalCSS('border-top-right-radius', 'inherit'), "\n          ").concat(logicalCSS('border-bottom-right-radius', 'inherit'), "\n        }\n      }\n    ");
+  return {
+    euiDatePickerRange: /*#__PURE__*/css(".euiPopover,.react-datepicker__input-container,.euiDatePicker{", logicalCSS('height', '100%'), ";}.euiPopover{flex:1;}", isRefreshVariant && refreshStyles, ";;label:euiDatePickerRange;")
+  };
 };
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "bicgs9-noShadow",
@@ -23,6 +29,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 export var euiDatePickerRangeInlineStyles = function euiDatePickerRangeInlineStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = 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,
@@ -32,12 +39,12 @@ export var euiDatePickerRangeInlineStyles = function euiDatePickerRangeInlineSty
     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__*/css(".euiFormControlLayoutDelimited{", logicalCSS('height', 'auto'), " ", logicalCSS('width', 'fit-content'), " ", 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;", logicalCSS('height', 'auto'), " ", logicalCSS('padding-bottom', euiTheme.size.s), ";}}.react-datepicker{position:relative;};label:euiDatePickerRangeInline;"),
+    euiDatePickerRangeInline: /*#__PURE__*/css(".euiFormControlLayoutDelimited{", logicalCSS('height', 'auto'), " ", logicalCSS('width', 'fit-content'), " ", 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;", logicalCSS('height', 'auto'), " ", logicalCSS('padding-bottom', euiTheme.size.s), ";}}.react-datepicker{position:relative;};label:euiDatePickerRangeInline;"),
     responsive: /*#__PURE__*/css(containerQuery(268), ";;label:responsive;"),
     responsiveWithTimeSelect: /*#__PURE__*/css(containerQuery(374), ";;label:responsiveWithTimeSelect;"),
     shadow: /*#__PURE__*/css(".euiFormControlLayoutDelimited{", 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(disableFormControlHoverStyles(), "\n\n          .euiFormControlLayout__childrenWrapper {\n            box-shadow: none;\n            ").concat(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/optimize/es/components/date_picker/super_date_picker/super_date_picker.styles.js

@@ -8,10 +8,10 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { makeHighContrastColor } from '../../../services';
+import { isEuiThemeRefreshVariant, makeHighContrastColor } from '../../../services';
 import { euiFontSize, euiMaxBreakpoint, logicalCSS, mathWithUnits } from '../../../global_styling';
 import { highContrastModeStyles } from '../../../global_styling/functions/high_contrast';
-import { euiFormVariables, euiFormControlDefaultShadow, euiFormControlInvalidStyles, euiFormControlDisabledStyles, euiFormControlShowBackgroundUnderline } from '../../form/form.styles';
+import { euiFormVariables, euiFormControlDefaultShadow, euiFormControlInvalidStyles, euiFormControlDisabledStyles, euiFormControlShowBackgroundLine, euiFormControlFocusStyles, euiFormControlHighlightBorderStyles } from '../../form/form.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "1e4qgxg-euiSuperDatePicker__range",
   styles: "flex-grow:1;overflow:hidden;label:euiSuperDatePicker__range;"
@@ -22,6 +22,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 export var euiSuperDatePickerStyles = function euiSuperDatePickerStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   var forms = euiFormVariables(euiThemeContext);
   var inputWidth = euiTheme.base * 30;
   var buttonWidth = euiTheme.base * 7; // @see _button_display.styles.ts
@@ -41,6 +42,18 @@ export var euiSuperDatePickerStyles = function euiSuperDatePickerStyles(euiTheme
   // Needs updating colors
   var needsUpdatingBackgroundColor = euiTheme.components.superDatePickerBackgroundSuccees;
   var needsUpdatingTextColor = 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(logicalCSS('border-top-left-radius', 'inherit'), "\n          ").concat(logicalCSS('border-bottom-left-radius', 'inherit'), "\n        }\n\n        &:last-child {\n          ").concat(logicalCSS('border-top-right-radius', 'inherit'), "\n          ").concat(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(euiFormControlFocusStyles(euiThemeContext), "\n    ") : "\n      --euiFormControlStateColor: ".concat(euiTheme.colors.primary, ";\n      ").concat(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(euiFormControlInvalidStyles(euiThemeContext), "\n      }\n\n      .euiDatePopoverButton:focus,\n      .euiPopover-isOpen .euiDatePopoverButton {\n        ").concat(euiFormControlFocusStyles(euiThemeContext), "\n      }\n    ") : "\n      ".concat(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(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(euiFormControlFocusStyles(euiThemeContext), "\n    ") : "\n      --euiFormControlStateColor: ".concat(euiTheme.colors.success, ";\n      ").concat(euiFormControlShowBackgroundLine(euiThemeContext, euiTheme.colors.success), "\n\n      ").concat(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(euiFormControlDefaultShadow(euiThemeContext), "\n      \n      ").concat(highContrastModeStyles(euiThemeContext, {
+    preferred: "\n          border: none;\n        "
+  }), "\n\n      &:focus {\n        ").concat(euiFormControlFocusStyles(euiThemeContext), "\n      }\n    ");
   return {
     euiSuperDatePicker: /*#__PURE__*/css("display:flex;gap:", gap, ";", logicalCSS('max-width', '100%'), " ", euiMaxBreakpoint(euiThemeContext, 'm'), "{", logicalCSS('width', '100%'), ";};label:euiSuperDatePicker;"),
     widths: {
@@ -65,27 +78,23 @@ export var euiSuperDatePickerStyles = function euiSuperDatePickerStyles(euiTheme
     isQuickSelectOnly: /*#__PURE__*/css(logicalCSS('min-width', 0), ".euiFormControlLayout__prepend{", logicalCSS('max-width', 'none'), ";};label:isQuickSelectOnly;"),
     euiSuperDatePicker__range: _ref,
     euiSuperDatePicker__rangeInput: /*#__PURE__*/css("flex-grow:1;", logicalCSS('width', 'auto'), " overflow:hidden;;label:euiSuperDatePicker__rangeInput;"),
-    euiSuperDatePicker__prettyFormat: /*#__PURE__*/css(_buttonStyles(euiThemeContext), " text-align:start;;label:euiSuperDatePicker__prettyFormat;"),
+    euiSuperDatePicker__prettyFormat: /*#__PURE__*/css(_buttonStyles(euiThemeContext), " text-align:start;", isRefreshVariant && prettyFormatStyles, ";;label:euiSuperDatePicker__prettyFormat;"),
     // Form states
     states: {
-      euiSuperDatePicker__formControlLayout: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{", euiFormControlDefaultShadow(euiThemeContext), " ", highContrastModeStyles(euiThemeContext, {
+      euiSuperDatePicker__formControlLayout: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{--euiFormControlStateHoverColor:", forms.borderHovered, ";", euiFormControlDefaultShadow(euiThemeContext), " ", highContrastModeStyles(euiThemeContext, {
         none: 'box-shadow: none;',
         preferred: 'border: none;'
-      }), ";};label:euiSuperDatePicker__formControlLayout;"),
-      default: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{color:", forms.textColor, ";background-color:", forms.backgroundColor, ";}.euiDatePopoverButton{", euiFormControlDefaultShadow(euiThemeContext, {
+      }), " ", isRefreshVariant && formLayoutStyles, ";};label:euiSuperDatePicker__formControlLayout;"),
+      default: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{color:", forms.textColor, ";background-color:", forms.backgroundColor, ";}.euiDatePopoverButton{--euiFormControlStateHoverColor:", forms.borderHovered, ";", !isRefreshVariant && euiFormControlDefaultShadow(euiThemeContext, {
         withBorder: false,
         withBackgroundColor: false
-      }), ";}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.primary, ";", euiFormControlShowBackgroundUnderline(euiThemeContext, euiTheme.colors.primary), ";};label:default;"),
+      }), " box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{", popoverButtonFocusStyles, ";};label:default;"),
       disabled: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{", euiFormControlDisabledStyles(euiThemeContext), ";};label:disabled;"),
-      invalid: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{color:", euiTheme.colors.textDanger, ";background-color:", forms.backgroundColor, ";", euiFormControlInvalidStyles(euiThemeContext), ";};label:invalid;"),
-      needsUpdating: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{color:", needsUpdatingTextColor, ";background-color:", needsUpdatingBackgroundColor, ";}.euiFormControlLayoutDelimited__delimiter{color:inherit;}.euiDatePopoverButton{", euiFormControlDefaultShadow(euiThemeContext, {
+      invalid: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{color:", euiTheme.colors.textDanger, ";background-color:", forms.backgroundColor, ";", invalidStyles, ";};label:invalid;"),
+      needsUpdating: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{color:", needsUpdatingTextColor, ";background-color:", needsUpdatingBackgroundColor, ";", isRefreshVariant && needsUpdatingStyles, ";}.euiFormControlLayoutDelimited__delimiter{color:inherit;}.euiDatePopoverButton{", euiFormControlDefaultShadow(euiThemeContext, {
         withBorder: false,
         withBackgroundColor: false
-      }), ";}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.success, ";", euiFormControlShowBackgroundUnderline(euiThemeContext, euiTheme.colors.success), ";}", 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/optimize/es/components/flyout/_flyout_close_button.styles.js

@@ -1,3 +1,4 @@
+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
@@ -10,11 +11,19 @@ import { css } from '@emotion/react';
 import { euiShadowXLarge } from '@elastic/eui-theme-common';
 import { euiMaxBreakpoint, euiMinBreakpoint, logicalCSS } from '../../global_styling';
 import { FLYOUT_BREAKPOINT } from './flyout.styles';
+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__
+};
 export var euiFlyoutCloseButtonStyles = function euiFlyoutCloseButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiFlyout__closeButton: /*#__PURE__*/css("position:absolute;", logicalCSS('right', euiTheme.size.s), " ", logicalCSS('top', euiTheme.size.s), " z-index:3;;label:euiFlyout__closeButton;"),
-    inside: /*#__PURE__*/css("background-color:", euiTheme.components.flyoutCloseButtonInsideBackground, ";;label:inside;"),
+    inside: _ref,
     outside: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext, {
       borderAllInHighContrastMode: true
     }), "animation:none!important;;label:outside;"),

package/optimize/es/components/flyout/flyout_child.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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
@@ -28,6 +28,8 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
  */
 export var 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,
@@ -120,7 +122,7 @@ export var EuiFlyoutChild = function EuiFlyoutChild(_ref) {
   var styles = useEuiMemoizedStyles(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 ___EmotionJSX(EuiFocusTrap, {
     returnFocus: function returnFocus() {
       if (parentFlyoutRef !== null && parentFlyoutRef !== void 0 && parentFlyoutRef.current) {
@@ -147,7 +149,6 @@ export var EuiFlyoutChild = function EuiFlyoutChild(_ref) {
     className: "euiScreenReaderOnly"
   }, flyoutTitleText), !hideCloseButton && ___EmotionJSX(EuiFlyoutCloseButton, {
     className: "euiFlyoutChild__closeButton",
-    css: styles.closeButton,
     onClose: handleClose,
     side: "right",
     closeButtonPosition: "inside",

package/optimize/es/components/flyout/flyout_child.styles.js

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

package/optimize/es/components/flyout/sessions/flyout_provider.js

@@ -39,7 +39,8 @@ export var useEuiFlyoutSessionContext = function useEuiFlyoutSessionContext() {
 export var EuiFlyoutSessionProvider = function EuiFlyoutSessionProvider(_ref) {
   var children = _ref.children,
     renderMainFlyoutContent = _ref.renderMainFlyoutContent,
-    renderChildFlyoutContent = _ref.renderChildFlyoutContent;
+    renderChildFlyoutContent = _ref.renderChildFlyoutContent,
+    onUnmount = _ref.onUnmount;
   var _useReducer = useReducer(flyoutReducer, initialFlyoutState),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],
@@ -58,29 +59,13 @@ export var EuiFlyoutSessionProvider = function EuiFlyoutSessionProvider(_ref) {
   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.');
     }
@@ -91,7 +76,8 @@ export var EuiFlyoutSessionProvider = function EuiFlyoutSessionProvider(_ref) {
   return ___EmotionJSX(EuiFlyoutSessionContext.Provider, {
     value: {
       state: state,
-      dispatch: dispatch
+      dispatch: dispatch,
+      onUnmount: onUnmount
     }
   }, children, (activeFlyoutGroup === null || activeFlyoutGroup === void 0 ? void 0 : activeFlyoutGroup.isMainOpen) && ___EmotionJSX(EuiFlyout, _extends({
     onClose: handleClose,

package/optimize/es/components/flyout/sessions/flyout_reducer.js

@@ -57,8 +57,7 @@ export 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 = _toConsumableArray(state.history);
         if (state.activeFlyoutGroup) {
           newHistory.push(state.activeFlyoutGroup);
@@ -72,8 +71,6 @@ export 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 {
@@ -89,15 +86,13 @@ export 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 {
@@ -126,8 +121,6 @@ export function flyoutReducer(state, action) {
             mainFlyoutProps: main.flyoutProps,
             childFlyoutProps: child.flyoutProps
           },
-          mainOnUnmount: main.onUnmount,
-          childOnUnmount: child.onUnmount,
           meta: meta
         };
         return {
@@ -137,18 +130,15 @@ export 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,
@@ -157,13 +147,7 @@ export 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) {
@@ -183,14 +167,9 @@ export 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/optimize/es/components/flyout/sessions/use_eui_flyout.js

@@ -6,6 +6,7 @@
  * Side Public License, v 1.
  */
 
+import { useEffect, useRef } from 'react';
 import { useEuiFlyoutSessionContext } from './flyout_provider';
 
 /**
@@ -22,12 +23,24 @@ import { useEuiFlyoutSessionContext } from './flyout_provider';
 
 /**
  * Hook for accessing the flyout API
+ * @public
  */
 export function useEuiFlyoutSession() {
   var _state$activeFlyoutGr, _state$activeFlyoutGr2;
   var _useEuiFlyoutSessionC = useEuiFlyoutSessionContext(),
     state = _useEuiFlyoutSessionC.state,
-    dispatch = _useEuiFlyoutSessionC.dispatch;
+    dispatch = _useEuiFlyoutSessionC.dispatch,
+    onUnmount = _useEuiFlyoutSessionC.onUnmount;
+  var isInitialMount = useRef(true);
+  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',
@@ -50,13 +63,11 @@ export 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
       }
@@ -72,23 +83,23 @@ export 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/optimize/es/components/form/field_number/field_number.styles.js

@@ -7,12 +7,15 @@
  */
 
 import { css } from '@emotion/react';
+import { isEuiThemeRefreshVariant } from '../../../services';
 import { euiFormControlStyles } from '../form.styles';
 export var euiFieldNumberStyles = function euiFieldNumberStyles(euiThemeContext) {
   var colorMode = euiThemeContext.colorMode;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   var formStyles = 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__*/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__*/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__*/css(formStyles.compressed, ";label:compressed;"),

package/optimize/es/components/form/field_text/field_text.styles.js

@@ -7,11 +7,14 @@
  */
 
 import { css } from '@emotion/react';
+import { isEuiThemeRefreshVariant } from '../../../services';
 import { euiFormControlStyles } from '../form.styles';
 export var euiFieldTextStyles = function euiFieldTextStyles(euiThemeContext) {
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   var formStyles = 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__*/css(formStyles.shared, " &:invalid{", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&[readOnly]{", formStyles.readOnly, ";}&:disabled{", formStyles.disabled, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldText;"),
+    euiFieldText: /*#__PURE__*/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__*/css(formStyles.compressed, ";label:compressed;"),