@elastic/eui 70.3.0 → 71.0.0

package/test-env/components/form/range/range_draggable.styles.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiRangeDraggableStyles = exports.euiRangeDraggableInnerStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../../global_styling");
+
+var _range = require("./range.styles");
+
+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)."; }
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "bpru7n-hasTicks",
+  styles: "inset-block-start:0;label:hasTicks;"
+} : {
+  name: "bpru7n-hasTicks",
+  styles: "inset-block-start:0;label:hasTicks;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiRangeDraggableStyles = function euiRangeDraggableStyles(euiThemeContext) {
+  var range = (0, _range.euiRangeVariables)(euiThemeContext);
+  return {
+    euiRangeDraggable: /*#__PURE__*/(0, _react.css)("block-size:", (0, _global_styling.mathWithUnits)(range.height, function (x) {
+      return x / 2;
+    }), ";position:absolute;inset-block-start:", (0, _global_styling.mathWithUnits)(range.height, function (x) {
+      return x / 4;
+    }), ";pointer-events:none;z-index:", range.thumbZIndex, ";&:focus{outline:none;~.euiRangeThumb{", (0, _range.euiRangeThumbFocus)(euiThemeContext), ";}};label:euiRangeDraggable;"),
+    hasTicks: _ref2,
+    disabled: /*#__PURE__*/(0, _react.css)(";label:disabled;")
+  };
+};
+
+exports.euiRangeDraggableStyles = euiRangeDraggableStyles;
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "ndov1k-enabled",
+  styles: "cursor:grab;pointer-events:all;&:active{cursor:grabbing;};label:enabled;"
+} : {
+  name: "ndov1k-enabled",
+  styles: "cursor:grab;pointer-events:all;&:active{cursor:grabbing;};label:enabled;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var euiRangeDraggableInnerStyles = function euiRangeDraggableInnerStyles(euiThemeContext) {
+  var range = (0, _range.euiRangeVariables)(euiThemeContext);
+  return {
+    euiRangeDraggable__inner: /*#__PURE__*/(0, _react.css)("position:absolute;inset-inline:", range.thumbWidth, ";inset-block:0;;label:euiRangeDraggable__inner;"),
+    enabled: _ref,
+    disabled: /*#__PURE__*/(0, _react.css)(";label:disabled;")
+  };
+};
+
+exports.euiRangeDraggableInnerStyles = euiRangeDraggableInnerStyles;

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

