@hig/dropdown - npm Package Compare versions

Comparing version 2.4.3 to 3.0.0

build/index.es.js

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React from 'react';
 import { css, cx } from 'emotion';
@@ -617,4 +617,2 @@ 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; };
@@ -624,8 +622,2 @@
 
-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) {
@@ -680,53 +672,36 @@ var children = props.children,
 };
+var OptionPresenter = function OptionPresenter(props) {
+  var children = props.children,
+      selected = props.selected,
+      otherProps = _objectWithoutProperties$3(props, ["children", "selected"]);
 
-var OptionPresenter = function (_Component) {
-  _inherits(OptionPresenter, _Component);
+  return React.createElement(
+    ThemeContext$1.Consumer,
+    null,
+    function (_ref2) {
+      var resolvedRoles = _ref2.resolvedRoles,
+          metadata = _ref2.metadata;
 
-  function OptionPresenter() {
-    _classCallCheck(this, OptionPresenter);
+      var Icon = metadata.densityId === "medium-density" ? CheckmarkSUI : CheckmarkXsUI;
+      var styles = stylesheet$3(props, resolvedRoles);
 
-    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(
-        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)
-            )
-          );
-        }
+        OptionWrapper,
+        _extends$5({ selected: selected }, otherProps),
+        React.createElement(
+          "span",
+          null,
+          children
+        ),
+        React.createElement(
+          "div",
+          { className: css(styles.optionCheckWrapper) },
+          React.createElement(Icon, null)
+        )
       );
     }
-  }]);
+  );
+};
 
-  return OptionPresenter;
-}(Component);
+OptionPresenter.displayName = "OptionPresenter";
 
@@ -916,14 +891,6 @@ OptionPresenter.propTypes = {
 
-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$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 _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 */
@@ -934,253 +901,217 @@ /** @typedef {import("downshift").ControllerStateAndHelpers} DownshiftHelpers */
 
-var Dropdown = function (_Component) {
-  _inherits$1(Dropdown, _Component);
+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;
 
-  function Dropdown() {
-    var _ref;
 
-    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 (value === undefined) {
+      return undefined;
     }
+    if (multiple) {
+      return value.map(formatOption).join(", ");
+    }
 
-    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;
+    return formatOption(value);
+  };
 
+  /**
+   * > 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"]);
 
-      /**
-       * The `Wrapper` presenter is used as a function to avoid having to
-       * use Downshift's `getRootProps`
-       * @see https://github.com/paypal/downshift#getrootprops
-       */
+    if (onChange) {
+      onChange(value);
+    }
+  };
 
+  var getBehaviorProps = function getBehaviorProps() {
+    var _ref;
 
-      return WrapperPresenter(_extends$7({
-        disabled: disabled,
-        children: [_this.renderInput(downshift), _this.renderMenu(downshift)]
-      }, otherProps));
-    }, _temp), _possibleConstructorReturn$1(_this, _ret);
-  }
+    var id = props.id,
+        multiple = props.multiple,
+        formatOption = props.formatOption,
+        value = props.value,
+        defaultValue = props.defaultValue;
 
