@elastic/eui 81.3.0 → 82.0.0

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

@@ -50,6 +50,10 @@ var EuiRangeTrack = function EuiRangeTrack(_ref) {
       step: step
     });
   }, [value, min, max, step]);
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    trackWidth = _useState2[0],
+    setTrackWidth = _useState2[1];
   var tickSequence = (0, _react.useMemo)(function () {
     if (showTicks !== true) return;
     var sequence;
@@ -84,18 +88,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 = (0, _slicedToArray2.default)(_useState, 2),
-    trackWidth = _useState2[0],
-    setTrackWidth = _useState2[1];
   var classes = (0, _classnames.default)('euiRangeTrack', className);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     className: classes,
@@ -142,4 +142,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/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/package.json

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

package/test-env/components/form/range/range_track.js

@@ -51,6 +51,10 @@ var EuiRangeTrack = function EuiRangeTrack(_ref) {
       step: step
     });
   }, [value, min, max, step]);
+  var _useState = (0, _react.useState)(0),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    trackWidth = _useState2[0],
+    setTrackWidth = _useState2[1];
   var tickSequence = (0, _react.useMemo)(function () {
     if (showTicks !== true) return;
     var sequence;
@@ -85,18 +89,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 = (0, _slicedToArray2.default)(_useState, 2),
-    trackWidth = _useState2[0],
-    setTrackWidth = _useState2[1];
   var classes = (0, _classnames.default)('euiRangeTrack', className);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     className: classes,
@@ -180,4 +180,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/test-env/components/header/header_links/header_links.js

@@ -206,7 +206,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/test-env/components/page/page_content/page_content.js

@@ -52,10 +52,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/test-env/components/page/page_template.js

@@ -417,10 +417,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/test-env/components/popover/popover_panel/_popover_panel.js

@@ -69,39 +69,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/test-env/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;