@elastic/eui 12.2.0 → 12.4.0

package/es/components/form/form_control_layout/index.js

@@ -1 +1,3 @@
-export { EuiFormControlLayout, ICON_SIDES } from './form_control_layout';
+export { EuiFormControlLayout, ICON_SIDES } from './form_control_layout';
+export { EuiFormControlLayoutClearButton } from './form_control_layout_clear_button';
+export { EuiFormControlLayoutCustomIcon } from './form_control_layout_custom_icon';

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

@@ -330,7 +330,7 @@ function (_Component) {
         showTicks: showTicks,
         hasFocus: this.state.hasFocus,
         "aria-hidden": true,
-        tabIndex: '-1',
+        tabIndex: -1,
         showRange: showRange
       }, rest)), this.state.rangeSliderRefAvailable && React.createElement(React.Fragment, null, React.createElement(EuiRangeThumb, {
         min: min,

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

@@ -122,7 +122,7 @@ function (_Component) {
         style: style,
         showTicks: showTicks,
         showRange: showRange,
-        tabIndex: showInput ? '-1' : tabIndex || null
+        tabIndex: showInput ? -1 : tabIndex || null
       }, rest)), showValue && !!String(value).length && React.createElement(EuiRangeTooltip, {
         value: value,
         max: max,

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 import classNames from 'classnames';
 export var EuiRangeHighlight = function EuiRangeHighlight(_ref) {
   var hasFocus = _ref.hasFocus,

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

@@ -1,10 +1,11 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 import classNames from 'classnames';
 export var EuiRangeLabel = function EuiRangeLabel(_ref) {
   var children = _ref.children,
       disabled = _ref.disabled,
-      side = _ref.side;
+      _ref$side = _ref.side,
+      side = _ref$side === void 0 ? 'max' : _ref$side;
   var classes = classNames('euiRangeLabel', "euiRangeLabel--".concat(side), {
     'euiRangeLabel--isDisabled': disabled
   });
@@ -13,10 +14,9 @@ export var EuiRangeLabel = function EuiRangeLabel(_ref) {
   }, children);
 };
 EuiRangeLabel.propTypes = {
-  side: PropTypes.oneOf(['min', 'max'])
-};
-EuiRangeLabel.defaultProps = {
-  side: 'max'
+  children: PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.number.isRequired]).isRequired,
+  disabled: PropTypes.bool,
+  side: PropTypes.oneOf(["min", "max"])
 };
 EuiRangeLabel.__docgenInfo = {
   "description": "",
@@ -31,15 +31,34 @@ EuiRangeLabel.__docgenInfo = {
       "type": {
         "name": "enum",
         "value": [{
-          "value": "'min'",
+          "value": "\"min\"",
           "computed": false
         }, {
-          "value": "'max'",
+          "value": "\"max\"",
           "computed": false
         }]
       },
       "required": false,
       "description": ""
+    },
+    "children": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "string"
+        }, {
+          "name": "number"
+        }]
+      },
+      "required": true,
+      "description": ""
+    },
+    "disabled": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
     }
   }
 };

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

@@ -1,9 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 import classNames from 'classnames';
 export var LEVEL_COLORS = ['primary', 'success', 'warning', 'danger'];
 export var EuiRangeLevels = function EuiRangeLevels(_ref) {
-  var levels = _ref.levels,
+  var _ref$levels = _ref.levels,
+      levels = _ref$levels === void 0 ? [] : _ref$levels,
       max = _ref.max,
       min = _ref.min,
       showTicks = _ref.showTicks;
@@ -40,8 +41,8 @@ EuiRangeLevels.propTypes = {
   levels: PropTypes.arrayOf(PropTypes.shape({
     min: PropTypes.number.isRequired,
     max: PropTypes.number.isRequired,
-    color: PropTypes.oneOf(LEVEL_COLORS).isRequired
-  })),
+    color: PropTypes.oneOf(["primary", "success", "warning", "danger"]).isRequired
+  }).isRequired),
   max: PropTypes.number.isRequired,
   min: PropTypes.number.isRequired,
   showTicks: PropTypes.bool