-  _createClass$1(Dropdown, [{
-    key: "getBehaviorProps",
-    value: function getBehaviorProps() {
-      var _ref2;
+    var valuePropName = multiple ? "selectedItems" : "selectedItem";
+    var defaultValuePropName = multiple ? "initialSelectedItems" : "initialSelectedItem";
 
-      var _props = this.props,
-          id = _props.id,
-          multiple = _props.multiple,
-          formatOption = _props.formatOption,
-          value = _props.value,
-          defaultValue = _props.defaultValue;
+    return _ref = {
+      id: id,
+      onChange: handleChange,
+      itemToString: formatOption
+    }, _defineProperty(_ref, valuePropName, value), _defineProperty(_ref, defaultValuePropName, defaultValue), _defineProperty(_ref, "inputValue", getInputValue()), _ref;
+  };
 
-      var valuePropName = multiple ? "selectedItems" : "selectedItem";
-      var defaultValuePropName = multiple ? "initialSelectedItems" : "initialSelectedItem";
+  /**
+   * @param {DownshiftHelpers} downshift
+   * @returns {JSX.Element}
+   */
+  var renderInput = function renderInput(downshift) {
+    var id = downshift.id,
+        isOpen = downshift.isOpen,
+        toggleMenu = downshift.toggleMenu,
+        getInputProps = downshift.getInputProps;
 
-      return _ref2 = {
-        id: id,
-        onChange: this.handleChange,
-        itemToString: formatOption
-      }, _defineProperty(_ref2, valuePropName, value), _defineProperty(_ref2, defaultValuePropName, defaultValue), _defineProperty(_ref2, "inputValue", this.getInputValue()), _ref2;
-    }
+    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"]);
 
-    /**
-     * The controlled value for the input element
-     * @see https://github.com/paypal/downshift#inputvalue
-     * @returns {string|undefined}
-     */
+    var className = otherProps.className,
+        tabIndex = otherProps.tabIndex;
 
-  }, {
-    key: "getInputValue",
-    value: function getInputValue() {
-      var _props2 = this.props,
-          multiple = _props2.multiple,
-          formatOption = _props2.formatOption,
-          value = _props2.value;
+    var inputClassName = className && className.split(" ").reduce(function (acc, cur) {
+      return cx(acc, cur.trim() + "-input-wrapper");
+    }, "");
 
+    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
+    });
 
-      if (value === undefined) {
-        return undefined;
-      }
-      if (multiple) {
-        return value.map(formatOption).join(", ");
-      }
+    return React.createElement(InputPresenter, _extends$7({ key: "input" }, inputProps));
+  };
 
-      return formatOption(value);
-    }
+  /**
+   * @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;
 
-    /**
-     * > 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 formatOption = props.formatOption,
+        multiple = props.multiple,
+        options = props.options,
+        renderOption = props.renderOption,
+        customStylesheet = props.stylesheet,
+        otherProps = _objectWithoutProperties$5(props, ["formatOption", "multiple", "options", "renderOption", "stylesheet"]);
 
-  }, {
-    key: "renderInput",
+    var className = otherProps.className;
 
 
-    /**
-     * @param {DownshiftHelpers} downshift
-     * @returns {JSX.Element}
-     */
-    value: function renderInput(downshift) {
-      var id = downshift.id,
-          isOpen = downshift.isOpen,
-          toggleMenu = downshift.toggleMenu,
-          getInputProps = downshift.getInputProps;
+    var menuClassName = className && className.split(" ").reduce(function (acc, cur) {
+      return cx(acc, cur.trim() + "-menu-wrapper");
+    }, "");
 
-      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 menuProps = getMenuProps({
+      isOpen: isOpen,
+      refKey: "innerRef",
+      className: menuClassName,
+      stylesheet: customStylesheet
+    });
 
-      var className = otherProps.className,
-          tabIndex = otherProps.tabIndex;
+    var children = renderOptions({
+      formatOption: formatOption,
+      getItemProps: getItemProps,
+      highlightedIndex: highlightedIndex,
+      multiple: multiple,
+      options: options,
+      renderOption: renderOption,
+      selectedItem: selectedItem,
+      selectedItems: selectedItems,
+      stylesheet: customStylesheet
+    });
 
-      var inputClassName = className && className.split(" ").reduce(function (acc, cur) {
-        return cx(acc, cur.trim() + "-input-wrapper");
-      }, "");
+    return React.createElement(
+      MenuPresenter,
+      _extends$7({ key: "menu" }, menuProps),
+      children
+    );
+  };
 
-      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
-      });
+  /**
+   * @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"]);
 
-      return React.createElement(InputPresenter, _extends$7({ key: "input" }, inputProps));
-    }
-
     /**
-     * @param {DownshiftHelpers} downshift
-     * @returns {JSX.Element}
+     * The `Wrapper` presenter is used as a function to avoid having to
+     * use Downshift's `getRootProps`
+     * @see https://github.com/paypal/downshift#getrootprops
      */
 
-  }, {
-    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;
 
-      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"]);
+    return WrapperPresenter(_extends$7({
+      disabled: disabled,
+      children: [renderInput(downshift), renderMenu(downshift)]
+    }, otherProps));
+  };
 
-      var className = otherProps.className;
+  var multiple = props.multiple;
 
+  var Behavior = multiple ? MultiDownshift : Downshift;
 
-      var menuClassName = className && className.split(" ").reduce(function (acc, cur) {
-        return cx(acc, cur.trim() + "-menu-wrapper");
-      }, "");
+  return React.createElement(
+    Behavior,
+    getBehaviorProps(),
+    renderPresenter
+  );
+};
 
