@elastic/eui 114.2.0 → 114.3.0

package/es/components/datagrid/utils/scrolling.js

@@ -51,11 +51,17 @@ export var useScroll = function useScroll(args) {
     });
   }, [focusedCell, scrollCellIntoView, isPointerDownRef]);
   useEffect(function () {
-    var handlePointerUp = function handlePointerUp() {
+    var handlePointerUp = function handlePointerUp(event) {
       var _window;
       if (!pendingScrollRef.current || !focusedCell) return;
       pendingScrollRef.current = false;
 
+      // The pointerup event can come from any mouse button, not only the left
+      // click. We only care about the primary (usually left) mouse button
+      // clicks, and specifically have to ignore middle mouse button clicks,
+      // which indicate scrolling on Windows.
+      if (event.pointerType === 'mouse' && event.button !== 0) return;
+
       // Skip if the interaction resulted in text being selected
       if (((_window = window) === null || _window === void 0 || (_window = _window.getSelection()) === null || _window === void 0 ? void 0 : _window.type) === 'Range') return;
       scrollCellIntoView({

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

@@ -126,9 +126,16 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
 
   // Ref for the main flyout element to pass to context
   var internalParentFlyoutRef = useRef(null);
+
+  // Observe the container's dimensions so the resize hook and
+  // positioning styles stay aligned with its bounding rect.
+  // When no container is provided, these remain inert (null/undefined).
+  var containerDimensions = useResizeObserver(container !== null && container !== void 0 ? container : null, 'width');
+  var containerReferenceWidth = container ? containerDimensions.width || container.clientWidth : undefined;
   var isPushed = useIsPushed({
     type: type,
-    pushMinBreakpoint: pushMinBreakpoint
+    pushMinBreakpoint: pushMinBreakpoint,
+    containerWidth: containerReferenceWidth
   });
   // When no explicit container is provided, push padding targets
   // document.body and global push-offset CSS vars are set. When a
@@ -234,12 +241,6 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
   var siblingFlyoutMinWidth = siblingFlyout === null || siblingFlyout === void 0 ? void 0 : siblingFlyout.minWidth;
   var siblingFlyoutWidth = layoutMode === LAYOUT_MODE_STACKED ? 0 : _siblingFlyoutWidth;
 
-  // Observe the container's dimensions so the resize hook and
-  // positioning styles stay aligned with its bounding rect.
-  // When no container is provided, these remain inert (null/undefined).
-  var containerDimensions = useResizeObserver(container !== null && container !== void 0 ? container : null, 'width');
-  var containerReferenceWidth = container ? containerDimensions.width || container.clientWidth : undefined;
-
   // Track the container's bounding rect for positioning the flyout.
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),

package/es/components/flyout/hooks.js

@@ -6,13 +6,13 @@
  * Side Public License, v 1.
  */
 
-import { useIsWithinMinBreakpoint } from '../../services';
+import { useIsWithinMinBreakpoint, useEuiTheme } from '../../services';
 import { usePropsWithComponentDefaults } from '../provider/component_defaults';
 import { DEFAULT_PUSH_MIN_BREAKPOINT, DEFAULT_TYPE } from './const';
 
 /**
  * Determines if a flyout should be rendered in a "pushed" state based on its
- * configuration and the current window size.
+ * configuration and the current window or container size.
  */
 export var useIsPushed = function useIsPushed(props) {
   var _usePropsWithComponen = usePropsWithComponentDefaults('EuiFlyout', props),
@@ -20,6 +20,14 @@ export var useIsPushed = function useIsPushed(props) {
     type = _usePropsWithComponen2 === void 0 ? DEFAULT_TYPE : _usePropsWithComponen2,
     _usePropsWithComponen3 = _usePropsWithComponen.pushMinBreakpoint,
     pushMinBreakpoint = _usePropsWithComponen3 === void 0 ? DEFAULT_PUSH_MIN_BREAKPOINT : _usePropsWithComponen3;
+  var _useEuiTheme = useEuiTheme(),
+    breakpoints = _useEuiTheme.euiTheme.breakpoint;
+
+  // Always called to satisfy React hook rules; used as fallback
+  // when no container width is provided or the breakpoint key is
+  // not present on the theme.
   var windowIsLargeEnoughToPush = useIsWithinMinBreakpoint(pushMinBreakpoint);
-  return type === 'push' && windowIsLargeEnoughToPush;
+  var minWidth = breakpoints[pushMinBreakpoint];
+  var isLargeEnoughToPush = props.containerWidth != null && minWidth != null ? props.containerWidth >= minWidth : windowIsLargeEnoughToPush;
+  return type === 'push' && isLargeEnoughToPush;
 };

package/es/components/flyout/manager/flyout_main.js

@@ -18,7 +18,7 @@ function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t =
 
 import React, { forwardRef } from 'react';
 import { EuiManagedFlyout } from './flyout_managed';
-import { useHasChildFlyout, useFlyoutId } from './hooks';
+import { useHasChildFlyout, useFlyoutId, useFlyoutManager } from './hooks';
 import { euiMainFlyoutStyles } from './flyout_main.styles';
 import { useEuiMemoizedStyles } from '../../../services';
 import { DEFAULT_PUSH_MIN_BREAKPOINT, DEFAULT_SIDE, DEFAULT_TYPE } from '../const';
@@ -46,9 +46,11 @@ export var EuiFlyoutMain = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var flyoutId = useFlyoutId(id);
   var hasChildFlyout = useHasChildFlyout(flyoutId);
   var styles = useEuiMemoizedStyles(euiMainFlyoutStyles);
+  var context = useFlyoutManager();
   var isPushed = useIsPushed({
     type: type,
-    pushMinBreakpoint: pushMinBreakpoint
+    pushMinBreakpoint: pushMinBreakpoint,
+    containerWidth: context === null || context === void 0 ? void 0 : context.state.referenceWidth
   });
   var cssStyles = [hasChildFlyout && !isPushed && styles.hasChildFlyout[side]];
   var style = {};

package/es/components/icon/assets/chart_pie.js

@@ -27,8 +27,7 @@ var EuiIconChartPie = function EuiIconChartPie(_ref) {
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    stroke: "#1D2A3E",
-    d: "M7.5 8.5h6.979A6.498 6.498 0 0 1 1.5 8a6.5 6.5 0 0 1 6-6.48V8.5Zm2-6.824A6.506 6.506 0 0 1 14.323 6.5H9.5V1.676Z"
+    d: "M7 2.084A6 6 0 0 0 8 14v1A7 7 0 1 1 8 1v7h7a7 7 0 0 1-7 7v-1a6 6 0 0 0 5.915-5H7V2.084Zm2-1.012A7.002 7.002 0 0 1 14.928 7H9V1.072ZM10 6h3.657A6.015 6.015 0 0 0 10 2.343V6Z"
   }));
 };
 export var icon = EuiIconChartPie;

package/es/components/icon/assets/product_dashboard.js

@@ -27,9 +27,11 @@ var EuiIconProductDashboard = function EuiIconProductDashboard(_ref) {
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    fillRule: "evenodd",
-    d: "M6 11a1 1 0 0 1 1 1v1l-.005.102A1 1 0 0 1 6 14H2a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h4Zm-4 2h4v-1H2v1ZM14 7a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h5Zm-5 6h5V8H9v5ZM6 7a1 1 0 0 1 1 1v1l-.005.103A1 1 0 0 1 6 10H2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h4ZM2 9h4V8H2v1ZM14 2a1 1 0 0 1 .995.897L15 3v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h12ZM2 5h12V3H2v2Z",
-    clipRule: "evenodd"
+    d: "m8.528 10.265.972-.972 1.5 1.5 1.646-1.647.707.708L11 12.207l-1.5-1.5-1.028 1.028-3-3.5-2.118 2.119-.708-.708 2.882-2.881 3 3.5Z"
+  }), ___EmotionJSX("path", {
+    d: "M9 8H8V6h1v2Zm2 0h-1V5h1v3Zm2 0h-1V4h1v4ZM7 5H3V4h4v1Z"
+  }), ___EmotionJSX("path", {
+    d: "M14 2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h12ZM2 13h12V3H2v10Z"
   }));
 };
 export var icon = EuiIconProductDashboard;

