@elastic/eui 81.3.0 → 82.0.0

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

@@ -48,6 +48,10 @@ export var EuiRangeTrack = function EuiRangeTrack(_ref) {
       step: step
     });
   }, [value, min, max, step]);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    trackWidth = _useState2[0],
+    setTrackWidth = _useState2[1];
   var tickSequence = useMemo(function () {
     if (showTicks !== true) return;
     var sequence;
@@ -82,18 +86,14 @@ export var EuiRangeTrack = function EuiRangeTrack(_ref) {
     }
 
     // Error out if there are too many ticks to render
-    if (sequence.length > 20) {
-      throw new Error("The number of ticks to render is too high (".concat(sequence.length, "), reduce the interval."));
+    if (trackWidth && sequence.length) {
+      validateTickRenderCount(trackWidth, sequence.length);
     }
     return sequence;
-  }, [showTicks, ticks, min, max, tickInterval, step]);
+  }, [showTicks, ticks, min, max, tickInterval, step, trackWidth]);
   var euiTheme = useEuiTheme();
   var styles = euiRangeTrackStyles(euiTheme);
   var cssStyles = [styles.euiRangeTrack, disabled && styles.disabled, levels && !!levels.length && styles.hasLevels, showTicks && (tickSequence || ticks) && styles.hasTicks];
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    trackWidth = _useState2[0],
-    setTrackWidth = _useState2[1];
   var classes = classNames('euiRangeTrack', className);
   return ___EmotionJSX("div", _extends({
     className: classes,
@@ -176,4 +176,18 @@ var validateValueIsInStep = function validateValueIsInStep(value, _ref2) {
   }
   // Return the value if nothing fails
   return value;
+};
+var validateTickRenderCount = function validateTickRenderCount(trackWidth, tickCount) {
+  var tickWidth = trackWidth / tickCount;
+
+  // These widths are guesstimations - it's possible we should use actual label content/widths instead
+  var COMFORTABLE_TICK_WIDTH = 20; // Set a warning threshold before throwing
+  var MIN_TICK_WIDTH = 5; // If ticks are smaller than this, something's gone seriously wrong and we should throw
+
+  var message = "The number of ticks to render (".concat(tickCount, ") is too high for the range width. Ensure all ticks are visible on the page at multiple screen widths, or use EUI's breakpoint hook utilities to reduce the tick interval responsively.");
+  if (tickWidth <= MIN_TICK_WIDTH) {
+    throw new Error(message);
+  } else if (tickWidth < COMFORTABLE_TICK_WIDTH) {
+    console.warn(message);
+  }
 };

package/es/components/header/header_links/header_links.js

@@ -201,7 +201,31 @@ EuiHeaderLinks.propTypes = {
     /**
        * Object of props passed to EuiPanel. See #EuiPopoverPanelProps
        */
-    panelProps: PropTypes.any,
+    panelProps: PropTypes.shape({
+      element: PropTypes.oneOf(["div"]),
+      /**
+         * Padding for all four sides
+         */
+      paddingSize: PropTypes.any,
+      /**
+         * Corner border radius
+         */
+      borderRadius: PropTypes.any,
+      /**
+         * When true the panel will grow in height to match `EuiFlexItem`
+         */
+      grow: PropTypes.bool,
+      panelRef: PropTypes.any,
+      /**
+         * Background color of the panel;
+         * Usually a lightened form of the brand colors
+         */
+      color: PropTypes.any,
+      className: PropTypes.string,
+      "aria-label": PropTypes.string,
+      "data-test-subj": PropTypes.string,
+      css: PropTypes.any
+    }),
     panelRef: PropTypes.any,
     /**
        * Optional screen reader instructions to announce upon popover open,

package/es/components/popover/popover.js

@@ -625,7 +625,31 @@ EuiPopover.propTypes = {
   /**
      * Object of props passed to EuiPanel. See #EuiPopoverPanelProps
      */
-  panelProps: PropTypes.any,
+  panelProps: PropTypes.shape({
+    element: PropTypes.oneOf(["div"]),
+    /**
+       * Padding for all four sides
+       */
+    paddingSize: PropTypes.any,
+    /**
+       * Corner border radius
+       */
+    borderRadius: PropTypes.any,
+    /**
+       * When true the panel will grow in height to match `EuiFlexItem`
+       */
+    grow: PropTypes.bool,
+    panelRef: PropTypes.any,
+    /**
+       * Background color of the panel;
+       * Usually a lightened form of the brand colors
+       */
+    color: PropTypes.any,
+    className: PropTypes.string,
+    "aria-label": PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
+  }),
   panelRef: PropTypes.any,
   /**
      * Optional screen reader instructions to announce upon popover open,

package/es/components/popover/popover_panel/_popover_panel.js

@@ -65,16 +65,6 @@ export var EuiPopoverPanel = function EuiPopoverPanel(_ref) {
 };
 EuiPopoverPanel.propTypes = {
   element: PropTypes.oneOf(["div"]),
-  /**
-     * Adds a medium shadow to the panel;
-     * Only works when `color="plain"`
-     */
-  hasShadow: PropTypes.bool,
-  /**
-     * Adds a slight 1px border on all edges.
-     * Only works when `color="plain | transparent"`
-     */
-  hasBorder: PropTypes.bool,
   /**
      * Padding for all four sides
      */

package/es/components/tour/tour_step.js

@@ -287,7 +287,31 @@ EuiTourStep.propTypes = {
   /**
      * Object of props passed to EuiPanel. See #EuiPopoverPanelProps
      */
-  panelProps: PropTypes.any,
+  panelProps: PropTypes.shape({
+    element: PropTypes.oneOf(["div"]),
+    /**
+       * Padding for all four sides
+       */
+    paddingSize: PropTypes.any,
+    /**
+       * Corner border radius
+       */
+    borderRadius: PropTypes.any,
+    /**
+       * When true the panel will grow in height to match `EuiFlexItem`
+       */
+    grow: PropTypes.bool,
+    panelRef: PropTypes.any,
+    /**
+       * Background color of the panel;
+       * Usually a lightened form of the brand colors
+       */
+    color: PropTypes.any,
+    className: PropTypes.string,
+    "aria-label": PropTypes.string,
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
+  }),
   panelRef: PropTypes.any,
   /**
      * Optional screen reader instructions to announce upon popover open,

package/es/global_styling/variables/breakpoint.js

@@ -10,4 +10,5 @@ export var EuiThemeBreakpoints = ['xs', 's', 'm', 'l', 'xl'];
 
 // This type cannot be a string enum / must be a generic string
 // in case consumers add custom breakpoint sizes, such as xxl or xxs
-// Set the minimum window width at which to start to the breakpoint
+// Explicitly list out each key so we can document default values
+// via JSDoc (which is available to devs in IDE via intellisense)

package/eui.d.ts

@@ -127,7 +127,18 @@ declare module '@elastic/eui/src/services/alignment' {
 declare module '@elastic/eui/src/global_styling/variables/breakpoint' {
 	export const EuiThemeBreakpoints: readonly ["xs", "s", "m", "l", "xl"];
 	export type _EuiThemeBreakpoint = string;
-	export type _EuiThemeBreakpoints = Record<_EuiThemeBreakpoint, number>;
+	export type _EuiThemeBreakpoints = Record<_EuiThemeBreakpoint, number> & {
+	    /** - Default value: 0 */
+	    xs: number;
+	    /** - Default value: 575 */
+	    s: number;
+	    /** - Default value: 768 */
+	    m: number;
+	    /** - Default value: 992 */
+	    l: number;
+	    /** - Default value: 1200 */
+	    xl: number;
+	};
 
 }
 declare module '@elastic/eui/src/components/common' {
@@ -260,7 +271,18 @@ declare module '@elastic/eui/src/global_styling/variables/animations' {
 	 */
 	export const EuiThemeAnimationSpeeds: readonly ["extraFast", "fast", "normal", "slow", "extraSlow"];
 	export type _EuiThemeAnimationSpeed = (typeof EuiThemeAnimationSpeeds)[number];
-	export type _EuiThemeAnimationSpeeds = Record<_EuiThemeAnimationSpeed, CSSProperties['animationDuration']>;
+	export type _EuiThemeAnimationSpeeds = {
+	    /** - Default value: 90ms */
+	    extraFast: CSSProperties['animationDuration'];
+	    /** - Default value: 150ms */
+	    fast: CSSProperties['animationDuration'];
+	    /** - Default value: 250ms */
+	    normal: CSSProperties['animationDuration'];
+	    /** - Default value: 350ms */
+	    slow: CSSProperties['animationDuration'];
+	    /** - Default value: 500ms */
+	    extraSlow: CSSProperties['animationDuration'];
+	};
 	/**
 	 * Easings / Timing functions
 	 */
@@ -276,20 +298,24 @@ declare module '@elastic/eui/src/global_styling/variables/borders' {
 	export interface _EuiThemeBorderWidthValues {
 	    /**
 	     * Thinnest width for border
+	     * - Default value: 1px
 	     */
 	    thin: CSSProperties['borderWidth'];
 	    /**
 	     * Thickest width for border
+	     * - Default value: 2px
 	     */
 	    thick: CSSProperties['borderWidth'];
 	}
 	export interface _EuiThemeBorderRadiusValues {
 	    /**
 	     * Primary corner radius size
+	     * - Default value: 6px
 	     */
 	    medium: CSSProperties['borderRadius'];
 	    /**
 	     * Small corner radius size
+	     * - Default value: 4px
 	     */
 	    small: CSSProperties['borderRadius'];
 	}
@@ -312,14 +338,17 @@ declare module '@elastic/eui/src/global_styling/variables/borders' {
 	export interface _EuiThemeBorderTypes {
 	    /**
 	     * Full `border` property string computed using `border.width.thin` and `border.color`
+	     * - Default value: 1px solid [colors.lightShade]
 	     */
 	    thin: CSSProperties['border'];
 	    /**
 	     * Full `border` property string computed using `border.width.thick` and `border.color`
+	     * - Default value: 2px solid [colors.lightShade]
 	     */
 	    thick: CSSProperties['border'];
 	    /**
 	     * Full editable style `border` property string computed using `border.width.thick` and `border.color`
+	     * - Default value: 2px dotted [colors.lightShade]
 	     */
 	    editable: CSSProperties['border'];
 	}
@@ -468,7 +497,28 @@ declare module '@elastic/eui/src/global_styling/variables/size' {
 	export type _EuiThemeBase = number;
 	export const EuiThemeSizes: readonly ["xxs", "xs", "s", "m", "base", "l", "xl", "xxl", "xxxl", "xxxxl"];
 	export type _EuiThemeSize = (typeof EuiThemeSizes)[number];
-	export type _EuiThemeSizes = Record<_EuiThemeSize, string>;
+	export type _EuiThemeSizes = {
+	    /** - Default value: 2px */
+	    xxs: string;
+	    /** - Default value: 4px */
+	    xs: string;
+	    /** - Default value: 8px */
+	    s: string;
+	    /** - Default value: 12px */
+	    m: string;
+	    /** - Default value: 16px */
+	    base: string;
+	    /** - Default value: 24px */
+	    l: string;
+	    /** - Default value: 32px */
+	    xl: string;
+	    /** - Default value: 40px */
+	    xxl: string;
+	    /** - Default value: 48px */
+	    xxxl: string;
+	    /** - Default value: 64px */
+	    xxxxl: string;
+	};
 
 }
 declare module '@elastic/eui/src/global_styling/variables/typography' {
@@ -511,7 +561,18 @@ declare module '@elastic/eui/src/global_styling/variables/typography' {
 	};
 	export const EuiThemeFontWeights: readonly ["light", "regular", "medium", "semiBold", "bold"];
 	export type _EuiThemeFontWeight = (typeof EuiThemeFontWeights)[number];
-	export type _EuiThemeFontWeights = Record<_EuiThemeFontWeight, CSSProperties['fontWeight']>;
+	export type _EuiThemeFontWeights = {
+	    /** - Default value: 300 */
+	    light: CSSProperties['fontWeight'];
+	    /** - Default value: 400 */
+	    regular: CSSProperties['fontWeight'];
+	    /** - Default value: 500 */
+	    medium: CSSProperties['fontWeight'];
+	    /** - Default value: 600 */
+	    semiBold: CSSProperties['fontWeight'];
+	    /** - Default value: 700 */
+	    bold: CSSProperties['fontWeight'];
+	};
 	/**
 	 * Body / Base styles
 	 */
@@ -536,6 +597,9 @@ declare module '@elastic/eui/src/global_styling/variables/typography' {
 	}
 	export type _EuiThemeFont = _EuiThemeFontBase & {
 	    scale: _EuiThemeFontScales;
+	    /**
+	     * @see {@link https://eui.elastic.co/#/theming/typography/values%23font-weight | Reference} for more information
+	     */
 	    weight: _EuiThemeFontWeights;
 	    body: _EuiThemeBody;
 	    title: _EuiThemeTitle;
@@ -558,10 +622,12 @@ declare module '@elastic/eui/src/global_styling/variables/states' {
 	export interface _EuiThemeFocus {
 	    /**
 	     * Default color of the focus ring, some components may override this property
+	     * - Default value: currentColor
 	     */
 	    color: ColorModeSwitch;
 	    /**
 	     * Thickness of the outline
+	     * - Default value: 2px
 	     */
 	    width: CSSProperties['borderWidth'];
 	}
@@ -586,7 +652,26 @@ declare module '@elastic/eui/src/global_styling/variables/levels' {
 	 */
 	export const EuiThemeLevels: readonly ["toast", "modal", "mask", "navigation", "menu", "header", "flyout", "maskBelowHeader", "content"];
 	export type _EuiThemeLevel = (typeof EuiThemeLevels)[number];
-	export type _EuiThemeLevels = Record<_EuiThemeLevel, NonNullable<CSSProperties['zIndex']>>;
+	export type _EuiThemeLevels = {
+	    /** - Default value: 9000 */
+	    toast: NonNullable<CSSProperties['zIndex']>;
+	    /** - Default value: 8000 */
+	    modal: NonNullable<CSSProperties['zIndex']>;
+	    /** - Default value: 6000 */
+	    mask: NonNullable<CSSProperties['zIndex']>;
+	    /** - Default value: 6000 */
+	    navigation: NonNullable<CSSProperties['zIndex']>;
+	    /** - Default value: 2000 */
+	    menu: NonNullable<CSSProperties['zIndex']>;
+	    /** - Default value: 1000 */
+	    header: NonNullable<CSSProperties['zIndex']>;
+	    /** - Default value: 1000 */
+	    flyout: NonNullable<CSSProperties['zIndex']>;
+	    /** - Default value: 1000 */
+	    maskBelowHeader: NonNullable<CSSProperties['zIndex']>;
+	    /** - Default value: 0 */
+	    content: NonNullable<CSSProperties['zIndex']>;
+	};
 
 }
 declare module '@elastic/eui/src/services/theme/types' {
@@ -615,7 +700,11 @@ declare module '@elastic/eui/src/services/theme/types' {
 	};
 	export type EuiThemeShape = {
 	    colors: _EuiThemeColors;
+	    /** - Default value: 16 */
 	    base: _EuiThemeBase;
+	    /**
+	     * @see {@link https://eui.elastic.co/#/theming/sizing | Reference} for more information
+	     */
 	    size: _EuiThemeSizes;
 	    font: _EuiThemeFont;
 	    border: _EuiThemeBorder;
@@ -4650,7 +4739,7 @@ declare module '@elastic/eui/src/components/popover/popover' {
 	    /**
 	     * Object of props passed to EuiPanel. See #EuiPopoverPanelProps
 	     */
-	    panelProps?: Omit<EuiPopoverPanelProps, 'style'>;
+	    panelProps?: Omit<EuiPopoverPanelProps, 'style' | 'hasShadow' | 'hasBorder'>;
 	    panelRef?: RefCallback<HTMLElement | null>;
 	    /**
 	     * Optional screen reader instructions to announce upon popover open,
@@ -7035,7 +7124,7 @@ declare module '@elastic/eui/src/services/theme/hooks' {
 
 }
 declare module '@elastic/eui/src/global_styling/functions/typography' {
-	import { _EuiThemeFontScale, _EuiThemeFontSizeMeasurement } from '@elastic/eui/src/global_styling/variables/typography';
+	import { _EuiThemeFontScale, _EuiThemeFontSizeMeasurement, _EuiThemeFontWeights } from '@elastic/eui/src/global_styling/variables/typography';
 	import { UseEuiTheme } from '@elastic/eui/src/services/theme/hooks';
 	export interface _FontScaleOptions {
 	    /**
@@ -7076,7 +7165,7 @@ declare module '@elastic/eui/src/global_styling/functions/typography' {
 	 * this mixin will ensure that the sizing is dependent on the boldest
 	 * weight so it doesn't shift sibling content.
 	 */
-	export const euiTextShift: (fontWeight: "bold" | "medium" | "light" | "regular" | "semiBold" | undefined, attribute: string | undefined, euiTheme: UseEuiTheme['euiTheme']) => string;
+	export const euiTextShift: (fontWeight: keyof _EuiThemeFontWeights | undefined, attribute: string | undefined, euiTheme: UseEuiTheme['euiTheme']) => string;
 
 }
 declare module '@elastic/eui/src/global_styling/functions' {
@@ -7155,12 +7244,8 @@ declare module '@elastic/eui/src/services/throttle' {
 }
 declare module '@elastic/eui/src/services/breakpoint/_sorting' {
 	import { _EuiThemeBreakpoints } from '@elastic/eui/src/global_styling/variables/breakpoint';
-	export const sortMapByLargeToSmallValues: (breakpointsMap: _EuiThemeBreakpoints) => {
-	    [k: string]: number;
-	};
-	export const sortMapBySmallToLargeValues: (breakpointsMap: _EuiThemeBreakpoints) => {
-	    [k: string]: number;
-	};
+	export const sortMapByLargeToSmallValues: (breakpointsMap: _EuiThemeBreakpoints) => _EuiThemeBreakpoints;
+	export const sortMapBySmallToLargeValues: (breakpointsMap: _EuiThemeBreakpoints) => _EuiThemeBreakpoints;
 
 }
 declare module '@elastic/eui/src/services/breakpoint/current_breakpoint' {

package/i18ntokens.json

@@ -5965,12 +5965,12 @@
       "start": {
         "line": 688,
         "column": 16,
-        "index": 20062
+        "index": 20090
       },
       "end": {
         "line": 691,
         "column": 18,
-        "index": 20256
+        "index": 20284
       }
     },
     "filepath": "src/components/popover/popover.tsx"

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

@@ -57,6 +57,10 @@ var EuiRangeTrack = function EuiRangeTrack(_ref) {
       step: step
     });
   }, [value, min, max, step]);
+  var _useState = (0, _react.useState)(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    trackWidth = _useState2[0],
+    setTrackWidth = _useState2[1];
   var tickSequence = (0, _react.useMemo)(function () {
     if (showTicks !== true) return;
     var sequence;
@@ -91,18 +95,14 @@ var EuiRangeTrack = function EuiRangeTrack(_ref) {
     }
 
     // Error out if there are too many ticks to render
-    if (sequence.length > 20) {
-      throw new Error("The number of ticks to render is too high (".concat(sequence.length, "), reduce the interval."));
+    if (trackWidth && sequence.length) {
+      validateTickRenderCount(trackWidth, sequence.length);
     }
     return sequence;
-  }, [showTicks, ticks, min, max, tickInterval, step]);
+  }, [showTicks, ticks, min, max, tickInterval, step, trackWidth]);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _range_track.euiRangeTrackStyles)(euiTheme);
   var cssStyles = [styles.euiRangeTrack, disabled && styles.disabled, levels && !!levels.length && styles.hasLevels, showTicks && (tickSequence || ticks) && styles.hasTicks];
-  var _useState = (0, _react.useState)(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    trackWidth = _useState2[0],
-    setTrackWidth = _useState2[1];
   var classes = (0, _classnames.default)('euiRangeTrack', className);
   return (0, _react2.jsx)("div", _extends({
     className: classes,
@@ -186,4 +186,18 @@ var validateValueIsInStep = function validateValueIsInStep(value, _ref2) {
   }
   // Return the value if nothing fails
   return value;
+};
+var validateTickRenderCount = function validateTickRenderCount(trackWidth, tickCount) {
+  var tickWidth = trackWidth / tickCount;
+
+  // These widths are guesstimations - it's possible we should use actual label content/widths instead
+  var COMFORTABLE_TICK_WIDTH = 20; // Set a warning threshold before throwing
+  var MIN_TICK_WIDTH = 5; // If ticks are smaller than this, something's gone seriously wrong and we should throw
+
+  var message = "The number of ticks to render (".concat(tickCount, ") is too high for the range width. Ensure all ticks are visible on the page at multiple screen widths, or use EUI's breakpoint hook utilities to reduce the tick interval responsively.");
+  if (tickWidth <= MIN_TICK_WIDTH) {
+    throw new Error(message);
+  } else if (tickWidth < COMFORTABLE_TICK_WIDTH) {
+    console.warn(message);
+  }
 };

package/lib/components/header/header_links/header_links.js

@@ -212,7 +212,31 @@ EuiHeaderLinks.propTypes = {
     /**
        * Object of props passed to EuiPanel. See #EuiPopoverPanelProps
        */
-    panelProps: _propTypes.default.any,
+    panelProps: _propTypes.default.shape({
+      element: _propTypes.default.oneOf(["div"]),
+      /**
+         * Padding for all four sides
+         */
+      paddingSize: _propTypes.default.any,
+      /**
+         * Corner border radius
+         */
+      borderRadius: _propTypes.default.any,
+      /**
+         * When true the panel will grow in height to match `EuiFlexItem`
+         */
+      grow: _propTypes.default.bool,
+      panelRef: _propTypes.default.any,
+      /**
+         * Background color of the panel;
+         * Usually a lightened form of the brand colors
+         */
+      color: _propTypes.default.any,
+      className: _propTypes.default.string,
+      "aria-label": _propTypes.default.string,
+      "data-test-subj": _propTypes.default.string,
+      css: _propTypes.default.any
+    }),
     panelRef: _propTypes.default.any,
     /**
        * Optional screen reader instructions to announce upon popover open,

package/lib/components/page/page_content/page_content.js

@@ -53,10 +53,10 @@ var EuiPageContent_Deprecated = function EuiPageContent_Deprecated(_ref) {
 };
 exports.EuiPageContent_Deprecated = EuiPageContent_Deprecated;
 EuiPageContent_Deprecated.propTypes = {
-  className: _propTypes.default.string,
-  "aria-label": _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string,
-  css: _propTypes.default.any,
+  className: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]), _propTypes.default.string]),
+  "aria-label": _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]), _propTypes.default.string]),
+  "data-test-subj": _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]), _propTypes.default.string]),
+  css: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.any]), _propTypes.default.any]),
   /**
      * Adds a medium shadow to the panel;
      * Only works when `color="plain"`

package/lib/components/page/page_template.js

@@ -421,10 +421,10 @@ EuiPageTemplate_Deprecated.propTypes = {
      * Gets passed along to the #EuiPageContent component
      */
   pageContentProps: _propTypes.default.shape({
-    className: _propTypes.default.string,
-    "aria-label": _propTypes.default.string,
-    "data-test-subj": _propTypes.default.string,
-    css: _propTypes.default.any,
+    className: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]), _propTypes.default.string]),
+    "aria-label": _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]), _propTypes.default.string]),
+    "data-test-subj": _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]), _propTypes.default.string]),
+    css: _propTypes.default.oneOfType([_propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.any]), _propTypes.default.any]),
     /**
        * Adds a medium shadow to the panel;
        * Only works when `color="plain"`

package/lib/components/popover/popover_panel/_popover_panel.js

@@ -75,39 +75,6 @@ var EuiPopoverPanel = function EuiPopoverPanel(_ref) {
 };
 exports.EuiPopoverPanel = EuiPopoverPanel;
 EuiPopoverPanel.propTypes = {
-  element: _propTypes.default.oneOf(["div"]),
-  /**
-     * Adds a medium shadow to the panel;
-     * Only works when `color="plain"`
-     */
-  hasShadow: _propTypes.default.bool,
-  /**
-     * Adds a slight 1px border on all edges.
-     * Only works when `color="plain | transparent"`
-     */
-  hasBorder: _propTypes.default.bool,
-  /**
-     * Padding for all four sides
-     */
-  paddingSize: _propTypes.default.any,
-  /**
-     * Corner border radius
-     */
-  borderRadius: _propTypes.default.any,
-  /**
-     * When true the panel will grow in height to match `EuiFlexItem`
-     */
-  grow: _propTypes.default.bool,
-  panelRef: _propTypes.default.any,
-  /**
-     * Background color of the panel;
-     * Usually a lightened form of the brand colors
-     */
-  color: _propTypes.default.any,
-  className: _propTypes.default.string,
-  "aria-label": _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string,
-  css: _propTypes.default.any,
   isOpen: _propTypes.default.bool,
   isAttached: _propTypes.default.bool,
   position: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf([null])]),

