@hig/slider - npm Package Compare versions

Comparing version 2.1.0 to 2.1.1

build/index.es.js

 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { css, cx } from 'emotion';
+import { ControlBehavior } from '@hig/behaviors';
+import { cx, css } from 'emotion';
 import ThemeContext from '@hig/theme-context';
 import { createCustomClassNames } from '@hig/utils';
-import { ControlBehavior } from '@hig/behaviors';
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
 
-function _objectWithoutProperties(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; }
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
 
-function stylesheet(props, themeData) {
-  var disabled = props.disabled,
-      max = props.max,
-      min = props.min,
-      customStylesheet = props.stylesheet,
-      value = props.value,
-      activeStates = _objectWithoutProperties(props, ["disabled", "max", "min", "stylesheet", "value"]);
+  return keys;
+}
 
-  var hasFocus = activeStates.hasFocus,
-      hasHover = activeStates.hasHover,
-      isPressed = activeStates.isPressed;
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
 
-  var rangeRange = max - min;
-  var trackValueRatio = (value - min) / rangeRange;
+  return target;
+}
 
-  var thumbPseudoElements = {
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
+const _excluded$2 = ["disabled", "max", "min", "stylesheet", "value"];
+
+function stylesheet(props, themeData) {
+  const {
+    disabled,
+    max,
+    min,
+    stylesheet: customStylesheet,
+    value
+  } = props,
+        activeStates = _objectWithoutProperties(props, _excluded$2);
+
+  const {
+    hasFocus,
+    hasHover,
+    isPressed
+  } = activeStates;
+  const rangeRange = max - min;
+  const trackValueRatio = (value - min) / rangeRange;
+  const thumbPseudoElements = {
     microsoft: "::-ms-thumb",
@@ -32,4 +127,3 @@ mozilla: "::-moz-range-thumb",
   };
-
-  var trackPseudoElements = {
+  const trackPseudoElements = {
     microsoft: "::-ms-track",
@@ -39,4 +133,3 @@ mozilla: "::-moz-range-track",
   };
-
-  var trackProgressPseudoElements = {
+  const trackProgressPseudoElements = {
     // WebKit does not have a pseudo element to target this styling, so we achieve it with fancy styling on track
@@ -49,25 +142,28 @@ // ::-webkit-slider-runnable-track
   function browserSpecificPseudoElementRules(browserPseudoElements, rules, singleBrowserInclusions) {
-    var styles = {};
+    const styles = {};
+    Object.entries(browserPseudoElements).forEach(browserPseudoElement => {
+      let pseudoElementRules = rules;
+      const browser = browserPseudoElement[0];
+      const pseudoElement = browserPseudoElement[1];
 
-    Object.entries(browserPseudoElements).forEach(function (browserPseudoElement) {
-      var pseudoElementRules = rules;
-
-      var browser = browserPseudoElement[0];
-      var pseudoElement = browserPseudoElement[1];
-
       if (singleBrowserInclusions && singleBrowserInclusions[browser]) {
-        pseudoElementRules = _extends({}, rules, singleBrowserInclusions[browser]);
+        pseudoElementRules = _objectSpread2(_objectSpread2({}, rules), singleBrowserInclusions[browser]);
       }
 
-      styles["&" + pseudoElement] = pseudoElementRules;
+      styles[`&${pseudoElement}`] = pseudoElementRules;
     });
-
     return styles;
   }
 
-  var baseRules = {
-    WebkitAppearance: "none" /* Hides platform-native styling */
-    , width: "100%" /* Specific width is required for Firefox. */
-    , backgroundColor: "transparent" /* Otherwise white in Chrome */
-    , boxSizing: "content-box",
+  const baseRules = {
+    WebkitAppearance: "none"
+    /* Hides platform-native styling */
+    ,
+    width: "100%"
+    /* Specific width is required for Firefox. */
+    ,
+    backgroundColor: "transparent"
+    /* Otherwise white in Chrome */
+    ,
+    boxSizing: "content-box",
     height: "20px",
@@ -77,21 +173,14 @@ margin: 0,
     outline: "none",
-
     "&::-ms-tooltip": {
       display: "none"
     },
-
     "&::-moz-focus-outer": {
       border: 0
-    }
+    },
+    opacity: disabled ? themeData["colorScheme.opacity.disabled"] : "initial"
   };
 
-  var thumbDisabledRules = disabled ? {
-    opacity: themeData["colorScheme.opacity.disabled"]
-  } : {};
+  const thumbStateRules = () => {
+    const isInActiveState = Object.values(activeStates).every(stateValue => !stateValue);
 
-  var thumbStateRules = function thumbStateRules() {
-    var isInActiveState = Object.values(activeStates).every(function (stateValue) {
-      return !stateValue;
-    });
-
     if (disabled || isInActiveState) {
@@ -101,15 +190,13 @@ return {};
 
-    var stateKey = void 0;
-
+    let stateKey;
     if (hasFocus) stateKey = "focus";
     if (hasHover) stateKey = "hover";
     if (isPressed) stateKey = "pressed";
-
     return {
-      backgroundColor: themeData["slider.thumb.backgroundColor"],
-      boxShadow: "0 0 0 " + themeData["slider." + stateKey + ".haloWidth"] + " " + themeData["slider." + stateKey + ".haloColor"]
+      backgroundColor: themeData[`slider.thumb.backgroundColor`],
+      boxShadow: `0 0 0 ${themeData[`slider.${stateKey}.haloWidth`]} ${themeData[`slider.${stateKey}.haloColor`]}`
     };
   };
 
-  var thumbRules = browserSpecificPseudoElementRules(thumbPseudoElements, _extends({
+  const thumbRules = browserSpecificPseudoElementRules(thumbPseudoElements, _objectSpread2(_objectSpread2({}, {
     boxSizing: "content-box",
@@ -127,5 +214,6 @@ height: themeData["slider.thumb.minHeight"],
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
-    WebkitAppearance: "none" /* Hides platform-native styling */
-  }, thumbStateRules()), {
-    mozilla: _extends({}, thumbDisabledRules),
+    WebkitAppearance: "none"
+    /* Hides platform-native styling */
+
+  }), thumbStateRules()), {
     webkit: {
@@ -135,10 +223,8 @@ transform: "translateY(-50%)"
   });
-
-  var trackDisabledRules = disabled ? {
+  const trackDisabledRules = disabled ? {
     opacity: themeData["colorScheme.opacity.disabled"]
   } : {};
-
-  var trackValueWidth = "calc((0.5 * " + themeData["slider.thumb.minWidth"] + ") \n  + (" + trackValueRatio + " * (100% - " + themeData["slider.thumb.minWidth"] + ")))";
-
-  var trackRules = browserSpecificPseudoElementRules(trackPseudoElements, _extends({
+  const trackValueWidth = `calc((0.5 * ${themeData["slider.thumb.minWidth"]}) 
+  + (${trackValueRatio} * (100% - ${themeData["slider.thumb.minWidth"]})))`;
+  const trackRules = browserSpecificPseudoElementRules(trackPseudoElements, {
     width: "100%",
@@ -150,4 +236,3 @@ height: themeData["slider.track.minHeight"],
     outline: "none"
-
-  }, trackDisabledRules), {
+  }, {
     // WebKit does not have a built-in way to target the progress/lower fill of a slider track.
@@ -157,17 +242,14 @@ // This produces the same visual effect.
       backgroundColor: themeData["slider.track.backgroundColor"],
-      backgroundImage: "linear-gradient(" + themeData["slider.value.backgroundColor"] + ", " + themeData["slider.value.backgroundColor"] + ")",
+      backgroundImage: `linear-gradient(${themeData["slider.value.backgroundColor"]}, ${themeData["slider.value.backgroundColor"]})`,
       backgroundPosition: 0,
-      backgroundSize: trackValueWidth + " 100%",
+      backgroundSize: `${trackValueWidth} 100%`,
       backgroundRepeat: "no-repeat"
     }
   });
-
-  var trackProgressRules = browserSpecificPseudoElementRules(trackProgressPseudoElements, {
+  const trackProgressRules = browserSpecificPseudoElementRules(trackProgressPseudoElements, {
     border: "none",
     backgroundColor: themeData["slider.value.backgroundColor"]
-  }, {
-    mozilla: _extends({}, trackDisabledRules)
   });
 
-  var markRules = _extends({
+  const markRules = _objectSpread2({
     width: "1px",
@@ -178,69 +260,71 @@ height: "4px",
     backgroundColor: themeData["slider.value.backgroundColor"]
-
   }, trackDisabledRules);
 
-  var markContainer = {
+  const markContainer = {
     position: "absolute",
     width: "100%"
   };
-
-  var discrete = {
+  const discrete = {
     position: "relative"
   };
-
-  var styles = {
-    slider: _extends({}, baseRules, thumbRules, trackRules, trackProgressRules),
-    markRules: markRules,
-    markContainer: markContainer,
-    discrete: discrete
+  const styles = {
+    slider: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, baseRules), thumbRules), trackRules), trackProgressRules),
+    markRules,
+    markContainer,
+    discrete
   };
-
   return customStylesheet ? customStylesheet(styles, props, themeData) : styles;
 }
 
-var sliderTypes = Object.freeze({
+const sliderTypes = Object.freeze({
   CONTINUOUS: "continuous",
   DISCRETE: "discrete"
 });
+const AVAILABLE_SLIDER_TYPES = Object.freeze(Object.values(sliderTypes));
 
-var AVAILABLE_SLIDER_TYPES = Object.freeze(Object.values(sliderTypes));
+const _excluded$1 = ["disabled", "hasFocus", "hasHover", "isPressed", "max", "min", "sliderRef", "stylesheet", "value", "variant"];
 
-var _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+const SliderPresenter = props => {
+  const {
+    disabled,
+    hasFocus,
+    hasHover,
+    isPressed,
+    max,
+    min,
+    sliderRef,
+    stylesheet: customStylesheet,
+    value,
+    variant
+  } = props,
+        otherProps = _objectWithoutProperties(props, _excluded$1);
 
-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; }
+  const {
+    className
+  } = otherProps;
+  const sliderClassName = createCustomClassNames(className, "slider");
+  const markContainerClassName = createCustomClassNames(className, "slider-mark-container");
 
-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"]);
+  const getTickMarks = (step, styles) => {
+    const markRulesClassName = createCustomClassNames(props.className, "slider-mark-rules");
+    const loops = step ? Math.floor((max - min) / step) : 1;
+    const tickMarks = [];
 
-  var className = otherProps.className;
+    for (let i = 0; i < loops; i += 1) {
+      tickMarks.push( /*#__PURE__*/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 sliderClassName = createCustomClassNames(className, "slider");
-  var markContainerClassName = createCustomClassNames(className, "slider-mark-container");
 
-  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: { left: i * 100 / loops + "%" },
-        key: "mark-" + i
-      }));
-    }
-    // adds the mark to end of slider
-    tickMarks.push(React.createElement("div", {
+    tickMarks.push( /*#__PURE__*/React.createElement("div", {
       className: cx([markRulesClassName, css(styles.markRules)]),
-      style: { right: "0%" },
-      key: "mark-" + loops
+      style: {
+        right: "0%"
+      },
+      key: `mark-${loops}`
     }));
@@ -250,62 +334,50 @@ return tickMarks;
 
-  return React.createElement(
-    ThemeContext.Consumer,
-    null,
-    function (_ref) {
-      var resolvedRoles = _ref.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 ? getTickMarks(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 /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, _ref => {
+    let {
+      resolvedRoles
+    } = _ref;
+    const styles = stylesheet({
+      disabled,
+      hasFocus,
+      hasHover,
+      isPressed,
+      max,
+      min,
+      stylesheet: customStylesheet,
+      value
+    }, resolvedRoles);
+    const marks = variant === sliderTypes.DISCRETE ? getTickMarks(otherProps.step, styles) : null;
+    return marks ? /*#__PURE__*/React.createElement("div", {
+      className: cx([className, css(styles.discrete)])
+    }, /*#__PURE__*/React.createElement("input", _extends({}, 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
+    })), /*#__PURE__*/React.createElement("div", {
+      className: cx([markContainerClassName, css(styles.markContainer)])
+    }, marks)) : /*#__PURE__*/React.createElement("input", _extends({}, 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
+    }));
+  });
 };
 
 SliderPresenter.displayName = "SliderPresenter";
-
 SliderPresenter.propTypes = {
+  className: PropTypes.string,
   disabled: PropTypes.bool,
@@ -327,2 +399,9 @@ hasFocus: PropTypes.bool,
   "props": {
+    "className": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
     "disabled": {
@@ -430,8 +509,3 @@ "type": {
 
-var _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-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; }
-
+const _excluded = ["defaultValue", "onBlur", "onChange", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "sliderRef", "stylesheet", "value"];
 /**
@@ -445,16 +519,13 @@ * @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 isControlled = function isControlled() {
-    return props.value !== undefined;
-  };
+const Slider = props => {
+  const [valueHook, setValueHook] = useState(props.defaultValue || (props.max - props.min) / 2);
 
+  const isControlled = () => props.value !== undefined;
   /**
    * @returns {Value}
    */
-  var getValue = function getValue() {
+
+
+  const getValue = () => {
     if (isControlled()) {
@@ -466,10 +537,11 @@ return props.value || 0;
   };
-
   /**
    * @param {Value} value
    */
-  var setValue = function setValue(valueParams) {
-    var onChange = props.onChange;
 
 
+  const setValue = valueParams => {
+    const {
+      onChange
+    } = props;
     if (onChange) onChange(Number(valueParams));
@@ -481,66 +553,67 @@
   };
-
   /**
    * @param {event} Event
    */
-  var handleChange = function handleChange(event) {
+
+
+  const handleChange = event => {
     setValue(event.target.value);
   };
 
-  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"]);
+  const {
+    defaultValue,
+    // exclude from otherProps
+    onBlur,
+    onChange,
+    // exclude from otherProps
+    onFocus,
+    onMouseDown,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseUp,
+    sliderRef,
+    stylesheet,
+    value
+  } = props,
+        otherProps = _objectWithoutProperties(props, _excluded);
 
-  var currentValue = getValue();
-
-  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));
-    }
-  );
+  const currentValue = getValue();
+  return /*#__PURE__*/React.createElement(ControlBehavior, {
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onMouseDown: onMouseDown,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onMouseUp: onMouseUp
+  }, _ref => {
+    let {
+      hasFocus,
+      hasHover,
+      isPressed,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onMouseDown: handleMouseDown,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onMouseUp: handleMouseUp
+    } = _ref;
+    return /*#__PURE__*/React.createElement(SliderPresenter, _extends({
+      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));
+  });
 };
 
 Slider.displayName = "Slider";
-
 Slider.propTypes = {
@@ -551,2 +624,3 @@ /**
   defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
   /**
@@ -556,2 +630,3 @@ * Prevents user actions on the field
   disabled: PropTypes.bool,
+
   /**
@@ -561,2 +636,3 @@ * HTML ID attribute
   id: PropTypes.string,
+
   /**
@@ -566,2 +642,3 @@ * Maximum value of the slider
   max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
   /**
@@ -571,2 +648,3 @@ * Minimum value of the slider
   min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
   /**
@@ -576,2 +654,3 @@ * Name of the field when submitted with a form
   name: PropTypes.string,
+
   /**
@@ -581,2 +660,3 @@ * Called when user moves focus from the field
   onBlur: PropTypes.func,
+
   /**
@@ -586,2 +666,3 @@ * Called after user changes the value of the field
   onChange: PropTypes.func,
+
   /**
@@ -591,2 +672,3 @@ * Called when user puts focus onto the field
   onFocus: PropTypes.func,
+
   /**
@@ -596,2 +678,3 @@ * Called as user changes the value of the field
   onInput: PropTypes.func,
+
   /**
@@ -601,2 +684,3 @@ * Called when user presses their mouse over the field
   onMouseDown: PropTypes.func,
+
   /**
@@ -606,2 +690,3 @@ * Called when user moves their mouse over the field
   onMouseEnter: PropTypes.func,
+
   /**
@@ -611,2 +696,3 @@ * Called when user moves their mouse out of the field
   onMouseLeave: PropTypes.func,
+
   /**
@@ -616,2 +702,3 @@ * Called when user releases their mouse press over the field
   onMouseUp: PropTypes.func,
+
   /**
@@ -621,2 +708,3 @@ * A callback ref that gets passed to the HTML input
   sliderRef: PropTypes.func,
+
   /**
@@ -626,2 +714,3 @@ * The granularity of each step on the slider
   step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
   /**
@@ -631,2 +720,3 @@ * Adds custom/overriding styles
   stylesheet: PropTypes.func,
+
   /**
@@ -636,2 +726,3 @@ * Value of the field
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+
   /**
@@ -642,3 +733,2 @@ * Type of the slider
 };
-
 Slider.defaultProps = {
@@ -838,3 +928,2 @@ disabled: false,
 
-export default Slider;
-export { sliderTypes, AVAILABLE_SLIDER_TYPES };
+export { AVAILABLE_SLIDER_TYPES, Slider as default, sliderTypes };

build/index.js

@@ -5,32 +5,130 @@ 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
 var React = require('react');
-var React__default = _interopDefault(React);
-var PropTypes = _interopDefault(require('prop-types'));
+var PropTypes = require('prop-types');
+var behaviors = require('@hig/behaviors');
 var emotion = require('emotion');
-var ThemeContext = _interopDefault(require('@hig/theme-context'));
+var ThemeContext = require('@hig/theme-context');
 var utils = require('@hig/utils');
-var behaviors = require('@hig/behaviors');
 
-var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-function _objectWithoutProperties(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; }
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var ThemeContext__default = /*#__PURE__*/_interopDefaultLegacy(ThemeContext);
 
-function stylesheet(props, themeData) {
-  var disabled = props.disabled,
-      max = props.max,
-      min = props.min,
-      customStylesheet = props.stylesheet,
-      value = props.value,
-      activeStates = _objectWithoutProperties(props, ["disabled", "max", "min", "stylesheet", "value"]);
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
 
-  var hasFocus = activeStates.hasFocus,
-      hasHover = activeStates.hasHover,
-      isPressed = activeStates.isPressed;
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
 
-  var rangeRange = max - min;
-  var trackValueRatio = (value - min) / rangeRange;
+  return keys;
+}
 
-  var thumbPseudoElements = {
+function _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
+
+  return target;
+}
+
+function _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
+
+  return obj;
+}
+
+function _extends() {
+  _extends = Object.assign || function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+
+    return target;
+  };
+
+  return _extends.apply(this, arguments);
+}
+
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
+const _excluded$2 = ["disabled", "max", "min", "stylesheet", "value"];
+
+function stylesheet(props, themeData) {
+  const {
+    disabled,
+    max,
+    min,
+    stylesheet: customStylesheet,
+    value
+  } = props,
+        activeStates = _objectWithoutProperties(props, _excluded$2);
+
+  const {
+    hasFocus,
+    hasHover,
+    isPressed
+  } = activeStates;
+  const rangeRange = max - min;
+  const trackValueRatio = (value - min) / rangeRange;
+  const thumbPseudoElements = {
     microsoft: "::-ms-thumb",
@@ -40,4 +138,3 @@ mozilla: "::-moz-range-thumb",
   };
-
-  var trackPseudoElements = {
+  const trackPseudoElements = {
     microsoft: "::-ms-track",
@@ -47,4 +144,3 @@ mozilla: "::-moz-range-track",
   };
-
-  var trackProgressPseudoElements = {
+  const trackProgressPseudoElements = {
     // WebKit does not have a pseudo element to target this styling, so we achieve it with fancy styling on track
@@ -57,25 +153,28 @@ // ::-webkit-slider-runnable-track
   function browserSpecificPseudoElementRules(browserPseudoElements, rules, singleBrowserInclusions) {
-    var styles = {};
+    const styles = {};
+    Object.entries(browserPseudoElements).forEach(browserPseudoElement => {
+      let pseudoElementRules = rules;
+      const browser = browserPseudoElement[0];
+      const pseudoElement = browserPseudoElement[1];
 
-    Object.entries(browserPseudoElements).forEach(function (browserPseudoElement) {
-      var pseudoElementRules = rules;
-
-      var browser = browserPseudoElement[0];
-      var pseudoElement = browserPseudoElement[1];
-
       if (singleBrowserInclusions && singleBrowserInclusions[browser]) {
-        pseudoElementRules = _extends({}, rules, singleBrowserInclusions[browser]);
+        pseudoElementRules = _objectSpread2(_objectSpread2({}, rules), singleBrowserInclusions[browser]);
       }
 
-      styles["&" + pseudoElement] = pseudoElementRules;
+      styles[`&${pseudoElement}`] = pseudoElementRules;
     });
-
     return styles;
   }
 
-  var baseRules = {
-    WebkitAppearance: "none" /* Hides platform-native styling */
-    , width: "100%" /* Specific width is required for Firefox. */
-    , backgroundColor: "transparent" /* Otherwise white in Chrome */
-    , boxSizing: "content-box",
+  const baseRules = {
+    WebkitAppearance: "none"
+    /* Hides platform-native styling */
+    ,
+    width: "100%"
+    /* Specific width is required for Firefox. */
+    ,
+    backgroundColor: "transparent"
+    /* Otherwise white in Chrome */
+    ,
+    boxSizing: "content-box",
     height: "20px",
@@ -85,21 +184,14 @@ margin: 0,
     outline: "none",
-
     "&::-ms-tooltip": {
       display: "none"
     },
-
     "&::-moz-focus-outer": {
       border: 0
-    }
+    },
+    opacity: disabled ? themeData["colorScheme.opacity.disabled"] : "initial"
   };
 
-  var thumbDisabledRules = disabled ? {
-    opacity: themeData["colorScheme.opacity.disabled"]
-  } : {};
+  const thumbStateRules = () => {
+    const isInActiveState = Object.values(activeStates).every(stateValue => !stateValue);
 
-  var thumbStateRules = function thumbStateRules() {
-    var isInActiveState = Object.values(activeStates).every(function (stateValue) {
-      return !stateValue;
-    });
-
     if (disabled || isInActiveState) {
@@ -109,15 +201,13 @@ return {};
 
-    var stateKey = void 0;
-
+    let stateKey;
     if (hasFocus) stateKey = "focus";
     if (hasHover) stateKey = "hover";
     if (isPressed) stateKey = "pressed";
-
     return {
-      backgroundColor: themeData["slider.thumb.backgroundColor"],
-      boxShadow: "0 0 0 " + themeData["slider." + stateKey + ".haloWidth"] + " " + themeData["slider." + stateKey + ".haloColor"]
+      backgroundColor: themeData[`slider.thumb.backgroundColor`],
+      boxShadow: `0 0 0 ${themeData[`slider.${stateKey}.haloWidth`]} ${themeData[`slider.${stateKey}.haloColor`]}`
     };
   };
 
-  var thumbRules = browserSpecificPseudoElementRules(thumbPseudoElements, _extends({
+  const thumbRules = browserSpecificPseudoElementRules(thumbPseudoElements, _objectSpread2(_objectSpread2({}, {
     boxSizing: "content-box",
@@ -135,5 +225,6 @@ height: themeData["slider.thumb.minHeight"],
     transitionTimingFunction: "cubic-bezier(0.4, 0, 0.2, 1)",
-    WebkitAppearance: "none" /* Hides platform-native styling */
-  }, thumbStateRules()), {
-    mozilla: _extends({}, thumbDisabledRules),
+    WebkitAppearance: "none"
+    /* Hides platform-native styling */
+
+  }), thumbStateRules()), {
     webkit: {
@@ -143,10 +234,8 @@ transform: "translateY(-50%)"
   });
-
-  var trackDisabledRules = disabled ? {
+  const trackDisabledRules = disabled ? {
     opacity: themeData["colorScheme.opacity.disabled"]
   } : {};
-
-  var trackValueWidth = "calc((0.5 * " + themeData["slider.thumb.minWidth"] + ") \n  + (" + trackValueRatio + " * (100% - " + themeData["slider.thumb.minWidth"] + ")))";
-
-  var trackRules = browserSpecificPseudoElementRules(trackPseudoElements, _extends({
+  const trackValueWidth = `calc((0.5 * ${themeData["slider.thumb.minWidth"]}) 
+  + (${trackValueRatio} * (100% - ${themeData["slider.thumb.minWidth"]})))`;
+  const trackRules = browserSpecificPseudoElementRules(trackPseudoElements, {
     width: "100%",
@@ -158,4 +247,3 @@ height: themeData["slider.track.minHeight"],
     outline: "none"
-
-  }, trackDisabledRules), {
+  }, {
     // WebKit does not have a built-in way to target the progress/lower fill of a slider track.
@@ -165,17 +253,14 @@ // This produces the same visual effect.
       backgroundColor: themeData["slider.track.backgroundColor"],
-      backgroundImage: "linear-gradient(" + themeData["slider.value.backgroundColor"] + ", " + themeData["slider.value.backgroundColor"] + ")",
+      backgroundImage: `linear-gradient(${themeData["slider.value.backgroundColor"]}, ${themeData["slider.value.backgroundColor"]})`,
       backgroundPosition: 0,
-      backgroundSize: trackValueWidth + " 100%",
+      backgroundSize: `${trackValueWidth} 100%`,
       backgroundRepeat: "no-repeat"
     }
   });
-
-  var trackProgressRules = browserSpecificPseudoElementRules(trackProgressPseudoElements, {
+  const trackProgressRules = browserSpecificPseudoElementRules(trackProgressPseudoElements, {
     border: "none",
     backgroundColor: themeData["slider.value.backgroundColor"]
-  }, {
-    mozilla: _extends({}, trackDisabledRules)
   });
 
-  var markRules = _extends({
+  const markRules = _objectSpread2({
     width: "1px",
@@ -186,69 +271,71 @@ height: "4px",
     backgroundColor: themeData["slider.value.backgroundColor"]
-
   }, trackDisabledRules);
 
-  var markContainer = {
+  const markContainer = {
     position: "absolute",
     width: "100%"
   };
-
-  var discrete = {
+  const discrete = {
     position: "relative"
   };
-
-  var styles = {
-    slider: _extends({}, baseRules, thumbRules, trackRules, trackProgressRules),
-    markRules: markRules,
-    markContainer: markContainer,
-    discrete: discrete
+  const styles = {
+    slider: _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, baseRules), thumbRules), trackRules), trackProgressRules),
+    markRules,
+    markContainer,
+    discrete
   };
-
   return customStylesheet ? customStylesheet(styles, props, themeData) : styles;
 }
 
-var sliderTypes = Object.freeze({
+const sliderTypes = Object.freeze({
   CONTINUOUS: "continuous",
   DISCRETE: "discrete"
 });
+const AVAILABLE_SLIDER_TYPES = Object.freeze(Object.values(sliderTypes));
 
-var AVAILABLE_SLIDER_TYPES = Object.freeze(Object.values(sliderTypes));
+const _excluded$1 = ["disabled", "hasFocus", "hasHover", "isPressed", "max", "min", "sliderRef", "stylesheet", "value", "variant"];
 
-var _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+const SliderPresenter = props => {
+  const {
+    disabled,
+    hasFocus,
+    hasHover,
+    isPressed,
+    max,
+    min,
+    sliderRef,
+    stylesheet: customStylesheet,
+    value,
+    variant
+  } = props,
+        otherProps = _objectWithoutProperties(props, _excluded$1);
 
-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; }
+  const {
+    className
+  } = otherProps;
+  const sliderClassName = utils.createCustomClassNames(className, "slider");
+  const markContainerClassName = utils.createCustomClassNames(className, "slider-mark-container");
 
-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"]);
+  const getTickMarks = (step, styles) => {
+    const markRulesClassName = utils.createCustomClassNames(props.className, "slider-mark-rules");
+    const loops = step ? Math.floor((max - min) / step) : 1;
+    const tickMarks = [];
 
-  var className = otherProps.className;
+    for (let i = 0; i < loops; i += 1) {
+      tickMarks.push( /*#__PURE__*/React__default["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 sliderClassName = utils.createCustomClassNames(className, "slider");
-  var markContainerClassName = utils.createCustomClassNames(className, "slider-mark-container");
 
-  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: { left: i * 100 / loops + "%" },
-        key: "mark-" + i
-      }));
-    }
-    // adds the mark to end of slider
-    tickMarks.push(React__default.createElement("div", {
+    tickMarks.push( /*#__PURE__*/React__default["default"].createElement("div", {
       className: emotion.cx([markRulesClassName, emotion.css(styles.markRules)]),
-      style: { right: "0%" },
-      key: "mark-" + loops
+      style: {
+        right: "0%"
+      },
+      key: `mark-${loops}`
     }));
@@ -258,73 +345,61 @@ return tickMarks;
 
-  return React__default.createElement(
-    ThemeContext.Consumer,
-    null,
-    function (_ref) {
-      var resolvedRoles = _ref.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 ? getTickMarks(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 /*#__PURE__*/React__default["default"].createElement(ThemeContext__default["default"].Consumer, null, _ref => {
+    let {
+      resolvedRoles
+    } = _ref;
+    const styles = stylesheet({
+      disabled,
+      hasFocus,
+      hasHover,
+      isPressed,
+      max,
+      min,
+      stylesheet: customStylesheet,
+      value
+    }, resolvedRoles);
+    const marks = variant === sliderTypes.DISCRETE ? getTickMarks(otherProps.step, styles) : null;
+    return marks ? /*#__PURE__*/React__default["default"].createElement("div", {
+      className: emotion.cx([className, emotion.css(styles.discrete)])
+    }, /*#__PURE__*/React__default["default"].createElement("input", _extends({}, 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
+    })), /*#__PURE__*/React__default["default"].createElement("div", {
+      className: emotion.cx([markContainerClassName, emotion.css(styles.markContainer)])
+    }, marks)) : /*#__PURE__*/React__default["default"].createElement("input", _extends({}, 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
+    }));
+  });
 };
 
 SliderPresenter.displayName = "SliderPresenter";
-
 SliderPresenter.propTypes = {
-  disabled: PropTypes.bool,
-  hasFocus: PropTypes.bool,
-  hasHover: PropTypes.bool,
-  isPressed: PropTypes.bool,
-  max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  sliderRef: PropTypes.func,
-  step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  stylesheet: PropTypes.func,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  variant: PropTypes.oneOf(AVAILABLE_SLIDER_TYPES)
+  className: PropTypes__default["default"].string,
+  disabled: PropTypes__default["default"].bool,
+  hasFocus: PropTypes__default["default"].bool,
+  hasHover: PropTypes__default["default"].bool,
+  isPressed: PropTypes__default["default"].bool,
+  max: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+  min: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+  sliderRef: PropTypes__default["default"].func,
+  step: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+  stylesheet: PropTypes__default["default"].func,
+  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+  variant: PropTypes__default["default"].oneOf(AVAILABLE_SLIDER_TYPES)
 };
@@ -335,2 +410,9 @@ SliderPresenter.__docgenInfo = {
   "props": {
+    "className": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": ""
+    },
     "disabled": {
@@ -438,8 +520,3 @@ "type": {
 
-var _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
-
-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; }
-
+const _excluded = ["defaultValue", "onBlur", "onChange", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "sliderRef", "stylesheet", "value"];
 /**
@@ -453,16 +530,13 @@ * @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 isControlled = function isControlled() {
-    return props.value !== undefined;
-  };
+const Slider = props => {
+  const [valueHook, setValueHook] = React.useState(props.defaultValue || (props.max - props.min) / 2);
 
+  const isControlled = () => props.value !== undefined;
   /**
    * @returns {Value}
    */
-  var getValue = function getValue() {
+
+
+  const getValue = () => {
     if (isControlled()) {
@@ -474,10 +548,11 @@ return props.value || 0;
   };
-
   /**
    * @param {Value} value
    */
-  var setValue = function setValue(valueParams) {
-    var onChange = props.onChange;
 
 
+  const setValue = valueParams => {
+    const {
+      onChange
+    } = props;
     if (onChange) onChange(Number(valueParams));
@@ -489,66 +564,67 @@
   };
-
   /**
    * @param {event} Event
    */
-  var handleChange = function handleChange(event) {
+
+
+  const handleChange = event => {
     setValue(event.target.value);
   };
 
-  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"]);
+  const {
+    defaultValue,
+    // exclude from otherProps
+    onBlur,
+    onChange,
+    // exclude from otherProps
+    onFocus,
+    onMouseDown,
+    onMouseEnter,
+    onMouseLeave,
+    onMouseUp,
+    sliderRef,
+    stylesheet,
+    value
+  } = props,
+        otherProps = _objectWithoutProperties(props, _excluded);
 
-  var currentValue = getValue();
-
-  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));
-    }
-  );
+  const currentValue = getValue();
+  return /*#__PURE__*/React__default["default"].createElement(behaviors.ControlBehavior, {
+    onBlur: onBlur,
+    onFocus: onFocus,
+    onMouseDown: onMouseDown,
+    onMouseEnter: onMouseEnter,
+    onMouseLeave: onMouseLeave,
+    onMouseUp: onMouseUp
+  }, _ref => {
+    let {
+      hasFocus,
+      hasHover,
+      isPressed,
+      onBlur: handleBlur,
+      onFocus: handleFocus,
+      onMouseDown: handleMouseDown,
+      onMouseEnter: handleMouseEnter,
+      onMouseLeave: handleMouseLeave,
+      onMouseUp: handleMouseUp
+    } = _ref;
+    return /*#__PURE__*/React__default["default"].createElement(SliderPresenter, _extends({
+      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));
+  });
 };
 
 Slider.displayName = "Slider";
-
 Slider.propTypes = {
@@ -558,77 +634,94 @@ /**
    */
-  defaultValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  defaultValue: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
   /**
    * Prevents user actions on the field
    */
-  disabled: PropTypes.bool,
+  disabled: PropTypes__default["default"].bool,
+
   /**
    * HTML ID attribute
    */
-  id: PropTypes.string,
+  id: PropTypes__default["default"].string,
+
   /**
    * Maximum value of the slider
    */
-  max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  max: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
   /**
    * Minimum value of the slider
    */
-  min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  min: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
   /**
    * Name of the field when submitted with a form
    */
-  name: PropTypes.string,
+  name: PropTypes__default["default"].string,
+
   /**
    * Called when user moves focus from the field
    */
-  onBlur: PropTypes.func,
+  onBlur: PropTypes__default["default"].func,
+
   /**
    * Called after user changes the value of the field
    */
-  onChange: PropTypes.func,
+  onChange: PropTypes__default["default"].func,
+
   /**
    * Called when user puts focus onto the field
    */
-  onFocus: PropTypes.func,
+  onFocus: PropTypes__default["default"].func,
+
   /**
    * Called as user changes the value of the field
    */
-  onInput: PropTypes.func,
+  onInput: PropTypes__default["default"].func,
+
   /**
    * Called when user presses their mouse over the field
    */
-  onMouseDown: PropTypes.func,
+  onMouseDown: PropTypes__default["default"].func,
+
   /**
    * Called when user moves their mouse over the field
    */
-  onMouseEnter: PropTypes.func,
+  onMouseEnter: PropTypes__default["default"].func,
+
   /**
    * Called when user moves their mouse out of the field
    */
-  onMouseLeave: PropTypes.func,
+  onMouseLeave: PropTypes__default["default"].func,
+
   /**
    * Called when user releases their mouse press over the field
    */
-  onMouseUp: PropTypes.func,
+  onMouseUp: PropTypes__default["default"].func,
+
   /**
    * A callback ref that gets passed to the HTML input
    */
-  sliderRef: PropTypes.func,
+  sliderRef: PropTypes__default["default"].func,
+
   /**
    * The granularity of each step on the slider
    */
-  step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  step: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
   /**
    * Adds custom/overriding styles
    */
-  stylesheet: PropTypes.func,
+  stylesheet: PropTypes__default["default"].func,
+
   /**
    * Value of the field
    */
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+
   /**
    * Type of the slider
    */
-  variant: PropTypes.oneOf(AVAILABLE_SLIDER_TYPES)
+  variant: PropTypes__default["default"].oneOf(AVAILABLE_SLIDER_TYPES)
 };
-
 Slider.defaultProps = {
@@ -828,4 +921,4 @@ disabled: false,
 
-exports.default = Slider;
+exports.AVAILABLE_SLIDER_TYPES = AVAILABLE_SLIDER_TYPES;
+exports["default"] = Slider;
 exports.sliderTypes = sliderTypes;
-exports.AVAILABLE_SLIDER_TYPES = AVAILABLE_SLIDER_TYPES;

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [@hig/slider-v2.1.1](https://github.com/Autodesk/hig/compare/@hig/slider@2.1.0...@hig/slider@2.1.1) (2022-04-10)
+
+
+### Bug Fixes
+
+* Fixing slider component bug, transparency in Firefox ([6084cbf](https://github.com/Autodesk/hig/commit/6084cbf))
+
 # [@hig/slider-v2.1.0](https://github.com/Autodesk/hig/compare/@hig/slider@2.0.0...@hig/slider@2.1.0) (2022-01-24)
@@ -2,0 +9,0 @@

package.json

 {
   "name": "@hig/slider",
-  "version": "2.1.0",
+  "version": "2.1.1",
   "description": "HIG Slider",
@@ -27,3 +27,3 @@ "author": "Autodesk Inc.",
     "@hig/theme-context": "^4.1.0",
-    "@hig/theme-data": "^2.22.1",
+    "@hig/theme-data": "^2.25.0",
     "react": "^17.0.0"
@@ -30,0 +30,0 @@ },

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

Improved metrics

Total package byte prevSize

55870

increased by1.16%

Lines of code

1638

increased by10.75%

No dependency changes