@@ -52,6 +53,10 @@ EuiRangeLevels.__docgenInfo = {
   "displayName": "EuiRangeLevels",
   "props": {
     "levels": {
+      "defaultValue": {
+        "value": "[]",
+        "computed": false
+      },
       "type": {
         "name": "arrayOf",
         "value": {
@@ -68,16 +73,16 @@ EuiRangeLevels.__docgenInfo = {
             "color": {
               "name": "enum",
               "value": [{
-                "value": "'primary'",
+                "value": "\"primary\"",
                 "computed": false
               }, {
-                "value": "'success'",
+                "value": "\"success\"",
                 "computed": false
               }, {
-                "value": "'warning'",
+                "value": "\"warning\"",
                 "computed": false
               }, {
-                "value": "'danger'",
+                "value": "\"danger\"",
                 "computed": false
               }],
               "required": true

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

@@ -0,0 +1,55 @@
+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); }
+
+import React from 'react';
+import { render } from 'enzyme';
+import { requiredProps } from '../../../test/required_props';
+import { EuiRangeLevels } from './range_levels';
+describe('EuiRangeLevels', function () {
+  test('is rendered', function () {
+    var component = render(React.createElement(EuiRangeLevels, _extends({
+      min: 0,
+      max: 100,
+      showTicks: true,
+      levels: [{
+        min: 0,
+        max: 20,
+        color: 'danger'
+      }, {
+        min: 20,
+        max: 100,
+        color: 'success'
+      }]
+    }, requiredProps)));
+    expect(component).toMatchSnapshot();
+  });
+  test('should throw error if `level.min` is lower than `min`', function () {
+    var component = function component() {
+      return render(React.createElement(EuiRangeLevels, {
+        min: 0,
+        max: 100,
+        levels: [{
+          min: -10,
+          max: 20,
+          color: 'danger'
+        }]
+      }));
+    };
+
+    expect(component).toThrowErrorMatchingSnapshot();
+  });
+  test('should throw error if `level.max` is higher than `max`', function () {
+    var component = function component() {
+      return render(React.createElement(EuiRangeLevels, {
+        min: 0,
+        max: 100,
+        levels: [{
+          min: 20,
+          max: 200,
+          color: 'danger'
+        }]
+      }));
+    };
+
+    expect(component).toThrowErrorMatchingSnapshot();
+  });
+});

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

@@ -4,10 +4,10 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { forwardRef } from 'react';
+import PropTypes from "prop-types";
 import classNames from 'classnames';
-export var EuiRangeSlider = React.forwardRef(function (_ref, ref) {
+export var EuiRangeSlider = forwardRef(function (_ref, ref) {
   var className = _ref.className,
       disabled = _ref.disabled,
       id = _ref.id,
@@ -46,14 +46,18 @@ export var EuiRangeSlider = React.forwardRef(function (_ref, ref) {
   }, rest));
 });
 EuiRangeSlider.propTypes = {
+  className: PropTypes.string,
+  "aria-label": PropTypes.string,
+  "data-test-subj": PropTypes.string,
   id: PropTypes.string,
+  name: PropTypes.string,
   min: PropTypes.number.isRequired,
   max: PropTypes.number.isRequired,
-  name: PropTypes.string,
   step: PropTypes.number,
-  onChange: PropTypes.func,
-  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))]),
   hasFocus: PropTypes.bool,
-  showRange: PropTypes.bool
+  showRange: PropTypes.bool,
+  showTicks: PropTypes.bool,
+  disabled: PropTypes.bool,
+  tabIndex: PropTypes.number,
+  onChange: PropTypes.any
 };

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

@@ -5,7 +5,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 import React from 'react';
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 import classNames from 'classnames';
 export var EuiRangeThumb = function EuiRangeThumb(_ref) {
   var min = _ref.min,
@@ -26,13 +26,17 @@ export var EuiRangeThumb = function EuiRangeThumb(_ref) {
     "aria-valuemax": max,
     "aria-valuenow": Number(value),
     "aria-disabled": !!disabled,
-    tabIndex: showInput || !!disabled ? '-1' : '0'
+    tabIndex: showInput || !!disabled ? -1 : 0
   }, rest));
 };
 EuiRangeThumb.propTypes = {
+  className: PropTypes.string,
+  "aria-label": PropTypes.string,
+  "data-test-subj": PropTypes.string,
   min: PropTypes.number.isRequired,
   max: PropTypes.number.isRequired,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  value: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.string.isRequired]),