@@ -2,19 +2,33 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.EuiRangeHighlight = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _services = require("../../../services");
+
+var _global_styling = require("../../../global_styling");
+
+var _range_highlight = require("./range_highlight.styles");
+
+var _range_levels = require("./range_levels");
+
 var _react2 = require("@emotion/react");
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -24,50 +38,79 @@ var _react2 = require("@emotion/react");
  */
 var EuiRangeHighlight = function EuiRangeHighlight(_ref) {
   var className = _ref.className,
-      hasFocus = _ref.hasFocus,
       showTicks = _ref.showTicks,
+      trackWidth = _ref.trackWidth,
       lowerValue = _ref.lowerValue,
       upperValue = _ref.upperValue,
       max = _ref.max,
       min = _ref.min,
-      compressed = _ref.compressed,
       background = _ref.background,
-      onClick = _ref.onClick;
-  // Calculate the width the range based on value
-  // const rangeWidth = (value - min) / (max - min);
-  var leftPosition = (lowerValue - min) / (max - min);
-  var rangeWidth = (upperValue - lowerValue) / (max - min);
-  var rangeWidthStyle = {
-    background: background,
-    marginLeft: "".concat(leftPosition * 100, "%"),
-    width: "".concat(rangeWidth * 100, "%")
-  };
-  var classes = (0, _classnames.default)('euiRangeHighlight', {
-    'euiRangeHighlight--hasTicks': showTicks,
-    'euiRangeHighlight--compressed': compressed
-  }, className);
-  var progressClasses = (0, _classnames.default)('euiRangeHighlight__progress', {
-    'euiRangeHighlight__progress--hasFocus': hasFocus
-  });
+      onClick = _ref.onClick,
+      levels = _ref.levels;
+  // Calculate the width of the range based on value
+  var leftPosition = (0, _react.useMemo)(function () {
+    return (lowerValue - min) / (max - min);
+  }, [lowerValue, min, max]);
+  var rangeWidth = (0, _react.useMemo)(function () {
+    return (upperValue - lowerValue) / (max - min);
+  }, [upperValue, lowerValue, min, max]);
+  var classes = (0, _classnames.default)('euiRangeHighlight', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _range_highlight.euiRangeHighlightStyles)(euiTheme);
+  var cssStyles = [styles.euiRangeHighlight, showTicks && styles.hasTicks];
+  var progressStyles = (0, _range_highlight.euiRangeHighlightProgressStyles)(euiTheme);
+  var cssProgressStyles = [progressStyles.euiRangeHighlight__progress];
+  var progressStyle = (0, _react.useMemo)(function () {
+    return (0, _global_styling.logicalStyles)({
+      background: background,
+      marginLeft: "".concat(leftPosition * 100, "%"),
+      width: "".concat(rangeWidth * 100, "%")
+    });
+  }, [background, leftPosition, rangeWidth]);
+  var levelsWrapperStyles = (0, _range_highlight.euiRangeHighlightLevelsWrapperStyles)(euiTheme);
+  var cssLevelsWrapperStyles = [levelsWrapperStyles.euiRangeHighlight__levelsWrapper];
+  var levelsWrapperStyle = (0, _react.useMemo)(function () {
+    return (0, _global_styling.logicalStyles)({
+      marginLeft: "".concat(leftPosition * 100, "%"),
+      width: "".concat(rangeWidth * 100, "%")
+    });
+  }, [leftPosition, rangeWidth]);
+  var levelsStyles = (0, _range_highlight.euiRangeHighlightLevelsStyles)(euiTheme);
+  var cssLevelsStyles = [levelsStyles.euiRangeHighlight__levels];
+  var levelsStyle = (0, _react.useMemo)(function () {
+    return (0, _global_styling.logicalStyles)({
+      left: "-".concat(trackWidth * leftPosition, "px"),
+      width: "".concat(trackWidth, "px")
+    });
+  }, [trackWidth, leftPosition]);
   return (0, _react2.jsx)("div", {
     className: classes,
+    css: cssStyles,
     onClick: onClick
-  }, (0, _react2.jsx)("div", {
-    className: progressClasses,
-    style: rangeWidthStyle
-  }));
+  }, (levels && levels.length === 0 || !levels) && (0, _react2.jsx)("div", {
+    className: "euiRangeHighlight__progress",
+    css: cssProgressStyles,
+    style: progressStyle
+  }), levels && !!levels.length && (0, _react2.jsx)("div", {
+    css: cssLevelsWrapperStyles,
+    style: levelsWrapperStyle
+  }, (0, _react2.jsx)(_range_levels.EuiRangeLevels, {
+    css: cssLevelsStyles,
+    style: levelsStyle,
+    levels: levels,
+    max: max,
+    min: min,
+    showTicks: showTicks,
+    trackWidth: trackWidth
+  })));
 };
 
 exports.EuiRangeHighlight = EuiRangeHighlight;
 EuiRangeHighlight.propTypes = {
   className: _propTypes.default.string,
   background: _propTypes.default.string,
-  compressed: _propTypes.default.bool,
-  hasFocus: _propTypes.default.bool,
-  showTicks: _propTypes.default.bool,
+  trackWidth: _propTypes.default.number.isRequired,
   lowerValue: _propTypes.default.number.isRequired,
   upperValue: _propTypes.default.number.isRequired,
-  max: _propTypes.default.number.isRequired,
-  min: _propTypes.default.number.isRequired,
   onClick: _propTypes.default.func
 };