package/es/components/steps/step_horizontal.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "step", "title", "onClick", "disabled", "status", "size"];
+var _excluded = ["className", "step", "title", "onClick", "disabled", "status", "size", "aria-label", "aria-labelledby"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 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; }
@@ -35,6 +35,8 @@ export var EuiStepHorizontal = function EuiStepHorizontal(_ref) {
     status = _ref$status === void 0 ? 'incomplete' : _ref$status,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'm' : _ref$size,
+    ariaLabel = _ref['aria-label'],
+    ariaLabelledby = _ref['aria-labelledby'],
     rest = _objectWithoutProperties(_ref, _excluded);
   if (disabled) status = 'disabled';
   var classes = classNames('euiStepHorizontal', className);
@@ -44,7 +46,7 @@ export var EuiStepHorizontal = function EuiStepHorizontal(_ref) {
   var cssNumberStyles = [numberStyles.euiStepHorizontal__number];
   var titleStyles = useEuiMemoizedStyles(euiStepHorizontalTitleStyles);
   var cssTitleStyles = [titleStyles.euiStepHorizontal__title, status === 'disabled' && titleStyles.disabled];
-  var titleAttrsMap = {
+  var labelMap = {
     step: useI18nStep({
       number: step,
       title: title
@@ -78,14 +80,15 @@ export var EuiStepHorizontal = function EuiStepHorizontal(_ref) {
       title: title
     })
   };
-  var titleAttr = titleAttrsMap[status || 'step'];
+  var ariaLabelAttr = labelMap[status || 'step'];
   var onStepClick = function onStepClick(event) {
-    if (!disabled) onClick(event);
+    if (!disabled && status !== 'disabled') onClick(event);
   };
   return ___EmotionJSX("button", _extends({
     "aria-disabled": status === 'disabled' ? true : undefined,
     className: classes,
-    title: titleAttr,
+    "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : ariaLabelledby ? undefined : ariaLabelAttr,
+    "aria-labelledby": ariaLabelledby,
     onClick: onStepClick,
     disabled: disabled,
     css: cssStyles,

package/eui.d.ts

@@ -13477,9 +13477,11 @@ declare module '@elastic/eui/src/components/flyout/hooks' {
 	import { EuiFlyoutProps } from '@elastic/eui/src/components/flyout/flyout';
 	/**
 	 * Determines if a flyout should be rendered in a "pushed" state based on its
-	 * configuration and the current window size.
+	 * configuration and the current window or container size.
 	 */
-	export const useIsPushed: (props: Pick<EuiFlyoutProps, "type" | "pushMinBreakpoint">) => boolean;
+	export const useIsPushed: (props: Pick<EuiFlyoutProps, "type" | "pushMinBreakpoint"> & {
+	    containerWidth?: number;
+	}) => boolean;
 
 }
 declare module '@elastic/eui/src/components/flyout/manager/flyout_main' {

package/lib/components/datagrid/utils/scrolling.js

@@ -57,11 +57,17 @@ var useScroll = exports.useScroll = function useScroll(args) {
     });
   }, [focusedCell, scrollCellIntoView, isPointerDownRef]);
   (0, _react.useEffect)(function () {
-    var handlePointerUp = function handlePointerUp() {
+    var handlePointerUp = function handlePointerUp(event) {
       var _window;
       if (!pendingScrollRef.current || !focusedCell) return;
       pendingScrollRef.current = false;
 
+      // The pointerup event can come from any mouse button, not only the left
+      // click. We only care about the primary (usually left) mouse button
+      // clicks, and specifically have to ignore middle mouse button clicks,
+      // which indicate scrolling on Windows.
+      if (event.pointerType === 'mouse' && event.button !== 0) return;
+
       // Skip if the interaction resulted in text being selected
       if (((_window = window) === null || _window === void 0 || (_window = _window.getSelection()) === null || _window === void 0 ? void 0 : _window.type) === 'Range') return;
       scrollCellIntoView({

package/lib/components/flyout/flyout.component.js

@@ -133,9 +133,16 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
 
   // Ref for the main flyout element to pass to context
   var internalParentFlyoutRef = (0, _react.useRef)(null);
+
+  // Observe the container's dimensions so the resize hook and
+  // positioning styles stay aligned with its bounding rect.
+  // When no container is provided, these remain inert (null/undefined).
+  var containerDimensions = (0, _resize_observer.useResizeObserver)(container !== null && container !== void 0 ? container : null, 'width');
+  var containerReferenceWidth = container ? containerDimensions.width || container.clientWidth : undefined;
   var isPushed = (0, _hooks.useIsPushed)({
     type: type,
-    pushMinBreakpoint: pushMinBreakpoint
+    pushMinBreakpoint: pushMinBreakpoint,
+    containerWidth: containerReferenceWidth
   });
   // When no explicit container is provided, push padding targets
   // document.body and global push-offset CSS vars are set. When a
@@ -241,12 +248,6 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
   var siblingFlyoutMinWidth = siblingFlyout === null || siblingFlyout === void 0 ? void 0 : siblingFlyout.minWidth;
   var siblingFlyoutWidth = layoutMode === _const.LAYOUT_MODE_STACKED ? 0 : _siblingFlyoutWidth;
 
-  // Observe the container's dimensions so the resize hook and
-  // positioning styles stay aligned with its bounding rect.
-  // When no container is provided, these remain inert (null/undefined).
-  var containerDimensions = (0, _resize_observer.useResizeObserver)(container !== null && container !== void 0 ? container : null, 'width');
-  var containerReferenceWidth = container ? containerDimensions.width || container.clientWidth : undefined;
-
   // Track the container's bounding rect for positioning the flyout.
   var _useState = (0, _react.useState)(null),
     _useState2 = _slicedToArray(_useState, 2),

package/lib/components/flyout/hooks.js

@@ -17,7 +17,7 @@ var _const = require("./const");
 
 /**
  * Determines if a flyout should be rendered in a "pushed" state based on its
- * configuration and the current window size.
+ * configuration and the current window or container size.
  */
 var useIsPushed = exports.useIsPushed = function useIsPushed(props) {
   var _usePropsWithComponen = (0, _component_defaults.usePropsWithComponentDefaults)('EuiFlyout', props),
@@ -25,6 +25,14 @@ var useIsPushed = exports.useIsPushed = function useIsPushed(props) {
     type = _usePropsWithComponen2 === void 0 ? _const.DEFAULT_TYPE : _usePropsWithComponen2,
     _usePropsWithComponen3 = _usePropsWithComponen.pushMinBreakpoint,
     pushMinBreakpoint = _usePropsWithComponen3 === void 0 ? _const.DEFAULT_PUSH_MIN_BREAKPOINT : _usePropsWithComponen3;
+  var _useEuiTheme = (0, _services.useEuiTheme)(),
+    breakpoints = _useEuiTheme.euiTheme.breakpoint;
+
+  // Always called to satisfy React hook rules; used as fallback
+  // when no container width is provided or the breakpoint key is
+  // not present on the theme.
   var windowIsLargeEnoughToPush = (0, _services.useIsWithinMinBreakpoint)(pushMinBreakpoint);
-  return type === 'push' && windowIsLargeEnoughToPush;
+  var minWidth = breakpoints[pushMinBreakpoint];
+  var isLargeEnoughToPush = props.containerWidth != null && minWidth != null ? props.containerWidth >= minWidth : windowIsLargeEnoughToPush;
+  return type === 'push' && isLargeEnoughToPush;
 };

package/lib/components/flyout/manager/flyout_main.js

@@ -52,9 +52,11 @@ var EuiFlyoutMain = exports.EuiFlyoutMain = /*#__PURE__*/(0, _react.forwardRef)(
   var flyoutId = (0, _hooks.useFlyoutId)(id);
   var hasChildFlyout = (0, _hooks.useHasChildFlyout)(flyoutId);
   var styles = (0, _services.useEuiMemoizedStyles)(_flyout_main.euiMainFlyoutStyles);
+  var context = (0, _hooks.useFlyoutManager)();
   var isPushed = (0, _hooks2.useIsPushed)({
     type: type,
-    pushMinBreakpoint: pushMinBreakpoint
+    pushMinBreakpoint: pushMinBreakpoint,
+    containerWidth: context === null || context === void 0 ? void 0 : context.state.referenceWidth
   });
   var cssStyles = [hasChildFlyout && !isPushed && styles.hasChildFlyout[side]];
   var style = {};

package/lib/components/icon/assets/chart_pie.js

@@ -34,8 +34,7 @@ var EuiIconChartPie = function EuiIconChartPie(_ref) {
   }, props), title ? (0, _react2.jsx)("title", {
     id: titleId
   }, title) : null, (0, _react2.jsx)("path", {
-    stroke: "#1D2A3E",
-    d: "M7.5 8.5h6.979A6.498 6.498 0 0 1 1.5 8a6.5 6.5 0 0 1 6-6.48V8.5Zm2-6.824A6.506 6.506 0 0 1 14.323 6.5H9.5V1.676Z"
+    d: "M7 2.084A6 6 0 0 0 8 14v1A7 7 0 1 1 8 1v7h7a7 7 0 0 1-7 7v-1a6 6 0 0 0 5.915-5H7V2.084Zm2-1.012A7.002 7.002 0 0 1 14.928 7H9V1.072ZM10 6h3.657A6.015 6.015 0 0 0 10 2.343V6Z"
   }));
 };
 var icon = exports.icon = EuiIconChartPie;

package/lib/components/icon/assets/product_dashboard.js

@@ -34,9 +34,11 @@ var EuiIconProductDashboard = function EuiIconProductDashboard(_ref) {
   }, props), title ? (0, _react2.jsx)("title", {
     id: titleId
   }, title) : null, (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    d: "M6 11a1 1 0 0 1 1 1v1l-.005.102A1 1 0 0 1 6 14H2a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h4Zm-4 2h4v-1H2v1ZM14 7a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h5Zm-5 6h5V8H9v5ZM6 7a1 1 0 0 1 1 1v1l-.005.103A1 1 0 0 1 6 10H2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h4ZM2 9h4V8H2v1ZM14 2a1 1 0 0 1 .995.897L15 3v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h12ZM2 5h12V3H2v2Z",
-    clipRule: "evenodd"
+    d: "m8.528 10.265.972-.972 1.5 1.5 1.646-1.647.707.708L11 12.207l-1.5-1.5-1.028 1.028-3-3.5-2.118 2.119-.708-.708 2.882-2.881 3 3.5Z"
+  }), (0, _react2.jsx)("path", {
+    d: "M9 8H8V6h1v2Zm2 0h-1V5h1v3Zm2 0h-1V4h1v4ZM7 5H3V4h4v1Z"
+  }), (0, _react2.jsx)("path", {
+    d: "M14 2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h12ZM2 13h12V3H2v10Z"
   }));
 };
 var icon = exports.icon = EuiIconProductDashboard;

package/lib/components/icon/svgs/chart_pie.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path stroke="#1D2A3E" d="M7.5 8.5h6.979A6.498 6.498 0 0 1 1.5 8a6.5 6.5 0 0 1 6-6.48V8.5Zm2-6.824A6.506 6.506 0 0 1 14.323 6.5H9.5V1.676Z"/>
+  <path d="M7 2.084A6 6 0 0 0 8 14v1A7 7 0 1 1 8 1v7h7a7 7 0 0 1-7 7v-1a6 6 0 0 0 5.915-5H7V2.084Zm2-1.012A7.002 7.002 0 0 1 14.928 7H9V1.072ZM10 6h3.657A6.015 6.015 0 0 0 10 2.343V6Z"/>
 </svg>

package/lib/components/icon/svgs/product_dashboard.svg

@@ -1,6 +1,5 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6 11C6.55228 11 7 11.4477 7 12V13L6.99512 13.1025C6.94379 13.6067 6.51768 14 6 14H2C1.44772 14 1 13.5523 1 13V12C1 11.4477 1.44772 11 2 11H6ZM2 13H6V12H2V13Z"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 7C14.5523 7 15 7.44772 15 8V13C15 13.5523 14.5523 14 14 14H9C8.44772 14 8 13.5523 8 13V8C8 7.44772 8.44772 7 9 7H14ZM9 13H14V8H9V13Z"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6 7C6.55228 7 7 7.44772 7 8V9L6.99512 9.10254C6.94379 9.60667 6.51768 10 6 10H2C1.44772 10 1 9.55229 1 9V8C1 7.44772 1.44772 7 2 7H6ZM2 9H6V8H2V9Z"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 2C14.5177 2 14.9438 2.39333 14.9951 2.89746L15 3V5C15 5.55228 14.5523 6 14 6H2C1.44772 6 1 5.55228 1 5V3C1 2.44772 1.44772 2 2 2H14ZM2 5H14V3H2V5Z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="m8.528 10.265.972-.972 1.5 1.5 1.646-1.647.707.708L11 12.207l-1.5-1.5-1.028 1.028-3-3.5-2.118 2.119-.708-.708 2.882-2.881 3 3.5Z"/>
+  <path d="M9 8H8V6h1v2Zm2 0h-1V5h1v3Zm2 0h-1V4h1v4ZM7 5H3V4h4v1Z"/>
+  <path d="M14 2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h12ZM2 13h12V3H2v10Z"/>
 </svg>

package/lib/components/steps/step_horizontal.js

@@ -12,7 +12,7 @@ var _step_number = require("./step_number");
 var _step_strings = require("./step_strings");
 var _step_horizontal = require("./step_horizontal.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "step", "title", "onClick", "disabled", "status", "size"];
+var _excluded = ["className", "step", "title", "onClick", "disabled", "status", "size", "aria-label", "aria-labelledby"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -41,6 +41,8 @@ var EuiStepHorizontal = exports.EuiStepHorizontal = function EuiStepHorizontal(_
     status = _ref$status === void 0 ? 'incomplete' : _ref$status,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'm' : _ref$size,
+    ariaLabel = _ref['aria-label'],
+    ariaLabelledby = _ref['aria-labelledby'],
     rest = _objectWithoutProperties(_ref, _excluded);
   if (disabled) status = 'disabled';
   var classes = (0, _classnames.default)('euiStepHorizontal', className);
@@ -50,7 +52,7 @@ var EuiStepHorizontal = exports.EuiStepHorizontal = function EuiStepHorizontal(_
   var cssNumberStyles = [numberStyles.euiStepHorizontal__number];
   var titleStyles = (0, _services.useEuiMemoizedStyles)(_step_horizontal.euiStepHorizontalTitleStyles);
   var cssTitleStyles = [titleStyles.euiStepHorizontal__title, status === 'disabled' && titleStyles.disabled];
-  var titleAttrsMap = {
+  var labelMap = {
     step: (0, _step_strings.useI18nStep)({
       number: step,
       title: title
@@ -84,14 +86,15 @@ var EuiStepHorizontal = exports.EuiStepHorizontal = function EuiStepHorizontal(_
       title: title
     })
   };
-  var titleAttr = titleAttrsMap[status || 'step'];
+  var ariaLabelAttr = labelMap[status || 'step'];
   var onStepClick = function onStepClick(event) {
-    if (!disabled) onClick(event);
+    if (!disabled && status !== 'disabled') onClick(event);
   };
   return (0, _react2.jsx)("button", _extends({
     "aria-disabled": status === 'disabled' ? true : undefined,
     className: classes,
-    title: titleAttr,
+    "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : ariaLabelledby ? undefined : ariaLabelAttr,
+    "aria-labelledby": ariaLabelledby,
     onClick: onStepClick,
     disabled: disabled,
     css: cssStyles,

package/optimize/es/components/datagrid/utils/scrolling.js

@@ -49,11 +49,17 @@ export var useScroll = function useScroll(args) {
     });
   }, [focusedCell, scrollCellIntoView, isPointerDownRef]);
   useEffect(function () {
-    var handlePointerUp = function handlePointerUp() {
+    var handlePointerUp = function handlePointerUp(event) {
       var _window;
       if (!pendingScrollRef.current || !focusedCell) return;
       pendingScrollRef.current = false;
 
+      // The pointerup event can come from any mouse button, not only the left
+      // click. We only care about the primary (usually left) mouse button
+      // clicks, and specifically have to ignore middle mouse button clicks,
+      // which indicate scrolling on Windows.
+      if (event.pointerType === 'mouse' && event.button !== 0) return;
+
       // Skip if the interaction resulted in text being selected
       if (((_window = window) === null || _window === void 0 || (_window = _window.getSelection()) === null || _window === void 0 ? void 0 : _window.type) === 'Range') return;
       scrollCellIntoView({

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

@@ -114,9 +114,16 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
 
   // Ref for the main flyout element to pass to context
   var internalParentFlyoutRef = useRef(null);
+
+  // Observe the container's dimensions so the resize hook and
+  // positioning styles stay aligned with its bounding rect.
+  // When no container is provided, these remain inert (null/undefined).
+  var containerDimensions = useResizeObserver(container !== null && container !== void 0 ? container : null, 'width');
+  var containerReferenceWidth = container ? containerDimensions.width || container.clientWidth : undefined;
   var isPushed = useIsPushed({
     type: type,
-    pushMinBreakpoint: pushMinBreakpoint
+    pushMinBreakpoint: pushMinBreakpoint,
+    containerWidth: containerReferenceWidth
   });
   // When no explicit container is provided, push padding targets
   // document.body and global push-offset CSS vars are set. When a
@@ -222,12 +229,6 @@ export var EuiFlyoutComponent = /*#__PURE__*/forwardRef(function (props, ref) {
   var siblingFlyoutMinWidth = siblingFlyout === null || siblingFlyout === void 0 ? void 0 : siblingFlyout.minWidth;
   var siblingFlyoutWidth = layoutMode === LAYOUT_MODE_STACKED ? 0 : _siblingFlyoutWidth;
 
-  // Observe the container's dimensions so the resize hook and
-  // positioning styles stay aligned with its bounding rect.
-  // When no container is provided, these remain inert (null/undefined).
-  var containerDimensions = useResizeObserver(container !== null && container !== void 0 ? container : null, 'width');
-  var containerReferenceWidth = container ? containerDimensions.width || container.clientWidth : undefined;
-
   // Track the container's bounding rect for positioning the flyout.
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),

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

@@ -6,13 +6,13 @@
  * Side Public License, v 1.
  */
 
-import { useIsWithinMinBreakpoint } from '../../services';
+import { useIsWithinMinBreakpoint, useEuiTheme } from '../../services';
 import { usePropsWithComponentDefaults } from '../provider/component_defaults';
 import { DEFAULT_PUSH_MIN_BREAKPOINT, DEFAULT_TYPE } from './const';
 
 /**
  * Determines if a flyout should be rendered in a "pushed" state based on its
- * configuration and the current window size.
+ * configuration and the current window or container size.
  */
 export var useIsPushed = function useIsPushed(props) {
   var _usePropsWithComponen = usePropsWithComponentDefaults('EuiFlyout', props),
@@ -20,6 +20,14 @@ export var useIsPushed = function useIsPushed(props) {
     type = _usePropsWithComponen2 === void 0 ? DEFAULT_TYPE : _usePropsWithComponen2,
     _usePropsWithComponen3 = _usePropsWithComponen.pushMinBreakpoint,
     pushMinBreakpoint = _usePropsWithComponen3 === void 0 ? DEFAULT_PUSH_MIN_BREAKPOINT : _usePropsWithComponen3;
+  var _useEuiTheme = useEuiTheme(),
+    breakpoints = _useEuiTheme.euiTheme.breakpoint;
+
+  // Always called to satisfy React hook rules; used as fallback
+  // when no container width is provided or the breakpoint key is
+  // not present on the theme.
   var windowIsLargeEnoughToPush = useIsWithinMinBreakpoint(pushMinBreakpoint);
-  return type === 'push' && windowIsLargeEnoughToPush;
+  var minWidth = breakpoints[pushMinBreakpoint];
+  var isLargeEnoughToPush = props.containerWidth != null && minWidth != null ? props.containerWidth >= minWidth : windowIsLargeEnoughToPush;
+  return type === 'push' && isLargeEnoughToPush;
 };

package/optimize/es/components/flyout/manager/flyout_main.js

@@ -14,7 +14,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import React, { forwardRef } from 'react';
 import { EuiManagedFlyout } from './flyout_managed';
-import { useHasChildFlyout, useFlyoutId } from './hooks';
+import { useHasChildFlyout, useFlyoutId, useFlyoutManager } from './hooks';
 import { euiMainFlyoutStyles } from './flyout_main.styles';
 import { useEuiMemoizedStyles } from '../../../services';
 import { DEFAULT_PUSH_MIN_BREAKPOINT, DEFAULT_SIDE, DEFAULT_TYPE } from '../const';
@@ -42,9 +42,11 @@ export var EuiFlyoutMain = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var flyoutId = useFlyoutId(id);
   var hasChildFlyout = useHasChildFlyout(flyoutId);
   var styles = useEuiMemoizedStyles(euiMainFlyoutStyles);
+  var context = useFlyoutManager();
   var isPushed = useIsPushed({
     type: type,
-    pushMinBreakpoint: pushMinBreakpoint
+    pushMinBreakpoint: pushMinBreakpoint,
+    containerWidth: context === null || context === void 0 ? void 0 : context.state.referenceWidth
   });
   var cssStyles = [hasChildFlyout && !isPushed && styles.hasChildFlyout[side]];
   var style = {};

package/optimize/es/components/icon/assets/chart_pie.js

@@ -26,8 +26,7 @@ var EuiIconChartPie = function EuiIconChartPie(_ref) {
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    stroke: "#1D2A3E",
-    d: "M7.5 8.5h6.979A6.498 6.498 0 0 1 1.5 8a6.5 6.5 0 0 1 6-6.48V8.5Zm2-6.824A6.506 6.506 0 0 1 14.323 6.5H9.5V1.676Z"
+    d: "M7 2.084A6 6 0 0 0 8 14v1A7 7 0 1 1 8 1v7h7a7 7 0 0 1-7 7v-1a6 6 0 0 0 5.915-5H7V2.084Zm2-1.012A7.002 7.002 0 0 1 14.928 7H9V1.072ZM10 6h3.657A6.015 6.015 0 0 0 10 2.343V6Z"
   }));
 };
 export var icon = EuiIconChartPie;

package/optimize/es/components/icon/assets/product_dashboard.js

@@ -26,9 +26,11 @@ var EuiIconProductDashboard = function EuiIconProductDashboard(_ref) {
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    fillRule: "evenodd",
-    d: "M6 11a1 1 0 0 1 1 1v1l-.005.102A1 1 0 0 1 6 14H2a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h4Zm-4 2h4v-1H2v1ZM14 7a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h5Zm-5 6h5V8H9v5ZM6 7a1 1 0 0 1 1 1v1l-.005.103A1 1 0 0 1 6 10H2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h4ZM2 9h4V8H2v1ZM14 2a1 1 0 0 1 .995.897L15 3v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h12ZM2 5h12V3H2v2Z",
-    clipRule: "evenodd"
+    d: "m8.528 10.265.972-.972 1.5 1.5 1.646-1.647.707.708L11 12.207l-1.5-1.5-1.028 1.028-3-3.5-2.118 2.119-.708-.708 2.882-2.881 3 3.5Z"
+  }), ___EmotionJSX("path", {
+    d: "M9 8H8V6h1v2Zm2 0h-1V5h1v3Zm2 0h-1V4h1v4ZM7 5H3V4h4v1Z"
+  }), ___EmotionJSX("path", {
+    d: "M14 2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h12ZM2 13h12V3H2v10Z"
   }));
 };
 export var icon = EuiIconProductDashboard;

package/optimize/es/components/steps/step_horizontal.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "step", "title", "onClick", "disabled", "status", "size"];
+var _excluded = ["className", "step", "title", "onClick", "disabled", "status", "size", "aria-label", "aria-labelledby"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -33,6 +33,8 @@ export var EuiStepHorizontal = function EuiStepHorizontal(_ref) {
     status = _ref$status === void 0 ? 'incomplete' : _ref$status,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'm' : _ref$size,
+    ariaLabel = _ref['aria-label'],
+    ariaLabelledby = _ref['aria-labelledby'],
     rest = _objectWithoutProperties(_ref, _excluded);
   if (disabled) status = 'disabled';
   var classes = classNames('euiStepHorizontal', className);
@@ -42,7 +44,7 @@ export var EuiStepHorizontal = function EuiStepHorizontal(_ref) {
   var cssNumberStyles = [numberStyles.euiStepHorizontal__number];
   var titleStyles = useEuiMemoizedStyles(euiStepHorizontalTitleStyles);
   var cssTitleStyles = [titleStyles.euiStepHorizontal__title, status === 'disabled' && titleStyles.disabled];
-  var titleAttrsMap = {
+  var labelMap = {
     step: useI18nStep({
       number: step,
       title: title
@@ -76,14 +78,15 @@ export var EuiStepHorizontal = function EuiStepHorizontal(_ref) {
       title: title
     })
   };
-  var titleAttr = titleAttrsMap[status || 'step'];
+  var ariaLabelAttr = labelMap[status || 'step'];
   var onStepClick = function onStepClick(event) {
-    if (!disabled) onClick(event);
+    if (!disabled && status !== 'disabled') onClick(event);
   };
   return ___EmotionJSX("button", _extends({
     "aria-disabled": status === 'disabled' ? true : undefined,
     className: classes,
-    title: titleAttr,
+    "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : ariaLabelledby ? undefined : ariaLabelAttr,
+    "aria-labelledby": ariaLabelledby,
     onClick: onStepClick,
     disabled: disabled,
     css: cssStyles,

package/optimize/lib/components/datagrid/utils/scrolling.js

@@ -59,11 +59,17 @@ var useScroll = exports.useScroll = function useScroll(args) {
     });
   }, [focusedCell, scrollCellIntoView, isPointerDownRef]);
   (0, _react.useEffect)(function () {
-    var handlePointerUp = function handlePointerUp() {
+    var handlePointerUp = function handlePointerUp(event) {
       var _window;
       if (!pendingScrollRef.current || !focusedCell) return;
       pendingScrollRef.current = false;
 
+      // The pointerup event can come from any mouse button, not only the left
+      // click. We only care about the primary (usually left) mouse button
+      // clicks, and specifically have to ignore middle mouse button clicks,
+      // which indicate scrolling on Windows.
+      if (event.pointerType === 'mouse' && event.button !== 0) return;
+
       // Skip if the interaction resulted in text being selected
       if (((_window = window) === null || _window === void 0 || (_window = _window.getSelection()) === null || _window === void 0 ? void 0 : _window.type) === 'Range') return;
       scrollCellIntoView({

package/optimize/lib/components/flyout/flyout.component.js

@@ -122,9 +122,16 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
 
   // Ref for the main flyout element to pass to context
   var internalParentFlyoutRef = (0, _react.useRef)(null);
+
+  // Observe the container's dimensions so the resize hook and
+  // positioning styles stay aligned with its bounding rect.
+  // When no container is provided, these remain inert (null/undefined).
+  var containerDimensions = (0, _resize_observer.useResizeObserver)(container !== null && container !== void 0 ? container : null, 'width');
+  var containerReferenceWidth = container ? containerDimensions.width || container.clientWidth : undefined;
   var isPushed = (0, _hooks.useIsPushed)({
     type: type,
-    pushMinBreakpoint: pushMinBreakpoint
+    pushMinBreakpoint: pushMinBreakpoint,
+    containerWidth: containerReferenceWidth
   });
   // When no explicit container is provided, push padding targets
   // document.body and global push-offset CSS vars are set. When a
@@ -230,12 +237,6 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
   var siblingFlyoutMinWidth = siblingFlyout === null || siblingFlyout === void 0 ? void 0 : siblingFlyout.minWidth;
   var siblingFlyoutWidth = layoutMode === _const.LAYOUT_MODE_STACKED ? 0 : _siblingFlyoutWidth;
 
-  // Observe the container's dimensions so the resize hook and
-  // positioning styles stay aligned with its bounding rect.
-  // When no container is provided, these remain inert (null/undefined).
-  var containerDimensions = (0, _resize_observer.useResizeObserver)(container !== null && container !== void 0 ? container : null, 'width');
-  var containerReferenceWidth = container ? containerDimensions.width || container.clientWidth : undefined;
-
   // Track the container's bounding rect for positioning the flyout.
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),

package/optimize/lib/components/flyout/hooks.js

@@ -17,7 +17,7 @@ var _const = require("./const");
 
 /**
  * Determines if a flyout should be rendered in a "pushed" state based on its
- * configuration and the current window size.
+ * configuration and the current window or container size.
  */
 var useIsPushed = exports.useIsPushed = function useIsPushed(props) {
   var _usePropsWithComponen = (0, _component_defaults.usePropsWithComponentDefaults)('EuiFlyout', props),
@@ -25,6 +25,14 @@ var useIsPushed = exports.useIsPushed = function useIsPushed(props) {
     type = _usePropsWithComponen2 === void 0 ? _const.DEFAULT_TYPE : _usePropsWithComponen2,
     _usePropsWithComponen3 = _usePropsWithComponen.pushMinBreakpoint,
     pushMinBreakpoint = _usePropsWithComponen3 === void 0 ? _const.DEFAULT_PUSH_MIN_BREAKPOINT : _usePropsWithComponen3;
+  var _useEuiTheme = (0, _services.useEuiTheme)(),
+    breakpoints = _useEuiTheme.euiTheme.breakpoint;
+
+  // Always called to satisfy React hook rules; used as fallback
+  // when no container width is provided or the breakpoint key is
+  // not present on the theme.
   var windowIsLargeEnoughToPush = (0, _services.useIsWithinMinBreakpoint)(pushMinBreakpoint);
-  return type === 'push' && windowIsLargeEnoughToPush;
+  var minWidth = breakpoints[pushMinBreakpoint];
+  var isLargeEnoughToPush = props.containerWidth != null && minWidth != null ? props.containerWidth >= minWidth : windowIsLargeEnoughToPush;
+  return type === 'push' && isLargeEnoughToPush;
 };

package/optimize/lib/components/flyout/manager/flyout_main.js

@@ -50,9 +50,11 @@ var EuiFlyoutMain = exports.EuiFlyoutMain = /*#__PURE__*/(0, _react.forwardRef)(
   var flyoutId = (0, _hooks.useFlyoutId)(id);
   var hasChildFlyout = (0, _hooks.useHasChildFlyout)(flyoutId);
   var styles = (0, _services.useEuiMemoizedStyles)(_flyout_main.euiMainFlyoutStyles);
+  var context = (0, _hooks.useFlyoutManager)();
   var isPushed = (0, _hooks2.useIsPushed)({
     type: type,
-    pushMinBreakpoint: pushMinBreakpoint
+    pushMinBreakpoint: pushMinBreakpoint,
+    containerWidth: context === null || context === void 0 ? void 0 : context.state.referenceWidth
   });
   var cssStyles = [hasChildFlyout && !isPushed && styles.hasChildFlyout[side]];
   var style = {};

package/optimize/lib/components/icon/assets/chart_pie.js

@@ -34,8 +34,7 @@ var EuiIconChartPie = function EuiIconChartPie(_ref) {
   }, props), title ? (0, _react2.jsx)("title", {
     id: titleId
   }, title) : null, (0, _react2.jsx)("path", {
-    stroke: "#1D2A3E",
-    d: "M7.5 8.5h6.979A6.498 6.498 0 0 1 1.5 8a6.5 6.5 0 0 1 6-6.48V8.5Zm2-6.824A6.506 6.506 0 0 1 14.323 6.5H9.5V1.676Z"
+    d: "M7 2.084A6 6 0 0 0 8 14v1A7 7 0 1 1 8 1v7h7a7 7 0 0 1-7 7v-1a6 6 0 0 0 5.915-5H7V2.084Zm2-1.012A7.002 7.002 0 0 1 14.928 7H9V1.072ZM10 6h3.657A6.015 6.015 0 0 0 10 2.343V6Z"
   }));
 };
 var icon = exports.icon = EuiIconChartPie;

package/optimize/lib/components/icon/assets/product_dashboard.js

@@ -34,9 +34,11 @@ var EuiIconProductDashboard = function EuiIconProductDashboard(_ref) {
   }, props), title ? (0, _react2.jsx)("title", {
     id: titleId
   }, title) : null, (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    d: "M6 11a1 1 0 0 1 1 1v1l-.005.102A1 1 0 0 1 6 14H2a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h4Zm-4 2h4v-1H2v1ZM14 7a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h5Zm-5 6h5V8H9v5ZM6 7a1 1 0 0 1 1 1v1l-.005.103A1 1 0 0 1 6 10H2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h4ZM2 9h4V8H2v1ZM14 2a1 1 0 0 1 .995.897L15 3v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h12ZM2 5h12V3H2v2Z",
-    clipRule: "evenodd"
+    d: "m8.528 10.265.972-.972 1.5 1.5 1.646-1.647.707.708L11 12.207l-1.5-1.5-1.028 1.028-3-3.5-2.118 2.119-.708-.708 2.882-2.881 3 3.5Z"
+  }), (0, _react2.jsx)("path", {
+    d: "M9 8H8V6h1v2Zm2 0h-1V5h1v3Zm2 0h-1V4h1v4ZM7 5H3V4h4v1Z"
+  }), (0, _react2.jsx)("path", {
+    d: "M14 2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h12ZM2 13h12V3H2v10Z"
   }));
 };
 var icon = exports.icon = EuiIconProductDashboard;

package/optimize/lib/components/icon/svgs/chart_pie.svg

@@ -1,3 +1,3 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path stroke="#1D2A3E" d="M7.5 8.5h6.979A6.498 6.498 0 0 1 1.5 8a6.5 6.5 0 0 1 6-6.48V8.5Zm2-6.824A6.506 6.506 0 0 1 14.323 6.5H9.5V1.676Z"/>
+  <path d="M7 2.084A6 6 0 0 0 8 14v1A7 7 0 1 1 8 1v7h7a7 7 0 0 1-7 7v-1a6 6 0 0 0 5.915-5H7V2.084Zm2-1.012A7.002 7.002 0 0 1 14.928 7H9V1.072ZM10 6h3.657A6.015 6.015 0 0 0 10 2.343V6Z"/>
 </svg>

package/optimize/lib/components/icon/svgs/product_dashboard.svg

@@ -1,6 +1,5 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6 11C6.55228 11 7 11.4477 7 12V13L6.99512 13.1025C6.94379 13.6067 6.51768 14 6 14H2C1.44772 14 1 13.5523 1 13V12C1 11.4477 1.44772 11 2 11H6ZM2 13H6V12H2V13Z"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 7C14.5523 7 15 7.44772 15 8V13C15 13.5523 14.5523 14 14 14H9C8.44772 14 8 13.5523 8 13V8C8 7.44772 8.44772 7 9 7H14ZM9 13H14V8H9V13Z"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M6 7C6.55228 7 7 7.44772 7 8V9L6.99512 9.10254C6.94379 9.60667 6.51768 10 6 10H2C1.44772 10 1 9.55229 1 9V8C1 7.44772 1.44772 7 2 7H6ZM2 9H6V8H2V9Z"/>
-<path fill-rule="evenodd" clip-rule="evenodd" d="M14 2C14.5177 2 14.9438 2.39333 14.9951 2.89746L15 3V5C15 5.55228 14.5523 6 14 6H2C1.44772 6 1 5.55228 1 5V3C1 2.44772 1.44772 2 2 2H14ZM2 5H14V3H2V5Z"/>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="m8.528 10.265.972-.972 1.5 1.5 1.646-1.647.707.708L11 12.207l-1.5-1.5-1.028 1.028-3-3.5-2.118 2.119-.708-.708 2.882-2.881 3 3.5Z"/>
+  <path d="M9 8H8V6h1v2Zm2 0h-1V5h1v3Zm2 0h-1V4h1v4ZM7 5H3V4h4v1Z"/>
+  <path d="M14 2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h12ZM2 13h12V3H2v10Z"/>
 </svg>

package/optimize/lib/components/steps/step_horizontal.js

@@ -14,7 +14,7 @@ var _step_number = require("./step_number");
 var _step_strings = require("./step_strings");
 var _step_horizontal = require("./step_horizontal.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "step", "title", "onClick", "disabled", "status", "size"];
+var _excluded = ["className", "step", "title", "onClick", "disabled", "status", "size", "aria-label", "aria-labelledby"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -39,6 +39,8 @@ var EuiStepHorizontal = exports.EuiStepHorizontal = function EuiStepHorizontal(_
     status = _ref$status === void 0 ? 'incomplete' : _ref$status,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'm' : _ref$size,
+    ariaLabel = _ref['aria-label'],
+    ariaLabelledby = _ref['aria-labelledby'],
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   if (disabled) status = 'disabled';
   var classes = (0, _classnames.default)('euiStepHorizontal', className);
@@ -48,7 +50,7 @@ var EuiStepHorizontal = exports.EuiStepHorizontal = function EuiStepHorizontal(_
   var cssNumberStyles = [numberStyles.euiStepHorizontal__number];
   var titleStyles = (0, _services.useEuiMemoizedStyles)(_step_horizontal.euiStepHorizontalTitleStyles);
   var cssTitleStyles = [titleStyles.euiStepHorizontal__title, status === 'disabled' && titleStyles.disabled];
-  var titleAttrsMap = {
+  var labelMap = {
     step: (0, _step_strings.useI18nStep)({
       number: step,
       title: title
@@ -82,14 +84,15 @@ var EuiStepHorizontal = exports.EuiStepHorizontal = function EuiStepHorizontal(_
       title: title
     })
   };
-  var titleAttr = titleAttrsMap[status || 'step'];
+  var ariaLabelAttr = labelMap[status || 'step'];
   var onStepClick = function onStepClick(event) {
-    if (!disabled) onClick(event);
+    if (!disabled && status !== 'disabled') onClick(event);
   };
   return (0, _react2.jsx)("button", (0, _extends2.default)({
     "aria-disabled": status === 'disabled' ? true : undefined,
     className: classes,
-    title: titleAttr,
+    "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : ariaLabelledby ? undefined : ariaLabelAttr,
+    "aria-labelledby": ariaLabelledby,
     onClick: onStepClick,
     disabled: disabled,
     css: cssStyles,

package/package.json

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

package/test-env/components/datagrid/utils/scrolling.js

@@ -59,11 +59,17 @@ var useScroll = exports.useScroll = function useScroll(args) {
     });
   }, [focusedCell, scrollCellIntoView, isPointerDownRef]);
   (0, _react.useEffect)(function () {
-    var handlePointerUp = function handlePointerUp() {
+    var handlePointerUp = function handlePointerUp(event) {
       var _window;
       if (!pendingScrollRef.current || !focusedCell) return;
       pendingScrollRef.current = false;
 
+      // The pointerup event can come from any mouse button, not only the left
+      // click. We only care about the primary (usually left) mouse button
+      // clicks, and specifically have to ignore middle mouse button clicks,
+      // which indicate scrolling on Windows.
+      if (event.pointerType === 'mouse' && event.button !== 0) return;
+
       // Skip if the interaction resulted in text being selected
       if (((_window = window) === null || _window === void 0 || (_window = _window.getSelection()) === null || _window === void 0 ? void 0 : _window.type) === 'Range') return;
       scrollCellIntoView({

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

@@ -122,9 +122,16 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
 
   // Ref for the main flyout element to pass to context
   var internalParentFlyoutRef = (0, _react.useRef)(null);
+
+  // Observe the container's dimensions so the resize hook and
+  // positioning styles stay aligned with its bounding rect.
+  // When no container is provided, these remain inert (null/undefined).
+  var containerDimensions = (0, _resize_observer.useResizeObserver)(container !== null && container !== void 0 ? container : null, 'width');
+  var containerReferenceWidth = container ? containerDimensions.width || container.clientWidth : undefined;
   var isPushed = (0, _hooks.useIsPushed)({
     type: type,
-    pushMinBreakpoint: pushMinBreakpoint
+    pushMinBreakpoint: pushMinBreakpoint,
+    containerWidth: containerReferenceWidth
   });
   // When no explicit container is provided, push padding targets
   // document.body and global push-offset CSS vars are set. When a
@@ -230,12 +237,6 @@ var EuiFlyoutComponent = exports.EuiFlyoutComponent = /*#__PURE__*/(0, _react.fo
   var siblingFlyoutMinWidth = siblingFlyout === null || siblingFlyout === void 0 ? void 0 : siblingFlyout.minWidth;
   var siblingFlyoutWidth = layoutMode === _const.LAYOUT_MODE_STACKED ? 0 : _siblingFlyoutWidth;
 
-  // Observe the container's dimensions so the resize hook and
-  // positioning styles stay aligned with its bounding rect.
-  // When no container is provided, these remain inert (null/undefined).
-  var containerDimensions = (0, _resize_observer.useResizeObserver)(container !== null && container !== void 0 ? container : null, 'width');
-  var containerReferenceWidth = container ? containerDimensions.width || container.clientWidth : undefined;
-
   // Track the container's bounding rect for positioning the flyout.
   var _useState = (0, _react.useState)(null),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),

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

@@ -17,7 +17,7 @@ var _const = require("./const");
 
 /**
  * Determines if a flyout should be rendered in a "pushed" state based on its
- * configuration and the current window size.
+ * configuration and the current window or container size.
  */
 var useIsPushed = exports.useIsPushed = function useIsPushed(props) {
   var _usePropsWithComponen = (0, _component_defaults.usePropsWithComponentDefaults)('EuiFlyout', props),
@@ -25,6 +25,14 @@ var useIsPushed = exports.useIsPushed = function useIsPushed(props) {
     type = _usePropsWithComponen2 === void 0 ? _const.DEFAULT_TYPE : _usePropsWithComponen2,
     _usePropsWithComponen3 = _usePropsWithComponen.pushMinBreakpoint,
     pushMinBreakpoint = _usePropsWithComponen3 === void 0 ? _const.DEFAULT_PUSH_MIN_BREAKPOINT : _usePropsWithComponen3;
+  var _useEuiTheme = (0, _services.useEuiTheme)(),
+    breakpoints = _useEuiTheme.euiTheme.breakpoint;
+
+  // Always called to satisfy React hook rules; used as fallback
+  // when no container width is provided or the breakpoint key is
+  // not present on the theme.
   var windowIsLargeEnoughToPush = (0, _services.useIsWithinMinBreakpoint)(pushMinBreakpoint);
-  return type === 'push' && windowIsLargeEnoughToPush;
+  var minWidth = breakpoints[pushMinBreakpoint];
+  var isLargeEnoughToPush = props.containerWidth != null && minWidth != null ? props.containerWidth >= minWidth : windowIsLargeEnoughToPush;
+  return type === 'push' && isLargeEnoughToPush;
 };

package/test-env/components/flyout/manager/flyout_main.js

@@ -50,9 +50,11 @@ var EuiFlyoutMain = exports.EuiFlyoutMain = /*#__PURE__*/(0, _react.forwardRef)(
   var flyoutId = (0, _hooks.useFlyoutId)(id);
   var hasChildFlyout = (0, _hooks.useHasChildFlyout)(flyoutId);
   var styles = (0, _services.useEuiMemoizedStyles)(_flyout_main.euiMainFlyoutStyles);
+  var context = (0, _hooks.useFlyoutManager)();
   var isPushed = (0, _hooks2.useIsPushed)({
     type: type,
-    pushMinBreakpoint: pushMinBreakpoint
+    pushMinBreakpoint: pushMinBreakpoint,
+    containerWidth: context === null || context === void 0 ? void 0 : context.state.referenceWidth
   });
   var cssStyles = [hasChildFlyout && !isPushed && styles.hasChildFlyout[side]];
   var style = {};

package/test-env/components/icon/assets/chart_pie.js

@@ -34,8 +34,7 @@ var EuiIconChartPie = function EuiIconChartPie(_ref) {
   }, props), title ? (0, _react2.jsx)("title", {
     id: titleId
   }, title) : null, (0, _react2.jsx)("path", {
-    stroke: "#1D2A3E",
-    d: "M7.5 8.5h6.979A6.498 6.498 0 0 1 1.5 8a6.5 6.5 0 0 1 6-6.48V8.5Zm2-6.824A6.506 6.506 0 0 1 14.323 6.5H9.5V1.676Z"
+    d: "M7 2.084A6 6 0 0 0 8 14v1A7 7 0 1 1 8 1v7h7a7 7 0 0 1-7 7v-1a6 6 0 0 0 5.915-5H7V2.084Zm2-1.012A7.002 7.002 0 0 1 14.928 7H9V1.072ZM10 6h3.657A6.015 6.015 0 0 0 10 2.343V6Z"
   }));
 };
 var icon = exports.icon = EuiIconChartPie;

package/test-env/components/icon/assets/product_dashboard.js

@@ -34,9 +34,11 @@ var EuiIconProductDashboard = function EuiIconProductDashboard(_ref) {
   }, props), title ? (0, _react2.jsx)("title", {
     id: titleId
   }, title) : null, (0, _react2.jsx)("path", {
-    fillRule: "evenodd",
-    d: "M6 11a1 1 0 0 1 1 1v1l-.005.102A1 1 0 0 1 6 14H2a1 1 0 0 1-1-1v-1a1 1 0 0 1 1-1h4Zm-4 2h4v-1H2v1ZM14 7a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h5Zm-5 6h5V8H9v5ZM6 7a1 1 0 0 1 1 1v1l-.005.103A1 1 0 0 1 6 10H2a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1h4ZM2 9h4V8H2v1ZM14 2a1 1 0 0 1 .995.897L15 3v2a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h12ZM2 5h12V3H2v2Z",
-    clipRule: "evenodd"
+    d: "m8.528 10.265.972-.972 1.5 1.5 1.646-1.647.707.708L11 12.207l-1.5-1.5-1.028 1.028-3-3.5-2.118 2.119-.708-.708 2.882-2.881 3 3.5Z"
+  }), (0, _react2.jsx)("path", {
+    d: "M9 8H8V6h1v2Zm2 0h-1V5h1v3Zm2 0h-1V4h1v4ZM7 5H3V4h4v1Z"
+  }), (0, _react2.jsx)("path", {
+    d: "M14 2a1 1 0 0 1 1 1v10a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V3a1 1 0 0 1 1-1h12ZM2 13h12V3H2v10Z"
   }));
 };
 var icon = exports.icon = EuiIconProductDashboard;

package/test-env/components/steps/step_horizontal.js

@@ -15,7 +15,7 @@ var _step_number = require("./step_number");
 var _step_strings = require("./step_strings");
 var _step_horizontal = require("./step_horizontal.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "step", "title", "onClick", "disabled", "status", "size"];
+var _excluded = ["className", "step", "title", "onClick", "disabled", "status", "size", "aria-label", "aria-labelledby"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -40,6 +40,8 @@ var EuiStepHorizontal = exports.EuiStepHorizontal = function EuiStepHorizontal(_
     status = _ref$status === void 0 ? 'incomplete' : _ref$status,
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'm' : _ref$size,
+    ariaLabel = _ref['aria-label'],
+    ariaLabelledby = _ref['aria-labelledby'],
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   if (disabled) status = 'disabled';
   var classes = (0, _classnames.default)('euiStepHorizontal', className);
@@ -49,7 +51,7 @@ var EuiStepHorizontal = exports.EuiStepHorizontal = function EuiStepHorizontal(_
   var cssNumberStyles = [numberStyles.euiStepHorizontal__number];
   var titleStyles = (0, _services.useEuiMemoizedStyles)(_step_horizontal.euiStepHorizontalTitleStyles);
   var cssTitleStyles = [titleStyles.euiStepHorizontal__title, status === 'disabled' && titleStyles.disabled];
-  var titleAttrsMap = {
+  var labelMap = {
     step: (0, _step_strings.useI18nStep)({
       number: step,
       title: title
@@ -83,14 +85,15 @@ var EuiStepHorizontal = exports.EuiStepHorizontal = function EuiStepHorizontal(_
       title: title
     })
   };
-  var titleAttr = titleAttrsMap[status || 'step'];
+  var ariaLabelAttr = labelMap[status || 'step'];
   var onStepClick = function onStepClick(event) {
-    if (!disabled) onClick(event);
+    if (!disabled && status !== 'disabled') onClick(event);
   };
   return (0, _react2.jsx)("button", (0, _extends2.default)({
     "aria-disabled": status === 'disabled' ? true : undefined,
     className: classes,
-    title: titleAttr,
+    "aria-label": ariaLabel !== null && ariaLabel !== void 0 ? ariaLabel : ariaLabelledby ? undefined : ariaLabelAttr,
+    "aria-labelledby": ariaLabelledby,
     onClick: onStepClick,
     disabled: disabled,
     css: cssStyles,