-      var menuProps = getMenuProps({
-        isOpen: isOpen,
-        refKey: "innerRef",
-        className: menuClassName,
-        stylesheet: customStylesheet
-      });
+Dropdown.displayName = "Dropdown";
 
-      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 = {
@@ -1277,2 +1208,3 @@ /**
 };
+
 Dropdown.defaultProps = {
@@ -1279,0 +1211,0 @@ /**

build/index.js

@@ -7,4 +7,3 @@ 'use strict';
 
-var React = require('react');
-var React__default = _interopDefault(React);
+var React = _interopDefault(require('react'));
 var emotion = require('emotion');
@@ -96,3 +95,3 @@ var icons = require('@hig/icons');
 
-  return React__default.createElement(
+  return React.createElement(
     ThemeContext__default.Consumer,
@@ -107,6 +106,6 @@ null,
 
-      return React__default.createElement(
+      return React.createElement(
         "div",
         { className: emotion.css(stylesheet(props, resolvedRoles).inputWrapper) },
-        React__default.createElement(Input, _extends$1({}, otherProps, {
+        React.createElement(Input, _extends$1({}, otherProps, {
           multiple: multiple,
@@ -117,3 +116,3 @@ onChange: handleChange,
         })),
-        React__default.createElement(CaretIcon, {
+        React.createElement(CaretIcon, {
           style: stylesheet(props, resolvedRoles).caret,
@@ -176,3 +175,3 @@ color: iconColor
 
-  return React__default.createElement(
+  return React.createElement(
     ThemeContext.ThemeContext.Consumer,
@@ -182,3 +181,3 @@ null,
       var resolvedRoles = _ref.resolvedRoles;
-      return React__default.createElement(
+      return React.createElement(
         "div",
@@ -278,3 +277,3 @@ _extends$2({}, otherProps, {
 
-  return React__default.createElement(
+  return React.createElement(
     "div",
@@ -632,4 +631,2 @@ _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; };
@@ -639,8 +636,2 @@
 
-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) {
@@ -660,3 +651,3 @@ var children = props.children,
 
-  return React__default.createElement(
+  return React.createElement(
     ThemeContext.ThemeContext.Consumer,
@@ -666,3 +657,3 @@ null,
       var resolvedRoles = _ref.resolvedRoles;
-      return React__default.createElement(
+      return React.createElement(
         "div",
@@ -697,53 +688,36 @@ {
 };
+var OptionPresenter = function OptionPresenter(props) {
+  var children = props.children,
+      selected = props.selected,
+      otherProps = _objectWithoutProperties$3(props, ["children", "selected"]);
 
-var OptionPresenter = function (_Component) {
-  _inherits(OptionPresenter, _Component);
+  return React.createElement(
+    ThemeContext.ThemeContext.Consumer,
+    null,
+    function (_ref2) {
+      var resolvedRoles = _ref2.resolvedRoles,
+          metadata = _ref2.metadata;
 
-  function OptionPresenter() {
-    _classCallCheck(this, OptionPresenter);
+      var Icon = metadata.densityId === "medium-density" ? icons.CheckmarkSUI : icons.CheckmarkXsUI;
+      var styles = stylesheet$3(props, resolvedRoles);
 
-    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)
-            )
-          );
-        }
+      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 OptionPresenter;
-}(React.Component);
+OptionPresenter.displayName = "OptionPresenter";
 
@@ -881,3 +855,3 @@ OptionPresenter.propTypes = {
       var optionLabel = option && option.item ? option.item : option;
-      result = React__default.createElement(
+      result = React.createElement(
         OptionPresenter,
@@ -934,14 +908,6 @@ _extends$6({}, itemProps, { stylesheet: customStylesheet }),
 
-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$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 _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 */
@@ -952,253 +918,217 @@ /** @typedef {import("downshift").ControllerStateAndHelpers} DownshiftHelpers */
 
-var Dropdown = function (_Component) {
-  _inherits$1(Dropdown, _Component);
+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;
 
-  function Dropdown() {
-    var _ref;
 
-    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 (value === undefined) {
+      return undefined;
     }
+    if (multiple) {
+      return value.map(formatOption).join(", ");
+    }
 
-    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;
+    return formatOption(value);
+  };
 
+  /**
+   * > 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"]);
 
-      /**
-       * The `Wrapper` presenter is used as a function to avoid having to
-       * use Downshift's `getRootProps`
-       * @see https://github.com/paypal/downshift#getrootprops
-       */
+    if (onChange) {
+      onChange(value);
+    }
+  };
 
+  var getBehaviorProps = function getBehaviorProps() {
+    var _ref;
 
-      return WrapperPresenter(_extends$7({
-        disabled: disabled,
-        children: [_this.renderInput(downshift), _this.renderMenu(downshift)]
-      }, otherProps));
-    }, _temp), _possibleConstructorReturn$1(_this, _ret);
-  }
+    var id = props.id,
+        multiple = props.multiple,
+        formatOption = props.formatOption,
+        value = props.value,
+        defaultValue = props.defaultValue;
 
