@hig/slider - npm Package Compare versions

Comparing version 1.3.0 to 1.3.1

build/index.es.js

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React, { useState } from 'react';
 import PropTypes from 'prop-types';
@@ -200,130 +200,100 @@ import { css, cx } from 'emotion';
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
 function _objectWithoutProperties$1(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var SliderPresenter = function SliderPresenter(props) {
+  var disabled = props.disabled,
+      hasFocus = props.hasFocus,
+      hasHover = props.hasHover,
+      isPressed = props.isPressed,
+      max = props.max,
+      min = props.min,
+      sliderRef = props.sliderRef,
+      customStylesheet = props.stylesheet,
+      value = props.value,
+      variant = props.variant,
+      otherProps = _objectWithoutProperties$1(props, ["disabled", "hasFocus", "hasHover", "isPressed", "max", "min", "sliderRef", "stylesheet", "value", "variant"]);
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+  var className = otherProps.className;
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+  var sliderClassName = createCustomClassNames(className, "slider");
+  var markContainerClassName = createCustomClassNames(className, "slider-mark-container");
 
-var SliderPresenter = function (_Component) {
-  _inherits(SliderPresenter, _Component);
-
-  function SliderPresenter() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, SliderPresenter);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SliderPresenter.__proto__ || Object.getPrototypeOf(SliderPresenter)).call.apply(_ref, [this].concat(args))), _this), _this.getTickMarks = function (min, max, step, styles) {
-      var markRulesClassName = createCustomClassNames(_this.props.className, "slider-mark-rules");
-      var loops = step ? Math.floor((max - min) / step) : 1;
-      var tickMarks = [];
-      for (var i = 0; i < loops; i += 1) {
-        tickMarks.push(React.createElement("div", {
-          className: cx([markRulesClassName, css(styles.markRules)]),
-          style: { left: i * 100 / loops + "%" },
-          key: "mark-" + i
-        }));
-      }
-      // adds the mark to end of slider
+  var getTickMarks = function getTickMarks(step, styles) {
+    var markRulesClassName = createCustomClassNames(props.className, "slider-mark-rules");
+    var loops = step ? Math.floor((max - min) / step) : 1;
+    var tickMarks = [];
+    for (var i = 0; i < loops; i += 1) {
       tickMarks.push(React.createElement("div", {
         className: cx([markRulesClassName, css(styles.markRules)]),
-        style: { right: "0%" },
-        key: "mark-" + loops
+        style: { left: i * 100 / loops + "%" },
+        key: "mark-" + i
       }));
-      return tickMarks;
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
+    }
+    // adds the mark to end of slider
+    tickMarks.push(React.createElement("div", {
+      className: cx([markRulesClassName, css(styles.markRules)]),
+      style: { right: "0%" },
+      key: "mark-" + loops
+    }));
+    return tickMarks;
+  };
 
-  _createClass(SliderPresenter, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
+  return React.createElement(
+    ThemeContext.Consumer,
+    null,
+    function (_ref) {
+      var resolvedRoles = _ref.resolvedRoles;
 
-      var _props = this.props,
-          disabled = _props.disabled,
-          hasFocus = _props.hasFocus,
-          hasHover = _props.hasHover,
-          isPressed = _props.isPressed,
-          max = _props.max,
-          min = _props.min,
-          sliderRef = _props.sliderRef,
-          customStylesheet = _props.stylesheet,
-          value = _props.value,
-          variant = _props.variant,
-          otherProps = _objectWithoutProperties$1(_props, ["disabled", "hasFocus", "hasHover", "isPressed", "max", "min", "sliderRef", "stylesheet", "value", "variant"]);
+      var styles = stylesheet({
+        disabled: disabled,
+        hasFocus: hasFocus,
+        hasHover: hasHover,
+        isPressed: isPressed,
+        max: max,
+        min: min,
+        stylesheet: customStylesheet,
+        value: value
+      }, resolvedRoles);
 
-      var className = otherProps.className;
+      var marks = variant === sliderTypes.DISCRETE ? getTickMarks(otherProps.step, styles) : null;
 
-      var sliderClassName = createCustomClassNames(className, "slider");
-      var markContainerClassName = createCustomClassNames(className, "slider-mark-container");
-
-      return React.createElement(
-        ThemeContext.Consumer,
-        null,
-        function (_ref2) {
-          var resolvedRoles = _ref2.resolvedRoles;
-
-          var styles = stylesheet({
-            disabled: disabled,
-            hasFocus: hasFocus,
-            hasHover: hasHover,
-            isPressed: isPressed,
-            max: max,
-            min: min,
-            stylesheet: customStylesheet,
-            value: value
-          }, resolvedRoles);
-
-          var marks = variant === sliderTypes.DISCRETE ? _this2.getTickMarks(min, max, otherProps.step, styles) : null;
-
-          return marks ? React.createElement(
-            "div",
-            { className: cx([className, css(styles.discrete)]) },
-            React.createElement("input", _extends$1({}, otherProps, {
-              className: cx([sliderClassName, css(styles.slider)]),
-              disabled: disabled,
-              type: "range",
-              "aria-valuemin": min,
-              "aria-valuemax": max,
-              "aria-valuenow": value,
-              max: max,
-              min: min,
-              ref: sliderRef,
-              value: value
-            })),
-            React.createElement(
-              "div",
-              {
-                className: cx([markContainerClassName, css(styles.markContainer)])
-              },
-              marks
-            )
-          ) : React.createElement("input", _extends$1({}, otherProps, {
-            className: cx([className, css(styles.slider)]),
-            disabled: disabled,
-            type: "range",
-            "aria-valuemin": min,
-            "aria-valuemax": max,
-            "aria-valuenow": value,
-            max: max,
-            min: min,
-            ref: sliderRef,
-            value: value
-          }));
-        }
-      );
+      return marks ? React.createElement(
+        "div",
+        { className: cx([className, css(styles.discrete)]) },
+        React.createElement("input", _extends$1({}, otherProps, {
+          className: cx([sliderClassName, css(styles.slider)]),
+          disabled: disabled,
+          type: "range",
+          "aria-valuemin": min,
+          "aria-valuemax": max,
+          "aria-valuenow": value,
+          max: max,
+          min: min,
+          ref: sliderRef,
+          value: value
+        })),
+        React.createElement(
+          "div",
+          {
+            className: cx([markContainerClassName, css(styles.markContainer)])
+          },
+          marks
+        )
+      ) : React.createElement("input", _extends$1({}, otherProps, {
+        className: cx([className, css(styles.slider)]),
+        disabled: disabled,
+        type: "range",
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": value,
+        max: max,
+        min: min,
+        ref: sliderRef,
+        value: value
+      }));
     }
-  }]);
+  );
+};
 
