@hig/dropdown - npm Package Compare versions

Comparing version 2.0.6 to 2.0.7

build/index.es.js

 import React, { Component } from 'react';
-import { css } from 'emotion';
-import { Caret24, CaretDownSUI, CheckmarkBlueDark24 } from '@hig/icons';
+import { css, cx } from 'emotion';
+import { CaretDownMUI, CaretDownSUI, CheckmarkSUI, CheckmarkXsUI } from '@hig/icons';
 import Input from '@hig/input';
@@ -66,3 +66,3 @@ import ThemeContext, { ThemeContext as ThemeContext$1 } from '@hig/theme-context';
 
-      var CaretIcon = metadata.densityId === "medium-density" ? Caret24 : CaretDownSUI;
+      var CaretIcon = metadata.densityId === "medium-density" ? CaretDownMUI : CaretDownSUI;
       var iconColor = isOpen ? resolvedRoles["colorScheme.accentColor"] : resolvedRoles["colorScheme.iconColor"];
@@ -124,2 +124,5 @@
 
+  var className = otherProps.className;
+
+
   return React.createElement(
@@ -132,6 +135,6 @@ ThemeContext$1.Consumer,
         "div",
-        _extends$2({
+        _extends$2({}, otherProps, {
           ref: innerRef,
-          className: css(stylesheet$1(props, resolvedRoles))
-        }, otherProps),
+          className: cx(css(stylesheet$1(props, resolvedRoles)), className)
+        }),
         children
@@ -183,2 +186,6 @@ );
 
