@elastic/eui 97.3.1 → 98.0.0

package/es/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.js

@@ -59,6 +59,7 @@ export var EuiCollapsedNavPopover = function EuiCollapsedNavPopover(_ref) {
     display: "block",
     anchorPosition: "rightUp",
     panelPaddingSize: "none",
+    repositionOnScroll: true,
     button: ___EmotionJSX(EuiCollapsedNavButton, {
       title: title,
       icon: icon || 'boxesHorizontal',

package/es/components/color_picker/color_picker.js

@@ -312,7 +312,6 @@ export var EuiColorPicker = function EuiColorPicker(_ref) {
   };
   var showSecondaryInput = mode === 'secondaryInput' || secondaryInputDisplay !== 'none';
   var inlineInput = showSecondaryInput && ___EmotionJSX(EuiFormRow, {
-    display: "rowCompressed",
     isInvalid: isInvalid,
     error: isInvalid ? colorErrorMessage : null
   }, ___EmotionJSX(EuiFormControlLayout, {

package/es/components/datagrid/body/header/draggable_columns.js

@@ -10,6 +10,12 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -97,15 +103,22 @@ export var DraggableColumn = /*#__PURE__*/memo(function (_ref3) {
   var _useContext2 = useContext(DataGridFocusContext),
     setFocusedCell = _useContext2.setFocusedCell;
   var handleOnMouseDown = useCallback(function (e) {
-    var openFocusTrap = document.querySelector('[data-focus-lock-disabled="false"]');
-    if (!!openFocusTrap &&
-    // If a focus trap is open somewhere on the page
-    !openFocusTrap.contains(e.target) &&
-    // & the focus trap doesn't belong to this header
-    e.target !== actionsPopoverToggle // & we're not closing the actions popover toggle
-    ) {
+    var openFocusTraps = document.querySelectorAll('[data-focus-lock-disabled="false"]');
+    var validOpenFocusTraps = _toConsumableArray(openFocusTraps).filter(function (focusTrap) {
+      return !focusTrap.contains(e.currentTarget);
+    } // remove containing focus traps (e.g. modals or flyouts)
+    );
+    var shouldDispatchEvent = validOpenFocusTraps.some(function (focusTrap) {
+      return !!focusTrap &&
+      // If there is a focus trap open
+      !focusTrap.contains(e.target) &&
+      // & if it doesn't contain the target
+      e.target !== actionsPopoverToggle;
+    } // & we're not closing the actions popover toggle
+    );
+    if (shouldDispatchEvent) {
       // Trick the focus trap lib into registering an outside click -
-      // the drag/drop lib otherwise otherwise prevents the event 💀
+      // the drag/drop lib otherwise prevents the event 💀
       document.dispatchEvent(new MouseEvent('mousedown'));
     }
     setTimeout(function () {

package/es/components/form/form_row/form_row.js

@@ -33,11 +33,8 @@ import { euiFormRowStyles } from './form_row.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var DISPLAYS = ['row', 'columnCompressed', 'center', 'centerCompressed',
 /**
- * @deprecated
- */
-'columnCompressedSwitch',
-/**
- * @deprecated
+ * This currently does not affect styles/appearances
+ * in EUI's present primary theme, but may in the future.
  */
 'rowCompressed'];
 export var EuiFormRow = function EuiFormRow(_ref) {
@@ -175,13 +172,11 @@ EuiFormRow.propTypes = {
   css: PropTypes.any,
   /**
      * - `columnCompressed` creates a compressed and horizontal layout
-     * - `columnCompressedSwitch` - **deprecated**, use `columnCompressed` instead
      * - `center`/`centerCompressed` helps align non-input content better with inline form layouts
      * - `rowCompressed` - **deprecated**, does not currently affect styling
      */
   /**
      * - `columnCompressed` creates a compressed and horizontal layout
-     * - `columnCompressedSwitch` - **deprecated**, use `columnCompressed` instead
      * - `center`/`centerCompressed` helps align non-input content better with inline form layouts
      * - `rowCompressed` - **deprecated**, does not currently affect styling
      */

package/es/components/form/form_row/form_row.styles.js

@@ -22,17 +22,11 @@ export var euiFormRowStyles = function euiFormRowStyles(euiThemeContext) {
     fullWidth: /*#__PURE__*/css(logicalCSS('max-width', '100%'), ";;label:fullWidth;"),
     // Skip css`` to avoid generating an extra className
     row: "\n      flex-direction: column;\n      row-gap: ".concat(euiTheme.size.xs, ";\n\n      .euiFormRow__labelWrapper {\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: space-between;\n      }\n\n      + .euiFormRow {\n        ").concat(logicalCSS('margin-top', euiTheme.size.base), "\n      }\n    "),
-    // No difference from the uncompressed row for this current theme AFAICT
-    // TODO: Deprecate prop
+    // No difference from the uncompressed row for the current EUI theme
     get rowCompressed() {
       return this.row;
     },
     columnCompressed: /*#__PURE__*/css("flex-direction:row;align-items:stretch;column-gap:", euiTheme.size.s, ";.euiFormRow__label{hyphens:auto;}.euiFormRow__labelWrapper{flex-basis:calc(33% - ", euiTheme.size.s, ");", logicalCSS('min-width', 0), " line-height:", controlCompressedHeight, ";}.euiFormRow__fieldWrapper{flex-basis:67%;", logicalCSS('min-width', 0), ";}+.euiFormRow{", logicalCSS('margin-top', euiTheme.size.s), ";}&:has(.euiSwitch){&:not(:first-child){", logicalCSS('margin-top', euiTheme.size.m), ";}&:not(:last-child){", logicalCSS('margin-bottom', euiTheme.size.m), ";}.euiFormRow__labelWrapper{line-height:", euiTheme.size.base, ";}};label:columnCompressed;"),
-    // Handled by :has CSS now rather than a separate modifier/prop
-    // TODO: Deprecate prop
-    get columnCompressedSwitch() {
-      return this.columnCompressed;
-    },
     // Center display is primarily for inline form rows, which may have have
     // field content that is shorter than form controls (e.g. switches, text),
     // and should vertically center said content

package/eui.d.ts

@@ -9900,7 +9900,6 @@ declare module '@elastic/eui/src/components/form/form_row/form_row.styles' {
 	    row: string;
 	    readonly rowCompressed: string;
 	    columnCompressed: import("@emotion/utils").SerializedStyles;
-	    readonly columnCompressedSwitch: import("@emotion/utils").SerializedStyles;
 	    centerDisplayCss: (compressed: boolean) => string;
 	    readonly center: import("@emotion/utils").SerializedStyles;
 	    readonly centerCompressed: import("@emotion/utils").SerializedStyles;
@@ -9910,11 +9909,10 @@ declare module '@elastic/eui/src/components/form/form_row/form_row.styles' {
 declare module '@elastic/eui/src/components/form/form_row/form_row' {
 	import { FunctionComponent, HTMLAttributes, ReactElement, ReactNode } from 'react';
 	import { ExclusiveUnion, CommonProps } from '@elastic/eui/src/components/common';
-	export const DISPLAYS: readonly ["row", "columnCompressed", "center", "centerCompressed", "columnCompressedSwitch", "rowCompressed"];
+	export const DISPLAYS: readonly ["row", "columnCompressed", "center", "centerCompressed", "rowCompressed"];
 	export type EuiFormRowDisplayKeys = (typeof DISPLAYS)[number]; type EuiFormRowCommonProps = CommonProps & {
 	    /**
 	     * - `columnCompressed` creates a compressed and horizontal layout
-	     * - `columnCompressedSwitch` - **deprecated**, use `columnCompressed` instead
 	     * - `center`/`centerCompressed` helps align non-input content better with inline form layouts
 	     * - `rowCompressed` - **deprecated**, does not currently affect styling
 	     */

package/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.js

@@ -67,6 +67,7 @@ var EuiCollapsedNavPopover = exports.EuiCollapsedNavPopover = function EuiCollap
     display: "block",
     anchorPosition: "rightUp",
     panelPaddingSize: "none",
+    repositionOnScroll: true,
     button: (0, _react2.jsx)(_collapsed_nav_button.EuiCollapsedNavButton, {
       title: title,
       icon: icon || 'boxesHorizontal',

package/lib/components/color_picker/color_picker.js

@@ -319,7 +319,6 @@ var EuiColorPicker = exports.EuiColorPicker = function EuiColorPicker(_ref) {
   };
   var showSecondaryInput = mode === 'secondaryInput' || secondaryInputDisplay !== 'none';
   var inlineInput = showSecondaryInput && (0, _react2.jsx)(_form.EuiFormRow, {
-    display: "rowCompressed",
     isInvalid: isInvalid,
     error: isInvalid ? colorErrorMessage : null
   }, (0, _react2.jsx)(_form.EuiFormControlLayout, {

package/lib/components/datagrid/body/header/draggable_columns.js

@@ -17,16 +17,6 @@ var _react2 = require("@emotion/react");
 var _excluded = ["role", "tabIndex"],
   _excluded2 = ["canDragAndDropColumns", "children"],
   _excluded3 = ["canDragAndDropColumns", "children"];
-/*
- * 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.
- */
-/**
- * Parent context + EuiDroppable wrapper
- */
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
@@ -38,6 +28,20 @@ function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol"
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
+function _toConsumableArray(r) { return _arrayWithoutHoles(r) || _iterableToArray(r) || _unsupportedIterableToArray(r) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
+function _iterableToArray(r) { if ("undefined" != typeof Symbol && null != r[Symbol.iterator] || null != r["@@iterator"]) return Array.from(r); }
+function _arrayWithoutHoles(r) { if (Array.isArray(r)) return _arrayLikeToArray(r); }
+function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; } /*
+ * 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.
+ */ /**
+ * Parent context + EuiDroppable wrapper
+ */
 var DroppableColumns = exports.DroppableColumns = /*#__PURE__*/(0, _react.memo)(function (_ref) {
   var columns = _ref.columns,
     switchColumnPos = _ref.switchColumnPos,
@@ -104,15 +108,22 @@ var DraggableColumn = exports.DraggableColumn = /*#__PURE__*/(0, _react.memo)(fu
   var _useContext2 = (0, _react.useContext)(_focus.DataGridFocusContext),
     setFocusedCell = _useContext2.setFocusedCell;
   var handleOnMouseDown = (0, _react.useCallback)(function (e) {
-    var openFocusTrap = document.querySelector('[data-focus-lock-disabled="false"]');
-    if (!!openFocusTrap &&
-    // If a focus trap is open somewhere on the page
-    !openFocusTrap.contains(e.target) &&
-    // & the focus trap doesn't belong to this header
-    e.target !== actionsPopoverToggle // & we're not closing the actions popover toggle
-    ) {
+    var openFocusTraps = document.querySelectorAll('[data-focus-lock-disabled="false"]');
+    var validOpenFocusTraps = _toConsumableArray(openFocusTraps).filter(function (focusTrap) {
+      return !focusTrap.contains(e.currentTarget);
+    } // remove containing focus traps (e.g. modals or flyouts)
+    );
+    var shouldDispatchEvent = validOpenFocusTraps.some(function (focusTrap) {
+      return !!focusTrap &&
+      // If there is a focus trap open
+      !focusTrap.contains(e.target) &&
+      // & if it doesn't contain the target
+      e.target !== actionsPopoverToggle;
+    } // & we're not closing the actions popover toggle
+    );
+    if (shouldDispatchEvent) {
       // Trick the focus trap lib into registering an outside click -
-      // the drag/drop lib otherwise otherwise prevents the event 💀
+      // the drag/drop lib otherwise prevents the event 💀
       document.dispatchEvent(new MouseEvent('mousedown'));
     }
     setTimeout(function () {

package/lib/components/form/form_row/form_row.js

@@ -42,11 +42,8 @@ function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
 var DISPLAYS = exports.DISPLAYS = ['row', 'columnCompressed', 'center', 'centerCompressed',
 /**
- * @deprecated
- */
-'columnCompressedSwitch',
-/**
- * @deprecated
+ * This currently does not affect styles/appearances
+ * in EUI's present primary theme, but may in the future.
  */
 'rowCompressed'];
 var EuiFormRow = exports.EuiFormRow = function EuiFormRow(_ref) {
@@ -184,13 +181,11 @@ EuiFormRow.propTypes = {
   css: _propTypes.default.any,
   /**
      * - `columnCompressed` creates a compressed and horizontal layout
-     * - `columnCompressedSwitch` - **deprecated**, use `columnCompressed` instead
      * - `center`/`centerCompressed` helps align non-input content better with inline form layouts
      * - `rowCompressed` - **deprecated**, does not currently affect styling
      */
   /**
      * - `columnCompressed` creates a compressed and horizontal layout
-     * - `columnCompressedSwitch` - **deprecated**, use `columnCompressed` instead
      * - `center`/`centerCompressed` helps align non-input content better with inline form layouts
      * - `rowCompressed` - **deprecated**, does not currently affect styling
      */

package/lib/components/form/form_row/form_row.styles.js

@@ -28,17 +28,11 @@ var euiFormRowStyles = exports.euiFormRowStyles = function euiFormRowStyles(euiT
     fullWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', '100%'), ";;label:fullWidth;"),
     // Skip css`` to avoid generating an extra className
     row: "\n      flex-direction: column;\n      row-gap: ".concat(euiTheme.size.xs, ";\n\n      .euiFormRow__labelWrapper {\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: space-between;\n      }\n\n      + .euiFormRow {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', euiTheme.size.base), "\n      }\n    "),
-    // No difference from the uncompressed row for this current theme AFAICT
-    // TODO: Deprecate prop
+    // No difference from the uncompressed row for the current EUI theme
     get rowCompressed() {
       return this.row;
     },
     columnCompressed: /*#__PURE__*/(0, _react.css)("flex-direction:row;align-items:stretch;column-gap:", euiTheme.size.s, ";.euiFormRow__label{hyphens:auto;}.euiFormRow__labelWrapper{flex-basis:calc(33% - ", euiTheme.size.s, ");", (0, _global_styling.logicalCSS)('min-width', 0), " line-height:", controlCompressedHeight, ";}.euiFormRow__fieldWrapper{flex-basis:67%;", (0, _global_styling.logicalCSS)('min-width', 0), ";}+.euiFormRow{", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.s), ";}&:has(.euiSwitch){&:not(:first-child){", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.m), ";}&:not(:last-child){", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.m), ";}.euiFormRow__labelWrapper{line-height:", euiTheme.size.base, ";}};label:columnCompressed;"),
-    // Handled by :has CSS now rather than a separate modifier/prop
-    // TODO: Deprecate prop
-    get columnCompressedSwitch() {
-      return this.columnCompressed;
-    },
     // Center display is primarily for inline form rows, which may have have
     // field content that is shorter than form controls (e.g. switches, text),
     // and should vertically center said content

package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.js

@@ -49,6 +49,7 @@ export var EuiCollapsedNavPopover = function EuiCollapsedNavPopover(_ref) {
     display: "block",
     anchorPosition: "rightUp",
     panelPaddingSize: "none",
+    repositionOnScroll: true,
     button: ___EmotionJSX(EuiCollapsedNavButton, {
       title: title,
       icon: icon || 'boxesHorizontal',

package/optimize/es/components/color_picker/color_picker.js

@@ -303,7 +303,6 @@ export var EuiColorPicker = function EuiColorPicker(_ref) {
   };
   var showSecondaryInput = mode === 'secondaryInput' || secondaryInputDisplay !== 'none';
   var inlineInput = showSecondaryInput && ___EmotionJSX(EuiFormRow, {
-    display: "rowCompressed",
     isInvalid: isInvalid,
     error: isInvalid ? colorErrorMessage : null
   }, ___EmotionJSX(EuiFormControlLayout, {

package/optimize/es/components/datagrid/body/header/draggable_columns.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 var _excluded = ["role", "tabIndex"],
   _excluded2 = ["canDragAndDropColumns", "children"],
   _excluded3 = ["canDragAndDropColumns", "children"];
@@ -88,15 +89,22 @@ export var DraggableColumn = /*#__PURE__*/memo(function (_ref3) {
   var _useContext2 = useContext(DataGridFocusContext),
     setFocusedCell = _useContext2.setFocusedCell;
   var handleOnMouseDown = useCallback(function (e) {
-    var openFocusTrap = document.querySelector('[data-focus-lock-disabled="false"]');
-    if (!!openFocusTrap &&
-    // If a focus trap is open somewhere on the page
-    !openFocusTrap.contains(e.target) &&
-    // & the focus trap doesn't belong to this header
-    e.target !== actionsPopoverToggle // & we're not closing the actions popover toggle
-    ) {
+    var openFocusTraps = document.querySelectorAll('[data-focus-lock-disabled="false"]');
+    var validOpenFocusTraps = _toConsumableArray(openFocusTraps).filter(function (focusTrap) {
+      return !focusTrap.contains(e.currentTarget);
+    } // remove containing focus traps (e.g. modals or flyouts)
+    );
+    var shouldDispatchEvent = validOpenFocusTraps.some(function (focusTrap) {
+      return !!focusTrap &&
+      // If there is a focus trap open
+      !focusTrap.contains(e.target) &&
+      // & if it doesn't contain the target
+      e.target !== actionsPopoverToggle;
+    } // & we're not closing the actions popover toggle
+    );
+    if (shouldDispatchEvent) {
       // Trick the focus trap lib into registering an outside click -
-      // the drag/drop lib otherwise otherwise prevents the event 💀
+      // the drag/drop lib otherwise prevents the event 💀
       document.dispatchEvent(new MouseEvent('mousedown'));
     }
     setTimeout(function () {

package/optimize/es/components/form/form_row/form_row.js

@@ -23,11 +23,8 @@ import { euiFormRowStyles } from './form_row.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var DISPLAYS = ['row', 'columnCompressed', 'center', 'centerCompressed',
 /**
- * @deprecated
- */
-'columnCompressedSwitch',
-/**
- * @deprecated
+ * This currently does not affect styles/appearances
+ * in EUI's present primary theme, but may in the future.
  */
 'rowCompressed'];
 export var EuiFormRow = function EuiFormRow(_ref) {

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

@@ -22,17 +22,11 @@ export var euiFormRowStyles = function euiFormRowStyles(euiThemeContext) {
     fullWidth: /*#__PURE__*/css(logicalCSS('max-width', '100%'), ";;label:fullWidth;"),
     // Skip css`` to avoid generating an extra className
     row: "\n      flex-direction: column;\n      row-gap: ".concat(euiTheme.size.xs, ";\n\n      .euiFormRow__labelWrapper {\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: space-between;\n      }\n\n      + .euiFormRow {\n        ").concat(logicalCSS('margin-top', euiTheme.size.base), "\n      }\n    "),
-    // No difference from the uncompressed row for this current theme AFAICT
-    // TODO: Deprecate prop
+    // No difference from the uncompressed row for the current EUI theme
     get rowCompressed() {
       return this.row;
     },
     columnCompressed: /*#__PURE__*/css("flex-direction:row;align-items:stretch;column-gap:", euiTheme.size.s, ";.euiFormRow__label{hyphens:auto;}.euiFormRow__labelWrapper{flex-basis:calc(33% - ", euiTheme.size.s, ");", logicalCSS('min-width', 0), " line-height:", controlCompressedHeight, ";}.euiFormRow__fieldWrapper{flex-basis:67%;", logicalCSS('min-width', 0), ";}+.euiFormRow{", logicalCSS('margin-top', euiTheme.size.s), ";}&:has(.euiSwitch){&:not(:first-child){", logicalCSS('margin-top', euiTheme.size.m), ";}&:not(:last-child){", logicalCSS('margin-bottom', euiTheme.size.m), ";}.euiFormRow__labelWrapper{line-height:", euiTheme.size.base, ";}};label:columnCompressed;"),
-    // Handled by :has CSS now rather than a separate modifier/prop
-    // TODO: Deprecate prop
-    get columnCompressedSwitch() {
-      return this.columnCompressed;
-    },
     // Center display is primarily for inline form rows, which may have have
     // field content that is shorter than form controls (e.g. switches, text),
     // and should vertically center said content

package/optimize/lib/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.js

@@ -58,6 +58,7 @@ var EuiCollapsedNavPopover = exports.EuiCollapsedNavPopover = function EuiCollap
     display: "block",
     anchorPosition: "rightUp",
     panelPaddingSize: "none",
+    repositionOnScroll: true,
     button: (0, _react2.jsx)(_collapsed_nav_button.EuiCollapsedNavButton, {
       title: title,
       icon: icon || 'boxesHorizontal',

package/optimize/lib/components/color_picker/color_picker.js

@@ -313,7 +313,6 @@ var EuiColorPicker = exports.EuiColorPicker = function EuiColorPicker(_ref) {
   };
   var showSecondaryInput = mode === 'secondaryInput' || secondaryInputDisplay !== 'none';
   var inlineInput = showSecondaryInput && (0, _react2.jsx)(_form.EuiFormRow, {
-    display: "rowCompressed",
     isInvalid: isInvalid,
     error: isInvalid ? colorErrorMessage : null
   }, (0, _react2.jsx)(_form.EuiFormControlLayout, {

package/optimize/lib/components/datagrid/body/header/draggable_columns.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.DroppableColumns = exports.DraggableColumn = exports.DragOverlay = exports.ConditionalDroppableColumns = exports.ConditionalDraggableColumn = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _services = require("../../../../services");
 var _drag_and_drop = require("../../../drag_and_drop");
@@ -96,15 +97,22 @@ var DraggableColumn = exports.DraggableColumn = /*#__PURE__*/(0, _react.memo)(fu
   var _useContext2 = (0, _react.useContext)(_focus.DataGridFocusContext),
     setFocusedCell = _useContext2.setFocusedCell;
   var handleOnMouseDown = (0, _react.useCallback)(function (e) {
-    var openFocusTrap = document.querySelector('[data-focus-lock-disabled="false"]');
-    if (!!openFocusTrap &&
-    // If a focus trap is open somewhere on the page
-    !openFocusTrap.contains(e.target) &&
-    // & the focus trap doesn't belong to this header
-    e.target !== actionsPopoverToggle // & we're not closing the actions popover toggle
-    ) {
+    var openFocusTraps = document.querySelectorAll('[data-focus-lock-disabled="false"]');
+    var validOpenFocusTraps = (0, _toConsumableArray2.default)(openFocusTraps).filter(function (focusTrap) {
+      return !focusTrap.contains(e.currentTarget);
+    } // remove containing focus traps (e.g. modals or flyouts)
+    );
+    var shouldDispatchEvent = validOpenFocusTraps.some(function (focusTrap) {
+      return !!focusTrap &&
+      // If there is a focus trap open
+      !focusTrap.contains(e.target) &&
+      // & if it doesn't contain the target
+      e.target !== actionsPopoverToggle;
+    } // & we're not closing the actions popover toggle
+    );
+    if (shouldDispatchEvent) {
       // Trick the focus trap lib into registering an outside click -
-      // the drag/drop lib otherwise otherwise prevents the event 💀
+      // the drag/drop lib otherwise prevents the event 💀
       document.dispatchEvent(new MouseEvent('mousedown'));
     }
     setTimeout(function () {

package/optimize/lib/components/form/form_row/form_row.js

@@ -32,11 +32,8 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var DISPLAYS = exports.DISPLAYS = ['row', 'columnCompressed', 'center', 'centerCompressed',
 /**
- * @deprecated
- */
-'columnCompressedSwitch',
-/**
- * @deprecated
+ * This currently does not affect styles/appearances
+ * in EUI's present primary theme, but may in the future.
  */
 'rowCompressed'];
 var EuiFormRow = exports.EuiFormRow = function EuiFormRow(_ref) {

package/optimize/lib/components/form/form_row/form_row.styles.js

@@ -28,17 +28,11 @@ var euiFormRowStyles = exports.euiFormRowStyles = function euiFormRowStyles(euiT
     fullWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', '100%'), ";;label:fullWidth;"),
     // Skip css`` to avoid generating an extra className
     row: "\n      flex-direction: column;\n      row-gap: ".concat(euiTheme.size.xs, ";\n\n      .euiFormRow__labelWrapper {\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: space-between;\n      }\n\n      + .euiFormRow {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', euiTheme.size.base), "\n      }\n    "),
-    // No difference from the uncompressed row for this current theme AFAICT
-    // TODO: Deprecate prop
+    // No difference from the uncompressed row for the current EUI theme
     get rowCompressed() {
       return this.row;
     },
     columnCompressed: /*#__PURE__*/(0, _react.css)("flex-direction:row;align-items:stretch;column-gap:", euiTheme.size.s, ";.euiFormRow__label{hyphens:auto;}.euiFormRow__labelWrapper{flex-basis:calc(33% - ", euiTheme.size.s, ");", (0, _global_styling.logicalCSS)('min-width', 0), " line-height:", controlCompressedHeight, ";}.euiFormRow__fieldWrapper{flex-basis:67%;", (0, _global_styling.logicalCSS)('min-width', 0), ";}+.euiFormRow{", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.s), ";}&:has(.euiSwitch){&:not(:first-child){", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.m), ";}&:not(:last-child){", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.m), ";}.euiFormRow__labelWrapper{line-height:", euiTheme.size.base, ";}};label:columnCompressed;"),
-    // Handled by :has CSS now rather than a separate modifier/prop
-    // TODO: Deprecate prop
-    get columnCompressedSwitch() {
-      return this.columnCompressed;
-    },
     // Center display is primarily for inline form rows, which may have have
     // field content that is shorter than form controls (e.g. switches, text),
     // and should vertically center said content

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "97.3.1",
+  "version": "98.0.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

package/test-env/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.js

@@ -59,6 +59,7 @@ var EuiCollapsedNavPopover = exports.EuiCollapsedNavPopover = function EuiCollap
     display: "block",
     anchorPosition: "rightUp",
     panelPaddingSize: "none",
+    repositionOnScroll: true,
     button: (0, _react2.jsx)(_collapsed_nav_button.EuiCollapsedNavButton, {
       title: title,
       icon: icon || 'boxesHorizontal',

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

@@ -314,7 +314,6 @@ var EuiColorPicker = exports.EuiColorPicker = function EuiColorPicker(_ref) {
   };
   var showSecondaryInput = mode === 'secondaryInput' || secondaryInputDisplay !== 'none';
   var inlineInput = showSecondaryInput && (0, _react2.jsx)(_form.EuiFormRow, {
-    display: "rowCompressed",
     isInvalid: isInvalid,
     error: isInvalid ? colorErrorMessage : null
   }, (0, _react2.jsx)(_form.EuiFormControlLayout, {

package/test-env/components/datagrid/body/header/draggable_columns.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.DroppableColumns = exports.DraggableColumn = exports.DragOverlay = exports.ConditionalDroppableColumns = exports.ConditionalDraggableColumn = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _services = require("../../../../services");
@@ -101,15 +102,22 @@ var DraggableColumn = exports.DraggableColumn = /*#__PURE__*/(0, _react.memo)(fu
   var _useContext2 = (0, _react.useContext)(_focus.DataGridFocusContext),
     setFocusedCell = _useContext2.setFocusedCell;
   var handleOnMouseDown = (0, _react.useCallback)(function (e) {
-    var openFocusTrap = document.querySelector('[data-focus-lock-disabled="false"]');
-    if (!!openFocusTrap &&
-    // If a focus trap is open somewhere on the page
-    !openFocusTrap.contains(e.target) &&
-    // & the focus trap doesn't belong to this header
-    e.target !== actionsPopoverToggle // & we're not closing the actions popover toggle
-    ) {
+    var openFocusTraps = document.querySelectorAll('[data-focus-lock-disabled="false"]');
+    var validOpenFocusTraps = (0, _toConsumableArray2.default)(openFocusTraps).filter(function (focusTrap) {
+      return !focusTrap.contains(e.currentTarget);
+    } // remove containing focus traps (e.g. modals or flyouts)
+    );
+    var shouldDispatchEvent = validOpenFocusTraps.some(function (focusTrap) {
+      return !!focusTrap &&
+      // If there is a focus trap open
+      !focusTrap.contains(e.target) &&
+      // & if it doesn't contain the target
+      e.target !== actionsPopoverToggle;
+    } // & we're not closing the actions popover toggle
+    );
+    if (shouldDispatchEvent) {
       // Trick the focus trap lib into registering an outside click -
-      // the drag/drop lib otherwise otherwise prevents the event 💀
+      // the drag/drop lib otherwise prevents the event 💀
       document.dispatchEvent(new MouseEvent('mousedown'));
     }
     setTimeout(function () {

package/test-env/components/form/form_row/form_row.js

@@ -33,11 +33,8 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var DISPLAYS = exports.DISPLAYS = ['row', 'columnCompressed', 'center', 'centerCompressed',
 /**
- * @deprecated
- */
-'columnCompressedSwitch',
-/**
- * @deprecated
+ * This currently does not affect styles/appearances
+ * in EUI's present primary theme, but may in the future.
  */
 'rowCompressed'];
 var EuiFormRow = exports.EuiFormRow = function EuiFormRow(_ref) {
@@ -175,13 +172,11 @@ EuiFormRow.propTypes = {
   css: _propTypes.default.any,
   /**
      * - `columnCompressed` creates a compressed and horizontal layout
-     * - `columnCompressedSwitch` - **deprecated**, use `columnCompressed` instead
      * - `center`/`centerCompressed` helps align non-input content better with inline form layouts
      * - `rowCompressed` - **deprecated**, does not currently affect styling
      */
   /**
      * - `columnCompressed` creates a compressed and horizontal layout
-     * - `columnCompressedSwitch` - **deprecated**, use `columnCompressed` instead
      * - `center`/`centerCompressed` helps align non-input content better with inline form layouts
      * - `rowCompressed` - **deprecated**, does not currently affect styling
      */

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

@@ -28,17 +28,11 @@ var euiFormRowStyles = exports.euiFormRowStyles = function euiFormRowStyles(euiT
     fullWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', '100%'), ";;label:fullWidth;"),
     // Skip css`` to avoid generating an extra className
     row: "\n      flex-direction: column;\n      row-gap: ".concat(euiTheme.size.xs, ";\n\n      .euiFormRow__labelWrapper {\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: space-between;\n      }\n\n      + .euiFormRow {\n        ").concat((0, _global_styling.logicalCSS)('margin-top', euiTheme.size.base), "\n      }\n    "),
-    // No difference from the uncompressed row for this current theme AFAICT
-    // TODO: Deprecate prop
+    // No difference from the uncompressed row for the current EUI theme
     get rowCompressed() {
       return this.row;
     },
     columnCompressed: /*#__PURE__*/(0, _react.css)("flex-direction:row;align-items:stretch;column-gap:", euiTheme.size.s, ";.euiFormRow__label{hyphens:auto;}.euiFormRow__labelWrapper{flex-basis:calc(33% - ", euiTheme.size.s, ");", (0, _global_styling.logicalCSS)('min-width', 0), " line-height:", controlCompressedHeight, ";}.euiFormRow__fieldWrapper{flex-basis:67%;", (0, _global_styling.logicalCSS)('min-width', 0), ";}+.euiFormRow{", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.s), ";}&:has(.euiSwitch){&:not(:first-child){", (0, _global_styling.logicalCSS)('margin-top', euiTheme.size.m), ";}&:not(:last-child){", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.m), ";}.euiFormRow__labelWrapper{line-height:", euiTheme.size.base, ";}};label:columnCompressed;"),
-    // Handled by :has CSS now rather than a separate modifier/prop
-    // TODO: Deprecate prop
-    get columnCompressedSwitch() {
-      return this.columnCompressed;
-    },
     // Center display is primarily for inline form rows, which may have have
     // field content that is shorter than form controls (e.g. switches, text),
     // and should vertically center said content