package/lib/global_styling/variables/breakpoint.js

@@ -17,5 +17,6 @@ var EuiThemeBreakpoints = ['xs', 's', 'm', 'l', 'xl'];
 // This type cannot be a string enum / must be a generic string
 // in case consumers add custom breakpoint sizes, such as xxl or xxs
 
-// Set the minimum window width at which to start to the breakpoint
+// Explicitly list out each key so we can document default values
+// via JSDoc (which is available to devs in IDE via intellisense)
 exports.EuiThemeBreakpoints = EuiThemeBreakpoints;

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

@@ -41,6 +41,10 @@ export var EuiRangeTrack = function EuiRangeTrack(_ref) {
       step: step
     });
   }, [value, min, max, step]);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    trackWidth = _useState2[0],
+    setTrackWidth = _useState2[1];
   var tickSequence = useMemo(function () {
     if (showTicks !== true) return;
     var sequence;
@@ -75,18 +79,14 @@ export var EuiRangeTrack = function EuiRangeTrack(_ref) {
     }
 
     // Error out if there are too many ticks to render
-    if (sequence.length > 20) {
-      throw new Error("The number of ticks to render is too high (".concat(sequence.length, "), reduce the interval."));
+    if (trackWidth && sequence.length) {
+      validateTickRenderCount(trackWidth, sequence.length);
     }
     return sequence;
-  }, [showTicks, ticks, min, max, tickInterval, step]);
+  }, [showTicks, ticks, min, max, tickInterval, step, trackWidth]);
   var euiTheme = useEuiTheme();
   var styles = euiRangeTrackStyles(euiTheme);
   var cssStyles = [styles.euiRangeTrack, disabled && styles.disabled, levels && !!levels.length && styles.hasLevels, showTicks && (tickSequence || ticks) && styles.hasTicks];