-  return SliderPresenter;
-}(Component);
+SliderPresenter.displayName = "SliderPresenter";
 
@@ -451,12 +421,6 @@ SliderPresenter.propTypes = {
 
-var _createClass$1 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _slicedToArray = function () { function sliceIterator(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"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
 function _objectWithoutProperties$2(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 /**
@@ -470,134 +434,100 @@ * @typedef {string|number} Value
  */
+var Slider = function Slider(props) {
+  var _useState = useState(props.defaultValue || (props.max - props.min) / 2),
+      _useState2 = _slicedToArray(_useState, 2),
+      valueHook = _useState2[0],
+      setValueHook = _useState2[1];
 
-var Slider = function (_Component) {
-  _inherits$1(Slider, _Component);
+  var isControlled = function isControlled() {
+    return props.value !== undefined;
+  };
 
-  function Slider() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck$1(this, Slider);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+  /**
+   * @returns {Value}
+   */
+  var getValue = function getValue() {
+    if (isControlled()) {
+      return props.value || 0;
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn$1(this, (_ref = Slider.__proto__ || Object.getPrototypeOf(Slider)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      value: _this.props.defaultValue || (_this.props.max - _this.props.min) / 2
-    }, _this.handleChange = function (event) {
-      _this.setValue(event.target.value);
-    }, _temp), _possibleConstructorReturn$1(_this, _ret);
-  }
+    return valueHook;
+  };
 
   /**
-   * @type {State}
+   * @param {Value} value
    */
+  var setValue = function setValue(valueParams) {
+    var onChange = props.onChange;
 
 
-  _createClass$1(Slider, [{
-    key: "getValue",
+    if (onChange) onChange(Number(valueParams));
 
-
-    /**
-     * @returns {Value}
-     */
-    value: function getValue() {
-      if (this.isControlled()) {
-        return this.props.value || 0;
-      }
-
-      return this.state.value;
+    if (!isControlled()) {
+      setValueHook(valueParams);
     }
+  };
 
-    /**
-     * @param {Value} value
-     */
+  /**
+   * @param {event} Event
+   */
+  var handleChange = function handleChange(event) {
+    setValue(event.target.value);
+  };
 
-  }, {
-    key: "setValue",
-    value: function setValue(value) {
-      var onChange = this.props.onChange;
+  var defaultValue = props.defaultValue,
+      onBlur = props.onBlur,
+      onChange = props.onChange,
+      onFocus = props.onFocus,
+      onMouseDown = props.onMouseDown,
+      onMouseEnter = props.onMouseEnter,
+      onMouseLeave = props.onMouseLeave,
+      onMouseUp = props.onMouseUp,
+      sliderRef = props.sliderRef,
+      stylesheet = props.stylesheet,
+      value = props.value,
+      otherProps = _objectWithoutProperties$2(props, ["defaultValue", "onBlur", "onChange", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "sliderRef", "stylesheet", "value"]);
 
+  var currentValue = getValue();
 
-      if (onChange) onChange(Number(value));
-
-      if (!this.isControlled()) {
-        this.setState({ value: value });
-      }
+  return React.createElement(
+    ControlBehavior,
+    {
+      onBlur: onBlur,
+      onFocus: onFocus,
+      onMouseDown: onMouseDown,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onMouseUp: onMouseUp
+    },
+    function (_ref) {
+      var hasFocus = _ref.hasFocus,
+          hasHover = _ref.hasHover,
+          isPressed = _ref.isPressed,
+          handleBlur = _ref.onBlur,
+          handleFocus = _ref.onFocus,
+          handleMouseDown = _ref.onMouseDown,
+          handleMouseEnter = _ref.onMouseEnter,
+          handleMouseLeave = _ref.onMouseLeave,
+          handleMouseUp = _ref.onMouseUp;
+      return React.createElement(SliderPresenter, _extends$2({
+        hasFocus: hasFocus,
+        hasHover: hasHover,
+        isPressed: isPressed,
+        onBlur: handleBlur,
+        onChange: handleChange,
+        onFocus: handleFocus,
+        onMouseDown: handleMouseDown,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onMouseUp: handleMouseUp,
+        sliderRef: sliderRef,
+        stylesheet: stylesheet,
+        value: currentValue
+      }, otherProps));
     }
-  }, {
-    key: "isControlled",
-    value: function isControlled() {
-      return this.props.value !== undefined;
-    }
+  );
+};
 
-    /**
-     * @param {event} Event
-     */
+Slider.displayName = "Slider";
 
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _props = this.props,
-          defaultValue = _props.defaultValue,
-          onBlur = _props.onBlur,
-          onChange = _props.onChange,
-          onFocus = _props.onFocus,
-          onMouseDown = _props.onMouseDown,
-          onMouseEnter = _props.onMouseEnter,
-          onMouseLeave = _props.onMouseLeave,
-          onMouseUp = _props.onMouseUp,
-          sliderRef = _props.sliderRef,
-          stylesheet = _props.stylesheet,
-          value = _props.value,
-          otherProps = _objectWithoutProperties$2(_props, ["defaultValue", "onBlur", "onChange", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "sliderRef", "stylesheet", "value"]);
-
-      var currentValue = this.getValue();
-
-      return React.createElement(
-        ControlBehavior,
-        {
-          onBlur: onBlur,
-          onFocus: onFocus,
-          onMouseDown: onMouseDown,
-          onMouseEnter: onMouseEnter,
-          onMouseLeave: onMouseLeave,
-          onMouseUp: onMouseUp
-        },
-        function (_ref2) {
-          var hasFocus = _ref2.hasFocus,
-              hasHover = _ref2.hasHover,
-              isPressed = _ref2.isPressed,
-              handleBlur = _ref2.onBlur,
-              handleFocus = _ref2.onFocus,
-              handleMouseDown = _ref2.onMouseDown,
-              handleMouseEnter = _ref2.onMouseEnter,
-              handleMouseLeave = _ref2.onMouseLeave,
-              handleMouseUp = _ref2.onMouseUp;
-          return React.createElement(SliderPresenter, _extends$2({
-            hasFocus: hasFocus,
-            hasHover: hasHover,
-            isPressed: isPressed,
-            onBlur: handleBlur,
-            onChange: _this2.handleChange,
-            onFocus: handleFocus,
-            onMouseDown: handleMouseDown,
-            onMouseEnter: handleMouseEnter,
-            onMouseLeave: handleMouseLeave,
-            onMouseUp: handleMouseUp,
-            sliderRef: sliderRef,
-            stylesheet: stylesheet,
-            value: currentValue
-          }, otherProps));
-        }
-      );
-    }
-  }]);
-
-  return Slider;
-}(Component);
-
 Slider.propTypes = {
@@ -681,2 +611,3 @@ /**
 };
+
 Slider.defaultProps = {
@@ -683,0 +614,0 @@ disabled: false,

build/index.js

@@ -207,130 +207,100 @@ 'use strict';
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
 function _objectWithoutProperties$1(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var SliderPresenter = function SliderPresenter(props) {
+  var disabled = props.disabled,
+      hasFocus = props.hasFocus,
+      hasHover = props.hasHover,
+      isPressed = props.isPressed,
+      max = props.max,
+      min = props.min,
+      sliderRef = props.sliderRef,
+      customStylesheet = props.stylesheet,
+      value = props.value,
+      variant = props.variant,
+      otherProps = _objectWithoutProperties$1(props, ["disabled", "hasFocus", "hasHover", "isPressed", "max", "min", "sliderRef", "stylesheet", "value", "variant"]);
 
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+  var className = otherProps.className;
 
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+  var sliderClassName = utils.createCustomClassNames(className, "slider");
+  var markContainerClassName = utils.createCustomClassNames(className, "slider-mark-container");
 
-var SliderPresenter = function (_Component) {
-  _inherits(SliderPresenter, _Component);
-
-  function SliderPresenter() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck(this, SliderPresenter);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SliderPresenter.__proto__ || Object.getPrototypeOf(SliderPresenter)).call.apply(_ref, [this].concat(args))), _this), _this.getTickMarks = function (min, max, step, styles) {
-      var markRulesClassName = utils.createCustomClassNames(_this.props.className, "slider-mark-rules");
-      var loops = step ? Math.floor((max - min) / step) : 1;
-      var tickMarks = [];
-      for (var i = 0; i < loops; i += 1) {
-        tickMarks.push(React__default.createElement("div", {
-          className: emotion.cx([markRulesClassName, emotion.css(styles.markRules)]),
-          style: { left: i * 100 / loops + "%" },
-          key: "mark-" + i
-        }));
-      }
-      // adds the mark to end of slider
+  var getTickMarks = function getTickMarks(step, styles) {
+    var markRulesClassName = utils.createCustomClassNames(props.className, "slider-mark-rules");
+    var loops = step ? Math.floor((max - min) / step) : 1;
+    var tickMarks = [];
+    for (var i = 0; i < loops; i += 1) {
       tickMarks.push(React__default.createElement("div", {
         className: emotion.cx([markRulesClassName, emotion.css(styles.markRules)]),
-        style: { right: "0%" },
-        key: "mark-" + loops
+        style: { left: i * 100 / loops + "%" },
+        key: "mark-" + i
       }));
-      return tickMarks;
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
+    }
+    // adds the mark to end of slider
+    tickMarks.push(React__default.createElement("div", {
+      className: emotion.cx([markRulesClassName, emotion.css(styles.markRules)]),
+      style: { right: "0%" },
+      key: "mark-" + loops
+    }));
+    return tickMarks;
+  };
 
-  _createClass(SliderPresenter, [{
-    key: "render",
-    value: function render() {
-      var _this2 = this;
+  return React__default.createElement(
+    ThemeContext.Consumer,
+    null,
+    function (_ref) {
+      var resolvedRoles = _ref.resolvedRoles;
 
-      var _props = this.props,
-          disabled = _props.disabled,
-          hasFocus = _props.hasFocus,
-          hasHover = _props.hasHover,
-          isPressed = _props.isPressed,
-          max = _props.max,
-          min = _props.min,
-          sliderRef = _props.sliderRef,
-          customStylesheet = _props.stylesheet,
-          value = _props.value,
-          variant = _props.variant,
-          otherProps = _objectWithoutProperties$1(_props, ["disabled", "hasFocus", "hasHover", "isPressed", "max", "min", "sliderRef", "stylesheet", "value", "variant"]);
+      var styles = stylesheet({
+        disabled: disabled,
+        hasFocus: hasFocus,
+        hasHover: hasHover,
+        isPressed: isPressed,
+        max: max,
+        min: min,
+        stylesheet: customStylesheet,
+        value: value
+      }, resolvedRoles);
 
-      var className = otherProps.className;
+      var marks = variant === sliderTypes.DISCRETE ? getTickMarks(otherProps.step, styles) : null;
 
-      var sliderClassName = utils.createCustomClassNames(className, "slider");
-      var markContainerClassName = utils.createCustomClassNames(className, "slider-mark-container");
-
-      return React__default.createElement(
-        ThemeContext.Consumer,
-        null,
-        function (_ref2) {
-          var resolvedRoles = _ref2.resolvedRoles;
-
-          var styles = stylesheet({
-            disabled: disabled,
-            hasFocus: hasFocus,
-            hasHover: hasHover,
-            isPressed: isPressed,
-            max: max,
-            min: min,
-            stylesheet: customStylesheet,
-            value: value
-          }, resolvedRoles);
-
-          var marks = variant === sliderTypes.DISCRETE ? _this2.getTickMarks(min, max, otherProps.step, styles) : null;
-
-          return marks ? React__default.createElement(
-            "div",
-            { className: emotion.cx([className, emotion.css(styles.discrete)]) },
-            React__default.createElement("input", _extends$1({}, otherProps, {
-              className: emotion.cx([sliderClassName, emotion.css(styles.slider)]),
-              disabled: disabled,
-              type: "range",
-              "aria-valuemin": min,
-              "aria-valuemax": max,
-              "aria-valuenow": value,
-              max: max,
-              min: min,
-              ref: sliderRef,
-              value: value
-            })),
-            React__default.createElement(
-              "div",
-              {
-                className: emotion.cx([markContainerClassName, emotion.css(styles.markContainer)])
-              },
-              marks
-            )
-          ) : React__default.createElement("input", _extends$1({}, otherProps, {
-            className: emotion.cx([className, emotion.css(styles.slider)]),
-            disabled: disabled,
-            type: "range",
-            "aria-valuemin": min,
-            "aria-valuemax": max,
-            "aria-valuenow": value,
-            max: max,
-            min: min,
-            ref: sliderRef,
-            value: value
-          }));
-        }
-      );
+      return marks ? React__default.createElement(
+        "div",
+        { className: emotion.cx([className, emotion.css(styles.discrete)]) },
+        React__default.createElement("input", _extends$1({}, otherProps, {
+          className: emotion.cx([sliderClassName, emotion.css(styles.slider)]),
+          disabled: disabled,
+          type: "range",
+          "aria-valuemin": min,
+          "aria-valuemax": max,
+          "aria-valuenow": value,
+          max: max,
+          min: min,
+          ref: sliderRef,
+          value: value
+        })),
+        React__default.createElement(
+          "div",
+          {
+            className: emotion.cx([markContainerClassName, emotion.css(styles.markContainer)])
+          },
+          marks
+        )
+      ) : React__default.createElement("input", _extends$1({}, otherProps, {
+        className: emotion.cx([className, emotion.css(styles.slider)]),
+        disabled: disabled,
+        type: "range",
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-valuenow": value,
+        max: max,
+        min: min,
+        ref: sliderRef,
+        value: value
+      }));
     }
-  }]);
+  );
+};
 
-  return SliderPresenter;
-}(React.Component);
+SliderPresenter.displayName = "SliderPresenter";
 
@@ -458,12 +428,6 @@ SliderPresenter.propTypes = {
 
-var _createClass$1 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _slicedToArray = function () { function sliceIterator(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"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
 function _objectWithoutProperties$2(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 /**
@@ -477,134 +441,100 @@ * @typedef {string|number} Value
  */
+var Slider = function Slider(props) {
+  var _useState = React.useState(props.defaultValue || (props.max - props.min) / 2),
+      _useState2 = _slicedToArray(_useState, 2),
+      valueHook = _useState2[0],
+      setValueHook = _useState2[1];
 
-var Slider = function (_Component) {
-  _inherits$1(Slider, _Component);
+  var isControlled = function isControlled() {
+    return props.value !== undefined;
+  };
 
-  function Slider() {
-    var _ref;
-
-    var _temp, _this, _ret;
-
-    _classCallCheck$1(this, Slider);
-
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+  /**
+   * @returns {Value}
+   */
+  var getValue = function getValue() {
+    if (isControlled()) {
+      return props.value || 0;
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn$1(this, (_ref = Slider.__proto__ || Object.getPrototypeOf(Slider)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      value: _this.props.defaultValue || (_this.props.max - _this.props.min) / 2
-    }, _this.handleChange = function (event) {
-      _this.setValue(event.target.value);
-    }, _temp), _possibleConstructorReturn$1(_this, _ret);
-  }
+    return valueHook;
+  };
 
   /**
-   * @type {State}
+   * @param {Value} value
    */
+  var setValue = function setValue(valueParams) {
+    var onChange = props.onChange;
 
 
-  _createClass$1(Slider, [{
-    key: "getValue",
+    if (onChange) onChange(Number(valueParams));
 
-
-    /**
-     * @returns {Value}
-     */
-    value: function getValue() {
-      if (this.isControlled()) {
-        return this.props.value || 0;
-      }
-
-      return this.state.value;
+    if (!isControlled()) {
+      setValueHook(valueParams);
     }
+  };
 
-    /**
-     * @param {Value} value
-     */
+  /**
+   * @param {event} Event
+   */
+  var handleChange = function handleChange(event) {
+    setValue(event.target.value);
+  };
 
-  }, {
-    key: "setValue",
-    value: function setValue(value) {
-      var onChange = this.props.onChange;
+  var defaultValue = props.defaultValue,
+      onBlur = props.onBlur,
+      onChange = props.onChange,
+      onFocus = props.onFocus,
+      onMouseDown = props.onMouseDown,
+      onMouseEnter = props.onMouseEnter,
+      onMouseLeave = props.onMouseLeave,
+      onMouseUp = props.onMouseUp,
+      sliderRef = props.sliderRef,
+      stylesheet = props.stylesheet,
+      value = props.value,
+      otherProps = _objectWithoutProperties$2(props, ["defaultValue", "onBlur", "onChange", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "sliderRef", "stylesheet", "value"]);
 
+  var currentValue = getValue();
 
-      if (onChange) onChange(Number(value));
-
-      if (!this.isControlled()) {
-        this.setState({ value: value });
-      }
+  return React__default.createElement(
+    behaviors.ControlBehavior,
+    {
+      onBlur: onBlur,
+      onFocus: onFocus,
+      onMouseDown: onMouseDown,
+      onMouseEnter: onMouseEnter,
+      onMouseLeave: onMouseLeave,
+      onMouseUp: onMouseUp
+    },
+    function (_ref) {
+      var hasFocus = _ref.hasFocus,
+          hasHover = _ref.hasHover,
+          isPressed = _ref.isPressed,
+          handleBlur = _ref.onBlur,
+          handleFocus = _ref.onFocus,
+          handleMouseDown = _ref.onMouseDown,
+          handleMouseEnter = _ref.onMouseEnter,
+          handleMouseLeave = _ref.onMouseLeave,
+          handleMouseUp = _ref.onMouseUp;
+      return React__default.createElement(SliderPresenter, _extends$2({
+        hasFocus: hasFocus,
+        hasHover: hasHover,
+        isPressed: isPressed,
+        onBlur: handleBlur,
+        onChange: handleChange,
+        onFocus: handleFocus,
+        onMouseDown: handleMouseDown,
+        onMouseEnter: handleMouseEnter,
+        onMouseLeave: handleMouseLeave,
+        onMouseUp: handleMouseUp,
+        sliderRef: sliderRef,
+        stylesheet: stylesheet,
+        value: currentValue
+      }, otherProps));
     }
-  }, {
-    key: "isControlled",
-    value: function isControlled() {
-      return this.props.value !== undefined;
-    }
+  );
+};
 
-    /**
-     * @param {event} Event
-     */
+Slider.displayName = "Slider";
 
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _props = this.props,
-          defaultValue = _props.defaultValue,
-          onBlur = _props.onBlur,
-          onChange = _props.onChange,
-          onFocus = _props.onFocus,
-          onMouseDown = _props.onMouseDown,
-          onMouseEnter = _props.onMouseEnter,
-          onMouseLeave = _props.onMouseLeave,
-          onMouseUp = _props.onMouseUp,
-          sliderRef = _props.sliderRef,
-          stylesheet = _props.stylesheet,
-          value = _props.value,
-          otherProps = _objectWithoutProperties$2(_props, ["defaultValue", "onBlur", "onChange", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "sliderRef", "stylesheet", "value"]);
-
-      var currentValue = this.getValue();
-
-      return React__default.createElement(
-        behaviors.ControlBehavior,
-        {
-          onBlur: onBlur,
-          onFocus: onFocus,
-          onMouseDown: onMouseDown,
-          onMouseEnter: onMouseEnter,
-          onMouseLeave: onMouseLeave,
-          onMouseUp: onMouseUp
-        },
-        function (_ref2) {
-          var hasFocus = _ref2.hasFocus,
-              hasHover = _ref2.hasHover,
-              isPressed = _ref2.isPressed,
-              handleBlur = _ref2.onBlur,
-              handleFocus = _ref2.onFocus,
-              handleMouseDown = _ref2.onMouseDown,
-              handleMouseEnter = _ref2.onMouseEnter,
-              handleMouseLeave = _ref2.onMouseLeave,
-              handleMouseUp = _ref2.onMouseUp;
-          return React__default.createElement(SliderPresenter, _extends$2({
-            hasFocus: hasFocus,
-            hasHover: hasHover,
-            isPressed: isPressed,
-            onBlur: handleBlur,
-            onChange: _this2.handleChange,
-            onFocus: handleFocus,
-            onMouseDown: handleMouseDown,
-            onMouseEnter: handleMouseEnter,
-            onMouseLeave: handleMouseLeave,
-            onMouseUp: handleMouseUp,
-            sliderRef: sliderRef,
-            stylesheet: stylesheet,
-            value: currentValue
-          }, otherProps));
-        }
-      );
-    }
-  }]);
-
-  return Slider;
-}(React.Component);
-
 Slider.propTypes = {
@@ -688,2 +618,3 @@ /**
 };
+
 Slider.defaultProps = {
@@ -690,0 +621,0 @@ disabled: false,

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [@hig/slider-v1.3.1](https://github.com/Autodesk/hig/compare/@hig/slider@1.3.0...@hig/slider@1.3.1) (2022-01-12)
+
+
+### Bug Fixes
+
+*  react v. in peerDependencies instead of dependencies ([4701332](https://github.com/Autodesk/hig/commit/4701332))
+
 # [@hig/slider-v1.3.0](https://github.com/Autodesk/hig/compare/@hig/slider@1.2.0...@hig/slider@1.3.0) (2021-01-25)
@@ -2,0 +9,0 @@

package.json

 {
   "name": "@hig/slider",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "HIG Slider",
@@ -26,5 +26,5 @@ "author": "Autodesk Inc.",
   "peerDependencies": {
-    "@hig/theme-context": "^3.0.1",
-    "@hig/theme-data": "^2.19.3",
-    "react": "^15.4.1 || ^16.3.2"
+    "@hig/theme-context": "^3.0.2",
+    "@hig/theme-data": "^2.22.0",
+    "react": "^17.0.0"
   },
@@ -31,0 +31,0 @@ "devDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

53675

decreased by-13.29%

Lines of code

1479

decreased by-6.1%

No dependency changes