@hig/slider - npm Package Compare versions

Comparing version 0.2.0-alpha.fbb1eed0 to 1.0.0

build/index.es.js

 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import cx from 'classnames';
+import { css } from 'emotion';
+import ThemeContext from '@hig/theme-context';
+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 _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; }
+
+function stylesheet(props, trackValueRatio, themeData) {
+  var disabled = props.disabled,
+      activeStates = _objectWithoutProperties(props, ["disabled"]);
+
+  var hasFocus = activeStates.hasFocus,
+      hasHover = activeStates.hasHover,
+      isPressed = activeStates.isPressed;
+
+
+  var thumbPseudoElements = {
+    microsoft: "::-ms-thumb",
+    mozilla: "::-moz-range-thumb",
+    webkit: "::-webkit-slider-thumb"
+  };
+
+  var trackPseudoElements = {
+    microsoft: "::-ms-track",
+    mozilla: "::-moz-range-track",
+    webkit: "::-webkit-slider-runnable-track"
+  };
+
+  var trackProgressPseudoElements = {
+    // WebKit does not have a pseudo element to target this styling, so we achieve it with fancy styling on track
+    // ::-webkit-slider-runnable-track
+    microsoft: "::-ms-fill-lower",
+    mozilla: "::-moz-range-progress"
+  };
+
+  function browserSpecificPseudoElementRules(browserPseudoElements, rules, singleBrowserInclusions) {
+    var styles = {};
+
+    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]);
+      }
+
+      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",
+    height: "20px",
+    margin: 0,
+    position: "relative",
+    outline: "none",
+
+    "&::-ms-tooltip": {
+      display: "none"
+    },
+
+    "&::-moz-focus-outer": {
+      border: 0
+    }
+  };
+
+  var thumbDisabledRules = disabled ? {
+    opacity: themeData["component.disabled.opacity"]
+  } : {};
+
+  var thumbStateRules = function thumbStateRules() {
+    var isInActiveState = Object.values(activeStates).every(function (stateValue) {
+      return !stateValue;
+    });
+
+    if (disabled || isInActiveState) {
+      return {};
+    }
+
+    var stateKey = void 0;
+
+    if (hasFocus) stateKey = "focused";
+    if (hasHover) stateKey = "hover";
+    if (isPressed) stateKey = "pressed";
+
+    return {
+      backgroundColor: themeData["slider." + stateKey + ".thumb.color"],
+      boxShadow: "0 0 0 " + themeData["slider." + stateKey + ".halo.width"] + " " + themeData["slider." + stateKey + ".halo.color"]
+    };
+  };
+
+  var thumbRules = browserSpecificPseudoElementRules(thumbPseudoElements, _extends({
+    boxSizing: "content-box",
+    height: themeData["slider.thumb.width"],
+    width: themeData["slider.thumb.width"],
+    backgroundColor: themeData["slider.thumb.backgroundColor"],
+    border: 0,
+    borderRadius: "50%",
+    boxShadow: "0 0 0 " + themeData["slider.halo.width"] + " " + themeData["slider.halo.color"],
+    position: "relative",
+    top: "50%",
+    WebkitAppearance: "none" /* Hides platform-native styling */
+  }, thumbStateRules()), {
+    mozilla: _extends({}, thumbDisabledRules),
+    webkit: {
+      transform: "translateY(-50%)"
+    }
+  });
+
+  var trackDisabledRules = disabled ? {
+    opacity: themeData["component.disabled.opacity"]
+  } : {};
+
+  var trackValueWidth = "calc((0.5 * " + themeData["slider.thumb.width"] + ") \n  + (" + trackValueRatio + " * (100% - " + themeData["slider.thumb.width"] + ")))";
+
+  var trackRules = browserSpecificPseudoElementRules(trackPseudoElements, _extends({
+    width: "100%",
+    height: themeData["slider.track.width"],
+    border: "none",
+    backgroundColor: themeData["slider.track.color"],
+    color: "transparent",
+    outline: "none"
+
+  }, trackDisabledRules), {
+    // WebKit does not have a built-in way to target the progress/lower fill of a slider track.
+    // This produces the same visual effect.
+    webkit: {
+      backgroundColor: themeData["slider.track.color"],
+      backgroundImage: "linear-gradient(" + themeData["slider.value.color"] + ", " + themeData["slider.value.color"] + ")",
+      backgroundPosition: 0,
+      backgroundSize: trackValueWidth + " 100%",
+      backgroundRepeat: "no-repeat"
+    }
+  });
+
+  var trackProgressRules = browserSpecificPseudoElementRules(trackProgressPseudoElements, {
+    border: "none",
+    backgroundColor: themeData["slider.value.color"]
+  }, {
+    mozilla: _extends({}, trackDisabledRules)
+  });
+
+  return {
+    slider: _extends({}, baseRules, thumbRules, trackRules, trackProgressRules)
+  };
+}
+
+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; };
+
 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"); } }
@@ -15,82 +170,67 @@
 