-  var _useState = useState(0),
-    _useState2 = _slicedToArray(_useState, 2),
-    trackWidth = _useState2[0],
-    setTrackWidth = _useState2[1];
   var classes = classNames('euiRangeTrack', className);
   return ___EmotionJSX("div", _extends({
     className: classes,
@@ -132,4 +132,18 @@ var validateValueIsInStep = function validateValueIsInStep(value, _ref2) {
   }
   // Return the value if nothing fails
   return value;
+};
+var validateTickRenderCount = function validateTickRenderCount(trackWidth, tickCount) {
+  var tickWidth = trackWidth / tickCount;
+
+  // These widths are guesstimations - it's possible we should use actual label content/widths instead
+  var COMFORTABLE_TICK_WIDTH = 20; // Set a warning threshold before throwing
+  var MIN_TICK_WIDTH = 5; // If ticks are smaller than this, something's gone seriously wrong and we should throw
+
+  var message = "The number of ticks to render (".concat(tickCount, ") is too high for the range width. Ensure all ticks are visible on the page at multiple screen widths, or use EUI's breakpoint hook utilities to reduce the tick interval responsively.");
+  if (tickWidth <= MIN_TICK_WIDTH) {
+    throw new Error(message);
+  } else if (tickWidth < COMFORTABLE_TICK_WIDTH) {
+    console.warn(message);
+  }
 };

package/optimize/es/global_styling/variables/breakpoint.js

@@ -10,4 +10,5 @@ export var EuiThemeBreakpoints = ['xs', 's', 'm', 'l', 'xl'];
 
 // This type cannot be a string enum / must be a generic string
 // in case consumers add custom breakpoint sizes, such as xxl or xxs
-// Set the minimum window width at which to start to the breakpoint
+// Explicitly list out each key so we can document default values
+// via JSDoc (which is available to devs in IDE via intellisense)