+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 _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; }
+
 /**
@@ -201,8 +208,12 @@ * @typedef {Object} WrapperProps
 function WrapperPresenter(props) {
-  var children = props.children;
+  var disabled = props.disabled,
+      children = props.children,
+      otherProps = _objectWithoutProperties$2(props, ["disabled", "children"]);
 
+  var className = otherProps.className;
 
+
   return React.createElement(
     "div",
-    { className: css(stylesheet$2(props)) },
+    _extends$3({}, otherProps, { className: cx(css(stylesheet$2(props)), className) }),
     children
@@ -489,6 +500,6 @@ );
 
-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 stylesheet$3(props, themeData) {
-  return _extends$3({
+  return _extends$4({
     margin: 0,
@@ -514,5 +525,5 @@ display: "flex",
 
-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; };
 
-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 _objectWithoutProperties$3(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; }
 
@@ -547,3 +558,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$4({ selected: selected, highlighted: highlighted }, props), resolvedRoles)),
+          className: css(stylesheet$3(_extends$5({ selected: selected, highlighted: highlighted }, props), resolvedRoles)),
           id: id,
@@ -588,17 +599,26 @@ onClick: handleClick,
           selected = _props.selected,
-          otherProps = _objectWithoutProperties$2(_props, ["children", "selected"]);
+          otherProps = _objectWithoutProperties$3(_props, ["children", "selected"]);
 
       return React.createElement(
-        OptionWrapper,
-        _extends$4({ selected: selected }, otherProps),
-        React.createElement(
-          "span",
-          null,
-          children
-        ),
-        selected && React.createElement(
-          "div",
-          null,
-          React.createElement(CheckmarkBlueDark24, { color: "#087AAD" })
-        )
+        ThemeContext$1.Consumer,
+        null,
+        function (_ref2) {
+          var metadata = _ref2.metadata;
+
+          var Icon = metadata.densityId === "medium-density" ? CheckmarkSUI : CheckmarkXsUI;
+          return React.createElement(
+            OptionWrapper,
+            _extends$5({ selected: selected }, otherProps),
+            React.createElement(
+              "span",
+              null,
+              children
+            ),
+            selected && React.createElement(
+              "div",
+              null,
+              React.createElement(Icon, { color: "#087AAD" })
+            )
+          );
+        }
       );
@@ -783,3 +803,3 @@ }
 
-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; };
+var _extends$6 = 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; };
 
@@ -790,2 +810,4 @@ 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$4(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"); } }
@@ -824,3 +846,19 @@
     }, _this.renderPresenter = function (downshift) {
-      var disabled = _this.props.disabled;
+      var _this$props = _this.props,
+          children = _this$props.children,
+          defaultValue = _this$props.defaultValue,
+          disabled = _this$props.disabled,
+          formatOption = _this$props.formatOption,
+          id = _this$props.id,
+          multiple = _this$props.multiple,
+          onBlur = _this$props.onBlur,
+          onChange = _this$props.onChange,
+          onFocus = _this$props.onFocus,
+          options = _this$props.options,
+          placeholder = _this$props.placeholder,
+          renderOption = _this$props.renderOption,
+          required = _this$props.required,
+          value = _this$props.value,
+          variant = _this$props.variant,
+          otherProps = _objectWithoutProperties$4(_this$props, ["children", "defaultValue", "disabled", "formatOption", "id", "multiple", "onBlur", "onChange", "onFocus", "options", "placeholder", "renderOption", "required", "value", "variant"]);
 
@@ -832,6 +870,7 @@ /**
 
-      return WrapperPresenter({
+
+      return WrapperPresenter(_extends$6({
         disabled: disabled,
         children: [_this.renderInput(downshift), _this.renderMenu(downshift)]
-      });
+      }, otherProps));
     }, _temp), _possibleConstructorReturn$1(_this, _ret);
@@ -910,2 +949,3 @@ }
           getInputProps = downshift.getInputProps;
+
       var _props3 = this.props,
@@ -917,5 +957,11 @@ placeholder = _props3.placeholder,
           onFocus = _props3.onFocus,
-          variant = _props3.variant;
+          variant = _props3.variant,
+          otherProps = _objectWithoutProperties$4(_props3, ["placeholder", "disabled", "required", "onBlur", "onFocus", "variant"]);
 
+      var className = otherProps.className;
 
+      var inputClassName = className && className.split(" ").reduce(function (acc, cur) {
+        return cx(acc, cur.trim() + "-input-wrapper");
+      }, "");
+
       var inputProps = getInputProps({
@@ -930,6 +976,7 @@ id: id,
         onClick: toggleMenu,
-        variant: variant
+        variant: variant,
+        className: inputClassName
       });
 
-      return React.createElement(InputPresenter, _extends$5({ key: "input" }, inputProps));
+      return React.createElement(InputPresenter, _extends$6({ key: "input" }, inputProps));
     }
@@ -952,3 +999,2 @@
 
-      var menuProps = getMenuProps({ isOpen: isOpen, refKey: "innerRef" });
       var _props4 = this.props,
@@ -958,4 +1004,18 @@ formatOption = _props4.formatOption,
           options = _props4.options,
-          renderOption = _props4.renderOption;
+          renderOption = _props4.renderOption,
+          otherProps = _objectWithoutProperties$4(_props4, ["formatOption", "multiple", "options", "renderOption"]);
 
+      var className = otherProps.className;
+
+
+      var menuClassName = className && className.split(" ").reduce(function (acc, cur) {
+        return cx(acc, cur.trim() + "-menu-wrapper");
+      }, "");
+
+      var menuProps = getMenuProps({
+        isOpen: isOpen,
+        refKey: "innerRef",
+        className: menuClassName
+      });
+
       var children = renderOptions({
@@ -974,3 +1034,3 @@ formatOption: formatOption,
         MenuPresenter,
-        _extends$5({ key: "menu" }, menuProps),
+        _extends$6({ key: "menu" }, menuProps),
         children
@@ -977,0 +1037,0 @@ );

build/index.js

@@ -74,3 +74,3 @@ 'use strict';
 
-      var CaretIcon = metadata.densityId === "medium-density" ? icons.Caret24 : icons.CaretDownSUI;
+      var CaretIcon = metadata.densityId === "medium-density" ? icons.CaretDownMUI : icons.CaretDownSUI;
       var iconColor = isOpen ? resolvedRoles["colorScheme.accentColor"] : resolvedRoles["colorScheme.iconColor"];
@@ -132,2 +132,5 @@
 
+  var className = otherProps.className;
+
+
   return React__default.createElement(
@@ -140,6 +143,6 @@ ThemeContext.ThemeContext.Consumer,
         "div",
-        _extends$2({
+        _extends$2({}, otherProps, {
           ref: innerRef,
-          className: emotion.css(stylesheet$1(props, resolvedRoles))
-        }, otherProps),
+          className: emotion.cx(emotion.css(stylesheet$1(props, resolvedRoles)), className)
+        }),
         children
@@ -191,2 +194,6 @@ );
 
+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 _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; }
+
 /**
@@ -209,8 +216,12 @@ * @typedef {Object} WrapperProps
 function WrapperPresenter(props) {
-  var children = props.children;
+  var disabled = props.disabled,
+      children = props.children,
+      otherProps = _objectWithoutProperties$2(props, ["disabled", "children"]);
 
+  var className = otherProps.className;
 
+
   return React__default.createElement(
     "div",
-    { className: emotion.css(stylesheet$2(props)) },
+    _extends$3({}, otherProps, { className: emotion.cx(emotion.css(stylesheet$2(props)), className) }),
     children
@@ -497,6 +508,6 @@ );
 
-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 stylesheet$3(props, themeData) {
-  return _extends$3({
+  return _extends$4({
     margin: 0,
@@ -522,5 +533,5 @@ display: "flex",
 
-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; };
 
-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 _objectWithoutProperties$3(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; }
 
@@ -555,3 +566,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$4({ selected: selected, highlighted: highlighted }, props), resolvedRoles)),
+          className: emotion.css(stylesheet$3(_extends$5({ selected: selected, highlighted: highlighted }, props), resolvedRoles)),
           id: id,
@@ -596,17 +607,26 @@ onClick: handleClick,
           selected = _props.selected,
-          otherProps = _objectWithoutProperties$2(_props, ["children", "selected"]);
+          otherProps = _objectWithoutProperties$3(_props, ["children", "selected"]);
 
       return React__default.createElement(
-        OptionWrapper,
-        _extends$4({ selected: selected }, otherProps),
-        React__default.createElement(
-          "span",
-          null,
-          children
-        ),
-        selected && React__default.createElement(
-          "div",
-          null,
-          React__default.createElement(icons.CheckmarkBlueDark24, { color: "#087AAD" })
-        )
+        ThemeContext.ThemeContext.Consumer,
+        null,
+        function (_ref2) {
+          var metadata = _ref2.metadata;
+
+          var Icon = metadata.densityId === "medium-density" ? icons.CheckmarkSUI : icons.CheckmarkXsUI;
+          return React__default.createElement(
+            OptionWrapper,
+            _extends$5({ selected: selected }, otherProps),
+            React__default.createElement(
+              "span",
+              null,
+              children
+            ),
+            selected && React__default.createElement(
+              "div",
+              null,
+              React__default.createElement(Icon, { color: "#087AAD" })
+            )
+          );
+        }
       );
@@ -791,3 +811,3 @@ }
 
-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; };
+var _extends$6 = 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; };
 
@@ -798,2 +818,4 @@ 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$4(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"); } }
@@ -832,3 +854,19 @@
     }, _this.renderPresenter = function (downshift) {
-      var disabled = _this.props.disabled;
+      var _this$props = _this.props,
+          children = _this$props.children,
+          defaultValue = _this$props.defaultValue,
+          disabled = _this$props.disabled,
+          formatOption = _this$props.formatOption,
+          id = _this$props.id,
+          multiple = _this$props.multiple,
+          onBlur = _this$props.onBlur,
+          onChange = _this$props.onChange,
+          onFocus = _this$props.onFocus,
+          options = _this$props.options,
+          placeholder = _this$props.placeholder,
+          renderOption = _this$props.renderOption,
+          required = _this$props.required,
+          value = _this$props.value,
+          variant = _this$props.variant,
+          otherProps = _objectWithoutProperties$4(_this$props, ["children", "defaultValue", "disabled", "formatOption", "id", "multiple", "onBlur", "onChange", "onFocus", "options", "placeholder", "renderOption", "required", "value", "variant"]);
 
@@ -840,6 +878,7 @@ /**
 
-      return WrapperPresenter({
+
+      return WrapperPresenter(_extends$6({
         disabled: disabled,
         children: [_this.renderInput(downshift), _this.renderMenu(downshift)]
-      });
+      }, otherProps));
     }, _temp), _possibleConstructorReturn$1(_this, _ret);
@@ -918,2 +957,3 @@ }
           getInputProps = downshift.getInputProps;
+
       var _props3 = this.props,
@@ -925,5 +965,11 @@ placeholder = _props3.placeholder,
           onFocus = _props3.onFocus,
-          variant = _props3.variant;
+          variant = _props3.variant,
+          otherProps = _objectWithoutProperties$4(_props3, ["placeholder", "disabled", "required", "onBlur", "onFocus", "variant"]);
 
+      var className = otherProps.className;
 
+      var inputClassName = className && className.split(" ").reduce(function (acc, cur) {
+        return emotion.cx(acc, cur.trim() + "-input-wrapper");
+      }, "");
+
       var inputProps = getInputProps({
@@ -938,6 +984,7 @@ id: id,
         onClick: toggleMenu,
-        variant: variant
+        variant: variant,
+        className: inputClassName
       });
 
-      return React__default.createElement(InputPresenter, _extends$5({ key: "input" }, inputProps));
+      return React__default.createElement(InputPresenter, _extends$6({ key: "input" }, inputProps));
     }
@@ -960,3 +1007,2 @@
 
-      var menuProps = getMenuProps({ isOpen: isOpen, refKey: "innerRef" });
       var _props4 = this.props,
@@ -966,4 +1012,18 @@ formatOption = _props4.formatOption,
           options = _props4.options,
-          renderOption = _props4.renderOption;
+          renderOption = _props4.renderOption,
+          otherProps = _objectWithoutProperties$4(_props4, ["formatOption", "multiple", "options", "renderOption"]);
 
+      var className = otherProps.className;
+
+
+      var menuClassName = className && className.split(" ").reduce(function (acc, cur) {
+        return emotion.cx(acc, cur.trim() + "-menu-wrapper");
+      }, "");
+
+      var menuProps = getMenuProps({
+        isOpen: isOpen,
+        refKey: "innerRef",
+        className: menuClassName
+      });
+
       var children = renderOptions({
@@ -982,3 +1042,3 @@ formatOption: formatOption,
         MenuPresenter,
-        _extends$5({ key: "menu" }, menuProps),
+        _extends$6({ key: "menu" }, menuProps),
         children
@@ -985,0 +1045,0 @@ );

CHANGELOG.md

@@ -0,1 +1,9 @@
+# [@hig/dropdown-v2.0.7](https://github.com/Autodesk/hig/compare/@hig/dropdown@2.0.6...@hig/dropdown@2.0.7) (2019-07-11)
+
+
+### Bug Fixes
+
+* allow className to be passed down in Dropdown ([faedcce](https://github.com/Autodesk/hig/commit/faedcce))
+* update Dropdown to the newest Icons version ([3a446de](https://github.com/Autodesk/hig/commit/3a446de))
+
 # [@hig/dropdown-v2.0.6](https://github.com/Autodesk/hig/compare/@hig/dropdown@2.0.5...@hig/dropdown@2.0.6) (2019-06-07)
@@ -2,0 +10,0 @@

package.json

 {
   "name": "@hig/dropdown",
-  "version": "2.0.6",
+  "version": "2.0.7",
   "description": "HIG Dropdown",
@@ -20,5 +20,5 @@ "author": "Autodesk Inc.",
   "dependencies": {
-    "@hig/icons": "^2.1.1",
+    "@hig/icons": "^3.0.0",
     "@hig/multi-downshift": "^0.1.1",
-    "@hig/input": "^1.1.4",
+    "@hig/input": "^1.1.5",
     "emotion": "^10.0.0",
@@ -25,0 +25,0 @@ "downshift": "^3.2.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

93778

increased by7.21%

Lines of code

2221

increased by4.32%

Dependency changes

• + Added@hig/icons@3.4.4(transitive)

• - Removed@hig/icons@2.1.2(transitive)

• Updated@hig/icons@^3.0.0

• Updated@hig/input@^1.1.5