@hig/dropdown - npm Package Compare versions

Comparing version 2.4.2 to 2.4.3

build/index.es.js

@@ -1,2 +0,2 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { css, cx } from 'emotion';
@@ -617,2 +617,4 @@ import { CaretDownMUI, CaretDownSUI, CheckmarkSUI, CheckmarkXsUI } from '@hig/icons';
 
+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; }; }();
+
 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; };
@@ -622,2 +624,8 @@
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 function OptionWrapper(props) {
@@ -672,36 +680,53 @@ var children = props.children,
 };
-var OptionPresenter = function OptionPresenter(props) {
-  var children = props.children,
-      selected = props.selected,
-      otherProps = _objectWithoutProperties$3(props, ["children", "selected"]);
 
-  return React.createElement(
-    ThemeContext$1.Consumer,
-    null,
-    function (_ref2) {
-      var resolvedRoles = _ref2.resolvedRoles,
-          metadata = _ref2.metadata;
+var OptionPresenter = function (_Component) {
+  _inherits(OptionPresenter, _Component);
 
-      var Icon = metadata.densityId === "medium-density" ? CheckmarkSUI : CheckmarkXsUI;
-      var styles = stylesheet$3(props, resolvedRoles);
+  function OptionPresenter() {
+    _classCallCheck(this, OptionPresenter);
 
+    return _possibleConstructorReturn(this, (OptionPresenter.__proto__ || Object.getPrototypeOf(OptionPresenter)).apply(this, arguments));
+  }
+
+  _createClass(OptionPresenter, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props,
+          children = _props.children,
+          selected = _props.selected,
+          otherProps = _objectWithoutProperties$3(_props, ["children", "selected"]);
+
       return React.createElement(
-        OptionWrapper,
-        _extends$5({ selected: selected }, otherProps),
-        React.createElement(
-          "span",
-          null,
-          children
-        ),
-        React.createElement(
-          "div",
-          { className: css(styles.optionCheckWrapper) },
-          React.createElement(Icon, null)
-        )
+        ThemeContext$1.Consumer,
+        null,
+        function (_ref2) {
+          var resolvedRoles = _ref2.resolvedRoles,
+              metadata = _ref2.metadata;
+
+          var Icon = metadata.densityId === "medium-density" ? CheckmarkSUI : CheckmarkXsUI;
+          var styles = stylesheet$3(_this2.props, resolvedRoles);
+
+          return React.createElement(
+            OptionWrapper,
+            _extends$5({ selected: selected }, otherProps),
+            React.createElement(
+              "span",
+              null,
+              children
+            ),
+            React.createElement(
+              "div",
+              { className: css(styles.optionCheckWrapper) },
+              React.createElement(Icon, null)
+            )
+          );
+        }
       );
     }
-  );
-};
+  }]);
 
-OptionPresenter.displayName = "OptionPresenter";
+  return OptionPresenter;
+}(Component);
 
