@elastic/eui 72.0.0 → 72.2.0

package/es/components/accordion/accordion.js

@@ -239,7 +239,7 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
           css: cssSpinnerStyles
         }), ___EmotionJSX(EuiText, {
           size: "s"
-        }, ___EmotionJSX("p", null, isLoadingMessage && isLoadingMessage !== true ? isLoadingMessage : ___EmotionJSX(EuiI18n, {
+        }, ___EmotionJSX("p", null, isLoadingMessage !== true ? isLoadingMessage : ___EmotionJSX(EuiI18n, {
           token: "euiAccordion.isLoading",
           default: "Loading"
         }))));

package/es/components/basic_table/basic_table.js

@@ -1236,7 +1236,7 @@ EuiBasicTable.propTypes = {
     /**
        * Defines the horizontal alignment of the column
        */
-    align: PropTypes.oneOf(["left", "right", "center"]),
+    align: PropTypes.any,
 
     /**
        * Indicates whether this column should truncate its content when it doesn't fit
@@ -1295,7 +1295,7 @@ EuiBasicTable.propTypes = {
        */
     truncateText: PropTypes.bool,
     isExpander: PropTypes.bool,
-    align: PropTypes.oneOf(["left", "right", "center"]),
+    align: PropTypes.any,
 
     /**
        * Disables the user's ability to change the sort but still shows the current direction

package/es/components/basic_table/in_memory_table.js

@@ -671,7 +671,7 @@ EuiInMemoryTable.propTypes = {
     /**
        * Defines the horizontal alignment of the column
        */
-    align: PropTypes.oneOf(["left", "right", "center"]),
+    align: PropTypes.any,
 
     /**
        * Indicates whether this column should truncate its content when it doesn't fit
@@ -730,7 +730,7 @@ EuiInMemoryTable.propTypes = {
        */
     truncateText: PropTypes.bool,
     isExpander: PropTypes.bool,
-    align: PropTypes.oneOf(["left", "right", "center"]),
+    align: PropTypes.any,
 
     /**
        * Disables the user's ability to change the sort but still shows the current direction
@@ -1185,10 +1185,7 @@ EuiInMemoryTable.propTypes = {
     "aria-label": PropTypes.string
   }).isRequired])]),
   sorting: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.shape({
-    sort: PropTypes.shape({
-      field: PropTypes.string.isRequired,
-      direction: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.any.isRequired]).isRequired
-    }).isRequired
+    sort: PropTypes.any.isRequired
   }).isRequired]),
 
   /**

package/es/components/basic_table/table.a11y.js

@@ -0,0 +1,128 @@
+/*
+ * 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.
+ */
+/// <reference types="../../../cypress/support"/>
+import React from 'react';
+import { EuiInMemoryTable } from './in_memory_table';
+import { EuiHealth } from '../health';
+import { EuiLink } from '../link';
+import { formatDate } from '../../services';
+import { createDataStore } from '../../../src-docs/src/views/tables/data_store';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var store = createDataStore();
+
+var InMemoryTable = function InMemoryTable() {
+  var columns = [{
+    field: 'firstName',
+    name: 'First Name',
+    sortable: true,
+    truncateText: true
+  }, {
+    field: 'lastName',
+    name: 'Last Name',
+    truncateText: true
+  }, {
+    field: 'github',
+    name: 'Github',
+    render: function render(username) {
+      return ___EmotionJSX(EuiLink, {
+        href: "https://github.com/".concat(username),
+        target: "_blank"
+      }, username);
+    }
+  }, {
+    field: 'dateOfBirth',
+    name: 'Date of Birth',
+    dataType: 'date',
+    render: function render(date) {
+      return formatDate(date, 'dobLong');
+    },
+    sortable: true
+  }, {
+    field: 'nationality',
+    name: 'Nationality',
+    render: function render(countryCode) {
+      var country = store.getCountry(countryCode);
+      return "".concat(country.flag, " ").concat(country.name);
+    }
+  }, {
+    field: 'online',
+    name: 'Online',
+    dataType: 'boolean',
+    render: function render(online) {
+      var color = online ? 'success' : 'danger';
+      var label = online ? 'Online' : 'Offline';
+      return ___EmotionJSX(EuiHealth, {
+        color: color
+      }, label);
+    },
+    sortable: true
+  }];
+  var sorting = {
+    sort: {
+      field: 'dateOfBirth',
+      direction: 'desc'
+    }
+  };
+  return ___EmotionJSX(EuiInMemoryTable, {
+    "data-test-subj": "cy-in-memory-table",
+    tableCaption: "Demo of EuiInMemoryTable",
+    items: store.users,
+    columns: columns,
+    pagination: true,
+    sorting: sorting
+  });
+};
+
+beforeEach(function () {
+  cy.viewport(1024, 768); // medium breakpoint
+
+  cy.realMount(___EmotionJSX(InMemoryTable, null));
+  cy.get('div[data-test-subj="cy-in-memory-table"]').should('exist');
+});
+describe('EuiInMemoryTable', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations on pagination click', function () {
+      cy.get('a[data-test-subj="pagination-button-1"]').realClick();
+      cy.get('button[data-test-subj="pagination-button-1"]').should('be.disabled');
+      cy.checkAxe();
+    });
+    it('has zero violations after number of rows is increased', function () {
+      cy.get('button[data-test-subj="tablePaginationPopoverButton"]').realClick();
+      cy.get('div[data-popover-open="true"]').should('exist');
+      cy.get('button[data-test-subj="tablePagination-25-rows"]').realClick();
+      cy.get('table.euiTable').find('tr.euiTableRow').should('have.length', 20);
+      cy.checkAxe();
+    });
+    it('has zero violations after sorting on a column', function () {
+      cy.realPress('Tab');
+      cy.get('button[data-test-subj="tableHeaderSortButton"]').first().should('have.focus');
+      cy.realPress('Enter');
+      cy.get('tbody tr.euiTableRow span.euiTableCellContent__text').first().contains('Another very long first name which will wrap or be truncated');
+    });
+    it('has zero violations when number of rows is increased by keyboard', function () {
+      cy.repeatRealPress('Tab', 14);
+      cy.get('button[data-test-subj="tablePaginationPopoverButton"]').should('have.focus').realPress('Space');
+      cy.get('div[data-popover-open="true"]').should('exist');
+      cy.get('div[data-popover-open="true"]').should('have.focus');
+      cy.repeatRealPress('Tab'); // Switched to Tab from ArrowDown because of flaky test runs
+
+      cy.get('button[data-test-subj="tablePagination-25-rows"]').realPress('Space');
+      cy.get('table.euiTable').find('tr.euiTableRow').should('have.length', 20);
+      cy.checkAxe();
+    });
+    it('has zero violations when pagination is pressed', function () {
+      cy.repeatRealPress('Tab', 15);
+      cy.get('a[data-test-subj="pagination-button-1"]').should('have.focus').realPress('Enter');
+      cy.get('button[data-test-subj="pagination-button-1"]').should('be.disabled');
+      cy.checkAxe();
+    });
+  });
+});

