@atlaskit/field-range - npm Package Compare versions

Comparing version 9.0.1 to 9.0.2

CHANGELOG.md

 # @atlaskit/field-range
 
+## 9.0.2
+
+### Patch Changes
+
+- [`30853172ff`](https://bitbucket.org/atlassian/atlassian-frontend/commits/30853172ff) - Reset babel config back to ie11 to prevent runtime issues in Jira and to unbreak the Confluence es5-check
+
 ## 9.0.1
@@ -4,0 +10,0 @@

dist/cjs/FieldRange.js

@@ -12,2 +12,14 @@ "use strict";
 
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
@@ -25,11 +37,16 @@
 
-class Slider extends _react.Component {
+var Slider = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(Slider, _Component);
+
   // eslint-disable-next-line
-  constructor(props) {
-    super(props);
-    (0, _defineProperty2.default)(this, "inputElement", void 0);
-    (0, _defineProperty2.default)(this, "state", void 0);
-    (0, _defineProperty2.default)(this, "getPercentValue", (value, min, max) => {
-      let percent = '0';
+  function Slider(props) {
+    var _this;
 
+    (0, _classCallCheck2.default)(this, Slider);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Slider).call(this, props));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "inputElement", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", void 0);
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getPercentValue", function (value, min, max) {
+      var percent = '0';
+
       if (min < max && value > min) {
@@ -41,3 +58,3 @@ percent = ((value - min) / (max - min) * 100).toFixed(2);
     });
-    (0, _defineProperty2.default)(this, "handleChange", e => {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleChange", function (e) {
       // Event.target is typed as an EventTarget but we need to access properties on it which are
@@ -48,15 +65,14 @@ // specific to HTMLInputElement. Due limitations of the HTML spec flow doesn't know that an
       // https://flow.org/en/docs/types/casting/#toc-type-casting-through-any
-      const {
-        target
-      } = e;
-      const value = parseFloat(target.value);
-      const {
-        max,
-        onChange,
-        min
-      } = this.props;
-      const valuePercent = this.getPercentValue(value, min, max);
-      this.setState({
-        value,
-        valuePercent
+      var target = e.target;
+      var value = parseFloat(target.value);
+      var _this$props = _this.props,
+          max = _this$props.max,
+          onChange = _this$props.onChange,
+          min = _this$props.min;
+
+      var valuePercent = _this.getPercentValue(value, min, max);
+
+      _this.setState({
+        value: value,
+        valuePercent: valuePercent
       });
@@ -68,52 +84,52 @@
     });
-    this.inputElement = null;
-    this.state = {
+    _this.inputElement = null;
+    _this.state = {
       value: props.value,
-      valuePercent: this.getPercentValue(props.value, props.min, props.max)
+      valuePercent: _this.getPercentValue(props.value, props.min, props.max)
     };
+    return _this;
   }
 
-  UNSAFE_componentWillReceiveProps({
-    value: nextValue,
-    min,
-    max
-  }) {
-    const {
-      value: currentValue
-    } = this.props;
+  (0, _createClass2.default)(Slider, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(_ref) {
+      var nextValue = _ref.value,
+          min = _ref.min,
+          max = _ref.max;
+      var currentValue = this.props.value;
 
-    if (currentValue !== nextValue) {
-      const valuePercent = this.getPercentValue(nextValue, min, max);
-      this.setState({
-        value: nextValue,
-        valuePercent
+      if (currentValue !== nextValue) {
+        var valuePercent = this.getPercentValue(nextValue, min, max);
+        this.setState({
+          value: nextValue,
+          valuePercent: valuePercent
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          min = _this$props2.min,
+          max = _this$props2.max,
+          step = _this$props2.step,
+          disabled = _this$props2.disabled;
+      var _this$state = this.state,
+          value = _this$state.value,
+          valuePercent = _this$state.valuePercent;
+      return _react.default.createElement(_styled.Input, {
+        type: "range",
+        value: value.toString(),
+        min: min,
+        max: max,
+        step: step,
+        onChange: this.handleChange,
+        disabled: disabled,
+        valuePercent: valuePercent
       });
     }
-  }
+  }]);
+  return Slider;
+}(_react.Component);
 
-  render() {
-    const {
-      min,
-      max,
-      step,
-      disabled
-    } = this.props;
-    const {
-      value,
-      valuePercent
-    } = this.state;
-    return _react.default.createElement(_styled.Input, {
-      type: "range",
-      value: value.toString(),
-      min: min,
-      max: max,
-      step: step,
-      onChange: this.handleChange,
-      disabled: disabled,
-      valuePercent: valuePercent
-    });
-  }
-
-}
-
 exports.default = Slider;
@@ -126,3 +142,3 @@ (0, _defineProperty2.default)(Slider, "defaultProps", {
   step: 0.1,
-  onChange: () => {}
+  onChange: function onChange() {}
 });

dist/cjs/styled.js

@@ -19,22 +19,28 @@ "use strict";
 /* eslint-disable no-mixed-operators */
-const sliderThumbSize = 16;
-const sliderThumbBorderThickness = 2;
-const sliderLineThickness = 4;
-const transitionDuration = '0.2s';
-const overallHeight = 40;
+var sliderThumbSize = 16;
+var sliderThumbBorderThickness = 2;
+var sliderLineThickness = 4;
+var transitionDuration = '0.2s';
+var overallHeight = 40;
 exports.overallHeight = overallHeight;
-const sliderThumbStyle = (0, _styledComponents.css)(["\n  background: ", ";\n  border: ", "px solid transparent;\n  border-radius: 50%;\n  height: ", "px;\n  width: ", "px;\n  box-sizing: border-box;\n  ", ";\n"], _theme.thumb.default.background, sliderThumbBorderThickness, sliderThumbSize, sliderThumbSize, _elevation.e200);
-const sliderThumbFocusedStyle = (0, _styledComponents.css)(["\n  border-color: ", ";\n"], _colors.B200);
-const sliderThumbDisabledStyle = (0, _styledComponents.css)(["\n  cursor: not-allowed;\n  box-shadow: 0 0 1px ", ";\n"], _colors.N60A);
-const sliderDefaultBackground = (0, _styledComponents.css)(["\n  background: ", ";\n"], props => `linear-gradient(${_theme.track.default.lower}, ${_theme.track.default.lower}) 0/ ${props.valuePercent}% 100% no-repeat ${_theme.track.default.upper}`);
-const sliderTrackStyle = (0, _styledComponents.css)(["\n  background: ", ";\n  border-radius: ", "px;\n  border: 0;\n  cursor: pointer;\n  height: ", "px;\n  width: 100%;\n  ", ";\n"], _colors.N30A, sliderLineThickness / 2, sliderLineThickness, sliderDefaultBackground);
-const sliderTrackDisabledStyle = (0, _styledComponents.css)(["\n  background: ", ";\n  cursor: not-allowed;\n"], props => `linear-gradient(${_theme.track.disabled.lower}, ${_theme.track.disabled.lower}) 0/ ${props.valuePercent}% 100% no-repeat ${_theme.track.disabled.upper}`);
-const sliderTrackFocusedStyle = (0, _styledComponents.css)(["\n  background: ", ";\n"], props => `linear-gradient(${_theme.track.hover.lower}, ${_theme.track.hover.lower}) 0/ ${props.valuePercent}% 100% no-repeat ${_theme.track.hover.upper}`);
-const chromeRangeInputStyle = (0, _styledComponents.css)(["\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    margin-top: -", "px;\n    transition: border-color ", " ease-in-out;\n    ", ";\n  }\n\n  &:focus::-webkit-slider-thumb {\n    ", ";\n  }\n\n  &:disabled::-webkit-slider-thumb {\n    ", ";\n  }\n\n  &::-webkit-slider-runnable-track {\n    transition: background-color ", " ease-in-out;\n    ", ";\n  }\n\n  &:focus::-webkit-slider-runnable-track {\n    ", ";\n  }\n\n  &:active::-webkit-slider-runnable-track,\n  &:hover::-webkit-slider-runnable-track {\n    ", ";\n  }\n\n  &:disabled::-webkit-slider-runnable-track {\n    ", ";\n  }\n"], sliderThumbSize / 2 - sliderLineThickness / 2, transitionDuration, sliderThumbStyle, sliderThumbFocusedStyle, sliderThumbDisabledStyle, transitionDuration, sliderTrackStyle, sliderDefaultBackground, sliderTrackFocusedStyle, sliderTrackDisabledStyle);
-const firefoxRangeInputStyle = (0, _styledComponents.css)(["\n  &::-moz-focus-outer {\n    border: 0;\n  }\n\n  &::-moz-range-thumb {\n    transition: border-color ", " ease-in-out;\n    ", ";\n  }\n\n  &:focus::-moz-range-thumb {\n    ", ";\n  }\n\n  &:disabled::-moz-range-thumb {\n    ", ";\n  }\n\n  &::-moz-range-track {\n    transition: background-color ", " ease-in-out;\n    ", ";\n  }\n\n  &:focus::-moz-range-track {\n    ", ";\n  }\n\n  &:active::-moz-range-track,\n  &:hover::-moz-range-track {\n    ", ";\n  }\n\n  &:disabled::-moz-range-track {\n    ", ";\n  }\n"], transitionDuration, sliderThumbStyle, sliderThumbFocusedStyle, sliderThumbDisabledStyle, transitionDuration, sliderTrackStyle, sliderDefaultBackground, sliderTrackFocusedStyle, sliderTrackDisabledStyle);
-const IERangeInputStyle = (0, _styledComponents.css)(["\n  &::-ms-thumb {\n    margin-top: 0;\n    transition: border-color ", " ease-in-out;\n    ", ";\n  }\n\n  &:focus::-ms-thumb {\n    ", ";\n  }\n\n  &:disabled::-ms-thumb {\n    ", ";\n  }\n\n  &::-ms-track {\n    background: transparent;\n    border-color: transparent;\n    color: transparent;\n    cursor: pointer;\n    height: ", "px;\n    transition: background-color ", " ease-in-out;\n    width: 100%;\n  }\n\n  &::-ms-fill-lower {\n    background: ", ";\n    border-radius: ", "px;\n    border: 0;\n  }\n\n  &::-ms-fill-upper {\n    background: ", ";\n    border-radius: ", "px;\n    border: 0;\n  }\n\n  &:active::-ms-fill-lower,\n  &:hover::-ms-fill-lower {\n    background: ", ";\n  }\n\n  &:active::-ms-fill-upper,\n  &:hover::-ms-fill-upper {\n    background: ", ";\n  }\n\n  &:disabled::-ms-fill-lower {\n    background: ", ";\n  }\n\n  &:disabled::-ms-fill-upper {\n    background: ", ";\n  }\n"], transitionDuration, sliderThumbStyle, sliderThumbFocusedStyle, sliderThumbDisabledStyle, sliderLineThickness, transitionDuration, _theme.track.default.lower, sliderLineThickness / 2, _theme.track.default.upper, sliderLineThickness / 2, _theme.track.hover.lower, _theme.track.hover.upper, _theme.track.disabled.lower, _theme.track.disabled.upper);
-const rangeInputStyle = (0, _styledComponents.css)(["\n  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */\n  background: transparent; /* Otherwise white in Chrome */\n  height: ", "px; /* Otherwise thumb will collide with previous box element */\n  width: 100%; /* Specific width is required for Firefox. */\n\n  &:focus {\n    outline: none;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ", " ", " ", ";\n"], overallHeight, chromeRangeInputStyle, firefoxRangeInputStyle, IERangeInputStyle);
+var sliderThumbStyle = (0, _styledComponents.css)(["\n  background: ", ";\n  border: ", "px solid transparent;\n  border-radius: 50%;\n  height: ", "px;\n  width: ", "px;\n  box-sizing: border-box;\n  ", ";\n"], _theme.thumb.default.background, sliderThumbBorderThickness, sliderThumbSize, sliderThumbSize, _elevation.e200);
+var sliderThumbFocusedStyle = (0, _styledComponents.css)(["\n  border-color: ", ";\n"], _colors.B200);
+var sliderThumbDisabledStyle = (0, _styledComponents.css)(["\n  cursor: not-allowed;\n  box-shadow: 0 0 1px ", ";\n"], _colors.N60A);
+var sliderDefaultBackground = (0, _styledComponents.css)(["\n  background: ", ";\n"], function (props) {
+  return "linear-gradient(".concat(_theme.track.default.lower, ", ").concat(_theme.track.default.lower, ") 0/ ").concat(props.valuePercent, "% 100% no-repeat ").concat(_theme.track.default.upper);
+});
+var sliderTrackStyle = (0, _styledComponents.css)(["\n  background: ", ";\n  border-radius: ", "px;\n  border: 0;\n  cursor: pointer;\n  height: ", "px;\n  width: 100%;\n  ", ";\n"], _colors.N30A, sliderLineThickness / 2, sliderLineThickness, sliderDefaultBackground);
+var sliderTrackDisabledStyle = (0, _styledComponents.css)(["\n  background: ", ";\n  cursor: not-allowed;\n"], function (props) {
+  return "linear-gradient(".concat(_theme.track.disabled.lower, ", ").concat(_theme.track.disabled.lower, ") 0/ ").concat(props.valuePercent, "% 100% no-repeat ").concat(_theme.track.disabled.upper);
+});
+var sliderTrackFocusedStyle = (0, _styledComponents.css)(["\n  background: ", ";\n"], function (props) {
+  return "linear-gradient(".concat(_theme.track.hover.lower, ", ").concat(_theme.track.hover.lower, ") 0/ ").concat(props.valuePercent, "% 100% no-repeat ").concat(_theme.track.hover.upper);
+});
+var chromeRangeInputStyle = (0, _styledComponents.css)(["\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    margin-top: -", "px;\n    transition: border-color ", " ease-in-out;\n    ", ";\n  }\n\n  &:focus::-webkit-slider-thumb {\n    ", ";\n  }\n\n  &:disabled::-webkit-slider-thumb {\n    ", ";\n  }\n\n  &::-webkit-slider-runnable-track {\n    transition: background-color ", " ease-in-out;\n    ", ";\n  }\n\n  &:focus::-webkit-slider-runnable-track {\n    ", ";\n  }\n\n  &:active::-webkit-slider-runnable-track,\n  &:hover::-webkit-slider-runnable-track {\n    ", ";\n  }\n\n  &:disabled::-webkit-slider-runnable-track {\n    ", ";\n  }\n"], sliderThumbSize / 2 - sliderLineThickness / 2, transitionDuration, sliderThumbStyle, sliderThumbFocusedStyle, sliderThumbDisabledStyle, transitionDuration, sliderTrackStyle, sliderDefaultBackground, sliderTrackFocusedStyle, sliderTrackDisabledStyle);
+var firefoxRangeInputStyle = (0, _styledComponents.css)(["\n  &::-moz-focus-outer {\n    border: 0;\n  }\n\n  &::-moz-range-thumb {\n    transition: border-color ", " ease-in-out;\n    ", ";\n  }\n\n  &:focus::-moz-range-thumb {\n    ", ";\n  }\n\n  &:disabled::-moz-range-thumb {\n    ", ";\n  }\n\n  &::-moz-range-track {\n    transition: background-color ", " ease-in-out;\n    ", ";\n  }\n\n  &:focus::-moz-range-track {\n    ", ";\n  }\n\n  &:active::-moz-range-track,\n  &:hover::-moz-range-track {\n    ", ";\n  }\n\n  &:disabled::-moz-range-track {\n    ", ";\n  }\n"], transitionDuration, sliderThumbStyle, sliderThumbFocusedStyle, sliderThumbDisabledStyle, transitionDuration, sliderTrackStyle, sliderDefaultBackground, sliderTrackFocusedStyle, sliderTrackDisabledStyle);
+var IERangeInputStyle = (0, _styledComponents.css)(["\n  &::-ms-thumb {\n    margin-top: 0;\n    transition: border-color ", " ease-in-out;\n    ", ";\n  }\n\n  &:focus::-ms-thumb {\n    ", ";\n  }\n\n  &:disabled::-ms-thumb {\n    ", ";\n  }\n\n  &::-ms-track {\n    background: transparent;\n    border-color: transparent;\n    color: transparent;\n    cursor: pointer;\n    height: ", "px;\n    transition: background-color ", " ease-in-out;\n    width: 100%;\n  }\n\n  &::-ms-fill-lower {\n    background: ", ";\n    border-radius: ", "px;\n    border: 0;\n  }\n\n  &::-ms-fill-upper {\n    background: ", ";\n    border-radius: ", "px;\n    border: 0;\n  }\n\n  &:active::-ms-fill-lower,\n  &:hover::-ms-fill-lower {\n    background: ", ";\n  }\n\n  &:active::-ms-fill-upper,\n  &:hover::-ms-fill-upper {\n    background: ", ";\n  }\n\n  &:disabled::-ms-fill-lower {\n    background: ", ";\n  }\n\n  &:disabled::-ms-fill-upper {\n    background: ", ";\n  }\n"], transitionDuration, sliderThumbStyle, sliderThumbFocusedStyle, sliderThumbDisabledStyle, sliderLineThickness, transitionDuration, _theme.track.default.lower, sliderLineThickness / 2, _theme.track.default.upper, sliderLineThickness / 2, _theme.track.hover.lower, _theme.track.hover.upper, _theme.track.disabled.lower, _theme.track.disabled.upper);
+var rangeInputStyle = (0, _styledComponents.css)(["\n  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */\n  background: transparent; /* Otherwise white in Chrome */\n  height: ", "px; /* Otherwise thumb will collide with previous box element */\n  width: 100%; /* Specific width is required for Firefox. */\n\n  &:focus {\n    outline: none;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ", " ", " ", ";\n"], overallHeight, chromeRangeInputStyle, firefoxRangeInputStyle, IERangeInputStyle);
 exports.rangeInputStyle = rangeInputStyle;
 
-const Input = _styledComponents.default.input.withConfig({
+var Input = _styledComponents.default.input.withConfig({
   displayName: "styled__Input",
@@ -41,0 +47,0 @@ componentId: "sc-1rhsf2v-0"

dist/cjs/theme.js

@@ -12,3 +12,3 @@ "use strict";
 
-const thumb = {
+var thumb = {
   default: {
@@ -24,3 +24,3 @@ background: colors.N0,
 exports.thumb = thumb;
-const track = {
+var track = {
   default: {
@@ -27,0 +27,0 @@ lower: colors.B400,

dist/cjs/version.json

 {
 	"name": "@atlaskit/field-range",
-	"version": "9.0.1",
+	"version": "9.0.2",
 	"sideEffects": false
 }

dist/es2019/version.json

 {
 	"name": "@atlaskit/field-range",
-	"version": "9.0.1",
+	"version": "9.0.2",
 	"sideEffects": false
 }

dist/esm/FieldRange.js

@@ -0,1 +1,7 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
@@ -12,14 +18,20 @@
 
-export default class Slider extends Component {
+var Slider = /*#__PURE__*/function (_Component) {
+  _inherits(Slider, _Component);
+
   // eslint-disable-next-line
-  constructor(props) {
-    super(props);
+  function Slider(props) {
+    var _this;
 
-    _defineProperty(this, "inputElement", void 0);
+    _classCallCheck(this, Slider);
 
-    _defineProperty(this, "state", void 0);
+    _this = _possibleConstructorReturn(this, _getPrototypeOf(Slider).call(this, props));
 
-    _defineProperty(this, "getPercentValue", (value, min, max) => {
-      let percent = '0';
+    _defineProperty(_assertThisInitialized(_this), "inputElement", void 0);
 
+    _defineProperty(_assertThisInitialized(_this), "state", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "getPercentValue", function (value, min, max) {
+      var percent = '0';
+
       if (min < max && value > min) {
@@ -32,3 +44,3 @@ percent = ((value - min) / (max - min) * 100).toFixed(2);
 
-    _defineProperty(this, "handleChange", e => {
+    _defineProperty(_assertThisInitialized(_this), "handleChange", function (e) {
       // Event.target is typed as an EventTarget but we need to access properties on it which are
@@ -39,15 +51,14 @@ // specific to HTMLInputElement. Due limitations of the HTML spec flow doesn't know that an
       // https://flow.org/en/docs/types/casting/#toc-type-casting-through-any
-      const {
-        target
-      } = e;
-      const value = parseFloat(target.value);
-      const {
-        max,
-        onChange,
-        min
-      } = this.props;
-      const valuePercent = this.getPercentValue(value, min, max);
-      this.setState({
-        value,
-        valuePercent
+      var target = e.target;
+      var value = parseFloat(target.value);
+      var _this$props = _this.props,
+          max = _this$props.max,
+          onChange = _this$props.onChange,
+          min = _this$props.min;
+
+      var valuePercent = _this.getPercentValue(value, min, max);
+
+      _this.setState({
+        value: value,
+        valuePercent: valuePercent
       });
@@ -60,52 +71,53 @@
 
-    this.inputElement = null;
-    this.state = {
+    _this.inputElement = null;
+    _this.state = {
       value: props.value,
-      valuePercent: this.getPercentValue(props.value, props.min, props.max)
+      valuePercent: _this.getPercentValue(props.value, props.min, props.max)
     };
+    return _this;
   }
 
-  UNSAFE_componentWillReceiveProps({
-    value: nextValue,
-    min,
-    max
-  }) {
-    const {
-      value: currentValue
-    } = this.props;
+  _createClass(Slider, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(_ref) {
+      var nextValue = _ref.value,
+          min = _ref.min,
+          max = _ref.max;
+      var currentValue = this.props.value;
 
-    if (currentValue !== nextValue) {
-      const valuePercent = this.getPercentValue(nextValue, min, max);
-      this.setState({
-        value: nextValue,
-        valuePercent
+      if (currentValue !== nextValue) {
+        var valuePercent = this.getPercentValue(nextValue, min, max);
+        this.setState({
+          value: nextValue,
+          valuePercent: valuePercent
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          min = _this$props2.min,
+          max = _this$props2.max,
+          step = _this$props2.step,
+          disabled = _this$props2.disabled;
+      var _this$state = this.state,
+          value = _this$state.value,
+          valuePercent = _this$state.valuePercent;
+      return React.createElement(Input, {
+        type: "range",
+        value: value.toString(),
+        min: min,
+        max: max,
+        step: step,
+        onChange: this.handleChange,
+        disabled: disabled,
+        valuePercent: valuePercent
       });
     }
-  }
+  }]);
 
-  render() {
-    const {
-      min,
-      max,
-      step,
-      disabled
-    } = this.props;
-    const {
-      value,
-      valuePercent
-    } = this.state;
-    return React.createElement(Input, {
-      type: "range",
-      value: value.toString(),
-      min: min,
-      max: max,
-      step: step,
-      onChange: this.handleChange,
-      disabled: disabled,
-      valuePercent: valuePercent
-    });
-  }
+  return Slider;
+}(Component);
 
-}
-
 _defineProperty(Slider, "defaultProps", {
@@ -117,3 +129,5 @@ disabled: false,
   step: 0.1,
-  onChange: () => {}
-});
+  onChange: function onChange() {}
+});
+
+export { Slider as default };

dist/esm/styled.js

@@ -6,19 +6,25 @@ /* eslint-disable no-mixed-operators */
 import { thumb, track } from './theme';
-const sliderThumbSize = 16;
-const sliderThumbBorderThickness = 2;
-const sliderLineThickness = 4;
-const transitionDuration = '0.2s';
-export const overallHeight = 40;
-const sliderThumbStyle = css(["\n  background: ", ";\n  border: ", "px solid transparent;\n  border-radius: 50%;\n  height: ", "px;\n  width: ", "px;\n  box-sizing: border-box;\n  ", ";\n"], thumb.default.background, sliderThumbBorderThickness, sliderThumbSize, sliderThumbSize, e200);
-const sliderThumbFocusedStyle = css(["\n  border-color: ", ";\n"], B200);
-const sliderThumbDisabledStyle = css(["\n  cursor: not-allowed;\n  box-shadow: 0 0 1px ", ";\n"], N60A);
-const sliderDefaultBackground = css(["\n  background: ", ";\n"], props => `linear-gradient(${track.default.lower}, ${track.default.lower}) 0/ ${props.valuePercent}% 100% no-repeat ${track.default.upper}`);
-const sliderTrackStyle = css(["\n  background: ", ";\n  border-radius: ", "px;\n  border: 0;\n  cursor: pointer;\n  height: ", "px;\n  width: 100%;\n  ", ";\n"], N30A, sliderLineThickness / 2, sliderLineThickness, sliderDefaultBackground);
-const sliderTrackDisabledStyle = css(["\n  background: ", ";\n  cursor: not-allowed;\n"], props => `linear-gradient(${track.disabled.lower}, ${track.disabled.lower}) 0/ ${props.valuePercent}% 100% no-repeat ${track.disabled.upper}`);
-const sliderTrackFocusedStyle = css(["\n  background: ", ";\n"], props => `linear-gradient(${track.hover.lower}, ${track.hover.lower}) 0/ ${props.valuePercent}% 100% no-repeat ${track.hover.upper}`);
-const chromeRangeInputStyle = css(["\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    margin-top: -", "px;\n    transition: border-color ", " ease-in-out;\n    ", ";\n  }\n\n  &:focus::-webkit-slider-thumb {\n    ", ";\n  }\n\n  &:disabled::-webkit-slider-thumb {\n    ", ";\n  }\n\n  &::-webkit-slider-runnable-track {\n    transition: background-color ", " ease-in-out;\n    ", ";\n  }\n\n  &:focus::-webkit-slider-runnable-track {\n    ", ";\n  }\n\n  &:active::-webkit-slider-runnable-track,\n  &:hover::-webkit-slider-runnable-track {\n    ", ";\n  }\n\n  &:disabled::-webkit-slider-runnable-track {\n    ", ";\n  }\n"], sliderThumbSize / 2 - sliderLineThickness / 2, transitionDuration, sliderThumbStyle, sliderThumbFocusedStyle, sliderThumbDisabledStyle, transitionDuration, sliderTrackStyle, sliderDefaultBackground, sliderTrackFocusedStyle, sliderTrackDisabledStyle);
-const firefoxRangeInputStyle = css(["\n  &::-moz-focus-outer {\n    border: 0;\n  }\n\n  &::-moz-range-thumb {\n    transition: border-color ", " ease-in-out;\n    ", ";\n  }\n\n  &:focus::-moz-range-thumb {\n    ", ";\n  }\n\n  &:disabled::-moz-range-thumb {\n    ", ";\n  }\n\n  &::-moz-range-track {\n    transition: background-color ", " ease-in-out;\n    ", ";\n  }\n\n  &:focus::-moz-range-track {\n    ", ";\n  }\n\n  &:active::-moz-range-track,\n  &:hover::-moz-range-track {\n    ", ";\n  }\n\n  &:disabled::-moz-range-track {\n    ", ";\n  }\n"], transitionDuration, sliderThumbStyle, sliderThumbFocusedStyle, sliderThumbDisabledStyle, transitionDuration, sliderTrackStyle, sliderDefaultBackground, sliderTrackFocusedStyle, sliderTrackDisabledStyle);
-const IERangeInputStyle = css(["\n  &::-ms-thumb {\n    margin-top: 0;\n    transition: border-color ", " ease-in-out;\n    ", ";\n  }\n\n  &:focus::-ms-thumb {\n    ", ";\n  }\n\n  &:disabled::-ms-thumb {\n    ", ";\n  }\n\n  &::-ms-track {\n    background: transparent;\n    border-color: transparent;\n    color: transparent;\n    cursor: pointer;\n    height: ", "px;\n    transition: background-color ", " ease-in-out;\n    width: 100%;\n  }\n\n  &::-ms-fill-lower {\n    background: ", ";\n    border-radius: ", "px;\n    border: 0;\n  }\n\n  &::-ms-fill-upper {\n    background: ", ";\n    border-radius: ", "px;\n    border: 0;\n  }\n\n  &:active::-ms-fill-lower,\n  &:hover::-ms-fill-lower {\n    background: ", ";\n  }\n\n  &:active::-ms-fill-upper,\n  &:hover::-ms-fill-upper {\n    background: ", ";\n  }\n\n  &:disabled::-ms-fill-lower {\n    background: ", ";\n  }\n\n  &:disabled::-ms-fill-upper {\n    background: ", ";\n  }\n"], transitionDuration, sliderThumbStyle, sliderThumbFocusedStyle, sliderThumbDisabledStyle, sliderLineThickness, transitionDuration, track.default.lower, sliderLineThickness / 2, track.default.upper, sliderLineThickness / 2, track.hover.lower, track.hover.upper, track.disabled.lower, track.disabled.upper);
-export const rangeInputStyle = css(["\n  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */\n  background: transparent; /* Otherwise white in Chrome */\n  height: ", "px; /* Otherwise thumb will collide with previous box element */\n  width: 100%; /* Specific width is required for Firefox. */\n\n  &:focus {\n    outline: none;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ", " ", " ", ";\n"], overallHeight, chromeRangeInputStyle, firefoxRangeInputStyle, IERangeInputStyle);
-export const Input = styled.input.withConfig({
+var sliderThumbSize = 16;
+var sliderThumbBorderThickness = 2;
+var sliderLineThickness = 4;
+var transitionDuration = '0.2s';
+export var overallHeight = 40;
+var sliderThumbStyle = css(["\n  background: ", ";\n  border: ", "px solid transparent;\n  border-radius: 50%;\n  height: ", "px;\n  width: ", "px;\n  box-sizing: border-box;\n  ", ";\n"], thumb.default.background, sliderThumbBorderThickness, sliderThumbSize, sliderThumbSize, e200);
+var sliderThumbFocusedStyle = css(["\n  border-color: ", ";\n"], B200);
+var sliderThumbDisabledStyle = css(["\n  cursor: not-allowed;\n  box-shadow: 0 0 1px ", ";\n"], N60A);
+var sliderDefaultBackground = css(["\n  background: ", ";\n"], function (props) {
+  return "linear-gradient(".concat(track.default.lower, ", ").concat(track.default.lower, ") 0/ ").concat(props.valuePercent, "% 100% no-repeat ").concat(track.default.upper);
+});
+var sliderTrackStyle = css(["\n  background: ", ";\n  border-radius: ", "px;\n  border: 0;\n  cursor: pointer;\n  height: ", "px;\n  width: 100%;\n  ", ";\n"], N30A, sliderLineThickness / 2, sliderLineThickness, sliderDefaultBackground);
+var sliderTrackDisabledStyle = css(["\n  background: ", ";\n  cursor: not-allowed;\n"], function (props) {
+  return "linear-gradient(".concat(track.disabled.lower, ", ").concat(track.disabled.lower, ") 0/ ").concat(props.valuePercent, "% 100% no-repeat ").concat(track.disabled.upper);
+});
+var sliderTrackFocusedStyle = css(["\n  background: ", ";\n"], function (props) {
+  return "linear-gradient(".concat(track.hover.lower, ", ").concat(track.hover.lower, ") 0/ ").concat(props.valuePercent, "% 100% no-repeat ").concat(track.hover.upper);
+});
+var chromeRangeInputStyle = css(["\n  &::-webkit-slider-thumb {\n    -webkit-appearance: none;\n    margin-top: -", "px;\n    transition: border-color ", " ease-in-out;\n    ", ";\n  }\n\n  &:focus::-webkit-slider-thumb {\n    ", ";\n  }\n\n  &:disabled::-webkit-slider-thumb {\n    ", ";\n  }\n\n  &::-webkit-slider-runnable-track {\n    transition: background-color ", " ease-in-out;\n    ", ";\n  }\n\n  &:focus::-webkit-slider-runnable-track {\n    ", ";\n  }\n\n  &:active::-webkit-slider-runnable-track,\n  &:hover::-webkit-slider-runnable-track {\n    ", ";\n  }\n\n  &:disabled::-webkit-slider-runnable-track {\n    ", ";\n  }\n"], sliderThumbSize / 2 - sliderLineThickness / 2, transitionDuration, sliderThumbStyle, sliderThumbFocusedStyle, sliderThumbDisabledStyle, transitionDuration, sliderTrackStyle, sliderDefaultBackground, sliderTrackFocusedStyle, sliderTrackDisabledStyle);
+var firefoxRangeInputStyle = css(["\n  &::-moz-focus-outer {\n    border: 0;\n  }\n\n  &::-moz-range-thumb {\n    transition: border-color ", " ease-in-out;\n    ", ";\n  }\n\n  &:focus::-moz-range-thumb {\n    ", ";\n  }\n\n  &:disabled::-moz-range-thumb {\n    ", ";\n  }\n\n  &::-moz-range-track {\n    transition: background-color ", " ease-in-out;\n    ", ";\n  }\n\n  &:focus::-moz-range-track {\n    ", ";\n  }\n\n  &:active::-moz-range-track,\n  &:hover::-moz-range-track {\n    ", ";\n  }\n\n  &:disabled::-moz-range-track {\n    ", ";\n  }\n"], transitionDuration, sliderThumbStyle, sliderThumbFocusedStyle, sliderThumbDisabledStyle, transitionDuration, sliderTrackStyle, sliderDefaultBackground, sliderTrackFocusedStyle, sliderTrackDisabledStyle);
+var IERangeInputStyle = css(["\n  &::-ms-thumb {\n    margin-top: 0;\n    transition: border-color ", " ease-in-out;\n    ", ";\n  }\n\n  &:focus::-ms-thumb {\n    ", ";\n  }\n\n  &:disabled::-ms-thumb {\n    ", ";\n  }\n\n  &::-ms-track {\n    background: transparent;\n    border-color: transparent;\n    color: transparent;\n    cursor: pointer;\n    height: ", "px;\n    transition: background-color ", " ease-in-out;\n    width: 100%;\n  }\n\n  &::-ms-fill-lower {\n    background: ", ";\n    border-radius: ", "px;\n    border: 0;\n  }\n\n  &::-ms-fill-upper {\n    background: ", ";\n    border-radius: ", "px;\n    border: 0;\n  }\n\n  &:active::-ms-fill-lower,\n  &:hover::-ms-fill-lower {\n    background: ", ";\n  }\n\n  &:active::-ms-fill-upper,\n  &:hover::-ms-fill-upper {\n    background: ", ";\n  }\n\n  &:disabled::-ms-fill-lower {\n    background: ", ";\n  }\n\n  &:disabled::-ms-fill-upper {\n    background: ", ";\n  }\n"], transitionDuration, sliderThumbStyle, sliderThumbFocusedStyle, sliderThumbDisabledStyle, sliderLineThickness, transitionDuration, track.default.lower, sliderLineThickness / 2, track.default.upper, sliderLineThickness / 2, track.hover.lower, track.hover.upper, track.disabled.lower, track.disabled.upper);
+export var rangeInputStyle = css(["\n  -webkit-appearance: none; /* Hides the slider so that custom slider can be made */\n  background: transparent; /* Otherwise white in Chrome */\n  height: ", "px; /* Otherwise thumb will collide with previous box element */\n  width: 100%; /* Specific width is required for Firefox. */\n\n  &:focus {\n    outline: none;\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n  }\n\n  ", " ", " ", ";\n"], overallHeight, chromeRangeInputStyle, firefoxRangeInputStyle, IERangeInputStyle);
+export var Input = styled.input.withConfig({
   displayName: "styled__Input",
@@ -25,0 +31,0 @@ componentId: "sc-1rhsf2v-0"

dist/esm/theme.js

 import * as colors from '@atlaskit/theme/colors';
-export const thumb = {
+export var thumb = {
   default: {
@@ -12,3 +12,3 @@ background: colors.N0,
 };
-export const track = {
+export var track = {
   default: {
@@ -15,0 +15,0 @@ lower: colors.B400,

dist/esm/version.json

 {
 	"name": "@atlaskit/field-range",
-	"version": "9.0.1",
+	"version": "9.0.2",
 	"sideEffects": false
 }

package.json

 {
   "name": "@atlaskit/field-range",
-  "version": "9.0.1",
+  "version": "9.0.2",
   "description": "Component which renders a slider and is a substitute of the native input[range] element",
@@ -5,0 +5,0 @@ "publishConfig": {

No alert changes

Improved metrics

Total package byte prevSize

41727

increased by8.6%

Lines of code

393

increased by7.67%

No dependency changes