-var Input = function (_Component) {
-  _inherits(Input, _Component);
+var SliderPresenter = function (_Component) {
+  _inherits(SliderPresenter, _Component);
 
-  function Input() {
-    _classCallCheck(this, Input);
+  function SliderPresenter() {
+    _classCallCheck(this, SliderPresenter);
 
-    return _possibleConstructorReturn(this, (Input.__proto__ || Object.getPrototypeOf(Input)).apply(this, arguments));
+    return _possibleConstructorReturn(this, (SliderPresenter.__proto__ || Object.getPrototypeOf(SliderPresenter)).apply(this, arguments));
   }
 
-  _createClass(Input, [{
+  _createClass(SliderPresenter, [{
     key: "render",
     value: function render() {
       var _props = this.props,
+          disabled = _props.disabled,
+          hasFocus = _props.hasFocus,
+          hasHover = _props.hasHover,
+          isPressed = _props.isPressed,
+          max = _props.max,
           min = _props.min,
-          max = _props.max,
-          value = _props.value;
+          value = _props.value,
+          otherProps = _objectWithoutProperties$1(_props, ["disabled", "hasFocus", "hasHover", "isPressed", "max", "min", "value"]);
 
+      return React.createElement(
+        ThemeContext.Consumer,
+        null,
+        function (_ref) {
+          var resolvedRoles = _ref.resolvedRoles;
 
-      return React.createElement("input", _extends({
-        className: "hig__slider__input",
-        type: "range",
-        "aria-valuemin": min,
-        "aria-valuemax": max,
-        "aria-valuenow": value
-      }, this.props));
+          var rangeRange = max - min;
+          var valueRatio = (value - min) / rangeRange;
+
+          var styles = stylesheet({ disabled: disabled, hasFocus: hasFocus, hasHover: hasHover, isPressed: isPressed }, valueRatio, resolvedRoles);
+
+          return React.createElement("input", _extends$1({
+            className: css(styles.slider),
+            disabled: disabled,
+            type: "range",
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            "aria-valuenow": value,
+            max: max,
+            min: min,
+            value: value
+          }, otherProps));
+        }
+      );
     }
   }]);
 
-  return Input;
+  return SliderPresenter;
 }(Component);
 
-Input.propTypes = {
-  /**
-   * Prevents user actions on the field
-   */
+SliderPresenter.propTypes = {
   disabled: PropTypes.bool,
-  /**
-   * HTML ID attribute
-   */
-  id: PropTypes.string,
-  /**
-   * Minimum value of the slider
-   */
+  hasFocus: PropTypes.bool,
+  hasHover: PropTypes.bool,
+  isPressed: PropTypes.bool,
+  max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * Maximum value of the slider
-   */
-  max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * Name of the field when submitted with a form
-   */
-  name: PropTypes.string,
-  /**
-   * Called when user moves focus from the field
-   */
-  onBlur: PropTypes.func,
-  /**
-   * Called after user changes the value of the field
-   */
-  onChange: PropTypes.func,
-  /**
-   * Called when user puts focus onto the field
-   */
-  onFocus: PropTypes.func,
-  /**
-   * Called as user changes the value of the field
-   */
-  onInput: PropTypes.func,
-  /**
-   * The granularity of each step on the slider
-   */
   step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * Value of the field
-   */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
-Input.__docgenInfo = {
+SliderPresenter.__docgenInfo = {
   "description": "",
-  "displayName": "Input",
+  "displayName": "SliderPresenter",
   "props": {
@@ -102,13 +242,27 @@ "disabled": {
       "required": false,
-      "description": "Prevents user actions on the field"
+      "description": ""
     },
-    "id": {
+    "hasFocus": {
       "type": {
-        "name": "string"
+        "name": "bool"
       },
       "required": false,
-      "description": "HTML ID attribute"
+      "description": ""
     },
-    "min": {
+    "hasHover": {
       "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "isPressed": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "max": {
+      "type": {
         "name": "union",
@@ -122,5 +276,5 @@ "value": [{
       "required": false,
-      "description": "Minimum value of the slider"
+      "description": ""
     },
-    "max": {
+    "min": {
       "type": {
@@ -135,39 +289,4 @@ "name": "union",
       "required": false,
-      "description": "Maximum value of the slider"
+      "description": ""
     },
-    "name": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Name of the field when submitted with a form"
-    },
-    "onBlur": {
-      "type": {
-        "name": "func"
-      },
-      "required": false,
-      "description": "Called when user moves focus from the field"
-    },
-    "onChange": {
-      "type": {
-        "name": "func"
-      },
-      "required": false,
-      "description": "Called after user changes the value of the field"
-    },
-    "onFocus": {
-      "type": {
-        "name": "func"
-      },
-      "required": false,
-      "description": "Called when user puts focus onto the field"
-    },
-    "onInput": {
-      "type": {
-        "name": "func"
-      },
-      "required": false,
-      "description": "Called as user changes the value of the field"
-    },
     "step": {
@@ -183,3 +302,3 @@ "type": {
       "required": false,
-      "description": "The granularity of each step on the slider"
+      "description": ""
     },
@@ -196,3 +315,3 @@ "value": {
       "required": false,
-      "description": "Value of the field"
+      "description": ""
     }
@@ -202,4 +321,8 @@ }
 
+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 _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; }; }();
 
+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"); } }
@@ -211,6 +334,11 @@
 
-function generatedId() {
-  return "slider-" + Math.floor(Math.random() * 100000, 5);
-}
+/**
+ * @typedef {string|number} Value
+ */
 
+/**
+ * @typedef {Object} State
+ * @property {Value} value
+ */
+
 var Slider = function (_Component) {
@@ -231,77 +359,111 @@ _inherits$1(Slider, _Component);
     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.value
+      value: _this.props.defaultValue || (_this.props.max - _this.props.min) / 2
     }, _this.handleChange = function (event) {
-      _this.setState({ value: event.target.value });
-      if (_this.props.onChange) _this.props.onChange(event);
+      _this.setValue(event.target.value);
     }, _temp), _possibleConstructorReturn$1(_this, _ret);
   }
 
+  /**
+   * @type {State}
+   */
+
+
   _createClass$1(Slider, [{
+    key: "getValue",
+
+
+    /**
+     * @returns {Value}
+     */
+    value: function getValue() {
+      if (this.isControlled()) {
+        return this.props.value || 0;
+      }
+
+      return this.state.value;
+    }
+
+    /**
+     * @param {Value} value
+     */
+
+  }, {
+    key: "setValue",
+    value: function setValue(value) {
+      var onChange = this.props.onChange;
+
+
+      if (onChange) onChange(Number(value));
+
+      if (!this.isControlled()) {
+        this.setState({ value: value });
+      }
+    }
+  }, {
+    key: "isControlled",
+    value: function isControlled() {
+      return this.props.value !== undefined;
+    }
+
+    /**
+     * @param {event} Event
+     */
+
+  }, {
     key: "render",
     value: function render() {
+      var _this2 = this;
+
       var _props = this.props,
-          id = _props.id,
-          name = _props.name,
-          label = _props.label,
-          instructions = _props.instructions,
-          required = _props.required,
-          disabled = _props.disabled,
-          min = _props.min,
-          max = _props.max,
-          step = _props.step,
+          defaultValue = _props.defaultValue,
           onBlur = _props.onBlur,
+          onChange = _props.onChange,
           onFocus = _props.onFocus,
-          onInput = _props.onInput;
-      var value = this.state.value;
+          onMouseDown = _props.onMouseDown,
+          onMouseEnter = _props.onMouseEnter,
+          onMouseLeave = _props.onMouseLeave,
+          onMouseUp = _props.onMouseUp,
+          value = _props.value,
+          otherProps = _objectWithoutProperties$2(_props, ["defaultValue", "onBlur", "onChange", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "value"]);
 
+      var currentValue = this.getValue();
 
       return React.createElement(
-        "div",
+        ControlBehavior,
         {
-          className: cx("hig__slider", {
-            "hig__slider--disabled": disabled,
-            "hig__slider--required": required
-          })
+          onBlur: onBlur,
+          onFocus: onFocus,
+          onMouseDown: onMouseDown,
+          onMouseEnter: onMouseEnter,
+          onMouseLeave: onMouseLeave,
+          onMouseUp: onMouseUp
         },
-        React.createElement(
-          "div",
-          {
-            className: "hig__slider__wrapper",
-            "data-range-min": min,
-            "data-range-max": max
-          },
-          React.createElement(
-            "span",
-            { className: "hig__slider__current-value" },
-            value
-          ),
-          React.createElement(Input, {
-            id: id,
-            onChange: this.handleChange,
-            disabled: disabled,
-            name: name,
-            min: min,
-            max: max,
-            step: step,
-            value: value,
-            onBlur: onBlur,
-            onFocus: onFocus,
-            onInput: onInput
-          }),
-          label && React.createElement(
-            "label",
-            { htmlFor: id, className: "hig__slider__label" },
-            label
-          )
-        ),
-        instructions && React.createElement(
-          "p",
-          { className: "hig__slider__instructions" },
-          instructions
-        ),
-        required && React.createElement(
-          "p",
-          { className: "hig__slider__required-notice" },
-          required
-        )
+        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(
+            "div",
+            { className: css({ display: "block" }) },
+            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,
+              value: currentValue
+            }, otherProps))
+          );
+        }
       );
@@ -328,10 +490,6 @@ }
   /**
-   * Instructional text for the field
+   * Maximum value of the slider
    */
-  instructions: PropTypes.string,
+  max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /**
-   * Text describing what the field represents
-   */
-  label: PropTypes.string,
-  /**
    * Minimum value of the slider
@@ -341,6 +499,2 @@ */
   /**
-   * Maximum value of the slider
-   */
-  max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
    * Name of the field when submitted with a form
@@ -366,6 +520,18 @@ */
   /**
-   * Text describing why the field is required
+   * Called when user presses their mouse over the field
    */
-  required: PropTypes.string,
+  onMouseDown: PropTypes.func,
   /**
+   * Called when user moves their mouse over the field
+   */
+  onMouseEnter: PropTypes.func,
+  /**
+   * Called when user moves their mouse out of the field
+   */
+  onMouseLeave: PropTypes.func,
+  /**
+   * Called when user releases their mouse press over the field
+   */
+  onMouseUp: PropTypes.func,
+  /**
    * The granularity of each step on the slider
@@ -380,9 +546,9 @@ */
 Slider.defaultProps = {
-  id: generatedId(),
+  disabled: false,
+  max: "100",
   min: "0",
-  max: "100",
   step: "1"
 };
 Slider.__docgenInfo = {
-  "description": "",
+  "description": "@typedef {Object} State\n@property {Value} value",
   "displayName": "Slider",
@@ -407,16 +573,9 @@ "props": {
       "required": false,
-      "description": "Prevents user actions on the field"
-    },
-    "id": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "HTML ID attribute",
+      "description": "Prevents user actions on the field",
       "defaultValue": {
-        "value": "generatedId()",
-        "computed": true
+        "value": "false",
+        "computed": false
       }
     },
-    "instructions": {
+    "id": {
       "type": {
@@ -426,13 +585,6 @@ "name": "string"
       "required": false,
-      "description": "Instructional text for the field"
+      "description": "HTML ID attribute"
     },
-    "label": {
+    "max": {
       "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Text describing what the field represents"
-    },
-    "min": {
-      "type": {
         "name": "union",
@@ -446,9 +598,9 @@ "value": [{
       "required": false,
-      "description": "Minimum value of the slider",
+      "description": "Maximum value of the slider",
       "defaultValue": {
-        "value": "\"0\"",
+        "value": "\"100\"",
         "computed": false
       }
     },
-    "max": {
+    "min": {
       "type": {
@@ -463,5 +615,5 @@ "name": "union",
       "required": false,
-      "description": "Maximum value of the slider",
+      "description": "Minimum value of the slider",
       "defaultValue": {
-        "value": "\"100\"",
+        "value": "\"0\"",
         "computed": false
@@ -505,9 +657,30 @@ }
     },
-    "required": {
+    "onMouseDown": {
       "type": {
-        "name": "string"
+        "name": "func"
       },
       "required": false,
-      "description": "Text describing why the field is required"
+      "description": "Called when user presses their mouse over the field"
     },
+    "onMouseEnter": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when user moves their mouse over the field"
+    },
+    "onMouseLeave": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when user moves their mouse out of the field"
+    },
+    "onMouseUp": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when user releases their mouse press over the field"
+    },
     "step": {
@@ -514,0 +687,0 @@ "type": {

build/index.js

@@ -10,8 +10,163 @@ 'use strict';
 var PropTypes = _interopDefault(require('prop-types'));
-var cx = _interopDefault(require('classnames'));
+var emotion = require('emotion');
+var ThemeContext = _interopDefault(require('@hig/theme-context'));
+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 _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; }
+
+function stylesheet(props, trackValueRatio, themeData) {
+  var disabled = props.disabled,
+      activeStates = _objectWithoutProperties(props, ["disabled"]);
+
+  var hasFocus = activeStates.hasFocus,
+      hasHover = activeStates.hasHover,
+      isPressed = activeStates.isPressed;
+
+
+  var thumbPseudoElements = {
+    microsoft: "::-ms-thumb",
+    mozilla: "::-moz-range-thumb",
+    webkit: "::-webkit-slider-thumb"
+  };
+
+  var trackPseudoElements = {
+    microsoft: "::-ms-track",
+    mozilla: "::-moz-range-track",
+    webkit: "::-webkit-slider-runnable-track"
+  };
+
+  var trackProgressPseudoElements = {
+    // WebKit does not have a pseudo element to target this styling, so we achieve it with fancy styling on track
+    // ::-webkit-slider-runnable-track
+    microsoft: "::-ms-fill-lower",
+    mozilla: "::-moz-range-progress"
+  };
+
+  function browserSpecificPseudoElementRules(browserPseudoElements, rules, singleBrowserInclusions) {
+    var styles = {};
+
+    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]);
+      }
+
+      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",
+    height: "20px",
+    margin: 0,
+    position: "relative",
+    outline: "none",
+
+    "&::-ms-tooltip": {
+      display: "none"
+    },
+
+    "&::-moz-focus-outer": {
+      border: 0
+    }
+  };
+
+  var thumbDisabledRules = disabled ? {
+    opacity: themeData["component.disabled.opacity"]
+  } : {};
+
+  var thumbStateRules = function thumbStateRules() {
+    var isInActiveState = Object.values(activeStates).every(function (stateValue) {
+      return !stateValue;
+    });
+
+    if (disabled || isInActiveState) {
+      return {};
+    }
+
+    var stateKey = void 0;
+
+    if (hasFocus) stateKey = "focused";
+    if (hasHover) stateKey = "hover";
+    if (isPressed) stateKey = "pressed";
+
+    return {
+      backgroundColor: themeData["slider." + stateKey + ".thumb.color"],
+      boxShadow: "0 0 0 " + themeData["slider." + stateKey + ".halo.width"] + " " + themeData["slider." + stateKey + ".halo.color"]
+    };
+  };
+
+  var thumbRules = browserSpecificPseudoElementRules(thumbPseudoElements, _extends({
+    boxSizing: "content-box",
+    height: themeData["slider.thumb.width"],
+    width: themeData["slider.thumb.width"],
+    backgroundColor: themeData["slider.thumb.backgroundColor"],
+    border: 0,
+    borderRadius: "50%",
+    boxShadow: "0 0 0 " + themeData["slider.halo.width"] + " " + themeData["slider.halo.color"],
+    position: "relative",
+    top: "50%",
+    WebkitAppearance: "none" /* Hides platform-native styling */
+  }, thumbStateRules()), {
+    mozilla: _extends({}, thumbDisabledRules),
+    webkit: {
+      transform: "translateY(-50%)"
+    }
+  });
+
+  var trackDisabledRules = disabled ? {
+    opacity: themeData["component.disabled.opacity"]
+  } : {};
+
+  var trackValueWidth = "calc((0.5 * " + themeData["slider.thumb.width"] + ") \n  + (" + trackValueRatio + " * (100% - " + themeData["slider.thumb.width"] + ")))";
+
+  var trackRules = browserSpecificPseudoElementRules(trackPseudoElements, _extends({
+    width: "100%",
+    height: themeData["slider.track.width"],
+    border: "none",
+    backgroundColor: themeData["slider.track.color"],
+    color: "transparent",
+    outline: "none"
+
+  }, trackDisabledRules), {
+    // WebKit does not have a built-in way to target the progress/lower fill of a slider track.
+    // This produces the same visual effect.
+    webkit: {
+      backgroundColor: themeData["slider.track.color"],
+      backgroundImage: "linear-gradient(" + themeData["slider.value.color"] + ", " + themeData["slider.value.color"] + ")",
+      backgroundPosition: 0,
+      backgroundSize: trackValueWidth + " 100%",
+      backgroundRepeat: "no-repeat"
+    }
+  });
+
+  var trackProgressRules = browserSpecificPseudoElementRules(trackProgressPseudoElements, {
+    border: "none",
+    backgroundColor: themeData["slider.value.color"]
+  }, {
+    mozilla: _extends({}, trackDisabledRules)
+  });
+
+  return {
+    slider: _extends({}, baseRules, thumbRules, trackRules, trackProgressRules)
+  };
+}
+
+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; };
+
 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"); } }
@@ -23,82 +178,67 @@
 
-var Input = function (_Component) {
-  _inherits(Input, _Component);
+var SliderPresenter = function (_Component) {
+  _inherits(SliderPresenter, _Component);
 
-  function Input() {
-    _classCallCheck(this, Input);
+  function SliderPresenter() {
+    _classCallCheck(this, SliderPresenter);
 
-    return _possibleConstructorReturn(this, (Input.__proto__ || Object.getPrototypeOf(Input)).apply(this, arguments));
+    return _possibleConstructorReturn(this, (SliderPresenter.__proto__ || Object.getPrototypeOf(SliderPresenter)).apply(this, arguments));
   }
 
-  _createClass(Input, [{
+  _createClass(SliderPresenter, [{
     key: "render",
     value: function render() {
       var _props = this.props,
+          disabled = _props.disabled,
+          hasFocus = _props.hasFocus,
+          hasHover = _props.hasHover,
+          isPressed = _props.isPressed,
+          max = _props.max,
           min = _props.min,
-          max = _props.max,
-          value = _props.value;
+          value = _props.value,
+          otherProps = _objectWithoutProperties$1(_props, ["disabled", "hasFocus", "hasHover", "isPressed", "max", "min", "value"]);
 
+      return React__default.createElement(
+        ThemeContext.Consumer,
+        null,
+        function (_ref) {
+          var resolvedRoles = _ref.resolvedRoles;
 
-      return React__default.createElement("input", _extends({
-        className: "hig__slider__input",
-        type: "range",
-        "aria-valuemin": min,
-        "aria-valuemax": max,
-        "aria-valuenow": value
-      }, this.props));
+          var rangeRange = max - min;
+          var valueRatio = (value - min) / rangeRange;
+
+          var styles = stylesheet({ disabled: disabled, hasFocus: hasFocus, hasHover: hasHover, isPressed: isPressed }, valueRatio, resolvedRoles);
+
+          return React__default.createElement("input", _extends$1({
+            className: emotion.css(styles.slider),
+            disabled: disabled,
+            type: "range",
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            "aria-valuenow": value,
+            max: max,
+            min: min,
+            value: value
+          }, otherProps));
+        }
+      );
     }
   }]);
 
-  return Input;
+  return SliderPresenter;
 }(React.Component);
 
-Input.propTypes = {
-  /**
-   * Prevents user actions on the field
-   */
+SliderPresenter.propTypes = {
   disabled: PropTypes.bool,
-  /**
-   * HTML ID attribute
-   */
-  id: PropTypes.string,
-  /**
-   * Minimum value of the slider
-   */
+  hasFocus: PropTypes.bool,
+  hasHover: PropTypes.bool,
+  isPressed: PropTypes.bool,
+  max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   min: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * Maximum value of the slider
-   */
-  max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * Name of the field when submitted with a form
-   */
-  name: PropTypes.string,
-  /**
-   * Called when user moves focus from the field
-   */
-  onBlur: PropTypes.func,
-  /**
-   * Called after user changes the value of the field
-   */
-  onChange: PropTypes.func,
-  /**
-   * Called when user puts focus onto the field
-   */
-  onFocus: PropTypes.func,
-  /**
-   * Called as user changes the value of the field
-   */
-  onInput: PropTypes.func,
-  /**
-   * The granularity of each step on the slider
-   */
   step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * Value of the field
-   */
   value: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
 };
-Input.__docgenInfo = {
+SliderPresenter.__docgenInfo = {
   "description": "",
-  "displayName": "Input",
+  "displayName": "SliderPresenter",
   "props": {
@@ -110,13 +250,27 @@ "disabled": {
       "required": false,
-      "description": "Prevents user actions on the field"
+      "description": ""
     },
-    "id": {
+    "hasFocus": {
       "type": {
-        "name": "string"
+        "name": "bool"
       },
       "required": false,
-      "description": "HTML ID attribute"
+      "description": ""
     },
-    "min": {
+    "hasHover": {
       "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "isPressed": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "max": {
+      "type": {
         "name": "union",
@@ -130,5 +284,5 @@ "value": [{
       "required": false,
-      "description": "Minimum value of the slider"
+      "description": ""
     },
-    "max": {
+    "min": {
       "type": {
@@ -143,39 +297,4 @@ "name": "union",
       "required": false,
-      "description": "Maximum value of the slider"
+      "description": ""
     },
-    "name": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Name of the field when submitted with a form"
-    },
-    "onBlur": {
-      "type": {
-        "name": "func"
-      },
-      "required": false,
-      "description": "Called when user moves focus from the field"
-    },
-    "onChange": {
-      "type": {
-        "name": "func"
-      },
-      "required": false,
-      "description": "Called after user changes the value of the field"
-    },
-    "onFocus": {
-      "type": {
-        "name": "func"
-      },
-      "required": false,
-      "description": "Called when user puts focus onto the field"
-    },
-    "onInput": {
-      "type": {
-        "name": "func"
-      },
-      "required": false,
-      "description": "Called as user changes the value of the field"
-    },
     "step": {
@@ -191,3 +310,3 @@ "type": {
       "required": false,
-      "description": "The granularity of each step on the slider"
+      "description": ""
     },
@@ -204,3 +323,3 @@ "value": {
       "required": false,
-      "description": "Value of the field"
+      "description": ""
     }
@@ -210,4 +329,8 @@ }
 
+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 _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; }; }();
 
+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"); } }
@@ -219,6 +342,11 @@
 
-function generatedId() {
-  return "slider-" + Math.floor(Math.random() * 100000, 5);
-}
+/**
+ * @typedef {string|number} Value
+ */
 
+/**
+ * @typedef {Object} State
+ * @property {Value} value
+ */
+
 var Slider = function (_Component) {
@@ -239,77 +367,111 @@ _inherits$1(Slider, _Component);
     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.value
+      value: _this.props.defaultValue || (_this.props.max - _this.props.min) / 2
     }, _this.handleChange = function (event) {
-      _this.setState({ value: event.target.value });
-      if (_this.props.onChange) _this.props.onChange(event);
+      _this.setValue(event.target.value);
     }, _temp), _possibleConstructorReturn$1(_this, _ret);
   }
 
+  /**
+   * @type {State}
+   */
+
+
   _createClass$1(Slider, [{
+    key: "getValue",
+
+
+    /**
+     * @returns {Value}
+     */
+    value: function getValue() {
+      if (this.isControlled()) {
+        return this.props.value || 0;
+      }
+
+      return this.state.value;
+    }
+
+    /**
+     * @param {Value} value
+     */
+
+  }, {
+    key: "setValue",
+    value: function setValue(value) {
+      var onChange = this.props.onChange;
+
+
+      if (onChange) onChange(Number(value));
+
+      if (!this.isControlled()) {
+        this.setState({ value: value });
+      }
+    }
+  }, {
+    key: "isControlled",
+    value: function isControlled() {
+      return this.props.value !== undefined;
+    }
+
+    /**
+     * @param {event} Event
+     */
+
+  }, {
     key: "render",
     value: function render() {
+      var _this2 = this;
+
       var _props = this.props,
-          id = _props.id,
-          name = _props.name,
-          label = _props.label,
-          instructions = _props.instructions,
-          required = _props.required,
-          disabled = _props.disabled,
-          min = _props.min,
-          max = _props.max,
-          step = _props.step,
+          defaultValue = _props.defaultValue,
           onBlur = _props.onBlur,
+          onChange = _props.onChange,
           onFocus = _props.onFocus,
-          onInput = _props.onInput;
-      var value = this.state.value;
+          onMouseDown = _props.onMouseDown,
+          onMouseEnter = _props.onMouseEnter,
+          onMouseLeave = _props.onMouseLeave,
+          onMouseUp = _props.onMouseUp,
+          value = _props.value,
+          otherProps = _objectWithoutProperties$2(_props, ["defaultValue", "onBlur", "onChange", "onFocus", "onMouseDown", "onMouseEnter", "onMouseLeave", "onMouseUp", "value"]);
 
+      var currentValue = this.getValue();
 
       return React__default.createElement(
-        "div",
+        behaviors.ControlBehavior,
         {
-          className: cx("hig__slider", {
-            "hig__slider--disabled": disabled,
-            "hig__slider--required": required
-          })
+          onBlur: onBlur,
+          onFocus: onFocus,
+          onMouseDown: onMouseDown,
+          onMouseEnter: onMouseEnter,
+          onMouseLeave: onMouseLeave,
+          onMouseUp: onMouseUp
         },
-        React__default.createElement(
-          "div",
-          {
-            className: "hig__slider__wrapper",
-            "data-range-min": min,
-            "data-range-max": max
-          },
-          React__default.createElement(
-            "span",
-            { className: "hig__slider__current-value" },
-            value
-          ),
-          React__default.createElement(Input, {
-            id: id,
-            onChange: this.handleChange,
-            disabled: disabled,
-            name: name,
-            min: min,
-            max: max,
-            step: step,
-            value: value,
-            onBlur: onBlur,
-            onFocus: onFocus,
-            onInput: onInput
-          }),
-          label && React__default.createElement(
-            "label",
-            { htmlFor: id, className: "hig__slider__label" },
-            label
-          )
-        ),
-        instructions && React__default.createElement(
-          "p",
-          { className: "hig__slider__instructions" },
-          instructions
-        ),
-        required && React__default.createElement(
-          "p",
-          { className: "hig__slider__required-notice" },
-          required
-        )
+        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(
+            "div",
+            { className: emotion.css({ display: "block" }) },
+            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,
+              value: currentValue
+            }, otherProps))
+          );
+        }
       );
@@ -336,10 +498,6 @@ }
   /**
-   * Instructional text for the field
+   * Maximum value of the slider
    */
-  instructions: PropTypes.string,
+  max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   /**
-   * Text describing what the field represents
-   */
-  label: PropTypes.string,
-  /**
    * Minimum value of the slider
@@ -349,6 +507,2 @@ */
   /**
-   * Maximum value of the slider
-   */
-  max: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
    * Name of the field when submitted with a form
@@ -374,6 +528,18 @@ */
   /**
-   * Text describing why the field is required
+   * Called when user presses their mouse over the field
    */
-  required: PropTypes.string,
+  onMouseDown: PropTypes.func,
   /**
+   * Called when user moves their mouse over the field
+   */
+  onMouseEnter: PropTypes.func,
+  /**
+   * Called when user moves their mouse out of the field
+   */
+  onMouseLeave: PropTypes.func,
+  /**
+   * Called when user releases their mouse press over the field
+   */
+  onMouseUp: PropTypes.func,
+  /**
    * The granularity of each step on the slider
@@ -388,9 +554,9 @@ */
 Slider.defaultProps = {
-  id: generatedId(),
+  disabled: false,
+  max: "100",
   min: "0",
-  max: "100",
   step: "1"
 };
 Slider.__docgenInfo = {
-  "description": "",
+  "description": "@typedef {Object} State\n@property {Value} value",
   "displayName": "Slider",
@@ -415,16 +581,9 @@ "props": {
       "required": false,
-      "description": "Prevents user actions on the field"
-    },
-    "id": {
-      "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "HTML ID attribute",
+      "description": "Prevents user actions on the field",
       "defaultValue": {
-        "value": "generatedId()",
-        "computed": true
+        "value": "false",
+        "computed": false
       }
     },
-    "instructions": {
+    "id": {
       "type": {
@@ -434,13 +593,6 @@ "name": "string"
       "required": false,
-      "description": "Instructional text for the field"
+      "description": "HTML ID attribute"
     },
-    "label": {
+    "max": {
       "type": {
-        "name": "string"
-      },
-      "required": false,
-      "description": "Text describing what the field represents"
-    },
-    "min": {
-      "type": {
         "name": "union",
@@ -454,9 +606,9 @@ "value": [{
       "required": false,
-      "description": "Minimum value of the slider",
+      "description": "Maximum value of the slider",
       "defaultValue": {
-        "value": "\"0\"",
+        "value": "\"100\"",
         "computed": false
       }
     },
-    "max": {
+    "min": {
       "type": {
@@ -471,5 +623,5 @@ "name": "union",
       "required": false,
-      "description": "Maximum value of the slider",
+      "description": "Minimum value of the slider",
       "defaultValue": {
-        "value": "\"100\"",
+        "value": "\"0\"",
         "computed": false
@@ -513,9 +665,30 @@ }
     },
-    "required": {
+    "onMouseDown": {
       "type": {
-        "name": "string"
+        "name": "func"
       },
       "required": false,
-      "description": "Text describing why the field is required"
+      "description": "Called when user presses their mouse over the field"
     },
+    "onMouseEnter": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when user moves their mouse over the field"
+    },
+    "onMouseLeave": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when user moves their mouse out of the field"
+    },
+    "onMouseUp": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when user releases their mouse press over the field"
+    },
     "step": {
@@ -522,0 +695,0 @@ "type": {

package.json

 {
   "name": "@hig/slider",
-  "version": "0.2.0-alpha.fbb1eed0",
+  "version": "1.0.0",
   "description": "HIG Slider",
@@ -16,3 +16,2 @@ "author": "Autodesk Inc.",
   "module": "build/index.es.js",
-  "style": "build/index.css",
   "files": [
@@ -22,3 +21,6 @@ "build/*"
   "dependencies": {
-    "classnames": "^2.2.5",
+    "@hig/behaviors": "^1.1.1",
+    "@hig/theme-context": "^2.1.0",
+    "@hig/utils": "^0.3.0",
+    "emotion": "^10.0.0",
     "prop-types": "^15.6.1"
@@ -30,7 +32,7 @@ },
   "devDependencies": {
-    "@hig/babel-preset": "0.2.0-alpha.fbb1eed0",
-    "@hig/eslint-config": "0.2.0-alpha.fbb1eed0",
-    "@hig/scripts": "0.2.0-alpha.fbb1eed0",
-    "@hig/semantic-release-config": "0.2.0-alpha.fbb1eed0",
-    "@hig/styles": "^0.1.1"
+    "@hig/babel-preset": "^0.1.1",
+    "@hig/eslint-config": "^0.1.0",
+    "@hig/jest-preset": "^0.1.0",
+    "@hig/scripts": "^0.1.2",
+    "@hig/semantic-release-config": "^0.1.0"
   },
@@ -40,2 +42,3 @@ "scripts": {
     "lint": "hig-scripts-lint",
+    "test": "hig-scripts-test",
     "release": "hig-scripts-release"
@@ -46,2 +49,5 @@ },
   },
+  "jest": {
+    "preset": "@hig/jest-preset"
+  },
   "release": {
@@ -48,0 +54,0 @@ "extends": "@hig/semantic-release-config"

README.md

@@ -15,7 +15,6 @@ # Slider
 
-### Import the component and CSS
+### Import the component
 
 ```js
 import Slider from '@hig/slider';
-import '@hig/slider/build/index.css';
 ```
@@ -27,5 +26,2 @@
 <Slider
-  label="What is your age?"
-  instructions="You must be 21 or older."
-  required="Age is required."
   min={21}
@@ -32,0 +28,0 @@ max={99}

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

48965

increased by16.53%

Number of low quality alerts

1

decreased by-50%

Worsened metrics

Dependency count

6

increased by100%

Number of package files

5

decreased by-16.67%

Lines of code

1252

decreased by-6.85%

Number of lines in readme file

30

decreased by-11.76%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@hig/behaviors@^1.1.1

• + Added@hig/theme-context@^2.1.0

• + Added@hig/utils@^0.3.0

• + Addedemotion@^10.0.0

• + Added@babel/code-frame@7.26.2(transitive)

• + Added@babel/generator@7.26.2(transitive)

• + Added@babel/helper-module-imports@7.25.9(transitive)

• + Added@babel/helper-string-parser@7.25.9(transitive)

• + Added@babel/helper-validator-identifier@7.25.9(transitive)

• + Added@babel/parser@7.26.2(transitive)

• + Added@babel/runtime@7.26.0(transitive)

• + Added@babel/template@7.25.9(transitive)

• + Added@babel/traverse@7.25.9(transitive)

• + Added@babel/types@7.26.0(transitive)

• + Added@emotion/cache@10.0.29(transitive)

• + Added@emotion/hash@0.8.0(transitive)

• + Added@emotion/memoize@0.7.4(transitive)

• + Added@emotion/serialize@0.11.16(transitive)

• + Added@emotion/sheet@0.9.4(transitive)

• + Added@emotion/stylis@0.8.5(transitive)

• + Added@emotion/unitless@0.7.5(transitive)

• + Added@emotion/utils@0.11.3(transitive)

• + Added@emotion/weak-memoize@0.2.5(transitive)

• + Added@hig/behaviors@1.1.2(transitive)

• + Added@hig/theme-context@2.1.3(transitive)

• + Added@hig/theme-data@3.4.2(transitive)

• + Added@hig/utils@0.3.0(transitive)

• + Added@jridgewell/gen-mapping@0.3.5(transitive)

• + Added@jridgewell/resolve-uri@3.1.2(transitive)

• + Added@jridgewell/set-array@1.2.1(transitive)

• + Added@jridgewell/sourcemap-codec@1.5.0(transitive)

• + Added@jridgewell/trace-mapping@0.3.25(transitive)

• + Added@types/parse-json@4.0.2(transitive)

• + Addedasap@2.0.6(transitive)

• + Addedbabel-plugin-emotion@10.2.2(transitive)

• + Addedbabel-plugin-macros@2.8.0(transitive)

• + Addedbabel-plugin-syntax-jsx@6.18.0(transitive)

• + Addedcallsites@3.1.0(transitive)

• + Addedconvert-source-map@1.9.0(transitive)

• + Addedcore-js@1.2.7(transitive)

• + Addedcosmiconfig@6.0.0(transitive)

• + Addedcreate-emotion@10.0.27(transitive)

• + Addedcreate-react-context@0.2.3(transitive)

• + Addedcsstype@2.6.21(transitive)

• + Addeddebug@4.3.7(transitive)

• + Addedemotion@10.0.27(transitive)

• + Addedencoding@0.1.13(transitive)

• + Addederror-ex@1.3.2(transitive)

• + Addedescape-string-regexp@1.0.5(transitive)

• + Addedfbjs@0.8.18(transitive)

• + Addedfind-root@1.1.0(transitive)

• + Addedfunction-bind@1.1.2(transitive)

• + Addedglobals@11.12.0(transitive)

• + Addedgud@1.0.0(transitive)

• + Addedhasown@2.0.2(transitive)

• + Addediconv-lite@0.6.3(transitive)

• + Addedimport-fresh@3.3.0(transitive)

• + Addedis-arrayish@0.2.1(transitive)

• + Addedis-core-module@2.15.1(transitive)

• + Addedis-stream@1.1.0(transitive)

• + Addedisomorphic-fetch@2.2.1(transitive)

• + Addedjsesc@3.0.2(transitive)

• + Addedjson-parse-even-better-errors@2.3.1(transitive)

• + Addedlines-and-columns@1.2.4(transitive)

• + Addedlodash.memoize@4.1.2(transitive)

• + Addedms@2.1.3(transitive)

• + Addednode-fetch@1.7.3(transitive)

• + Addedparent-module@1.0.1(transitive)

• + Addedparse-json@5.2.0(transitive)

• + Addedpath-parse@1.0.7(transitive)

• + Addedpath-type@4.0.0(transitive)

• + Addedpicocolors@1.1.1(transitive)

• + Addedpromise@7.3.1(transitive)

• + Addedregenerator-runtime@0.14.1(transitive)

• + Addedresolve@1.22.8(transitive)

• + Addedresolve-from@4.0.0(transitive)

• + Addedsafer-buffer@2.1.2(transitive)

• + Addedsetimmediate@1.0.5(transitive)

• + Addedsource-map@0.5.7(transitive)

• + Addedsupports-preserve-symlinks-flag@1.0.0(transitive)

• + Addedtinycolor2@1.6.0(transitive)

• + Addedua-parser-js@0.7.39(transitive)

• + Addedwhatwg-fetch@3.6.20(transitive)

• + Addedyaml@1.10.2(transitive)

• - Removedclassnames@^2.2.5

• - Removedclassnames@2.5.1(transitive)