package/es/components/color_picker/color_picker.styles.js

@@ -0,0 +1,16 @@
+/*
+ * 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.
+ */
+import { mathWithUnits } from '../../global_styling';
+export var euiColorPickerVariables = function euiColorPickerVariables(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    width: mathWithUnits([euiTheme.size.l, euiTheme.size.s], function (x, y) {
+      return x * 5 + y * 4;
+    })
+  };
+};

package/es/components/color_picker/color_stops/color_stop_thumb.js

@@ -36,7 +36,7 @@ import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { getPositionFromStop, getStopFromMouseLocation, isColorInvalid, isStopInvalid } from './utils';
 import { getChromaColor } from '../utils';
-import { keys, useMouseMove } from '../../../services';
+import { keys, useMouseMove, useEuiTheme } from '../../../services';
 import { EuiButtonIcon } from '../../button';
 import { EuiColorPicker } from '../color_picker';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
@@ -46,6 +46,7 @@ import { EuiPopover } from '../../popover';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiSpacer } from '../../spacer';
 import { EuiRangeThumb } from '../../form/range/range_thumb';
+import { euiColorStopThumbStyles, euiColorStopThumbPopoverStyles, euiColorStopStyles } from './color_stop_thumb.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiColorStopThumb = function EuiColorStopThumb(_ref) {
   var className = _ref.className,