+  disabled: PropTypes.bool,
   showInput: PropTypes.bool,
   showTicks: PropTypes.bool
 };
@@ -41,6 +45,27 @@ EuiRangeThumb.__docgenInfo = {
   "methods": [],
   "displayName": "EuiRangeThumb",
   "props": {
+    "className": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "aria-label": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
+    "data-test-subj": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
     "min": {
       "type": {
         "name": "number"
@@ -67,6 +92,13 @@ EuiRangeThumb.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "disabled": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
     "showInput": {
       "type": {
         "name": "bool"

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

@@ -1,7 +1,16 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 import React from 'react';
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 import classNames from 'classnames';
 import find from 'lodash/find';
+import { useInnerText } from '../../inner_text';
 export var EuiRangeTicks = function EuiRangeTicks(_ref) {
   var disabled = _ref.disabled,
       onChange = _ref.onChange,
@@ -10,7 +19,8 @@ export var EuiRangeTicks = function EuiRangeTicks(_ref) {
       value = _ref.value,
       max = _ref.max,
       min = _ref.min,
-      interval = _ref.interval;
+      _ref$interval = _ref.interval,
+      interval = _ref$interval === void 0 ? 1 : _ref$interval;
   // Calculate the width of each tick mark
   var percentageWidth = interval / (max - min + interval) * 100; // Align with item labels across the range by adding
   // left and right negative margins that is half of the tick marks
@@ -44,6 +54,12 @@ export var EuiRangeTicks = function EuiRangeTicks(_ref) {
       'euiRangeTick--isCustom': customTick
     });
     var label = customTick ? customTick.label : tickValue;
+
+    var _useInnerText = useInnerText(),
+        _useInnerText2 = _slicedToArray(_useInnerText, 2),
+        ref = _useInnerText2[0],
+        innerText = _useInnerText2[1];
+
     return React.createElement("button", {
       type: "button",
       className: tickClasses,
@@ -52,39 +68,37 @@ export var EuiRangeTicks = function EuiRangeTicks(_ref) {
       disabled: disabled,
       onClick: onChange,
       style: tickStyle,
-      tabIndex: "-1",
-      title: label
+      tabIndex: -1,
+      ref: ref,
+      title: typeof label === 'string' ? label : innerText
     }, label);
   }));
 };
 EuiRangeTicks.propTypes = {
-  disabled: PropTypes.bool,
-  onChange: PropTypes.func,
   ticks: PropTypes.arrayOf(PropTypes.shape({
     value: PropTypes.number.isRequired,
     label: PropTypes.node.isRequired
-  })),
-  tickSequence: PropTypes.arrayOf(PropTypes.number).isRequired,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))]),
+  }).isRequired),
+  tickSequence: PropTypes.arrayOf(PropTypes.number.isRequired).isRequired,
+  value: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.string.isRequired, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.number.isRequired]).isRequired).isRequired]),
   min: PropTypes.number.isRequired,
   max: PropTypes.number.isRequired,