package/test-env/components/form/range/range_highlight.styles.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiRangeHighlightStyles = exports.euiRangeHighlightProgressStyles = exports.euiRangeHighlightLevelsWrapperStyles = exports.euiRangeHighlightLevelsStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _range = require("./range.styles");
+
+/*
+ * 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.
+ */
+var euiRangeHighlightStyles = function euiRangeHighlightStyles(euiThemeContext) {
+  var range = (0, _range.euiRangeVariables)(euiThemeContext);
+  return {
+    euiRangeHighlight: /*#__PURE__*/(0, _react.css)("position:absolute;block-size:", range.highlightHeight, ";inset-inline-start:0;inline-size:100%;overflow:hidden;z-index:", range.highlightZIndex, ";pointer-events:none;inset-block-start:", range.trackTopPositionWithoutTicks, ";;label:euiRangeHighlight;"),
+    hasTicks: /*#__PURE__*/(0, _react.css)("inset-block-start:", range.trackTopPositionWithTicks, ";;label:hasTicks;")
+  };
+};
+
+exports.euiRangeHighlightStyles = euiRangeHighlightStyles;
+
+var euiRangeHighlightProgressStyles = function euiRangeHighlightProgressStyles(euiThemeContext) {
+  var range = (0, _range.euiRangeVariables)(euiThemeContext);
+  return {
+    euiRangeHighlight__progress: /*#__PURE__*/(0, _react.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;")
+  };
+};
+
+exports.euiRangeHighlightProgressStyles = euiRangeHighlightProgressStyles;
+
+var euiRangeHighlightLevelsWrapperStyles = function euiRangeHighlightLevelsWrapperStyles(euiThemeContext) {
+  var euiRangeVars = (0, _range.euiRangeVariables)(euiThemeContext);
+  return {
+    euiRangeHighlight__levelsWrapper: /*#__PURE__*/(0, _react.css)("block-size:", euiRangeVars.trackHeight, ";position:relative;overflow:hidden;;label:euiRangeHighlight__levelsWrapper;")
+  };
+};
+
+exports.euiRangeHighlightLevelsWrapperStyles = euiRangeHighlightLevelsWrapperStyles;
+
+var euiRangeHighlightLevelsStyles = function euiRangeHighlightLevelsStyles(euiThemeContext) {
+  var euiRangeVars = (0, _range.euiRangeVariables)(euiThemeContext);
+  return {
+    euiRangeHighlight__levels: /*#__PURE__*/(0, _react.css)("background:transparent;block-size:", euiRangeVars.trackHeight, ";inset-block-start:0;;label:euiRangeHighlight__levels;")
+  };
+};
+
+exports.euiRangeHighlightLevelsStyles = euiRangeHighlightLevelsStyles;

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

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,16 +13,26 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _services = require("../../../services");
+
+var _global_styling = require("../../../global_styling");
+
 var _field_number = require("../field_number");
 
+var _range_input = require("./range_input.styles");
+
 var _react2 = require("@emotion/react");
 
 var _excluded = ["min", "max", "step", "value", "disabled", "compressed", "onChange", "name", "side", "digitTolerance", "fullWidth", "autoSize"];
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 var EuiRangeInput = function EuiRangeInput(_ref) {
   var min = _ref.min,
       max = _ref.max,
@@ -40,12 +52,18 @@ var EuiRangeInput = function EuiRangeInput(_ref) {
   // Chrome will properly size the input based on the max value, but FF does not.
   // Calculate the width of the input based on highest number of characters.
   // Add 2 to accommodate for input stepper
-  var widthStyle = autoSize ? {
-    width: "".concat(digitTolerance / 1.25 + 2, "em")
-  } : undefined;
+  var widthStyle = (0, _react.useMemo)(function () {
+    return autoSize ? (0, _global_styling.logicalStyles)({
+      width: "".concat(digitTolerance / 1.25 + 2, "em")
+    }) : {};
+  }, [autoSize, digitTolerance]);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _range_input.euiRangeInputStyles)(euiTheme);
+  var cssStyles = [styles.euiRangeInput];
   return (0, _react2.jsx)(_field_number.EuiFieldNumber, (0, _extends2.default)({
     name: name,
     className: "euiRangeInput euiRangeInput--".concat(side),
+    css: cssStyles,
     min: Number(min),
     max: Number(max),
     step: step,
@@ -62,8 +80,9 @@ exports.EuiRangeInput = EuiRangeInput;
 EuiRangeInput.propTypes = {
   autoSize: _propTypes.default.bool,
   digitTolerance: _propTypes.default.number.isRequired,
-  max: _propTypes.default.number.isRequired,
-  min: _propTypes.default.number.isRequired,
-  side: _propTypes.default.oneOf(["min", "max"]),
-  value: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.number.isRequired]).isRequired
+
+  /**
+     * @default 'max'
+     */
+  side: _propTypes.default.oneOf(["min", "max"])
 };

package/test-env/components/form/range/range_input.styles.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiRangeInputStyles = void 0;
+
+var _react = require("@emotion/react");
+
+/*
+ * 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.
+ */
+var euiRangeInputStyles = function euiRangeInputStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiRangeInput: /*#__PURE__*/(0, _react.css)("inline-size:auto;min-inline-size:", euiTheme.base * 4, "px;.euiRange__popover &{margin:0;inline-size:100%;};label:euiRangeInput;")
+  };
+};
+
+exports.euiRangeInputStyles = euiRangeInputStyles;

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

@@ -11,7 +11,9 @@ var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../../services");
+
+var _range_label = require("./range_label.styles");
 
 var _react2 = require("@emotion/react");
 
@@ -27,11 +29,12 @@ var EuiRangeLabel = function EuiRangeLabel(_ref) {
       disabled = _ref.disabled,
       _ref$side = _ref.side,
       side = _ref$side === void 0 ? 'max' : _ref$side;
-  var classes = (0, _classnames.default)('euiRangeLabel', "euiRangeLabel--".concat(side), {
-    'euiRangeLabel--isDisabled': disabled
-  });
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _range_label.euiRangeLabelStyles)(euiTheme);
+  var cssStyles = [styles.euiRangeLabel, styles[side], disabled && styles.isDisabled];
   return (0, _react2.jsx)("label", {
-    className: classes
+    className: "euiRangeLabel",
+    css: cssStyles
   }, children);
 };
 
