@elastic/eui 112.0.0-snapshot.1769177525113 → 112.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/es/components/flyout/flyout.component.js +31 -26
  2. package/eui.d.ts +22 -22
  3. package/i18ntokens.json +448 -448
  4. package/lib/components/flyout/flyout.component.js +38 -33
  5. package/optimize/es/components/flyout/flyout.component.js +31 -26
  6. package/optimize/lib/components/flyout/flyout.component.js +38 -33
  7. package/package.json +4 -5
  8. package/test-env/components/flyout/flyout.component.js +38 -33
package/lib/components/flyout/flyout.component.js CHANGED
@@ -9,6 +9,7 @@ var _react = _interopRequireWildcard(require("react"));
9
9
  var _classnames = _interopRequireDefault(require("classnames"));
10
10
  var _services = require("../../services");
11
11
  var _manager = require("./manager");
12
+ var _const = require("./manager/const");
12
13
  var _focus_trap = require("../focus_trap");
13
14
  var _i18n = require("../i18n");
14
15
  var _resize_observer = require("../observer/resize_observer");
@@ -16,7 +17,7 @@ var _accessibility = require("../accessibility");
16
17
  var _flyout_close_button = require("./_flyout_close_button");
17
18
  var _flyout = require("./flyout.styles");
18
19
  var _component_defaults = require("../provider/component_defaults");
19
- var _const = require("./const");
20
+ var _const2 = require("./const");
20
21
  var _hooks = require("./hooks");
21
22
  var _flyout_menu = require("./flyout_menu");
22
23
  var _flyout_overlay = require("./_flyout_overlay");
@@ -73,11 +74,11 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
73
74
  _usePropsWithComponen4 = _usePropsWithComponen.ownFocus,
74
75
  ownFocus = _usePropsWithComponen4 === void 0 ? true : _usePropsWithComponen4,
75
76
  _usePropsWithComponen5 = _usePropsWithComponen.side,
76
- side = _usePropsWithComponen5 === void 0 ? _const.DEFAULT_SIDE : _usePropsWithComponen5,
77
+ side = _usePropsWithComponen5 === void 0 ? _const2.DEFAULT_SIDE : _usePropsWithComponen5,
77
78
  _usePropsWithComponen6 = _usePropsWithComponen.size,
78
- _size = _usePropsWithComponen6 === void 0 ? _const.DEFAULT_SIZE : _usePropsWithComponen6,
79
+ _size = _usePropsWithComponen6 === void 0 ? _const2.DEFAULT_SIZE : _usePropsWithComponen6,
79
80
  _usePropsWithComponen7 = _usePropsWithComponen.paddingSize,
80
- paddingSize = _usePropsWithComponen7 === void 0 ? _const.DEFAULT_PADDING_SIZE : _usePropsWithComponen7,
81
+ paddingSize = _usePropsWithComponen7 === void 0 ? _const2.DEFAULT_PADDING_SIZE : _usePropsWithComponen7,
81
82
  _usePropsWithComponen8 = _usePropsWithComponen.maxWidth,
82
83
  maxWidth = _usePropsWithComponen8 === void 0 ? false : _usePropsWithComponen8,
83
84
  style = _usePropsWithComponen.style,
@@ -85,10 +86,10 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
85
86
  hasChildBackground = _usePropsWithComponen9 === void 0 ? false : _usePropsWithComponen9,
86
87
  maskProps = _usePropsWithComponen.maskProps,
87
88
  _usePropsWithComponen10 = _usePropsWithComponen.type,
88
- type = _usePropsWithComponen10 === void 0 ? _const.DEFAULT_TYPE : _usePropsWithComponen10,
89
+ type = _usePropsWithComponen10 === void 0 ? _const2.DEFAULT_TYPE : _usePropsWithComponen10,
89
90
  outsideClickCloses = _usePropsWithComponen.outsideClickCloses,
90
91
  _usePropsWithComponen11 = _usePropsWithComponen.pushMinBreakpoint,
91
- pushMinBreakpoint = _usePropsWithComponen11 === void 0 ? _const.DEFAULT_PUSH_MIN_BREAKPOINT : _usePropsWithComponen11,
92
+ pushMinBreakpoint = _usePropsWithComponen11 === void 0 ? _const2.DEFAULT_PUSH_MIN_BREAKPOINT : _usePropsWithComponen11,
92
93
  _usePropsWithComponen12 = _usePropsWithComponen.pushAnimation,
93
94
  pushAnimation = _usePropsWithComponen12 === void 0 ? false : _usePropsWithComponen12,
94
95
  _focusTrapProps = _usePropsWithComponen.focusTrapProps,
@@ -165,6 +166,31 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
165
166
  var _useResizeObserver = (0, _resize_observer.useResizeObserver)(isPushed ? resizeRef : null, 'width'),
166
167
  width = _useResizeObserver.width;
167
168
 