-  _createClass$1(Dropdown, [{
-    key: "getBehaviorProps",
-    value: function getBehaviorProps() {
-      var _ref2;
+    var valuePropName = multiple ? "selectedItems" : "selectedItem";
+    var defaultValuePropName = multiple ? "initialSelectedItems" : "initialSelectedItem";
 
-      var _props = this.props,
-          id = _props.id,
-          multiple = _props.multiple,
-          formatOption = _props.formatOption,
-          value = _props.value,
-          defaultValue = _props.defaultValue;
+    return _ref = {
+      id: id,
+      onChange: handleChange,
+      itemToString: formatOption
+    }, _defineProperty(_ref, valuePropName, value), _defineProperty(_ref, defaultValuePropName, defaultValue), _defineProperty(_ref, "inputValue", getInputValue()), _ref;
+  };
 
-      var valuePropName = multiple ? "selectedItems" : "selectedItem";
-      var defaultValuePropName = multiple ? "initialSelectedItems" : "initialSelectedItem";
+  /**
+   * @param {DownshiftHelpers} downshift
+   * @returns {JSX.Element}
+   */
+  var renderInput = function renderInput(downshift) {
+    var id = downshift.id,
+        isOpen = downshift.isOpen,
+        toggleMenu = downshift.toggleMenu,
+        getInputProps = downshift.getInputProps;
 
-      return _ref2 = {
-        id: id,
-        onChange: this.handleChange,
-        itemToString: formatOption
-      }, _defineProperty(_ref2, valuePropName, value), _defineProperty(_ref2, defaultValuePropName, defaultValue), _defineProperty(_ref2, "inputValue", this.getInputValue()), _ref2;
-    }
+    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"]);
 
-    /**
-     * The controlled value for the input element
-     * @see https://github.com/paypal/downshift#inputvalue
-     * @returns {string|undefined}
-     */
+    var className = otherProps.className,
+        tabIndex = otherProps.tabIndex;
 
-  }, {
-    key: "getInputValue",
-    value: function getInputValue() {
-      var _props2 = this.props,
-          multiple = _props2.multiple,
-          formatOption = _props2.formatOption,
-          value = _props2.value;
+    var inputClassName = className && className.split(" ").reduce(function (acc, cur) {
+      return emotion.cx(acc, cur.trim() + "-input-wrapper");
+    }, "");
 
+    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
+    });
 
-      if (value === undefined) {
-        return undefined;
-      }
-      if (multiple) {
-        return value.map(formatOption).join(", ");
-      }
+    return React.createElement(InputPresenter, _extends$7({ key: "input" }, inputProps));
+  };
 
-      return formatOption(value);
-    }
+  /**
+   * @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;
 
-    /**
-     * > 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 formatOption = props.formatOption,
+        multiple = props.multiple,
+        options = props.options,
+        renderOption = props.renderOption,
+        customStylesheet = props.stylesheet,
+        otherProps = _objectWithoutProperties$5(props, ["formatOption", "multiple", "options", "renderOption", "stylesheet"]);
 
-  }, {
-    key: "renderInput",
+    var className = otherProps.className;
 
 
-    /**
-     * @param {DownshiftHelpers} downshift
-     * @returns {JSX.Element}
-     */
-    value: function renderInput(downshift) {
-      var id = downshift.id,
-          isOpen = downshift.isOpen,
-          toggleMenu = downshift.toggleMenu,
-          getInputProps = downshift.getInputProps;
+    var menuClassName = className && className.split(" ").reduce(function (acc, cur) {
+      return emotion.cx(acc, cur.trim() + "-menu-wrapper");
+    }, "");
 
-      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 menuProps = getMenuProps({
+      isOpen: isOpen,
+      refKey: "innerRef",
+      className: menuClassName,
+      stylesheet: customStylesheet
+    });
 
-      var className = otherProps.className,
-          tabIndex = otherProps.tabIndex;
+    var children = renderOptions({
+      formatOption: formatOption,
+      getItemProps: getItemProps,
+      highlightedIndex: highlightedIndex,
+      multiple: multiple,
+      options: options,
+      renderOption: renderOption,
+      selectedItem: selectedItem,
+      selectedItems: selectedItems,
+      stylesheet: customStylesheet
+    });
 
-      var inputClassName = className && className.split(" ").reduce(function (acc, cur) {
-        return emotion.cx(acc, cur.trim() + "-input-wrapper");
-      }, "");
+    return React.createElement(
+      MenuPresenter,
+      _extends$7({ key: "menu" }, menuProps),
+      children
+    );
+  };
 