@@ -253,13 +254,20 @@ export var EuiColorStopThumb = function EuiColorStopThumb(_ref) {
     }
   };
 
-  var classes = classNames('euiColorStopPopover', {
-    'euiColorStopPopover-hasFocus': hasFocus || isPopoverOpen
-  }, className);
-  return ___EmotionJSX(EuiPopover, _extends({}, rest, {
+  var euiTheme = useEuiTheme();
+  var popoverStyles = euiColorStopThumbPopoverStyles(euiTheme);
+  var cssPopoverStyles = [popoverStyles.euiColorStopThumbPopover, (hasFocus || isPopoverOpen) && popoverStyles.hasFocus];
+  var thumbStyles = euiColorStopThumbStyles(euiTheme);
+  var cssThumbStyles = [thumbStyles.euiColorStopThumb, isPopoverOpen && thumbStyles.isPopoverOpen];
+  var colorStopStyles = euiColorStopStyles(euiTheme);
+  var cssColorStopStyles = colorStopStyles.euiColorStop;
+  var classes = classNames('euiColorStopPopover', className);
+  return ___EmotionJSX(EuiPopover, _extends({
+    css: cssPopoverStyles
+  }, rest, {
     ref: popoverRef,
     className: classes,
-    anchorClassName: "euiColorStopPopover__anchor",
+    anchorClassName: "euiColorStopThumbPopover__anchor",
     panelPaddingSize: "s",
     isOpen: isPopoverOpen,
     closePopover: closePopover,
@@ -267,7 +275,9 @@ export var EuiColorStopThumb = function EuiColorStopThumb(_ref) {
     focusTrapProps: {
       clickOutsideDisables: false
     },
-    panelClassName: numberInputRef ? undefined : 'euiColorStopPopover-isLoadingPanel',
+    panelProps: {
+      css: numberInputRef ? undefined : popoverStyles.isLoadingPanel
+    },
     style: _objectSpread(_objectSpread({}, style), {}, {
       left: "".concat(getPositionFromStopFn(stop), "%")
     }),
@@ -299,6 +309,7 @@ export var EuiColorStopThumb = function EuiColorStopThumb(_ref) {
         "aria-label": ariaLabel,
         title: title,
         className: "euiColorStopThumb",
+        css: cssThumbStyles,
         tabIndex: -1,
         style: {
           background: background
@@ -308,6 +319,7 @@ export var EuiColorStopThumb = function EuiColorStopThumb(_ref) {
     })
   }), ___EmotionJSX("div", {
     className: "euiColorStop",
+    css: cssColorStopStyles,
     "data-test-subj": "euiColorStopPopover"
   }, ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
     "aria-live": "polite"

package/es/components/color_picker/color_stops/color_stop_thumb.styles.js

@@ -0,0 +1,59 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 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.
+ */
+import { css } from '@emotion/react';
+import { mathWithUnits } from '../../../global_styling';
+import { euiRangeVariables, euiRangeThumbFocus } from '../../form/range/range.styles';
+import { euiColorPickerVariables } from '../color_picker.styles';
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "zrzkfg-euiColorStopThumb",
+  styles: "&:not(:disabled){inset-block-start:0;margin-block-start:0;pointer-events:auto;cursor:grab;&:active{cursor:grabbing;}};label:euiColorStopThumb;"
+} : {
+  name: "zrzkfg-euiColorStopThumb",
+  styles: "&:not(:disabled){inset-block-start:0;margin-block-start:0;pointer-events:auto;cursor:grab;&:active{cursor:grabbing;}};label:euiColorStopThumb;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiColorStopThumbStyles = function euiColorStopThumbStyles(euiThemeContext) {
+  return {
+    // Base
+    euiColorStopThumb: _ref2,
+    isPopoverOpen: /*#__PURE__*/css(euiRangeThumbFocus(euiThemeContext), ";;label:isPopoverOpen;")
+  };
+};
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1wndm4s-isLoadingPanel",
+  styles: "visibility:hidden!important;label:isLoadingPanel;"
+} : {
+  name: "1wndm4s-isLoadingPanel",
+  styles: "visibility:hidden!important;label:isLoadingPanel;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiColorStopThumbPopoverStyles = function euiColorStopThumbPopoverStyles(euiThemeContext) {
+  var range = euiRangeVariables(euiThemeContext);
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    // Base
+    euiColorStopThumbPopover: /*#__PURE__*/css("position:absolute;inset-block-start:50%;inline-size:", range.thumbWidth, ";block-size:", range.thumbHeight, ";margin-block-start:", mathWithUnits(range.thumbHeight, function (x) {
+      return x * -0.5;
+    }), ";.euiColorStopThumbPopover__anchor{position:absolute;inline-size:100%;block-size:100%;&::before{content:'';display:block;position:absolute;inset-inline-start:0;inset-block-start:0;block-size:", range.thumbHeight, ";inline-size:", range.thumbWidth, ";border-radius:", range.thumbHeight, ";background:", euiTheme.colors.emptyShade, ";}};label:euiColorStopThumbPopover;"),
+    isLoadingPanel: _ref,
+    hasFocus: /*#__PURE__*/css("z-index:", range.thumbZIndex, ";;label:hasFocus;")
+  };
+};
+export var euiColorStopStyles = function euiColorStopStyles(euiThemeContext) {
+  var colorPicker = euiColorPickerVariables(euiThemeContext);
+  return {
+    // Base
+    euiColorStop: /*#__PURE__*/css("inline-size:", colorPicker.width, ";;label:euiColorStop;")
+  };
+};

package/es/components/color_picker/color_stops/color_stops.js

@@ -43,7 +43,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
  */
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import classNames from 'classnames';
-import { keys, DEFAULT_VISUALIZATION_COLOR, getSteppedGradient } from '../../../services';
+import { keys, DEFAULT_VISUALIZATION_COLOR, getSteppedGradient, useEuiTheme } from '../../../services';
 import { EuiColorStopThumb } from './color_stop_thumb';
 import { addStop, addDefinedStop, getPositionFromStop, getStopFromMouseLocation, isInvalid, removeStop } from './utils';
 import { getChromaColor } from '../utils';
@@ -52,6 +52,7 @@ import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiRangeHighlight } from '../../form/range/range_highlight';
 import { EuiRangeTrack } from '../../form/range/range_track';
 import { EuiRangeWrapper } from '../../form/range/range_wrapper';
+import { euiColorStopsStyles, euiColorStopsAddContainerStyles } from './color_stops.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 // Because of how the thumbs are rendered in the popover, using ref results in an infinite loop.
 // We'll instead use old fashioned namespaced DOM selectors to get references
@@ -190,11 +191,16 @@ export var EuiColorStops = function EuiColorStops(_ref) {
       setFocusStopOnUpdate = _useState14[1];
 
   var isNotInteractive = disabled || readOnly;
-  var classes = classNames('euiColorStops', {
-    'euiColorStops-isDragging': isHoverDisabled,
-    'euiColorStops-isDisabled': disabled,
-    'euiColorStops-isReadOnly': readOnly
-  }, className);
+  var isDragging = isHoverDisabled && !isNotInteractive;
+  var addContainerIsDisabled = isHoverDisabled || isNotInteractive;
+  var classes = classNames('euiColorStops', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiColorStopsStyles(euiTheme);
+  var cssPopoverStyles = [styles.euiColorStops, !disabled ? styles.isEnabled : styles.isDisabled, readOnly && styles.isReadOnly, isDragging && styles.isDragging];
+  var cssTrackStyles = [styles.euiColorStops__track];
+  var cssAddTargetStyles = [styles.euiColorStops__addTarget];
+  var addContainerStyles = euiColorStopsAddContainerStyles(euiTheme);
+  var cssAddContainerStyles = [addContainerStyles.euiColorStopsAddContainer, !addContainerIsDisabled ? addContainerStyles.isEnabled : addContainerStyles.isDisabled];
 
   var getStopFromMouseLocationFn = function getStopFromMouseLocationFn(location) {
     // Guard against `null` ref in usage
@@ -395,7 +401,7 @@ export var EuiColorStops = function EuiColorStops(_ref) {
         disabled: disabled,
         readOnly: readOnly,
         "aria-valuetext": "Stop: ".concat(colorStop.stop, ", Color: ").concat(colorStop.color, " (").concat(index + 1, " of ").concat(colorStops.length, ")"),
-        isPopoverOpen: colorStop.id === openedStopId,
+        isPopoverOpen: !isDragging && colorStop.id === openedStopId,
         openPopover: function openPopover() {
           setOpenedStopId(colorStop.id);
         },
@@ -405,7 +411,7 @@ export var EuiColorStops = function EuiColorStops(_ref) {
         valueInputProps: valueInputProps
       });
     });
-  }, [colorStops, disabled, handleOnChange, max, min, mode, onRemove, openedStopId, rangeMax, rangeMin, readOnly, showAlpha, sortedStops, swatches, wrapperRef, valueInputProps]);
+  }, [colorStops, disabled, handleOnChange, isDragging, max, min, mode, onRemove, openedStopId, rangeMax, rangeMin, readOnly, showAlpha, sortedStops, swatches, wrapperRef, valueInputProps]);
   var positions = wrapperRef ? sortedStops.map(function (_ref3) {
     var stop = _ref3.stop;
     return getPositionFromStopFn(stop);
@@ -413,10 +419,10 @@ export var EuiColorStops = function EuiColorStops(_ref) {
 
   var gradientStop = function gradientStop(colorStop, index) {
     var color = getChromaColor(colorStop.color, showAlpha);
-    var rgba = color ? color.css() : 'currentColor';
+    var rgba = color ? color.css() : 'transparent';
 
     if (index === 0) {
-      return "currentColor, currentColor ".concat(positions[index], "%, ").concat(rgba, " ").concat(positions[index], "%");
+      return "transparent, transparent ".concat(positions[index], "%, ").concat(rgba, " ").concat(positions[index], "%");
     }
 
     return "".concat(rgba, " ").concat(positions[index], "%");
@@ -444,13 +450,15 @@ export var EuiColorStops = function EuiColorStops(_ref) {
       percentageSteps = percentageSteps + percentage;
     });
     steppedGradient = steppedGradient.substring(0, steppedGradient.length - 2);
-    gradient = "linear-gradient(to right, currentColor ".concat(trailingPercentage, "%, ").concat(steppedGradient, ")");
+    gradient = "linear-gradient(to right, transparent ".concat(trailingPercentage, "%, ").concat(steppedGradient, ")");
   } else {
     var linearGradient = sortedStops.map(stopType === 'gradient' ? gradientStop : fixedStop);
     gradient = "linear-gradient(to right,".concat(linearGradient, ")");
   }
 
-  return ___EmotionJSX(EuiRangeWrapper, _extends({}, rest, {
+  return ___EmotionJSX(EuiRangeWrapper, _extends({
+    css: cssPopoverStyles
+  }, rest, {
     "data-test-subj": classNames('euiColorStops', rest['data-test-subj']),
     ref: setWrapperRef,
     className: classes,
@@ -473,6 +481,8 @@ export var EuiColorStops = function EuiColorStops(_ref) {
     token: "euiColorStops.screenReaderAnnouncement",
     default: "{label}: {readOnly} {disabled} Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop."
   }))), ___EmotionJSX(EuiRangeTrack, {
+    className: "euiColorStops__track",
+    css: cssTrackStyles,
     min: min || rangeMin,
     max: max || rangeMax,
     compressed: compressed,
@@ -489,13 +499,13 @@ export var EuiColorStops = function EuiColorStops(_ref) {
       trackWidth: trackWidth
     }), ___EmotionJSX("div", {
       "data-test-subj": "euiColorStopsAdd",
-      className: classNames('euiColorStops__addContainer', {
-        'euiColorStops__addContainer-isDisabled': isHoverDisabled || disabled || readOnly
-      }),
+      className: "euiColorStops__addContainer",
+      css: cssAddContainerStyles,
       onClick: handleAddClick,
       onMouseMove: handleAddHover
     }, ___EmotionJSX("div", {
       className: "euiColorStops__addTarget",
+      css: cssAddTargetStyles,
       style: {
         left: "".concat(addTargetPosition, "%")
       }

package/es/components/color_picker/color_stops/color_stops.styles.js

@@ -0,0 +1,65 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 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.
+ */
+import { css } from '@emotion/react';
+import { darken, brighten, hexToRgb } from '../../../services';
+import { mathWithUnits, euiCanAnimate } from '../../../global_styling';
+import { euiCustomControl } from '../../form/form.styles';
+import { euiRangeThumbStyle, euiRangeVariables } from '../../form/range/range.styles';
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "uu65b3-isDragging",
+  styles: "cursor:grabbing;label:isDragging;"
+} : {
+  name: "uu65b3-isDragging",
+  styles: "cursor:grabbing;label:isDragging;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiColorStopsStyles = function euiColorStopsStyles(euiThemeContext) {
+  var range = euiRangeVariables(euiThemeContext);
+  var euiTheme = euiThemeContext.euiTheme,
+      colorMode = euiThemeContext.colorMode;
+  var isDarkMode = colorMode === 'DARK';
+  var stripeColor = isDarkMode ? brighten(range.trackColor, 0.5) : darken(range.trackColor, 0.5);
+  var stripesBackground = "repeating-linear-gradient(\n    -45deg,\n    ".concat(range.trackColor, ",\n    ").concat(range.trackColor, " 25%,\n    ").concat(stripeColor, " 25%,\n    ").concat(stripeColor, " 50%,\n    ").concat(range.trackColor, " 50%\n  )");
+  return {
+    // Base
+    euiColorStops: /*#__PURE__*/css(";label:euiColorStops;"),
+    isEnabled: /*#__PURE__*/css("&:focus{outline:none;}&:focus-visible{.euiColorStops__track::after{box-shadow:0 0 0 1px rgba(", hexToRgb(euiTheme.colors.emptyShade).join(', '), ", 0.8),0 0 0 3px ", range.focusColor, ";}};label:isEnabled;"),
+    isDisabled: /*#__PURE__*/css(";label:isDisabled;"),
+    isHoverDisabled: /*#__PURE__*/css(";label:isHoverDisabled;"),
+    isReadOnly: /*#__PURE__*/css(";label:isReadOnly;"),
+    isDragging: _ref2,
+    euiColorStops__track: /*#__PURE__*/css("&::after{background:", stripesBackground, ";background-size:", euiTheme.size.xs, " ", euiTheme.size.xs, ";};label:euiColorStops__track;"),
+    euiColorStops__addTarget: /*#__PURE__*/css(euiCustomControl(euiThemeContext, {
+      type: 'round'
+    }), ";", euiRangeThumbStyle(euiThemeContext), ";position:absolute;inset-block-start:0;block-size:", range.thumbHeight, ";inline-size:", range.thumbHeight, ";background-color:", euiTheme.colors.lightestShade, ";pointer-events:none;opacity:0;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.darkShade, ";box-shadow:none;z-index:", range.thumbZIndex, ";", euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, " ease-in;};label:euiColorStops__addTarget;")
+  };
+};
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1173em8-isEnabled",
+  styles: "&:hover{cursor:pointer;.euiColorStops__addTarget{opacity:0.7;}};label:isEnabled;"
+} : {
+  name: "1173em8-isEnabled",
+  styles: "&:hover{cursor:pointer;.euiColorStops__addTarget{opacity:0.7;}};label:isEnabled;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiColorStopsAddContainerStyles = function euiColorStopsAddContainerStyles(euiThemeContext) {
+  var range = euiRangeVariables(euiThemeContext);
+  return {
+    euiColorStopsAddContainer: /*#__PURE__*/css("display:block;position:absolute;inset-inline-start:0;inset-inline-end:0;inset-block-start:50%;block-size:", range.thumbHeight, ";margin-block-start:", mathWithUnits(range.thumbHeight, function (x) {
+      return x * -0.5;
+    }), ";z-index:", range.thumbZIndex, ";;label:euiColorStopsAddContainer;"),
+    isEnabled: _ref,
+    isDisabled: /*#__PURE__*/css(";label:isDisabled;")
+  };
+};

package/es/components/date_picker/super_date_picker/super_date_picker.js

@@ -693,6 +693,14 @@ EuiSuperDatePickerInternal.propTypes = {
          */
       position: PropTypes.oneOf(["top", "right", "bottom", "left"]).isRequired,
 
+      /**
+         * When `true`, the tooltip's position is re-calculated when the user
+         * scrolls. This supports having fixed-position tooltip anchors.
+         *
+         * When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true`
+         */
+      repositionOnScroll: PropTypes.bool,
+
       /**
          * If supplied, called when mouse movement causes the tool tip to be
          * hidden.
@@ -861,6 +869,7 @@ EuiSuperDatePicker.propTypes = {
       title: PropTypes.node,
       id: PropTypes.string,
       position: PropTypes.oneOf(["top", "right", "bottom", "left"]).isRequired,
+      repositionOnScroll: PropTypes.bool,
       onMouseOut: PropTypes.func
     }),
     iconOnly: PropTypes.bool,

package/es/components/date_picker/super_date_picker/super_update_button.js

@@ -281,6 +281,14 @@ EuiSuperUpdateButton.propTypes = {
        */
     position: PropTypes.oneOf(["top", "right", "bottom", "left"]).isRequired,
 
+    /**
+       * When `true`, the tooltip's position is re-calculated when the user
+       * scrolls. This supports having fixed-position tooltip anchors.
+       *
+       * When nesting an `EuiTooltip` in a scrollable container, `repositionOnScroll` should be `true`
+       */
+    repositionOnScroll: PropTypes.bool,
+
     /**
        * If supplied, called when mouse movement causes the tool tip to be
        * hidden.

package/es/components/form/range/range_highlight.styles.js

@@ -17,7 +17,7 @@ export var euiRangeHighlightStyles = function euiRangeHighlightStyles(euiThemeCo
 export var euiRangeHighlightProgressStyles = function euiRangeHighlightProgressStyles(euiThemeContext) {
   var range = euiRangeVariables(euiThemeContext);
   return {
-    euiRangeHighlight__progress: /*#__PURE__*/css("block-size:", range.highlightHeight, ";border-radius:", range.trackBorderRadius, ";background-color:", range.highlightColor, ";border-color:", range.highlightColor, ";.euiRangeSlider:focus-visible~.euiRangeHighlight &,.euiRangeThumb:focus-visible~.euiRangeHighlight &,.euiRangeDraggable:focus~.euiRangeHighlight &{background-color:", range.focusColor, ";};label:euiRangeHighlight__progress;")
+    euiRangeHighlight__progress: /*#__PURE__*/css("block-size:", range.highlightHeight, ";border-radius:", range.trackBorderRadius, ";background-color:", range.highlightColor, ";.euiRangeSlider:focus-visible~.euiRangeHighlight &,.euiRangeThumb:focus-visible~.euiRangeHighlight &,.euiRangeDraggable:focus~.euiRangeHighlight &{background-color:", range.focusColor, ";};label:euiRangeHighlight__progress;")
   };
 };
 export var euiRangeHighlightLevelsWrapperStyles = function euiRangeHighlightLevelsWrapperStyles(euiThemeContext) {

package/es/components/form/range/range_levels.styles.js

@@ -18,7 +18,7 @@ export var euiRangeLevelsStyles = function euiRangeLevelsStyles(euiThemeContext)
   var stripesBackground = "repeating-linear-gradient(\n    -45deg,\n    ".concat(transparentize(stripeColor, 0.5), ",\n    ").concat(transparentize(stripeColor, 0.5), " 25%,\n    ").concat(transparentize(stripeColor, 0.7), " 25%,\n    ").concat(transparentize(stripeColor, 0.7), " 50%,\n    ").concat(transparentize(stripeColor, 0.5), " 50%\n  )");
   return {
     euiRangeLevels: /*#__PURE__*/css("display:flex;justify-content:stretch;position:absolute;inset-inline:0;inset-block-start:", range.trackTopPositionWithoutTicks, ";z-index:", range.levelsZIndex, ";;label:euiRangeLevels;"),
-    hasRange: /*#__PURE__*/css("&::after{content:'';position:absolute;block-size:", range.trackHeight, ";inline-size:100%;background-image:", stripesBackground, ";background-size:", euiTheme.size.s, " ", euiTheme.size.s, ";border-radius:", range.trackBorderRadius, ";};label:hasRange;"),
+    hasRange: /*#__PURE__*/css("&::after{content:'';position:absolute;block-size:", range.trackHeight, ";inline-size:100%;background-image:", stripesBackground, ";background-size:", euiTheme.size.xs, " ", euiTheme.size.xs, ";border-radius:", range.trackBorderRadius, ";};label:hasRange;"),
     hasTicks: /*#__PURE__*/css("inset-block-start:", range.trackTopPositionWithTicks, ";;label:hasTicks;")
   };
 };

package/es/components/form/range/range_track.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "disabled", "max", "min", "step", "showTicks", "tickInterval", "ticks", "levels", "onChange", "value", "compressed", "showRange"];
+var _excluded = ["children", "disabled", "max", "min", "step", "showTicks", "tickInterval", "ticks", "levels", "onChange", "value", "compressed", "showRange", "className"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -27,6 +27,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  */
 import React, { useState, useMemo, useEffect } from 'react';
 import PropTypes from "prop-types";
+import classNames from 'classnames';
 import range from 'lodash/range';
 import { useEuiTheme, isEvenlyDivisibleBy } from '../../../services';
 import { EuiRangeLevels } from './range_levels';
@@ -47,6 +48,7 @@ export var EuiRangeTrack = function EuiRangeTrack(_ref) {
       value = _ref.value,
       compressed = _ref.compressed,
       showRange = _ref.showRange,
+      className = _ref.className,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   useEffect(function () {
@@ -106,8 +108,9 @@ export var EuiRangeTrack = function EuiRangeTrack(_ref) {
       trackWidth = _useState2[0],
       setTrackWidth = _useState2[1];
 
+  var classes = classNames('euiRangeTrack', className);
   return ___EmotionJSX("div", _extends({
-    className: "euiRangeTrack",
+    className: classes,
     css: cssStyles
   }, rest, {
     ref: function ref(node) {