169
+ // Memoize flyout identification and relationships to prevent race conditions
170
+ var flyoutIdentity = (0, _react.useMemo)(function () {
171
+ if (!flyoutId || !currentSession) {
172
+ return {
173
+ isMainFlyout: false,
174
+ siblingFlyoutId: null,
175
+ hasValidSession: false,
176
+ sessionForWidth: null
177
+ };
178
+ }
179
+ var siblingFlyoutId = currentSession.mainFlyoutId === flyoutId ? currentSession.childFlyoutId : currentSession.mainFlyoutId;
180
+ return {
181
+ isMainFlyout: currentSession.mainFlyoutId === flyoutId,
182
+ siblingFlyoutId: siblingFlyoutId,
183
+ hasValidSession: true,
184
+ sessionForWidth: currentSession
185
+ };
186
+ }, [flyoutId, currentSession]);
187
+
188
+ // Destructure for easier use
189
+ var siblingFlyoutId = flyoutIdentity.siblingFlyoutId,
190
+ isMainFlyout = flyoutIdentity.isMainFlyout;
191
+ var _siblingFlyoutWidth = (0, _manager.useFlyoutWidth)(siblingFlyoutId);
192
+ var siblingFlyoutWidth = layoutMode === _const.LAYOUT_MODE_STACKED ? 0 : _siblingFlyoutWidth;
193
+
168
194
  /**
169
195
  * Effect for adding push padding to body. Using useLayoutEffect to ensure
170
196
  * padding changes happen synchronously before child components render -
@@ -179,12 +205,13 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
179
205
  var paddingSide = side === 'left' ? 'paddingInlineStart' : 'paddingInlineEnd';
180
206
  var cssVarName = "--euiPushFlyoutOffset".concat(side === 'left' ? 'InlineStart' : 'InlineEnd');
181
207
  var managerSide = side === 'left' ? 'left' : 'right';
208
+ var paddingWidth = layoutMode === _const.LAYOUT_MODE_STACKED && isMainFlyout && _siblingFlyoutWidth ? _siblingFlyoutWidth : width;
182
209
  if (shouldApplyPadding) {
183
- document.body.style[paddingSide] = "".concat(width, "px");
184
- setGlobalCSSVariables(_defineProperty({}, cssVarName, "".concat(width, "px")));
210
+ document.body.style[paddingSide] = "".concat(paddingWidth, "px");
211
+ setGlobalCSSVariables(_defineProperty({}, cssVarName, "".concat(paddingWidth, "px")));
185
212
  // Update manager state if in managed context
186
213
  if (isInManagedContext && flyoutManagerRef.current) {
187
- flyoutManagerRef.current.setPushPadding(managerSide, width);
214
+ flyoutManagerRef.current.setPushPadding(managerSide, paddingWidth);
188
215
  }
189
216
  } else {
190
217
  // Explicitly remove padding when this push flyout becomes inactive
@@ -205,7 +232,7 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
205
232
  flyoutManagerRef.current.setPushPadding(managerSide, 0);
206
233
  }
207
234
  };
208
- }, [isPushed, isInManagedContext, isActiveManagedFlyout, setGlobalCSSVariables, side, width]);
235
+ }, [isPushed, isInManagedContext, isActiveManagedFlyout, setGlobalCSSVariables, side, width, layoutMode, isMainFlyout, _siblingFlyoutWidth]);
209
236
 
210
237
  /**
211
238
  * This class doesn't actually do anything by EUI, but is nice to add for consumers (JIC)
@@ -217,27 +244,6 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
217
244
  document.body.classList.remove('euiBody--hasFlyout');
218
245
  };
219
246
  }, []);
220
-
221
- // Memoize flyout identification and relationships to prevent race conditions
222
- var flyoutIdentity = (0, _react.useMemo)(function () {
223
- if (!flyoutId || !currentSession) {
224
- return {
225
- isMainFlyout: false,
226
- siblingFlyoutId: null,
227
- hasValidSession: false,
228
- sessionForWidth: null
229
- };
230
- }
231
- var siblingFlyoutId = currentSession.mainFlyoutId === flyoutId ? currentSession.childFlyoutId : currentSession.mainFlyoutId;
232
- return {
233
- siblingFlyoutId: siblingFlyoutId,
234
- hasValidSession: true,
235
- sessionForWidth: currentSession
236
- };
237
- }, [flyoutId, currentSession]);
238
-
239
- // Destructure for easier use
240
- var siblingFlyoutId = flyoutIdentity.siblingFlyoutId;
241
247
  var hasChildFlyout = (currentSession === null || currentSession === void 0 ? void 0 : currentSession.childFlyoutId) != null;
242
248
  var isChildFlyout = isInManagedContext && hasChildFlyout && (currentSession === null || currentSession === void 0 ? void 0 : currentSession.childFlyoutId) === id;
243
249
  var shouldCloseOnEscape = (0, _react.useMemo)(function () {
@@ -269,7 +275,6 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
269
275
  onClose(event);
270
276
  }
271
277
  }, [onClose, isPushed, shouldCloseOnEscape]);
272
- var siblingFlyoutWidth = (0, _manager.useFlyoutWidth)(siblingFlyoutId);
273
278
  var managedFlyoutIndex = currentZIndexRef.current;
274
279
  if (isInManagedContext && currentSession) {
275
280
  managedFlyoutIndex = currentSession.zIndex;
@@ -291,7 +296,7 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
291
296
  return _objectSpread(_objectSpread({}, style), composedStyles);
292
297
  }, [style, size, layoutMode, siblingFlyoutId, siblingFlyoutWidth, maxWidth, flyoutZIndex]);
293
298
  var styles = (0, _services.useEuiMemoizedStyles)(_flyout.euiFlyoutStyles);
294
- var cssStyles = [styles.euiFlyout, styles.paddingSizes[paddingSize], (0, _const.isEuiFlyoutSizeNamed)(size) && styles[size], maxWidth === false && styles.noMaxWidth, isPushed ? styles.push.push : styles.overlay.overlay, isPushed ? styles.push[side] : styles.overlay[side], isPushed && !pushAnimation && styles.push.noAnimation, styles[side]];
299
+ var cssStyles = [styles.euiFlyout, styles.paddingSizes[paddingSize], (0, _const2.isEuiFlyoutSizeNamed)(size) && styles[size], maxWidth === false && styles.noMaxWidth, isPushed ? styles.push.push : styles.overlay.overlay, isPushed ? styles.push[side] : styles.overlay[side], isPushed && !pushAnimation && styles.push.noAnimation, styles[side]];
295
300
  var classes = (0, _classnames.default)('euiFlyout', isChildFlyout && hasChildBackground && 'euiFlyout--hasChildBackground', className);
296
301
  var flyoutToggle = (0, _react.useRef)(document.activeElement);
297
302
  var _useState3 = (0, _react.useState)([]),
package/optimize/es/components/flyout/flyout.component.js CHANGED
@@ -21,6 +21,7 @@ import React, { useEffect, useLayoutEffect, useRef, useMemo, useCallback, useSta
21
21
  import classnames from 'classnames';
22
22
  import { keys, EuiWindowEvent, useCombinedRefs, useEuiMemoizedStyles, useGeneratedHtmlId, useEuiThemeCSSVariables, focusTrapPubSub } from '../../services';
23
23
  import { useCurrentSession, useIsInManagedFlyout, useFlyoutLayoutMode, useFlyoutId, useFlyoutWidth, useIsFlyoutActive, useFlyoutManager, useHasPushPadding } from './manager';
24
+ import { LAYOUT_MODE_STACKED } from './manager/const';
24
25
  import { EuiFocusTrap } from '../focus_trap';
25
26
  import { EuiI18n } from '../i18n';
26
27
  import { useResizeObserver } from '../observer/resize_observer';
@@ -146,6 +147,31 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
146
147
  var _useResizeObserver = useResizeObserver(isPushed ? resizeRef : null, 'width'),
147
148
  width = _useResizeObserver.width;
148
149
 
150
+ // Memoize flyout identification and relationships to prevent race conditions
151
+ var flyoutIdentity = useMemo(function () {
152
+ if (!flyoutId || !currentSession) {
153
+ return {
154
+ isMainFlyout: false,
155
+ siblingFlyoutId: null,
156
+ hasValidSession: false,
157
+ sessionForWidth: null
158
+ };
159
+ }
160
+ var siblingFlyoutId = currentSession.mainFlyoutId === flyoutId ? currentSession.childFlyoutId : currentSession.mainFlyoutId;
161
+ return {
162
+ isMainFlyout: currentSession.mainFlyoutId === flyoutId,
163
+ siblingFlyoutId: siblingFlyoutId,
164
+ hasValidSession: true,
165
+ sessionForWidth: currentSession
166
+ };
167
+ }, [flyoutId, currentSession]);
168
+
169
+ // Destructure for easier use
170
+ var siblingFlyoutId = flyoutIdentity.siblingFlyoutId,
171
+ isMainFlyout = flyoutIdentity.isMainFlyout;
172
+ var _siblingFlyoutWidth = useFlyoutWidth(siblingFlyoutId);
173
+ var siblingFlyoutWidth = layoutMode === LAYOUT_MODE_STACKED ? 0 : _siblingFlyoutWidth;
174
+
149
175
  /**
150
176
  * Effect for adding push padding to body. Using useLayoutEffect to ensure
151
177
  * padding changes happen synchronously before child components render -
@@ -160,12 +186,13 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
160
186
  var paddingSide = side === 'left' ? 'paddingInlineStart' : 'paddingInlineEnd';
161
187
  var cssVarName = "--euiPushFlyoutOffset".concat(side === 'left' ? 'InlineStart' : 'InlineEnd');
162
188
  var managerSide = side === 'left' ? 'left' : 'right';
189
+ var paddingWidth = layoutMode === LAYOUT_MODE_STACKED && isMainFlyout && _siblingFlyoutWidth ? _siblingFlyoutWidth : width;
163
190
  if (shouldApplyPadding) {
164
- document.body.style[paddingSide] = "".concat(width, "px");
165
- setGlobalCSSVariables(_defineProperty({}, cssVarName, "".concat(width, "px")));
191
+ document.body.style[paddingSide] = "".concat(paddingWidth, "px");
192
+ setGlobalCSSVariables(_defineProperty({}, cssVarName, "".concat(paddingWidth, "px")));
166
193
  // Update manager state if in managed context
167
194
  if (isInManagedContext && flyoutManagerRef.current) {
168
- flyoutManagerRef.current.setPushPadding(managerSide, width);
195
+ flyoutManagerRef.current.setPushPadding(managerSide, paddingWidth);
169
196
  }
170
197
  } else {
171
198
  // Explicitly remove padding when this push flyout becomes inactive
@@ -186,7 +213,7 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
186
213
  flyoutManagerRef.current.setPushPadding(managerSide, 0);
187
214
  }
188
215
  };
189
- }, [isPushed, isInManagedContext, isActiveManagedFlyout, setGlobalCSSVariables, side, width]);
216
+ }, [isPushed, isInManagedContext, isActiveManagedFlyout, setGlobalCSSVariables, side, width, layoutMode, isMainFlyout, _siblingFlyoutWidth]);
190
217
 
191
218
  /**
192
219
  * This class doesn't actually do anything by EUI, but is nice to add for consumers (JIC)
@@ -198,27 +225,6 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
198
225
  document.body.classList.remove('euiBody--hasFlyout');
199
226
  };
200
227
  }, []);
201
-
202
- // Memoize flyout identification and relationships to prevent race conditions
203
- var flyoutIdentity = useMemo(function () {
204
- if (!flyoutId || !currentSession) {
205
- return {
206
- isMainFlyout: false,
207
- siblingFlyoutId: null,
208
- hasValidSession: false,
209
- sessionForWidth: null
210
- };
211
- }
212
- var siblingFlyoutId = currentSession.mainFlyoutId === flyoutId ? currentSession.childFlyoutId : currentSession.mainFlyoutId;
213
- return {
214
- siblingFlyoutId: siblingFlyoutId,
215
- hasValidSession: true,
216
- sessionForWidth: currentSession
217
- };
218
- }, [flyoutId, currentSession]);
219
-
220
- // Destructure for easier use
221
- var siblingFlyoutId = flyoutIdentity.siblingFlyoutId;
222
228
  var hasChildFlyout = (currentSession === null || currentSession === void 0 ? void 0 : currentSession.childFlyoutId) != null;
223
229
  var isChildFlyout = isInManagedContext && hasChildFlyout && (currentSession === null || currentSession === void 0 ? void 0 : currentSession.childFlyoutId) === id;
224
230
  var shouldCloseOnEscape = useMemo(function () {
@@ -250,7 +256,6 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
250
256
  onClose(event);
251
257
  }
252
258
  }, [onClose, isPushed, shouldCloseOnEscape]);
253
- var siblingFlyoutWidth = useFlyoutWidth(siblingFlyoutId);
254
259
  var managedFlyoutIndex = currentZIndexRef.current;
255
260
  if (isInManagedContext && currentSession) {
256
261
  managedFlyoutIndex = currentSession.zIndex;
package/optimize/lib/components/flyout/flyout.component.js CHANGED
@@ -15,6 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
15
15
  var _classnames = _interopRequireDefault(require("classnames"));
16
16
  var _services = require("../../services");
17
17
  var _manager = require("./manager");
18
+ var _const = require("./manager/const");
18
19
  var _focus_trap = require("../focus_trap");
19
20
  var _i18n = require("../i18n");
20
21
  var _resize_observer = require("../observer/resize_observer");
@@ -22,7 +23,7 @@ var _accessibility = require("../accessibility");
22
23
  var _flyout_close_button = require("./_flyout_close_button");
23
24
  var _flyout = require("./flyout.styles");
24
25
  var _component_defaults = require("../provider/component_defaults");
25
- var _const = require("./const");
26
+ var _const2 = require("./const");
26
27
  var _hooks = require("./hooks");
27
28
  var _flyout_menu = require("./flyout_menu");
28
29
  var _flyout_overlay = require("./_flyout_overlay");
@@ -62,11 +63,11 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
62
63
  _usePropsWithComponen4 = _usePropsWithComponen.ownFocus,
63
64
  ownFocus = _usePropsWithComponen4 === void 0 ? true : _usePropsWithComponen4,
64
65
  _usePropsWithComponen5 = _usePropsWithComponen.side,
65
- side = _usePropsWithComponen5 === void 0 ? _const.DEFAULT_SIDE : _usePropsWithComponen5,
66
+ side = _usePropsWithComponen5 === void 0 ? _const2.DEFAULT_SIDE : _usePropsWithComponen5,
66
67
  _usePropsWithComponen6 = _usePropsWithComponen.size,
67
- _size = _usePropsWithComponen6 === void 0 ? _const.DEFAULT_SIZE : _usePropsWithComponen6,
68
+ _size = _usePropsWithComponen6 === void 0 ? _const2.DEFAULT_SIZE : _usePropsWithComponen6,
68
69
  _usePropsWithComponen7 = _usePropsWithComponen.paddingSize,
69
- paddingSize = _usePropsWithComponen7 === void 0 ? _const.DEFAULT_PADDING_SIZE : _usePropsWithComponen7,
70
+ paddingSize = _usePropsWithComponen7 === void 0 ? _const2.DEFAULT_PADDING_SIZE : _usePropsWithComponen7,
70
71
  _usePropsWithComponen8 = _usePropsWithComponen.maxWidth,
71
72
  maxWidth = _usePropsWithComponen8 === void 0 ? false : _usePropsWithComponen8,
72
73
  style = _usePropsWithComponen.style,
@@ -74,10 +75,10 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
74
75
  hasChildBackground = _usePropsWithComponen9 === void 0 ? false : _usePropsWithComponen9,
75
76
  maskProps = _usePropsWithComponen.maskProps,
76
77
  _usePropsWithComponen10 = _usePropsWithComponen.type,
77
- type = _usePropsWithComponen10 === void 0 ? _const.DEFAULT_TYPE : _usePropsWithComponen10,
78
+ type = _usePropsWithComponen10 === void 0 ? _const2.DEFAULT_TYPE : _usePropsWithComponen10,
78
79
  outsideClickCloses = _usePropsWithComponen.outsideClickCloses,
79
80
  _usePropsWithComponen11 = _usePropsWithComponen.pushMinBreakpoint,
80
- pushMinBreakpoint = _usePropsWithComponen11 === void 0 ? _const.DEFAULT_PUSH_MIN_BREAKPOINT : _usePropsWithComponen11,
81
+ pushMinBreakpoint = _usePropsWithComponen11 === void 0 ? _const2.DEFAULT_PUSH_MIN_BREAKPOINT : _usePropsWithComponen11,
81
82
  _usePropsWithComponen12 = _usePropsWithComponen.pushAnimation,
82
83
  pushAnimation = _usePropsWithComponen12 === void 0 ? false : _usePropsWithComponen12,
83
84
  _focusTrapProps = _usePropsWithComponen.focusTrapProps,
@@ -154,6 +155,31 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
154
155
  var _useResizeObserver = (0, _resize_observer.useResizeObserver)(isPushed ? resizeRef : null, 'width'),
155
156
  width = _useResizeObserver.width;
156
157
 
158
+ // Memoize flyout identification and relationships to prevent race conditions
159
+ var flyoutIdentity = (0, _react.useMemo)(function () {
160
+ if (!flyoutId || !currentSession) {
161
+ return {
162
+ isMainFlyout: false,
163
+ siblingFlyoutId: null,
164
+ hasValidSession: false,
165
+ sessionForWidth: null
166
+ };
167
+ }
168
+ var siblingFlyoutId = currentSession.mainFlyoutId === flyoutId ? currentSession.childFlyoutId : currentSession.mainFlyoutId;
169
+ return {
170
+ isMainFlyout: currentSession.mainFlyoutId === flyoutId,
171
+ siblingFlyoutId: siblingFlyoutId,
172
+ hasValidSession: true,
173
+ sessionForWidth: currentSession
174
+ };
175
+ }, [flyoutId, currentSession]);
176
+
177
+ // Destructure for easier use
178
+ var siblingFlyoutId = flyoutIdentity.siblingFlyoutId,
179
+ isMainFlyout = flyoutIdentity.isMainFlyout;
180
+ var _siblingFlyoutWidth = (0, _manager.useFlyoutWidth)(siblingFlyoutId);
181
+ var siblingFlyoutWidth = layoutMode === _const.LAYOUT_MODE_STACKED ? 0 : _siblingFlyoutWidth;
182
+
157
183
  /**
158
184
  * Effect for adding push padding to body. Using useLayoutEffect to ensure
159
185
  * padding changes happen synchronously before child components render -
@@ -168,12 +194,13 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
168
194
  var paddingSide = side === 'left' ? 'paddingInlineStart' : 'paddingInlineEnd';
169
195
  var cssVarName = "--euiPushFlyoutOffset".concat(side === 'left' ? 'InlineStart' : 'InlineEnd');
170
196
  var managerSide = side === 'left' ? 'left' : 'right';
197
+ var paddingWidth = layoutMode === _const.LAYOUT_MODE_STACKED && isMainFlyout && _siblingFlyoutWidth ? _siblingFlyoutWidth : width;
171
198
  if (shouldApplyPadding) {
172
- document.body.style[paddingSide] = "".concat(width, "px");
173
- setGlobalCSSVariables((0, _defineProperty2.default)({}, cssVarName, "".concat(width, "px")));
199
+ document.body.style[paddingSide] = "".concat(paddingWidth, "px");
200
+ setGlobalCSSVariables((0, _defineProperty2.default)({}, cssVarName, "".concat(paddingWidth, "px")));
174
201
  // Update manager state if in managed context
175
202
  if (isInManagedContext && flyoutManagerRef.current) {
176
- flyoutManagerRef.current.setPushPadding(managerSide, width);
203
+ flyoutManagerRef.current.setPushPadding(managerSide, paddingWidth);
177
204
  }
178
205
  } else {
179
206
  // Explicitly remove padding when this push flyout becomes inactive
@@ -194,7 +221,7 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
194
221
  flyoutManagerRef.current.setPushPadding(managerSide, 0);
195
222
  }
196
223
  };
197
- }, [isPushed, isInManagedContext, isActiveManagedFlyout, setGlobalCSSVariables, side, width]);
224
+ }, [isPushed, isInManagedContext, isActiveManagedFlyout, setGlobalCSSVariables, side, width, layoutMode, isMainFlyout, _siblingFlyoutWidth]);
198
225
 
199
226
  /**
200
227
  * This class doesn't actually do anything by EUI, but is nice to add for consumers (JIC)
@@ -206,27 +233,6 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
206
233
  document.body.classList.remove('euiBody--hasFlyout');
207
234
  };
208
235
  }, []);
209
-
210
- // Memoize flyout identification and relationships to prevent race conditions
211
- var flyoutIdentity = (0, _react.useMemo)(function () {
212
- if (!flyoutId || !currentSession) {
213
- return {
214
- isMainFlyout: false,
215
- siblingFlyoutId: null,
216
- hasValidSession: false,
217
- sessionForWidth: null
218
- };
219
- }
220
- var siblingFlyoutId = currentSession.mainFlyoutId === flyoutId ? currentSession.childFlyoutId : currentSession.mainFlyoutId;
221
- return {
222
- siblingFlyoutId: siblingFlyoutId,
223
- hasValidSession: true,
224
- sessionForWidth: currentSession
225
- };
226
- }, [flyoutId, currentSession]);
227
-
228
- // Destructure for easier use
229
- var siblingFlyoutId = flyoutIdentity.siblingFlyoutId;
230
236
  var hasChildFlyout = (currentSession === null || currentSession === void 0 ? void 0 : currentSession.childFlyoutId) != null;
231
237
  var isChildFlyout = isInManagedContext && hasChildFlyout && (currentSession === null || currentSession === void 0 ? void 0 : currentSession.childFlyoutId) === id;
232
238
  var shouldCloseOnEscape = (0, _react.useMemo)(function () {
@@ -258,7 +264,6 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
258
264
  onClose(event);
259
265
  }
260
266
  }, [onClose, isPushed, shouldCloseOnEscape]);
261
- var siblingFlyoutWidth = (0, _manager.useFlyoutWidth)(siblingFlyoutId);
262
267
  var managedFlyoutIndex = currentZIndexRef.current;
263
268
  if (isInManagedContext && currentSession) {
264
269
  managedFlyoutIndex = currentSession.zIndex;
@@ -280,7 +285,7 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
280
285
  return _objectSpread(_objectSpread({}, style), composedStyles);
281
286
  }, [style, size, layoutMode, siblingFlyoutId, siblingFlyoutWidth, maxWidth, flyoutZIndex]);
282
287
  var styles = (0, _services.useEuiMemoizedStyles)(_flyout.euiFlyoutStyles);
283
- var cssStyles = [styles.euiFlyout, styles.paddingSizes[paddingSize], (0, _const.isEuiFlyoutSizeNamed)(size) && styles[size], maxWidth === false && styles.noMaxWidth, isPushed ? styles.push.push : styles.overlay.overlay, isPushed ? styles.push[side] : styles.overlay[side], isPushed && !pushAnimation && styles.push.noAnimation, styles[side]];
288
+ var cssStyles = [styles.euiFlyout, styles.paddingSizes[paddingSize], (0, _const2.isEuiFlyoutSizeNamed)(size) && styles[size], maxWidth === false && styles.noMaxWidth, isPushed ? styles.push.push : styles.overlay.overlay, isPushed ? styles.push[side] : styles.overlay[side], isPushed && !pushAnimation && styles.push.noAnimation, styles[side]];
284
289
  var classes = (0, _classnames.default)('euiFlyout', isChildFlyout && hasChildBackground && 'euiFlyout--hasChildBackground', className);
285
290
  var flyoutToggle = (0, _react.useRef)(document.activeElement);
286
291
  var _useState3 = (0, _react.useState)([]),
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@elastic/eui",
3
3
  "description": "Elastic UI Component Library",
4
- "version": "112.0.0-snapshot.1769177525113",
4
+ "version": "112.1.0",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "main": "lib",
7
7
  "module": "es",
@@ -107,7 +107,7 @@
107
107
  "@cypress/webpack-dev-server": "^1.7.0",
108
108
  "@elastic/charts": "^64.1.0",
109
109
  "@elastic/datemath": "^5.0.3",
110
- "@elastic/eui-theme-borealis": "5.3.0-snapshot.1769177525113",
110
+ "@elastic/eui-theme-borealis": "5.4.0",
111
111
  "@emotion/babel-preset-css-prop": "^11.11.0",
112
112
  "@emotion/cache": "^11.11.0",
113
113
  "@emotion/css": "^11.11.0",
@@ -257,7 +257,7 @@
257
257
  },
258
258
  "peerDependencies": {
259
259
  "@elastic/datemath": "^5.0.2",
260
- "@elastic/eui-theme-borealis": "5.3.0-snapshot.1769177525113",
260
+ "@elastic/eui-theme-borealis": "5.4.0",
261
261
  "@emotion/css": "11.x",
262
262
  "@emotion/react": "11.x",
263
263
  "@types/react": "^17.0 || ^18.0",
@@ -281,6 +281,5 @@
281
281
  ],
282
282
  "installConfig": {
283
283
  "hoistingLimits": "workspaces"
284
- },
285
- "stableVersion": "112.0.0"
284
+ }
286
285
  }
package/test-env/components/flyout/flyout.component.js CHANGED
@@ -15,6 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
15
15
  var _classnames = _interopRequireDefault(require("classnames"));
16
16
  var _services = require("../../services");
17
17
  var _manager = require("./manager");
18
+ var _const = require("./manager/const");
18
19
  var _focus_trap = require("../focus_trap");
19
20
  var _i18n = require("../i18n");
20
21
  var _resize_observer = require("../observer/resize_observer");
@@ -22,7 +23,7 @@ var _accessibility = require("../accessibility");
22
23
  var _flyout_close_button = require("./_flyout_close_button");
23
24
  var _flyout = require("./flyout.styles");
24
25
  var _component_defaults = require("../provider/component_defaults");
25
- var _const = require("./const");
26
+ var _const2 = require("./const");
26
27
  var _hooks = require("./hooks");
27
28
  var _flyout_menu = require("./flyout_menu");
28
29
  var _flyout_overlay = require("./_flyout_overlay");
@@ -62,11 +63,11 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
62
63
  _usePropsWithComponen4 = _usePropsWithComponen.ownFocus,
63
64
  ownFocus = _usePropsWithComponen4 === void 0 ? true : _usePropsWithComponen4,
64
65
  _usePropsWithComponen5 = _usePropsWithComponen.side,
65
- side = _usePropsWithComponen5 === void 0 ? _const.DEFAULT_SIDE : _usePropsWithComponen5,
66
+ side = _usePropsWithComponen5 === void 0 ? _const2.DEFAULT_SIDE : _usePropsWithComponen5,
66
67
  _usePropsWithComponen6 = _usePropsWithComponen.size,
67
- _size = _usePropsWithComponen6 === void 0 ? _const.DEFAULT_SIZE : _usePropsWithComponen6,
68
+ _size = _usePropsWithComponen6 === void 0 ? _const2.DEFAULT_SIZE : _usePropsWithComponen6,
68
69
  _usePropsWithComponen7 = _usePropsWithComponen.paddingSize,
69
- paddingSize = _usePropsWithComponen7 === void 0 ? _const.DEFAULT_PADDING_SIZE : _usePropsWithComponen7,
70
+ paddingSize = _usePropsWithComponen7 === void 0 ? _const2.DEFAULT_PADDING_SIZE : _usePropsWithComponen7,
70
71
  _usePropsWithComponen8 = _usePropsWithComponen.maxWidth,
71
72
  maxWidth = _usePropsWithComponen8 === void 0 ? false : _usePropsWithComponen8,
72
73
  style = _usePropsWithComponen.style,
@@ -74,10 +75,10 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
74
75
  hasChildBackground = _usePropsWithComponen9 === void 0 ? false : _usePropsWithComponen9,
75
76
  maskProps = _usePropsWithComponen.maskProps,
76
77
  _usePropsWithComponen10 = _usePropsWithComponen.type,
77
- type = _usePropsWithComponen10 === void 0 ? _const.DEFAULT_TYPE : _usePropsWithComponen10,
78
+ type = _usePropsWithComponen10 === void 0 ? _const2.DEFAULT_TYPE : _usePropsWithComponen10,
78
79
  outsideClickCloses = _usePropsWithComponen.outsideClickCloses,
79
80
  _usePropsWithComponen11 = _usePropsWithComponen.pushMinBreakpoint,
80
- pushMinBreakpoint = _usePropsWithComponen11 === void 0 ? _const.DEFAULT_PUSH_MIN_BREAKPOINT : _usePropsWithComponen11,
81
+ pushMinBreakpoint = _usePropsWithComponen11 === void 0 ? _const2.DEFAULT_PUSH_MIN_BREAKPOINT : _usePropsWithComponen11,
81
82
  _usePropsWithComponen12 = _usePropsWithComponen.pushAnimation,
82
83
  pushAnimation = _usePropsWithComponen12 === void 0 ? false : _usePropsWithComponen12,
83
84
  _focusTrapProps = _usePropsWithComponen.focusTrapProps,
@@ -154,6 +155,31 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
154
155
  var _useResizeObserver = (0, _resize_observer.useResizeObserver)(isPushed ? resizeRef : null, 'width'),
155
156
  width = _useResizeObserver.width;
156
157
 
158
+ // Memoize flyout identification and relationships to prevent race conditions
159
+ var flyoutIdentity = (0, _react.useMemo)(function () {
160
+ if (!flyoutId || !currentSession) {
161
+ return {
162
+ isMainFlyout: false,
163
+ siblingFlyoutId: null,
164
+ hasValidSession: false,
165
+ sessionForWidth: null
166
+ };
167
+ }
168
+ var siblingFlyoutId = currentSession.mainFlyoutId === flyoutId ? currentSession.childFlyoutId : currentSession.mainFlyoutId;
169
+ return {
170
+ isMainFlyout: currentSession.mainFlyoutId === flyoutId,
171
+ siblingFlyoutId: siblingFlyoutId,
172
+ hasValidSession: true,
173
+ sessionForWidth: currentSession
174
+ };
175
+ }, [flyoutId, currentSession]);
176
+
177
+ // Destructure for easier use
178
+ var siblingFlyoutId = flyoutIdentity.siblingFlyoutId,
179
+ isMainFlyout = flyoutIdentity.isMainFlyout;
180
+ var _siblingFlyoutWidth = (0, _manager.useFlyoutWidth)(siblingFlyoutId);
181
+ var siblingFlyoutWidth = layoutMode === _const.LAYOUT_MODE_STACKED ? 0 : _siblingFlyoutWidth;
182
+
157
183
  /**
158
184
  * Effect for adding push padding to body. Using useLayoutEffect to ensure
159
185
  * padding changes happen synchronously before child components render -
@@ -168,12 +194,13 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
168
194
  var paddingSide = side === 'left' ? 'paddingInlineStart' : 'paddingInlineEnd';
169
195
  var cssVarName = "--euiPushFlyoutOffset".concat(side === 'left' ? 'InlineStart' : 'InlineEnd');
170
196
  var managerSide = side === 'left' ? 'left' : 'right';
197
+ var paddingWidth = layoutMode === _const.LAYOUT_MODE_STACKED && isMainFlyout && _siblingFlyoutWidth ? _siblingFlyoutWidth : width;
171
198
  if (shouldApplyPadding) {
172
- document.body.style[paddingSide] = "".concat(width, "px");
173
- setGlobalCSSVariables((0, _defineProperty2.default)({}, cssVarName, "".concat(width, "px")));
199
+ document.body.style[paddingSide] = "".concat(paddingWidth, "px");
200
+ setGlobalCSSVariables((0, _defineProperty2.default)({}, cssVarName, "".concat(paddingWidth, "px")));
174
201
  // Update manager state if in managed context
175
202
  if (isInManagedContext && flyoutManagerRef.current) {
176
- flyoutManagerRef.current.setPushPadding(managerSide, width);
203
+ flyoutManagerRef.current.setPushPadding(managerSide, paddingWidth);
177
204
  }
178
205
  } else {
179
206
  // Explicitly remove padding when this push flyout becomes inactive
@@ -194,7 +221,7 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
194
221
  flyoutManagerRef.current.setPushPadding(managerSide, 0);
195
222
  }
196
223
  };
197
- }, [isPushed, isInManagedContext, isActiveManagedFlyout, setGlobalCSSVariables, side, width]);
224
+ }, [isPushed, isInManagedContext, isActiveManagedFlyout, setGlobalCSSVariables, side, width, layoutMode, isMainFlyout, _siblingFlyoutWidth]);
198
225
 
199
226
  /**
200
227
  * This class doesn't actually do anything by EUI, but is nice to add for consumers (JIC)
@@ -206,27 +233,6 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
206
233
  document.body.classList.remove('euiBody--hasFlyout');
207
234
  };
208
235
  }, []);
209
-
210
- // Memoize flyout identification and relationships to prevent race conditions
211
- var flyoutIdentity = (0, _react.useMemo)(function () {
212
- if (!flyoutId || !currentSession) {
213
- return {
214
- isMainFlyout: false,
215
- siblingFlyoutId: null,
216
- hasValidSession: false,
217
- sessionForWidth: null
218
- };
219
- }
220
- var siblingFlyoutId = currentSession.mainFlyoutId === flyoutId ? currentSession.childFlyoutId : currentSession.mainFlyoutId;
221
- return {
222
- siblingFlyoutId: siblingFlyoutId,
223
- hasValidSession: true,
224
- sessionForWidth: currentSession
225
- };
226
- }, [flyoutId, currentSession]);
227
-
228
- // Destructure for easier use
229
- var siblingFlyoutId = flyoutIdentity.siblingFlyoutId;
230
236
  var hasChildFlyout = (currentSession === null || currentSession === void 0 ? void 0 : currentSession.childFlyoutId) != null;
231
237
  var isChildFlyout = isInManagedContext && hasChildFlyout && (currentSession === null || currentSession === void 0 ? void 0 : currentSession.childFlyoutId) === id;
232
238
  var shouldCloseOnEscape = (0, _react.useMemo)(function () {
@@ -258,7 +264,6 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
258
264
  onClose(event);
259
265
  }
260
266
  }, [onClose, isPushed, shouldCloseOnEscape]);
261
- var siblingFlyoutWidth = (0, _manager.useFlyoutWidth)(siblingFlyoutId);
262
267
  var managedFlyoutIndex = currentZIndexRef.current;
263
268
  if (isInManagedContext && currentSession) {
264
269
  managedFlyoutIndex = currentSession.zIndex;
@@ -280,7 +285,7 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
280
285
  return _objectSpread(_objectSpread({}, style), composedStyles);
281
286
  }, [style, size, layoutMode, siblingFlyoutId, siblingFlyoutWidth, maxWidth, flyoutZIndex]);
282
287
  var styles = (0, _services.useEuiMemoizedStyles)(_flyout.euiFlyoutStyles);
283
- var cssStyles = [styles.euiFlyout, styles.paddingSizes[paddingSize], (0, _const.isEuiFlyoutSizeNamed)(size) && styles[size], maxWidth === false && styles.noMaxWidth, isPushed ? styles.push.push : styles.overlay.overlay, isPushed ? styles.push[side] : styles.overlay[side], isPushed && !pushAnimation && styles.push.noAnimation, styles[side]];
288
+ var cssStyles = [styles.euiFlyout, styles.paddingSizes[paddingSize], (0, _const2.isEuiFlyoutSizeNamed)(size) && styles[size], maxWidth === false && styles.noMaxWidth, isPushed ? styles.push.push : styles.overlay.overlay, isPushed ? styles.push[side] : styles.overlay[side], isPushed && !pushAnimation && styles.push.noAnimation, styles[side]];
284
289
  var classes = (0, _classnames.default)('euiFlyout', isChildFlyout && hasChildBackground && 'euiFlyout--hasChildBackground', className);
285
290
  var flyoutToggle = (0, _react.useRef)(document.activeElement);
286
291
  var _useState3 = (0, _react.useState)([]),