@@ -41,6 +44,9 @@ EuiRangeLabel.propTypes = {
      * ReactNode to render as this component's content
      */
   children: _propTypes.default.oneOfType([_propTypes.default.string.isRequired, _propTypes.default.number.isRequired]).isRequired,
-  disabled: _propTypes.default.bool,
+
+  /**
+     * @default 'max'
+     */
   side: _propTypes.default.oneOf(["min", "max"])
 };

package/test-env/components/form/range/range_label.styles.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiRangeLabelStyles = void 0;
+
+var _react = require("@emotion/react");
+
+var _global_styling = require("../../../global_styling");
+
+var _range = require("./range.styles");
+
+/*
+ * 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.
+ */
+var euiRangeLabelStyles = function euiRangeLabelStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var range = (0, _range.euiRangeVariables)(euiThemeContext);
+  return {
+    euiRangeLabel: /*#__PURE__*/(0, _react.css)("font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs').fontSize, ";;label:euiRangeLabel;"),
+    min: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-right', euiTheme.size.s), ";;label:min;"),
+    max: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), ";;label:max;"),
+    isDisabled: /*#__PURE__*/(0, _react.css)("opacity:", range.disabledOpacity, ";;label:isDisabled;")
+  };
+};
+
+exports.euiRangeLabelStyles = euiRangeLabelStyles;