-  interval: PropTypes.number
+  interval: PropTypes.number,
+  disabled: PropTypes.bool,
+  onChange: PropTypes.func
 };
 EuiRangeTicks.__docgenInfo = {
   "description": "",
   "methods": [],
   "displayName": "EuiRangeTicks",
   "props": {
-    "disabled": {
-      "type": {
-        "name": "bool"
+    "interval": {
+      "defaultValue": {
+        "value": "1",
+        "computed": false
       },
-      "required": false,
-      "description": ""
-    },
-    "onChange": {
       "type": {
-        "name": "func"
+        "name": "number"
       },
       "required": false,
       "description": ""
@@ -131,9 +145,9 @@ EuiRangeTicks.__docgenInfo = {
           "value": {
             "name": "union",
             "value": [{
-              "name": "number"
-            }, {
               "name": "string"
+            }, {
+              "name": "number"
             }]
           }
         }]
@@ -155,9 +169,16 @@ EuiRangeTicks.__docgenInfo = {
       "required": true,
       "description": ""
     },
-    "interval": {
+    "disabled": {
       "type": {
-        "name": "number"
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "onChange": {
+      "type": {
+        "name": "func"
       },
       "required": false,
       "description": ""

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 import classNames from 'classnames';
 export var EuiRangeTooltip = function EuiRangeTooltip(_ref) {
   var value = _ref.value,
@@ -10,7 +10,15 @@ export var EuiRangeTooltip = function EuiRangeTooltip(_ref) {
       name = _ref.name,
       showTicks = _ref.showTicks;
   // Calculate the left position based on value
-  var decimal = (value - min) / (max - min); // Must be between 0-100%
+  var val = 0;
+
+  if (typeof value === 'number') {
+    val = value;
+  } else if (typeof value === 'string') {
+    val = parseFloat(value);
+  }
+
+  var decimal = (val - min) / (max - min); // Must be between 0-100%
 
   var valuePosition = decimal <= 1 ? decimal : 1;
   valuePosition = valuePosition >= 0 ? valuePosition : 0;
@@ -42,12 +50,13 @@ export var EuiRangeTooltip = function EuiRangeTooltip(_ref) {
   }, valuePrepend, value, valueAppend));
 };
 EuiRangeTooltip.propTypes = {
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  value: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.string.isRequired]),
   valueAppend: PropTypes.node,
   valuePrepend: PropTypes.node,
   max: PropTypes.number.isRequired,
   min: PropTypes.number.isRequired,
-  name: PropTypes.string
+  name: PropTypes.string,
+  showTicks: PropTypes.bool
 };
 EuiRangeTooltip.__docgenInfo = {
   "description": "",
@@ -100,6 +109,13 @@ EuiRangeTooltip.__docgenInfo = {
       },
       "required": false,
       "description": ""
+    },
+    "showTicks": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
     }
   }
 };

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

@@ -19,7 +19,7 @@ function _assertThisInitialized(self) { if (self === void 0) { throw new Referen
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 import classNames from 'classnames';
 import range from 'lodash/range';
 import { isEvenlyDivisibleBy } from '../../../services';
@@ -168,19 +168,20 @@ EuiRangeTrack.propTypes = {
   min: PropTypes.number.isRequired,
   max: PropTypes.number.isRequired,
   step: PropTypes.number,
-  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))]),
+  value: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.string.isRequired, PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string.isRequired, PropTypes.number.isRequired]).isRequired).isRequired]),
+  disabled: PropTypes.bool,
   showTicks: PropTypes.bool,
   tickInterval: PropTypes.number,
   ticks: PropTypes.arrayOf(PropTypes.shape({
     value: PropTypes.number.isRequired,
     label: PropTypes.node.isRequired
-  })),
+  }).isRequired),
   onChange: PropTypes.func,
   levels: PropTypes.arrayOf(PropTypes.shape({
-    min: PropTypes.number,
-    max: PropTypes.number,
-    color: PropTypes.oneOf(LEVEL_COLORS)
-  }))
+    min: PropTypes.number.isRequired,
+    max: PropTypes.number.isRequired,
+    color: PropTypes.oneOf(["primary", "success", "warning", "danger"]).isRequired
+  }).isRequired)
 };
 EuiRangeTrack.__docgenInfo = {
   "description": "",
@@ -265,9 +266,9 @@ EuiRangeTrack.__docgenInfo = {
           "value": {
             "name": "union",
             "value": [{
-              "name": "number"
-            }, {
               "name": "string"
+            }, {
+              "name": "number"
             }]
           }
         }]
@@ -275,6 +276,13 @@ EuiRangeTrack.__docgenInfo = {
       "required": false,
       "description": ""
     },
+    "disabled": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
     "showTicks": {
       "type": {
         "name": "bool"
@@ -324,17 +332,28 @@ EuiRangeTrack.__docgenInfo = {
           "value": {
             "min": {
               "name": "number",
-              "required": false
+              "required": true
             },
             "max": {
               "name": "number",
-              "required": false
+              "required": true
             },
             "color": {
               "name": "enum",
-              "computed": true,
-              "value": "LEVEL_COLORS",
-              "required": false
+              "value": [{
+                "value": "\"primary\"",
+                "computed": false
+              }, {
+                "value": "\"success\"",
+                "computed": false
+              }, {
+                "value": "\"warning\"",
+                "computed": false
+              }, {
+                "value": "\"danger\"",
+                "computed": false
+              }],
+              "required": true
             }
           }
         }