@@ -891,6 +916,14 @@ OptionPresenter.propTypes = {
 
-function _objectWithoutProperties$5(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+var _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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function _objectWithoutProperties$5(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 /** @typedef {import("./presenters/renderOptions").OptionMeta} OptionMeta */
@@ -901,217 +934,253 @@ /** @typedef {import("downshift").ControllerStateAndHelpers} DownshiftHelpers */
 
-var Dropdown = function Dropdown(props) {
-  /**
-   * The controlled value for the input element
-   * @see https://github.com/paypal/downshift#inputvalue
-   * @returns {string|undefined}
-   */
-  var getInputValue = function getInputValue() {
-    var multiple = props.multiple,
-        formatOption = props.formatOption,
-        value = props.value;
+var Dropdown = function (_Component) {
+  _inherits$1(Dropdown, _Component);
 
+  function Dropdown() {
+    var _ref;
 
-    if (value === undefined) {
-      return undefined;
+    var _temp, _this, _ret;
+
+    _classCallCheck$1(this, Dropdown);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
-    if (multiple) {
-      return value.map(formatOption).join(", ");
-    }
 
-    return formatOption(value);
-  };
+    return _ret = (_temp = (_this = _possibleConstructorReturn$1(this, (_ref = Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (value) {
+      var onChange = _this.props.onChange;
 
-  /**
-   * > Why not just pass the `props.onChange` directly to Downshift?
-   *
-   *  Downshift provides all of it's helpers and state to `onChange`.
-   *  We don't want to expose the entire Downshift API to consumers.
-   *
-   * @param {OptionMeta | OptionMeta[]} value
-   * @param {DownshiftHelpers} downshift
-   */
-  var handleChange = function handleChange(value) {
-    var onChange = props.onChange;
 
+      if (onChange) {
+        onChange(value);
+      }
+    }, _this.renderPresenter = function (downshift) {
+      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,
+          onInputChange = _this$props.onInputChange,
+          options = _this$props.options,
+          placeholder = _this$props.placeholder,
+          renderOption = _this$props.renderOption,
+          required = _this$props.required,
+          tabIndex = _this$props.tabIndex,
+          typable = _this$props.typable,
+          value = _this$props.value,
+          variant = _this$props.variant,
+          error = _this$props.error,
+          otherProps = _objectWithoutProperties$5(_this$props, ["children", "defaultValue", "disabled", "formatOption", "id", "multiple", "onBlur", "onChange", "onFocus", "onInputChange", "options", "placeholder", "renderOption", "required", "tabIndex", "typable", "value", "variant", "error"]);
 
-    if (onChange) {
-      onChange(value);
-    }
-  };
+      /**
+       * The `Wrapper` presenter is used as a function to avoid having to
+       * use Downshift's `getRootProps`
+       * @see https://github.com/paypal/downshift#getrootprops
+       */
 
-  var getBehaviorProps = function getBehaviorProps() {
-    var _ref;
 
-    var id = props.id,
-        multiple = props.multiple,
-        formatOption = props.formatOption,
-        value = props.value,
-        defaultValue = props.defaultValue;
+      return WrapperPresenter(_extends$7({
+        disabled: disabled,
+        children: [_this.renderInput(downshift), _this.renderMenu(downshift)]
+      }, otherProps));
+    }, _temp), _possibleConstructorReturn$1(_this, _ret);
+  }
 
-    var valuePropName = multiple ? "selectedItems" : "selectedItem";
-    var defaultValuePropName = multiple ? "initialSelectedItems" : "initialSelectedItem";
+  _createClass$1(Dropdown, [{
+    key: "getBehaviorProps",
+    value: function getBehaviorProps() {
+      var _ref2;
 
-    return _ref = {
-      id: id,
-      onChange: handleChange,
-      itemToString: formatOption
-    }, _defineProperty(_ref, valuePropName, value), _defineProperty(_ref, defaultValuePropName, defaultValue), _defineProperty(_ref, "inputValue", getInputValue()), _ref;
-  };
+      var _props = this.props,
+          id = _props.id,
+          multiple = _props.multiple,
+          formatOption = _props.formatOption,
+          value = _props.value,
+          defaultValue = _props.defaultValue;
 
-  /**
-   * @param {DownshiftHelpers} downshift
-   * @returns {JSX.Element}
-   */
-  var renderInput = function renderInput(downshift) {
-    var id = downshift.id,
-        isOpen = downshift.isOpen,
-        toggleMenu = downshift.toggleMenu,
-        getInputProps = downshift.getInputProps;
+      var valuePropName = multiple ? "selectedItems" : "selectedItem";
+      var defaultValuePropName = multiple ? "initialSelectedItems" : "initialSelectedItem";
 
-    var placeholder = props.placeholder,
-        disabled = props.disabled,
-        required = props.required,
-        onBlur = props.onBlur,
-        onFocus = props.onFocus,
-        onInputChange = props.onInputChange,
-        variant = props.variant,
-        error = props.error,
-        customStylesheet = props.stylesheet,
-        typable = props.typable,
-        multiple = props.multiple,
-        otherProps = _objectWithoutProperties$5(props, ["placeholder", "disabled", "required", "onBlur", "onFocus", "onInputChange", "variant", "error", "stylesheet", "typable", "multiple"]);
+      return _ref2 = {
+        id: id,
+        onChange: this.handleChange,
+        itemToString: formatOption
+      }, _defineProperty(_ref2, valuePropName, value), _defineProperty(_ref2, defaultValuePropName, defaultValue), _defineProperty(_ref2, "inputValue", this.getInputValue()), _ref2;
+    }
 
-    var className = otherProps.className,
-        tabIndex = otherProps.tabIndex;
+    /**
+     * The controlled value for the input element
+     * @see https://github.com/paypal/downshift#inputvalue
+     * @returns {string|undefined}
+     */
 
-    var inputClassName = className && className.split(" ").reduce(function (acc, cur) {
-      return cx(acc, cur.trim() + "-input-wrapper");
-    }, "");
+  }, {
+    key: "getInputValue",
+    value: function getInputValue() {
+      var _props2 = this.props,
+          multiple = _props2.multiple,
+          formatOption = _props2.formatOption,
+          value = _props2.value;
 
-    var inputProps = getInputProps({
-      id: id,
-      error: error,
-      placeholder: placeholder,
-      disabled: disabled,
-      isOpen: isOpen,
-      required: required,
-      onBlur: onBlur,
-      onFocus: onFocus,
-      onClick: toggleMenu,
-      onInputChange: onInputChange,
-      tabIndex: tabIndex,
-      variant: variant,
-      className: inputClassName,
-      stylesheet: customStylesheet,
-      typable: typable,
-      multiple: multiple
-    });
 
-    return React.createElement(InputPresenter, _extends$7({ key: "input" }, inputProps));
-  };
+      if (value === undefined) {
+        return undefined;
+      }
+      if (multiple) {
+        return value.map(formatOption).join(", ");
+      }
 
-  /**
-   * @param {DownshiftHelpers} downshift
-   * @returns {JSX.Element}
-   */
-  var renderMenu = function renderMenu(downshift) {
-    var getItemProps = downshift.getItemProps,
-        getMenuProps = downshift.getMenuProps,
-        highlightedIndex = downshift.highlightedIndex,
-        isOpen = downshift.isOpen,
-        selectedItem = downshift.selectedItem,
-        selectedItems = downshift.selectedItems;
+      return formatOption(value);
+    }
 
-    var formatOption = props.formatOption,
-        multiple = props.multiple,
-        options = props.options,
-        renderOption = props.renderOption,
-        customStylesheet = props.stylesheet,
-        otherProps = _objectWithoutProperties$5(props, ["formatOption", "multiple", "options", "renderOption", "stylesheet"]);
+    /**
+     * > Why not just pass the `props.onChange` directly to Downshift?
+     *
+     *  Downshift provides all of it's helpers and state to `onChange`.
+     *  We don't want to expose the entire Downshift API to consumers.
+     *
+     * @param {OptionMeta | OptionMeta[]} value
+     * @param {DownshiftHelpers} downshift
+     */
 
-    var className = otherProps.className;
+  }, {
+    key: "renderInput",
 
 
-    var menuClassName = className && className.split(" ").reduce(function (acc, cur) {
-      return cx(acc, cur.trim() + "-menu-wrapper");
-    }, "");
+    /**
+     * @param {DownshiftHelpers} downshift
+     * @returns {JSX.Element}
+     */
+    value: function renderInput(downshift) {
+      var id = downshift.id,
+          isOpen = downshift.isOpen,
+          toggleMenu = downshift.toggleMenu,
+          getInputProps = downshift.getInputProps;
 
-    var menuProps = getMenuProps({
-      isOpen: isOpen,
-      refKey: "innerRef",
-      className: menuClassName,
-      stylesheet: customStylesheet
-    });
+      var _props3 = this.props,
+          placeholder = _props3.placeholder,
+          disabled = _props3.disabled,
+          required = _props3.required,
+          onBlur = _props3.onBlur,
+          onFocus = _props3.onFocus,
+          onInputChange = _props3.onInputChange,
+          variant = _props3.variant,
+          error = _props3.error,
+          customStylesheet = _props3.stylesheet,
+          typable = _props3.typable,
+          multiple = _props3.multiple,
+          otherProps = _objectWithoutProperties$5(_props3, ["placeholder", "disabled", "required", "onBlur", "onFocus", "onInputChange", "variant", "error", "stylesheet", "typable", "multiple"]);
 
-    var children = renderOptions({
-      formatOption: formatOption,
-      getItemProps: getItemProps,
-      highlightedIndex: highlightedIndex,
-      multiple: multiple,
-      options: options,
-      renderOption: renderOption,
-      selectedItem: selectedItem,
-      selectedItems: selectedItems,
-      stylesheet: customStylesheet
-    });
+      var className = otherProps.className,
+          tabIndex = otherProps.tabIndex;
 
-    return React.createElement(
-      MenuPresenter,
-      _extends$7({ key: "menu" }, menuProps),
-      children
-    );
-  };
+      var inputClassName = className && className.split(" ").reduce(function (acc, cur) {
+        return cx(acc, cur.trim() + "-input-wrapper");
+      }, "");
 
-  /**
-   * @param {DownshiftHelpers} downshift
-   * @returns {JSX.Element}
-   */
-  var renderPresenter = function renderPresenter(downshift) {
-    var children = props.children,
-        defaultValue = props.defaultValue,
-        disabled = props.disabled,
-        formatOption = props.formatOption,
-        id = props.id,
-        multiple = props.multiple,
-        onBlur = props.onBlur,
-        onChange = props.onChange,
-        onFocus = props.onFocus,
-        onInputChange = props.onInputChange,
-        options = props.options,
-        placeholder = props.placeholder,
-        renderOption = props.renderOption,
-        required = props.required,
-        tabIndex = props.tabIndex,
-        typable = props.typable,
-        value = props.value,
-        variant = props.variant,
-        error = props.error,
-        otherProps = _objectWithoutProperties$5(props, ["children", "defaultValue", "disabled", "formatOption", "id", "multiple", "onBlur", "onChange", "onFocus", "onInputChange", "options", "placeholder", "renderOption", "required", "tabIndex", "typable", "value", "variant", "error"]);
+      var inputProps = getInputProps({
+        id: id,
+        error: error,
+        placeholder: placeholder,
+        disabled: disabled,
+        isOpen: isOpen,
+        required: required,
+        onBlur: onBlur,
+        onFocus: onFocus,
+        onClick: toggleMenu,
+        onInputChange: onInputChange,
+        tabIndex: tabIndex,
+        variant: variant,
+        className: inputClassName,
+        stylesheet: customStylesheet,
+        typable: typable,
+        multiple: multiple
+      });
 
+      return React.createElement(InputPresenter, _extends$7({ key: "input" }, inputProps));
+    }
+
     /**
-     * The `Wrapper` presenter is used as a function to avoid having to
-     * use Downshift's `getRootProps`
-     * @see https://github.com/paypal/downshift#getrootprops
+     * @param {DownshiftHelpers} downshift
+     * @returns {JSX.Element}
      */
 
+  }, {
+    key: "renderMenu",
+    value: function renderMenu(downshift) {
+      var getItemProps = downshift.getItemProps,
+          getMenuProps = downshift.getMenuProps,
+          highlightedIndex = downshift.highlightedIndex,
+          isOpen = downshift.isOpen,
+          selectedItem = downshift.selectedItem,
+          selectedItems = downshift.selectedItems;
 
-    return WrapperPresenter(_extends$7({
-      disabled: disabled,
-      children: [renderInput(downshift), renderMenu(downshift)]
-    }, otherProps));
-  };
+      var _props4 = this.props,
+          formatOption = _props4.formatOption,
+          multiple = _props4.multiple,
+          options = _props4.options,
+          renderOption = _props4.renderOption,
+          customStylesheet = _props4.stylesheet,
+          otherProps = _objectWithoutProperties$5(_props4, ["formatOption", "multiple", "options", "renderOption", "stylesheet"]);
 
-  var multiple = props.multiple;
+      var className = otherProps.className;
 
-  var Behavior = multiple ? MultiDownshift : Downshift;
 
-  return React.createElement(
-    Behavior,
-    getBehaviorProps(),
-    renderPresenter
-  );
-};
+      var menuClassName = className && className.split(" ").reduce(function (acc, cur) {
+        return cx(acc, cur.trim() + "-menu-wrapper");
+      }, "");
 
-Dropdown.displayName = "Dropdown";
+      var menuProps = getMenuProps({
+        isOpen: isOpen,
+        refKey: "innerRef",
+        className: menuClassName,
+        stylesheet: customStylesheet
+      });
 
+      var children = renderOptions({
+        formatOption: formatOption,
+        getItemProps: getItemProps,
+        highlightedIndex: highlightedIndex,
+        multiple: multiple,
+        options: options,
+        renderOption: renderOption,
+        selectedItem: selectedItem,
+        selectedItems: selectedItems,
+        stylesheet: customStylesheet
+      });
+
+      return React.createElement(
+        MenuPresenter,
+        _extends$7({ key: "menu" }, menuProps),
+        children
+      );
+    }
+
+    /**
+     * @param {DownshiftHelpers} downshift
+     * @returns {JSX.Element}
+     */
+
+  }, {
+    key: "render",
+    value: function render() {
+      var multiple = this.props.multiple;
+
+      var Behavior = multiple ? MultiDownshift : Downshift;
+
+      return React.createElement(
+        Behavior,
+        this.getBehaviorProps(),
+        this.renderPresenter
+      );
+    }
+  }]);
+
+  return Dropdown;
+}(Component);
+
 Dropdown.propTypes = {
@@ -1208,3 +1277,2 @@ /**
 };
-
 Dropdown.defaultProps = {
@@ -1211,0 +1279,0 @@ /**

build/index.js

@@ -7,3 +7,4 @@ 'use strict';
 
-var React = _interopDefault(require('react'));
+var React = require('react');
+var React__default = _interopDefault(React);
 var emotion = require('emotion');
@@ -95,3 +96,3 @@ var icons = require('@hig/icons');
 
-  return React.createElement(
+  return React__default.createElement(
     ThemeContext__default.Consumer,
@@ -106,6 +107,6 @@ null,
 
-      return React.createElement(
+      return React__default.createElement(
         "div",
         { className: emotion.css(stylesheet(props, resolvedRoles).inputWrapper) },
-        React.createElement(Input, _extends$1({}, otherProps, {
+        React__default.createElement(Input, _extends$1({}, otherProps, {
           multiple: multiple,
@@ -116,3 +117,3 @@ onChange: handleChange,
         })),
-        React.createElement(CaretIcon, {
+        React__default.createElement(CaretIcon, {
           style: stylesheet(props, resolvedRoles).caret,
@@ -175,3 +176,3 @@ color: iconColor
 
-  return React.createElement(
+  return React__default.createElement(
     ThemeContext.ThemeContext.Consumer,
@@ -181,3 +182,3 @@ null,
       var resolvedRoles = _ref.resolvedRoles;
-      return React.createElement(
+      return React__default.createElement(
         "div",
@@ -277,3 +278,3 @@ _extends$2({}, otherProps, {
 
-  return React.createElement(
+  return React__default.createElement(
     "div",
@@ -631,2 +632,4 @@ _extends$3({}, otherProps, {
 
+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; }; }();
+
 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; };
@@ -636,2 +639,8 @@
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 function OptionWrapper(props) {
@@ -651,3 +660,3 @@ var children = props.children,
 
-  return React.createElement(
+  return React__default.createElement(
     ThemeContext.ThemeContext.Consumer,
@@ -657,3 +666,3 @@ null,
       var resolvedRoles = _ref.resolvedRoles;
-      return React.createElement(
+      return React__default.createElement(
         "div",
@@ -688,36 +697,53 @@ {
 };
-var OptionPresenter = function OptionPresenter(props) {
-  var children = props.children,
-      selected = props.selected,
-      otherProps = _objectWithoutProperties$3(props, ["children", "selected"]);
 
-  return React.createElement(
-    ThemeContext.ThemeContext.Consumer,
-    null,
-    function (_ref2) {
-      var resolvedRoles = _ref2.resolvedRoles,
-          metadata = _ref2.metadata;
+var OptionPresenter = function (_Component) {
+  _inherits(OptionPresenter, _Component);
 
-      var Icon = metadata.densityId === "medium-density" ? icons.CheckmarkSUI : icons.CheckmarkXsUI;
-      var styles = stylesheet$3(props, resolvedRoles);
+  function OptionPresenter() {
+    _classCallCheck(this, OptionPresenter);
 
-      return React.createElement(
-        OptionWrapper,
-        _extends$5({ selected: selected }, otherProps),
-        React.createElement(
-          "span",
-          null,
-          children
-        ),
-        React.createElement(
-          "div",
-          { className: emotion.css(styles.optionCheckWrapper) },
-          React.createElement(Icon, null)
-        )
+    return _possibleConstructorReturn(this, (OptionPresenter.__proto__ || Object.getPrototypeOf(OptionPresenter)).apply(this, arguments));
+  }
+
+  _createClass(OptionPresenter, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _props = this.props,
+          children = _props.children,
+          selected = _props.selected,
+          otherProps = _objectWithoutProperties$3(_props, ["children", "selected"]);
+
+      return React__default.createElement(
+        ThemeContext.ThemeContext.Consumer,
+        null,
+        function (_ref2) {
+          var resolvedRoles = _ref2.resolvedRoles,
+              metadata = _ref2.metadata;
+
+          var Icon = metadata.densityId === "medium-density" ? icons.CheckmarkSUI : icons.CheckmarkXsUI;
+          var styles = stylesheet$3(_this2.props, resolvedRoles);
+
+          return React__default.createElement(
+            OptionWrapper,
+            _extends$5({ selected: selected }, otherProps),
+            React__default.createElement(
+              "span",
+              null,
+              children
+            ),
+            React__default.createElement(
+              "div",
+              { className: emotion.css(styles.optionCheckWrapper) },
+              React__default.createElement(Icon, null)
+            )
+          );
+        }
       );
     }
-  );
-};
+  }]);
 
-OptionPresenter.displayName = "OptionPresenter";
+  return OptionPresenter;
+}(React.Component);
 
@@ -855,3 +881,3 @@ OptionPresenter.propTypes = {
       var optionLabel = option && option.item ? option.item : option;
-      result = React.createElement(
+      result = React__default.createElement(
         OptionPresenter,
@@ -908,6 +934,14 @@ _extends$6({}, itemProps, { stylesheet: customStylesheet }),
 
-function _objectWithoutProperties$5(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+var _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 _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+function _objectWithoutProperties$5(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+
 /** @typedef {import("./presenters/renderOptions").OptionMeta} OptionMeta */
@@ -918,217 +952,253 @@ /** @typedef {import("downshift").ControllerStateAndHelpers} DownshiftHelpers */
 
-var Dropdown = function Dropdown(props) {
-  /**
-   * The controlled value for the input element
-   * @see https://github.com/paypal/downshift#inputvalue
-   * @returns {string|undefined}
-   */
-  var getInputValue = function getInputValue() {
-    var multiple = props.multiple,
-        formatOption = props.formatOption,
-        value = props.value;
+var Dropdown = function (_Component) {
+  _inherits$1(Dropdown, _Component);
 
+  function Dropdown() {
+    var _ref;
 
-    if (value === undefined) {
-      return undefined;
+    var _temp, _this, _ret;
+
+    _classCallCheck$1(this, Dropdown);
+
+    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
     }
-    if (multiple) {
-      return value.map(formatOption).join(", ");
-    }
 
-    return formatOption(value);
-  };
+    return _ret = (_temp = (_this = _possibleConstructorReturn$1(this, (_ref = Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).call.apply(_ref, [this].concat(args))), _this), _this.handleChange = function (value) {
+      var onChange = _this.props.onChange;
 
-  /**
-   * > Why not just pass the `props.onChange` directly to Downshift?
-   *
-   *  Downshift provides all of it's helpers and state to `onChange`.
-   *  We don't want to expose the entire Downshift API to consumers.
-   *
-   * @param {OptionMeta | OptionMeta[]} value
-   * @param {DownshiftHelpers} downshift
-   */
-  var handleChange = function handleChange(value) {
-    var onChange = props.onChange;
 
+      if (onChange) {
+        onChange(value);
+      }
+    }, _this.renderPresenter = function (downshift) {
+      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,
+          onInputChange = _this$props.onInputChange,
+          options = _this$props.options,
+          placeholder = _this$props.placeholder,
+          renderOption = _this$props.renderOption,
+          required = _this$props.required,
+          tabIndex = _this$props.tabIndex,
+          typable = _this$props.typable,
+          value = _this$props.value,
+          variant = _this$props.variant,
+          error = _this$props.error,
+          otherProps = _objectWithoutProperties$5(_this$props, ["children", "defaultValue", "disabled", "formatOption", "id", "multiple", "onBlur", "onChange", "onFocus", "onInputChange", "options", "placeholder", "renderOption", "required", "tabIndex", "typable", "value", "variant", "error"]);
 
-    if (onChange) {
-      onChange(value);
-    }
-  };
+      /**
+       * The `Wrapper` presenter is used as a function to avoid having to
+       * use Downshift's `getRootProps`
+       * @see https://github.com/paypal/downshift#getrootprops
+       */
 
-  var getBehaviorProps = function getBehaviorProps() {
-    var _ref;
 
-    var id = props.id,
-        multiple = props.multiple,
-        formatOption = props.formatOption,
-        value = props.value,
-        defaultValue = props.defaultValue;
+      return WrapperPresenter(_extends$7({
+        disabled: disabled,
+        children: [_this.renderInput(downshift), _this.renderMenu(downshift)]
+      }, otherProps));
+    }, _temp), _possibleConstructorReturn$1(_this, _ret);
+  }
 
-    var valuePropName = multiple ? "selectedItems" : "selectedItem";
-    var defaultValuePropName = multiple ? "initialSelectedItems" : "initialSelectedItem";
+  _createClass$1(Dropdown, [{
+    key: "getBehaviorProps",
+    value: function getBehaviorProps() {
+      var _ref2;
 
-    return _ref = {
-      id: id,
-      onChange: handleChange,
-      itemToString: formatOption
-    }, _defineProperty(_ref, valuePropName, value), _defineProperty(_ref, defaultValuePropName, defaultValue), _defineProperty(_ref, "inputValue", getInputValue()), _ref;
-  };
+      var _props = this.props,
+          id = _props.id,
+          multiple = _props.multiple,
+          formatOption = _props.formatOption,
+          value = _props.value,
+          defaultValue = _props.defaultValue;
 
-  /**
-   * @param {DownshiftHelpers} downshift
-   * @returns {JSX.Element}
-   */
-  var renderInput = function renderInput(downshift) {
-    var id = downshift.id,
-        isOpen = downshift.isOpen,
-        toggleMenu = downshift.toggleMenu,
-        getInputProps = downshift.getInputProps;
+      var valuePropName = multiple ? "selectedItems" : "selectedItem";
+      var defaultValuePropName = multiple ? "initialSelectedItems" : "initialSelectedItem";
 
-    var placeholder = props.placeholder,
-        disabled = props.disabled,
-        required = props.required,
-        onBlur = props.onBlur,
-        onFocus = props.onFocus,
-        onInputChange = props.onInputChange,
-        variant = props.variant,
-        error = props.error,
-        customStylesheet = props.stylesheet,
-        typable = props.typable,
-        multiple = props.multiple,
-        otherProps = _objectWithoutProperties$5(props, ["placeholder", "disabled", "required", "onBlur", "onFocus", "onInputChange", "variant", "error", "stylesheet", "typable", "multiple"]);
+      return _ref2 = {
+        id: id,
+        onChange: this.handleChange,
+        itemToString: formatOption
+      }, _defineProperty(_ref2, valuePropName, value), _defineProperty(_ref2, defaultValuePropName, defaultValue), _defineProperty(_ref2, "inputValue", this.getInputValue()), _ref2;
+    }
 
-    var className = otherProps.className,
-        tabIndex = otherProps.tabIndex;
+    /**
+     * The controlled value for the input element
+     * @see https://github.com/paypal/downshift#inputvalue
+     * @returns {string|undefined}
+     */
 
-    var inputClassName = className && className.split(" ").reduce(function (acc, cur) {
-      return emotion.cx(acc, cur.trim() + "-input-wrapper");
-    }, "");
+  }, {
+    key: "getInputValue",
+    value: function getInputValue() {
+      var _props2 = this.props,
+          multiple = _props2.multiple,
+          formatOption = _props2.formatOption,
+          value = _props2.value;
 
-    var inputProps = getInputProps({
-      id: id,
-      error: error,
-      placeholder: placeholder,
-      disabled: disabled,
-      isOpen: isOpen,
-      required: required,
-      onBlur: onBlur,
-      onFocus: onFocus,
-      onClick: toggleMenu,
-      onInputChange: onInputChange,
-      tabIndex: tabIndex,
-      variant: variant,
-      className: inputClassName,
-      stylesheet: customStylesheet,
-      typable: typable,
-      multiple: multiple
-    });
 
-    return React.createElement(InputPresenter, _extends$7({ key: "input" }, inputProps));
-  };
+      if (value === undefined) {
+        return undefined;
+      }
+      if (multiple) {
+        return value.map(formatOption).join(", ");
+      }
 
-  /**
-   * @param {DownshiftHelpers} downshift
-   * @returns {JSX.Element}
-   */
-  var renderMenu = function renderMenu(downshift) {
-    var getItemProps = downshift.getItemProps,
-        getMenuProps = downshift.getMenuProps,
-        highlightedIndex = downshift.highlightedIndex,
-        isOpen = downshift.isOpen,
-        selectedItem = downshift.selectedItem,
-        selectedItems = downshift.selectedItems;
+      return formatOption(value);
+    }
 
-    var formatOption = props.formatOption,
-        multiple = props.multiple,
-        options = props.options,
-        renderOption = props.renderOption,
-        customStylesheet = props.stylesheet,
-        otherProps = _objectWithoutProperties$5(props, ["formatOption", "multiple", "options", "renderOption", "stylesheet"]);
+    /**
+     * > Why not just pass the `props.onChange` directly to Downshift?
+     *
+     *  Downshift provides all of it's helpers and state to `onChange`.
+     *  We don't want to expose the entire Downshift API to consumers.
+     *
+     * @param {OptionMeta | OptionMeta[]} value
+     * @param {DownshiftHelpers} downshift
+     */
 
-    var className = otherProps.className;
+  }, {
+    key: "renderInput",
 
 
-    var menuClassName = className && className.split(" ").reduce(function (acc, cur) {
-      return emotion.cx(acc, cur.trim() + "-menu-wrapper");
-    }, "");
+    /**
+     * @param {DownshiftHelpers} downshift
+     * @returns {JSX.Element}
+     */
+    value: function renderInput(downshift) {
+      var id = downshift.id,
+          isOpen = downshift.isOpen,
+          toggleMenu = downshift.toggleMenu,
+          getInputProps = downshift.getInputProps;
 
-    var menuProps = getMenuProps({
-      isOpen: isOpen,
-      refKey: "innerRef",
-      className: menuClassName,
-      stylesheet: customStylesheet
-    });
+      var _props3 = this.props,
+          placeholder = _props3.placeholder,
+          disabled = _props3.disabled,
+          required = _props3.required,
+          onBlur = _props3.onBlur,
+          onFocus = _props3.onFocus,
+          onInputChange = _props3.onInputChange,
+          variant = _props3.variant,
+          error = _props3.error,
+          customStylesheet = _props3.stylesheet,
+          typable = _props3.typable,
+          multiple = _props3.multiple,
+          otherProps = _objectWithoutProperties$5(_props3, ["placeholder", "disabled", "required", "onBlur", "onFocus", "onInputChange", "variant", "error", "stylesheet", "typable", "multiple"]);
 
-    var children = renderOptions({
-      formatOption: formatOption,
-      getItemProps: getItemProps,
-      highlightedIndex: highlightedIndex,
-      multiple: multiple,
-      options: options,
-      renderOption: renderOption,
-      selectedItem: selectedItem,
-      selectedItems: selectedItems,
-      stylesheet: customStylesheet
-    });
+      var className = otherProps.className,
+          tabIndex = otherProps.tabIndex;
 
-    return React.createElement(
-      MenuPresenter,
-      _extends$7({ key: "menu" }, menuProps),
-      children
-    );
-  };
+      var inputClassName = className && className.split(" ").reduce(function (acc, cur) {
+        return emotion.cx(acc, cur.trim() + "-input-wrapper");
+      }, "");
 
-  /**
-   * @param {DownshiftHelpers} downshift
-   * @returns {JSX.Element}
-   */
-  var renderPresenter = function renderPresenter(downshift) {
-    var children = props.children,
-        defaultValue = props.defaultValue,
-        disabled = props.disabled,
-        formatOption = props.formatOption,
-        id = props.id,
-        multiple = props.multiple,
-        onBlur = props.onBlur,
-        onChange = props.onChange,
-        onFocus = props.onFocus,
-        onInputChange = props.onInputChange,
-        options = props.options,
-        placeholder = props.placeholder,
-        renderOption = props.renderOption,
-        required = props.required,
-        tabIndex = props.tabIndex,
-        typable = props.typable,
-        value = props.value,
-        variant = props.variant,
-        error = props.error,
-        otherProps = _objectWithoutProperties$5(props, ["children", "defaultValue", "disabled", "formatOption", "id", "multiple", "onBlur", "onChange", "onFocus", "onInputChange", "options", "placeholder", "renderOption", "required", "tabIndex", "typable", "value", "variant", "error"]);
+      var inputProps = getInputProps({
+        id: id,
+        error: error,
+        placeholder: placeholder,
+        disabled: disabled,
+        isOpen: isOpen,
+        required: required,
+        onBlur: onBlur,
+        onFocus: onFocus,
+        onClick: toggleMenu,
+        onInputChange: onInputChange,
+        tabIndex: tabIndex,
+        variant: variant,
+        className: inputClassName,
+        stylesheet: customStylesheet,
+        typable: typable,
+        multiple: multiple
+      });
 
+      return React__default.createElement(InputPresenter, _extends$7({ key: "input" }, inputProps));
+    }
+
     /**
-     * The `Wrapper` presenter is used as a function to avoid having to
-     * use Downshift's `getRootProps`
-     * @see https://github.com/paypal/downshift#getrootprops
+     * @param {DownshiftHelpers} downshift
+     * @returns {JSX.Element}
      */
 
+  }, {
+    key: "renderMenu",
+    value: function renderMenu(downshift) {
+      var getItemProps = downshift.getItemProps,
+          getMenuProps = downshift.getMenuProps,
+          highlightedIndex = downshift.highlightedIndex,
+          isOpen = downshift.isOpen,
+          selectedItem = downshift.selectedItem,
+          selectedItems = downshift.selectedItems;
 
-    return WrapperPresenter(_extends$7({
-      disabled: disabled,
-      children: [renderInput(downshift), renderMenu(downshift)]
-    }, otherProps));
-  };
+      var _props4 = this.props,
+          formatOption = _props4.formatOption,
+          multiple = _props4.multiple,
+          options = _props4.options,
+          renderOption = _props4.renderOption,
+          customStylesheet = _props4.stylesheet,
+          otherProps = _objectWithoutProperties$5(_props4, ["formatOption", "multiple", "options", "renderOption", "stylesheet"]);
 
-  var multiple = props.multiple;
+      var className = otherProps.className;
 
-  var Behavior = multiple ? MultiDownshift : Downshift;
 
-  return React.createElement(
-    Behavior,
-    getBehaviorProps(),
-    renderPresenter
-  );
-};
+      var menuClassName = className && className.split(" ").reduce(function (acc, cur) {
+        return emotion.cx(acc, cur.trim() + "-menu-wrapper");
+      }, "");
 
-Dropdown.displayName = "Dropdown";
+      var menuProps = getMenuProps({
+        isOpen: isOpen,
+        refKey: "innerRef",
+        className: menuClassName,
+        stylesheet: customStylesheet
+      });
 
+      var children = renderOptions({
+        formatOption: formatOption,
+        getItemProps: getItemProps,
+        highlightedIndex: highlightedIndex,
+        multiple: multiple,
+        options: options,
+        renderOption: renderOption,
+        selectedItem: selectedItem,
+        selectedItems: selectedItems,
+        stylesheet: customStylesheet
+      });
+
+      return React__default.createElement(
+        MenuPresenter,
+        _extends$7({ key: "menu" }, menuProps),
+        children
+      );
+    }
+
+    /**
+     * @param {DownshiftHelpers} downshift
+     * @returns {JSX.Element}
+     */
+
+  }, {
+    key: "render",
+    value: function render() {
+      var multiple = this.props.multiple;
+
+      var Behavior = multiple ? MultiDownshift : Downshift;
+
+      return React__default.createElement(
+        Behavior,
+        this.getBehaviorProps(),
+        this.renderPresenter
+      );
+    }
+  }]);
+
+  return Dropdown;
+}(React.Component);
+
 Dropdown.propTypes = {
@@ -1225,3 +1295,2 @@ /**
 };
-
 Dropdown.defaultProps = {
@@ -1228,0 +1297,0 @@ /**

CHANGELOG.md

@@ -0,1 +1,13 @@
+# [@hig/dropdown-v2.4.3](https://github.com/Autodesk/hig/compare/@hig/dropdown@2.4.2...@hig/dropdown@2.4.3) (2022-01-12)
+
+
+### Bug Fixes
+
+* Forcing semantic release by editing readmes ([d39b61f](https://github.com/Autodesk/hig/commit/d39b61f))
+
+
+### Reverts
+
+* "Revert "Revert "feat : Migrate all repository to React v17.0 """ ([bf78986](https://github.com/Autodesk/hig/commit/bf78986))
+
 # [@hig/dropdown-v2.4.2](https://github.com/Autodesk/hig/compare/@hig/dropdown@2.4.1...@hig/dropdown@2.4.2) (2022-01-12)
@@ -2,0 +14,0 @@

package.json

 {
   "name": "@hig/dropdown",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "description": "HIG Dropdown",
@@ -20,5 +20,5 @@ "author": "Autodesk Inc.",
   "dependencies": {
-    "@hig/icons": "^3.4.3",
-    "@hig/input": "^1.3.1",
-    "@hig/multi-downshift": "^1.0.0",
+    "@hig/icons": "^3.4.4",
+    "@hig/input": "^1.3.2",
+    "@hig/multi-downshift": "^1.0.1",
     "downshift": "^3.2.0",
@@ -30,5 +30,5 @@ "emotion": "^10.0.0",
   "peerDependencies": {
-    "@hig/theme-context": "^3.0.2",
-    "@hig/theme-data": "^2.22.0",
-    "react": "^17.0.0"
+    "@hig/theme-context": "^3.0.3",
+    "@hig/theme-data": "^2.22.1",
+    "react": "^15.4.1 || ^16.3.2"
   },
@@ -35,0 +35,0 @@ "devDependencies": {

README.md

@@ -7,2 +7,3 @@ # Dropdown
 
+
 ## Getting started
@@ -9,0 +10,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

114343

increased by9.91%

Lines of code

2581

increased by4.07%

Number of lines in readme file

121

increased by0.83%

Worsened metrics

Number of downloads

22

decreased by-15.38%

Dependency changes

• - Removedreact@17.0.2(transitive)

• Updated@hig/icons@^3.4.4

• Updated@hig/input@^1.3.2

• Updated@hig/multi-downshift@^1.0.1