-      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
-      });
+  /**
+   * @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"]);
 
-      return React__default.createElement(InputPresenter, _extends$7({ key: "input" }, inputProps));
-    }
-
     /**
-     * @param {DownshiftHelpers} downshift
-     * @returns {JSX.Element}
+     * The `Wrapper` presenter is used as a function to avoid having to
+     * use Downshift's `getRootProps`
+     * @see https://github.com/paypal/downshift#getrootprops
      */
 
-  }, {
-    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;
 
-      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"]);
+    return WrapperPresenter(_extends$7({
+      disabled: disabled,
+      children: [renderInput(downshift), renderMenu(downshift)]
+    }, otherProps));
+  };
 
-      var className = otherProps.className;
+  var multiple = props.multiple;
 
+  var Behavior = multiple ? MultiDownshift : Downshift;
 
-      var menuClassName = className && className.split(" ").reduce(function (acc, cur) {
-        return emotion.cx(acc, cur.trim() + "-menu-wrapper");
-      }, "");
+  return React.createElement(
+    Behavior,
+    getBehaviorProps(),
+    renderPresenter
+  );
+};
 
-      var menuProps = getMenuProps({
-        isOpen: isOpen,
-        refKey: "innerRef",
-        className: menuClassName,
-        stylesheet: customStylesheet
-      });
+Dropdown.displayName = "Dropdown";
 
-      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 = {
@@ -1295,2 +1225,3 @@ /**
 };
+
 Dropdown.defaultProps = {
@@ -1297,0 +1228,0 @@ /**

CHANGELOG.md

@@ -0,1 +1,13 @@
+# [@hig/dropdown-v3.0.0](https://github.com/Autodesk/hig/compare/@hig/dropdown@2.4.3...@hig/dropdown@3.0.0) (2022-01-13)
+
+
+### Code Refactoring
+
+* Major Release - React 17 Upgrade ([2523711](https://github.com/Autodesk/hig/commit/2523711))
+
+
+### BREAKING CHANGES
+
+* This release includes upgrading to React 17 and all associated libraries. The components have also had structural changes, utilizing stateless components and hooks. There should be no change in look or behavior of components. The code usage is the same so if you’re already on react 17 you can bump the version directly. If you’re on an old version of react you’ll need to upgrade your project’s react first to 17 and then the HIG components. This upgrade also means no more fixes for the react 15 version but it will still be available for download from NPM. You can fork the repo and make fixes with the older version if there is something critical past this release date.
+
 # [@hig/dropdown-v2.4.3](https://github.com/Autodesk/hig/compare/@hig/dropdown@2.4.2...@hig/dropdown@2.4.3) (2022-01-12)
@@ -2,0 +14,0 @@

package.json

 {
   "name": "@hig/dropdown",
-  "version": "2.4.3",
+  "version": "3.0.0",
   "description": "HIG Dropdown",
@@ -31,3 +31,3 @@ "author": "Autodesk Inc.",
     "@hig/theme-data": "^2.22.1",
-    "react": "^15.4.1 || ^16.3.2"
+    "react": "^17.0.0"
   },
@@ -34,0 +34,0 @@ "devDependencies": {

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

Worsened metrics

Total package byte prevSize

105377

decreased by-7.84%

Lines of code

2480

decreased by-3.91%

No dependency changes