@elastic/eui 112.0.0-snapshot.1769177525113 → 112.1.0

package/es/components/flyout/flyout.component.js

@@ -33,6 +33,7 @@ import React, { useEffect, useLayoutEffect, useRef, useMemo, useCallback, useSta
 import classnames from 'classnames';
 import { keys, EuiWindowEvent, useCombinedRefs, useEuiMemoizedStyles, useGeneratedHtmlId, useEuiThemeCSSVariables, focusTrapPubSub } from '../../services';
 import { useCurrentSession, useIsInManagedFlyout, useFlyoutLayoutMode, useFlyoutId, useFlyoutWidth, useIsFlyoutActive, useFlyoutManager, useHasPushPadding } from './manager';
+import { LAYOUT_MODE_STACKED } from './manager/const';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiI18n } from '../i18n';
 import { useResizeObserver } from '../observer/resize_observer';
@@ -158,6 +159,31 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
   var _useResizeObserver = useResizeObserver(isPushed ? resizeRef : null, 'width'),
     width = _useResizeObserver.width;
 
+  // Memoize flyout identification and relationships to prevent race conditions
+  var flyoutIdentity = useMemo(function () {
+    if (!flyoutId || !currentSession) {
+      return {
+        isMainFlyout: false,
+        siblingFlyoutId: null,
+        hasValidSession: false,
+        sessionForWidth: null
+      };
+    }
+    var siblingFlyoutId = currentSession.mainFlyoutId === flyoutId ? currentSession.childFlyoutId : currentSession.mainFlyoutId;
+    return {
+      isMainFlyout: currentSession.mainFlyoutId === flyoutId,
+      siblingFlyoutId: siblingFlyoutId,
+      hasValidSession: true,
+      sessionForWidth: currentSession
+    };
+  }, [flyoutId, currentSession]);
+
+  // Destructure for easier use
+  var siblingFlyoutId = flyoutIdentity.siblingFlyoutId,
+    isMainFlyout = flyoutIdentity.isMainFlyout;
+  var _siblingFlyoutWidth = useFlyoutWidth(siblingFlyoutId);
+  var siblingFlyoutWidth = layoutMode === LAYOUT_MODE_STACKED ? 0 : _siblingFlyoutWidth;
+
   /**
    * Effect for adding push padding to body. Using useLayoutEffect to ensure
    * padding changes happen synchronously before child components render -
@@ -172,12 +198,13 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
     var paddingSide = side === 'left' ? 'paddingInlineStart' : 'paddingInlineEnd';
     var cssVarName = "--euiPushFlyoutOffset".concat(side === 'left' ? 'InlineStart' : 'InlineEnd');
     var managerSide = side === 'left' ? 'left' : 'right';
+    var paddingWidth = layoutMode === LAYOUT_MODE_STACKED && isMainFlyout && _siblingFlyoutWidth ? _siblingFlyoutWidth : width;
     if (shouldApplyPadding) {
-      document.body.style[paddingSide] = "".concat(width, "px");
-      setGlobalCSSVariables(_defineProperty({}, cssVarName, "".concat(width, "px")));
+      document.body.style[paddingSide] = "".concat(paddingWidth, "px");
+      setGlobalCSSVariables(_defineProperty({}, cssVarName, "".concat(paddingWidth, "px")));
       // Update manager state if in managed context
       if (isInManagedContext && flyoutManagerRef.current) {
-        flyoutManagerRef.current.setPushPadding(managerSide, width);
+        flyoutManagerRef.current.setPushPadding(managerSide, paddingWidth);
       }
     } else {
       // Explicitly remove padding when this push flyout becomes inactive
@@ -198,7 +225,7 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
         flyoutManagerRef.current.setPushPadding(managerSide, 0);
       }
     };
-  }, [isPushed, isInManagedContext, isActiveManagedFlyout, setGlobalCSSVariables, side, width]);
+  }, [isPushed, isInManagedContext, isActiveManagedFlyout, setGlobalCSSVariables, side, width, layoutMode, isMainFlyout, _siblingFlyoutWidth]);
 
   /**
    * This class doesn't actually do anything by EUI, but is nice to add for consumers (JIC)
@@ -210,27 +237,6 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
       document.body.classList.remove('euiBody--hasFlyout');
     };
   }, []);
-
-  // Memoize flyout identification and relationships to prevent race conditions
-  var flyoutIdentity = useMemo(function () {
-    if (!flyoutId || !currentSession) {
-      return {
-        isMainFlyout: false,
-        siblingFlyoutId: null,
-        hasValidSession: false,
-        sessionForWidth: null
-      };
-    }
-    var siblingFlyoutId = currentSession.mainFlyoutId === flyoutId ? currentSession.childFlyoutId : currentSession.mainFlyoutId;
-    return {
-      siblingFlyoutId: siblingFlyoutId,
-      hasValidSession: true,
-      sessionForWidth: currentSession
-    };
-  }, [flyoutId, currentSession]);
-
-  // Destructure for easier use
-  var siblingFlyoutId = flyoutIdentity.siblingFlyoutId;
   var hasChildFlyout = (currentSession === null || currentSession === void 0 ? void 0 : currentSession.childFlyoutId) != null;
   var isChildFlyout = isInManagedContext && hasChildFlyout && (currentSession === null || currentSession === void 0 ? void 0 : currentSession.childFlyoutId) === id;
   var shouldCloseOnEscape = useMemo(function () {
@@ -262,7 +268,6 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
       onClose(event);
     }
   }, [onClose, isPushed, shouldCloseOnEscape]);
-  var siblingFlyoutWidth = useFlyoutWidth(siblingFlyoutId);
   var managedFlyoutIndex = currentZIndexRef.current;
   if (isInManagedContext && currentSession) {
     managedFlyoutIndex = currentSession.zIndex;

package/eui.d.ts

@@ -34415,6 +34415,7 @@ declare module '@elastic/eui/src/services/container_query' {
 declare module '@elastic/eui' {
   export type EuiTokensObject = {
     "euiTreeView.listNavigationInstructions": any;
+"euiIconTip.defaultAriaLabel": any;
 "euiTourStepIndicator.isActive": any;
 "euiTourStepIndicator.isComplete": any;
 "euiTourStepIndicator.isIncomplete": any;
@@ -34422,7 +34423,6 @@ declare module '@elastic/eui' {
 "euiTourFooter.endTour": any;
 "euiTourFooter.skipTour": any;
 "euiTourFooter.closeTour": any;
-"euiIconTip.defaultAriaLabel": any;
 "euiToast.newNotification": any;
 "euiToast.notification": any;
 "euiToast.dismissToast": any;
@@ -34449,26 +34449,26 @@ declare module '@elastic/eui' {
 "euiSkeletonLoading.loadedAriaText": any;
 "euiSkeletonLoading.loadingAriaText": any;
 "euiSideNav.mobileToggleAriaLabel": any;
+"euiSearchBox.placeholder": any;
+"euiSearchBox.incrementalAriaLabel": any;
+"euiSearchBox.ariaLabel": any;
 "euiSelectable.loadingOptions": any;
 "euiSelectable.noMatchingOptions": any;
 "euiSelectable.noAvailableOptions": any;
 "euiSelectable.screenReaderInstructions": any;
 "euiSelectable.placeholderName": any;
 "euiSelectable.searchResults": any;
-"euiSearchBox.placeholder": any;
-"euiSearchBox.incrementalAriaLabel": any;
-"euiSearchBox.ariaLabel": any;
 "euiResizablePanel.toggleButtonAriaLabel": any;
 "euiResizableButton.horizontalResizerAriaLabel": any;
 "euiResizableButton.verticalResizerAriaLabel": any;
 "euiProgress.valueText": any;
 "euiPopover.screenReaderAnnouncement": any;
+"euiPaginationButton.longPageString": any;
+"euiPaginationButton.shortPageString": any;
 "euiPaginationButtonArrow.firstPage": any;
 "euiPaginationButtonArrow.previousPage": any;
 "euiPaginationButtonArrow.nextPage": any;
 "euiPaginationButtonArrow.lastPage": any;
-"euiPaginationButton.longPageString": any;
-"euiPaginationButton.shortPageString": any;
 "euiPagination.pageOfTotalCompressed": any;
 "euiPagination.firstRangeAriaLabel": any;
 "euiPagination.lastRangeAriaLabel": any;
@@ -34479,6 +34479,8 @@ declare module '@elastic/eui' {
 "euiPagination.fromEndLabel": any;
 "euiModal.screenReaderModalDialog": any;
 "euiModal.closeModal": any;
+"euiMark.highlightStart": any;
+"euiMark.highlightEnd": any;
 "euiMarkdownEditorToolbar.editor": any;
 "euiMarkdownEditorToolbar.previewMarkdown": any;
 "euiMarkdownEditorHelpButton.mdSyntaxLink": any;
@@ -34494,8 +34496,6 @@ declare module '@elastic/eui' {
 "euiMarkdownEditorFooter.supportedFileTypes": any;
 "euiMarkdownEditorFooter.showSyntaxErrors": any;
 "euiMarkdownEditorFooter.errorsTitle": any;
-"euiMark.highlightStart": any;
-"euiMark.highlightEnd": any;
 "euiLoadingStrings.ariaLabel": any;
 "euiExternalLinkIcon.newTarget.screenReaderOnlyText": any;
 "euiExternalLinkIcon.externalTarget.screenReaderOnlyText": any;
@@ -34506,19 +34506,20 @@ declare module '@elastic/eui' {
 "euiImageButton.openFullScreen": any;
 "euiImageButton.closeFullScreen": any;
 "euiForm.addressFormErrors": any;
+"euiFilterButton.filterBadgeActiveAriaLabel": any;
+"euiFilterButton.filterBadgeAvailableAriaLabel": any;
 "euiFlyoutMenu.back": any;
 "euiFlyoutMenu.history": any;
 "euiFlyout.screenReaderModalDialog": any;
 "euiFlyout.screenReaderNonModalDialog": any;
 "euiFlyout.screenReaderFocusTrapShards": any;
 "euiFlyoutCloseButton.ariaLabel": any;
-"euiFilterButton.filterBadgeActiveAriaLabel": any;
-"euiFilterButton.filterBadgeAvailableAriaLabel": any;
 "euiErrorBoundary.error": any;
 "euiDataGrid.ariaLabel": any;
 "euiDataGrid.ariaLabelledBy": any;
 "euiDataGrid.screenReaderNotice": any;
 "euiComboBox.listboxAriaLabel": any;
+"euiCollapsibleNavBeta.ariaLabel": any;
 "euiSaturation.ariaLabel": any;
 "euiSaturation.roleDescription": any;
 "euiSaturation.screenReaderInstructions": any;
@@ -34534,14 +34535,13 @@ declare module '@elastic/eui' {
 "euiColorPicker.alphaLabel": any;
 "euiColorPicker.openLabel": any;
 "euiColorPicker.closeLabel": any;
-"euiCollapsibleNavBeta.ariaLabel": any;
+"euiCallOut.dismissAriaLabel": any;
 "euiCodeBlockFullScreen.fullscreenCollapse": any;
 "euiCodeBlockFullScreen.fullscreenExpand": any;
 "euiCodeBlockFullScreen.ariaLabel": any;
 "euiCodeBlockCopy.copy": any;
 "euiCodeBlockAnnotations.ariaLabel": any;
 "euiCodeBlock.label": any;
-"euiCallOut.dismissAriaLabel": any;
 "euiBreadcrumbs.nav.ariaLabel": any;
 "euiBreadcrumb.collapsedBadge.ariaLabel": any;
 "euiBreadcrumb.popoverAriaLabel": any;
@@ -34565,6 +34565,7 @@ declare module '@elastic/eui' {
 "euiTablePagination.rowsPerPageOptionShowAllRows": any;
 "euiTablePagination.rowsPerPageOption": any;
 "euiTableSortMobile.sorting": any;
+"euiFieldValueSelectionFilter.buttonLabelHint": any;
 "euiSelectableTemplateSitewide.searchPlaceholder": any;
 "euiSelectableTemplateSitewide.loadingResults": any;
 "euiSelectableTemplateSitewide.noResults": any;
@@ -34578,7 +34579,6 @@ declare module '@elastic/eui' {
 "euiSelectableListItem.mixedOptionInstructions": any;
 "euiSelectableListItem.mixedOptionUncheckInstructions": any;
 "euiSelectableListItem.mixedOptionExcludeInstructions": any;
-"euiFieldValueSelectionFilter.buttonLabelHint": any;
 "euiPinnableListGroup.pinExtraActionLabel": any;
 "euiPinnableListGroup.pinnedExtraActionLabel": any;
 "euiHeaderLinks.appNavigation": any;
@@ -34597,6 +34597,15 @@ declare module '@elastic/eui' {
 "euiFieldPassword.showPassword": any;
 "euiFieldPassword.maskPassword": any;
 "euiFlyoutManaged.defaultTitle": any;
+"euiRefreshInterval.fullDescriptionOff": any;
+"euiRefreshInterval.fullDescriptionOn": any;
+"euiRefreshInterval.toggleLabel": any;
+"euiRefreshInterval.toggleAriaLabel": any;
+"euiRefreshInterval.valueAriaLabel": any;
+"euiRefreshInterval.unitsAriaLabel": any;
+"euiAutoRefresh.autoRefreshLabel": any;
+"euiAutoRefresh.buttonLabelOff": any;
+"euiAutoRefresh.buttonLabelOn": any;
 "euiTimeWindowButtons.previousDescription": any;
 "euiTimeWindowButtons.nextDescription": any;
 "euiTimeWindowButtons.invalidShiftLabel": any;
@@ -34683,15 +34692,6 @@ declare module '@elastic/eui' {
 "euiPrettyDuration.now": any;
 "euiPrettyDuration.invalid": any;
 "euiPrettyDuration.fallbackDuration": any;
-"euiRefreshInterval.fullDescriptionOff": any;
-"euiRefreshInterval.fullDescriptionOn": any;
-"euiRefreshInterval.toggleLabel": any;
-"euiRefreshInterval.toggleAriaLabel": any;
-"euiRefreshInterval.valueAriaLabel": any;
-"euiRefreshInterval.unitsAriaLabel": any;
-"euiAutoRefresh.autoRefreshLabel": any;
-"euiAutoRefresh.buttonLabelOff": any;
-"euiAutoRefresh.buttonLabelOn": any;
 "euiDataGridSchema.booleanSortTextAsc": any;
 "euiDataGridSchema.booleanSortTextDesc": any;
 "euiDataGridSchema.currencySortTextAsc": any;