@hig/dropdown - npm Package Compare versions

Comparing version 2.0.3 to 2.0.4

build/index.es.js

@@ -10,5 +10,20 @@ import React, { Component } from 'react';
 
+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 getActiveStyles(isOpen) {
+  if (isOpen) {
+    return {
+      transform: "translateY(-50%) rotate(180deg)"
+    };
+  }
+  return {
+    transform: "translateY(-50%)"
+  };
+}
+
 function stylesheet(props, themeData) {
   var padding = props.variant === "box" ? themeData["input.boxType.horizontalPadding"] : themeData["input.horizontalPadding"];
+  var isOpen = props.isOpen;
 
+
   return {
@@ -23,16 +38,21 @@ wrapper: {
 
-    caret: {
+    caret: _extends({
       position: "absolute",
       top: "50%",
-      transform: "translateY(-50%)",
       right: padding,
       opacity: props.disabled ? themeData["component.disabled.opacity"] : 1,
-      pointerEvents: "none"
-    }
+      pointerEvents: "none",
+      transition: "transform 0.3s, color 0.3s"
+    }, getActiveStyles(isOpen))
   };
 }
 
-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; };
+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; };
 
+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 InputPresenter(props) {
+  var isOpen = props.isOpen,
+      otherProps = _objectWithoutProperties(props, ["isOpen"]);
+
   return React.createElement(
@@ -46,2 +66,3 @@ ThemeContext.Consumer,
       var CaretIcon = metadata.densityId === "medium-density" ? Caret24 : CaretDownSUI;
+      var iconColor = isOpen ? resolvedRoles["colorScheme.accentColor"] : resolvedRoles["colorScheme.iconColor"];
 
@@ -51,7 +72,10 @@ return React.createElement(
         { className: css(stylesheet(props, resolvedRoles).wrapper) },
-        React.createElement(Input, _extends({}, props, {
+        React.createElement(Input, _extends$1({}, otherProps, {
           stylesheet: stylesheet(props, resolvedRoles).input,
           readOnly: true
         })),
-        React.createElement(CaretIcon, { style: stylesheet(props, resolvedRoles).caret })
+        React.createElement(CaretIcon, {
+          style: stylesheet(props, resolvedRoles).caret,
+          color: iconColor
+        })
       );
@@ -93,5 +117,5 @@ }
 
-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 _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; };
 
-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 _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; }
 
@@ -102,3 +126,3 @@ function MenuPresenter(props) {
       children = props.children,
-      otherProps = _objectWithoutProperties(props, ["innerRef", "isOpen", "children"]);
+      otherProps = _objectWithoutProperties$1(props, ["innerRef", "isOpen", "children"]);
 
@@ -112,3 +136,3 @@ return React.createElement(
         "div",
-        _extends$1({
+        _extends$2({
           ref: innerRef,
@@ -467,6 +491,6 @@ className: css(stylesheet$1(props, resolvedRoles))
 
-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 _extends$3 = 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 stylesheet$3(props, themeData) {
-  return _extends$2({
+  return _extends$3({
     margin: 0,
@@ -492,5 +516,5 @@ display: "flex",
 
-var _extends$3 = 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 _extends$4 = 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$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 _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; }
 
@@ -525,3 +549,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
           "aria-selected": selected,
-          className: css(stylesheet$3(_extends$3({ selected: selected, highlighted: highlighted }, props), resolvedRoles)),
+          className: css(stylesheet$3(_extends$4({ selected: selected, highlighted: highlighted }, props), resolvedRoles)),
           id: id,
@@ -566,7 +590,7 @@ onClick: handleClick,
           selected = _props.selected,
-          otherProps = _objectWithoutProperties$1(_props, ["children", "selected"]);
+          otherProps = _objectWithoutProperties$2(_props, ["children", "selected"]);
 
       return React.createElement(
         OptionWrapper,
-        _extends$3({ selected: selected }, otherProps),
+        _extends$4({ selected: selected }, otherProps),
         React.createElement(
@@ -761,3 +785,3 @@ "span",
 
-var _extends$4 = 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 _extends$5 = 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; };
 
@@ -882,2 +906,3 @@ var _createClass$1 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
       var id = downshift.id,
+          isOpen = downshift.isOpen,
           toggleMenu = downshift.toggleMenu,
@@ -898,2 +923,3 @@ getInputProps = downshift.getInputProps;
         disabled: disabled,
+        isOpen: isOpen,
         required: required,
@@ -906,3 +932,3 @@ onBlur: onBlur,
 
-      return React.createElement(InputPresenter, _extends$4({ key: "input" }, inputProps));
+      return React.createElement(InputPresenter, _extends$5({ key: "input" }, inputProps));
     }
@@ -945,3 +971,3 @@
         MenuPresenter,
-        _extends$4({ key: "menu" }, menuProps),
+        _extends$5({ key: "menu" }, menuProps),
         children
@@ -948,0 +974,0 @@ );

build/index.js

@@ -18,5 +18,20 @@ 'use strict';
 
+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 getActiveStyles(isOpen) {
+  if (isOpen) {
+    return {
+      transform: "translateY(-50%) rotate(180deg)"
+    };
+  }
+  return {
+    transform: "translateY(-50%)"
+  };
+}
+
 function stylesheet(props, themeData) {
   var padding = props.variant === "box" ? themeData["input.boxType.horizontalPadding"] : themeData["input.horizontalPadding"];
+  var isOpen = props.isOpen;
 
+
   return {
@@ -31,16 +46,21 @@ wrapper: {
 
-    caret: {
+    caret: _extends({
       position: "absolute",
       top: "50%",
-      transform: "translateY(-50%)",
       right: padding,
       opacity: props.disabled ? themeData["component.disabled.opacity"] : 1,
-      pointerEvents: "none"
-    }
+      pointerEvents: "none",
+      transition: "transform 0.3s, color 0.3s"
+    }, getActiveStyles(isOpen))
   };
 }
 
-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; };
+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; };
 
+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 InputPresenter(props) {
+  var isOpen = props.isOpen,
+      otherProps = _objectWithoutProperties(props, ["isOpen"]);
+
   return React__default.createElement(
@@ -54,2 +74,3 @@ ThemeContext__default.Consumer,
       var CaretIcon = metadata.densityId === "medium-density" ? icons.Caret24 : icons.CaretDownSUI;
+      var iconColor = isOpen ? resolvedRoles["colorScheme.accentColor"] : resolvedRoles["colorScheme.iconColor"];
 
@@ -59,7 +80,10 @@ return React__default.createElement(
         { className: emotion.css(stylesheet(props, resolvedRoles).wrapper) },
-        React__default.createElement(Input, _extends({}, props, {
+        React__default.createElement(Input, _extends$1({}, otherProps, {
           stylesheet: stylesheet(props, resolvedRoles).input,
           readOnly: true
         })),
-        React__default.createElement(CaretIcon, { style: stylesheet(props, resolvedRoles).caret })
+        React__default.createElement(CaretIcon, {
+          style: stylesheet(props, resolvedRoles).caret,
+          color: iconColor
+        })
       );
@@ -101,5 +125,5 @@ }
 
-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 _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; };
 
-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 _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; }
 
@@ -110,3 +134,3 @@ function MenuPresenter(props) {
       children = props.children,
-      otherProps = _objectWithoutProperties(props, ["innerRef", "isOpen", "children"]);
+      otherProps = _objectWithoutProperties$1(props, ["innerRef", "isOpen", "children"]);
 
@@ -120,3 +144,3 @@ return React__default.createElement(
         "div",
-        _extends$1({
+        _extends$2({
           ref: innerRef,
@@ -475,6 +499,6 @@ className: emotion.css(stylesheet$1(props, resolvedRoles))
 
-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 _extends$3 = 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 stylesheet$3(props, themeData) {
-  return _extends$2({
+  return _extends$3({
     margin: 0,
@@ -500,5 +524,5 @@ display: "flex",
 
-var _extends$3 = 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 _extends$4 = 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$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 _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; }
 
@@ -533,3 +557,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
           "aria-selected": selected,
-          className: emotion.css(stylesheet$3(_extends$3({ selected: selected, highlighted: highlighted }, props), resolvedRoles)),
+          className: emotion.css(stylesheet$3(_extends$4({ selected: selected, highlighted: highlighted }, props), resolvedRoles)),
           id: id,
@@ -574,7 +598,7 @@ onClick: handleClick,
           selected = _props.selected,
-          otherProps = _objectWithoutProperties$1(_props, ["children", "selected"]);
+          otherProps = _objectWithoutProperties$2(_props, ["children", "selected"]);
 
       return React__default.createElement(
         OptionWrapper,
-        _extends$3({ selected: selected }, otherProps),
+        _extends$4({ selected: selected }, otherProps),
         React__default.createElement(
@@ -769,3 +793,3 @@ "span",
 
-var _extends$4 = 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 _extends$5 = 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; };
 
@@ -890,2 +914,3 @@ var _createClass$1 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
       var id = downshift.id,
+          isOpen = downshift.isOpen,
           toggleMenu = downshift.toggleMenu,
@@ -906,2 +931,3 @@ getInputProps = downshift.getInputProps;
         disabled: disabled,
+        isOpen: isOpen,
         required: required,
@@ -914,3 +940,3 @@ onBlur: onBlur,
 
-      return React__default.createElement(InputPresenter, _extends$4({ key: "input" }, inputProps));
+      return React__default.createElement(InputPresenter, _extends$5({ key: "input" }, inputProps));
     }
@@ -953,3 +979,3 @@
         MenuPresenter,
-        _extends$4({ key: "menu" }, menuProps),
+        _extends$5({ key: "menu" }, menuProps),
         children
@@ -956,0 +982,0 @@ );

CHANGELOG.md

@@ -0,1 +1,8 @@
+# [@hig/dropdown-v2.0.4](https://github.com/Autodesk/hig/compare/@hig/dropdown@2.0.3...@hig/dropdown@2.0.4) (2019-04-04)
+
+
+### Bug Fixes
+
+* match menu open caret to designs ([aba3bf9](https://github.com/Autodesk/hig/commit/aba3bf9))
+
 # [@hig/dropdown-v2.0.3](https://github.com/Autodesk/hig/compare/@hig/dropdown@2.0.2...@hig/dropdown@2.0.3) (2019-03-20)
@@ -2,0 +9,0 @@

package.json

 {
   "name": "@hig/dropdown",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "HIG Dropdown",
@@ -22,3 +22,3 @@ "author": "Autodesk Inc.",
     "@hig/multi-downshift": "^0.1.1",
-    "@hig/input": "^1.1.2",
+    "@hig/input": "^1.1.3",
     "emotion": "^10.0.0",
@@ -31,3 +31,3 @@ "downshift": "^3.2.0",
     "@hig/theme-context": "^2.1.3",
-    "@hig/theme-data": "^2.3.4",
+    "@hig/theme-data": "^2.3.5",
     "react": "^15.4.1 || ^16.3.2"
@@ -34,0 +34,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

99214

increased by2.44%

Lines of code

2289

increased by1.87%

Dependency changes

• Updated@hig/input@^1.1.3