@hig/dropdown - npm Package Compare versions

Comparing version 0.1.0-alpha to 0.1.0-alpha.2

build/index.es.js

@@ -1,5 +0,428 @@
-import { Dropdown } from 'hig-react';
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import Icon, { names } from '@hig/icon';
+import Downshift from 'downshift';
+import { TextFieldPresenter } from '@hig/text-field';
 
-Dropdown.displayName = "Dropdown";
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+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; }
+
+var Option = function (_Component) {
+  _inherits(Option, _Component);
+
+  function Option() {
+    _classCallCheck(this, Option);
+
+    return _possibleConstructorReturn(this, (Option.__proto__ || Object.getPrototypeOf(Option)).apply(this, arguments));
+  }
+
+  _createClass(Option, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          children = _props.children,
+          highlighted = _props.highlighted,
+          selected = _props.selected,
+          otherProps = _objectWithoutProperties(_props, ["children", "highlighted", "selected"]);
+
+      return React.createElement(
+        "div",
+        _extends({
+          className: cx("hig__dropdown-option", {
+            "hig__dropdown-option--selected": selected,
+            "hig__dropdown-option--highlighted": highlighted
+          })
+        }, otherProps),
+        React.createElement(
+          "span",
+          { className: "hig__dropdown-option__label" },
+          children
+        ),
+        selected && React.createElement(
+          "div",
+          { className: "hig__dropdown-option__checkmark" },
+          React.createElement(Icon, { name: names.CHECKMARK_BLUE_DARK })
+        )
+      );
+    }
+  }]);
+
+  return Option;
+}(Component);
+
+Option.propTypes = {
+  /**
+   * Visual representation of the option
+   */
+  children: PropTypes.node,
+  /**
+   * Indicates the option is currently highlighted. This is comparable to hover state, but useful when interacting by keyboard.
+   */
+  highlighted: PropTypes.bool,
+  /**
+   * Called when user finishes clicking on an option
+   */
+  onClick: PropTypes.func,
+  /**
+   * Called when user begins clicking on an option
+   */
+  onMouseDown: PropTypes.func,
+  /**
+   * Called when user moves mouse over the option
+   */
+  onMouseMove: PropTypes.func,
+  /**
+   * Called when user moves mouse over the option
+   */
+  onHover: PropTypes.func,
+  /**
+   * Called when the user selects the option by clicking or keyboard interaction
+   */
+  onSelect: PropTypes.func,
+  /**
+   * Indicates the option is currently selected
+   */
+  selected: PropTypes.bool,
+  /**
+   * Data represented by the option
+   */
+  value: PropTypes.string
+};
+Option.__docgenInfo = {
+  "description": "",
+  "displayName": "Option",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "Visual representation of the option"
+    },
+    "highlighted": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates the option is currently highlighted. This is comparable to hover state, but useful when interacting by keyboard."
+    },
+    "onClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when user finishes clicking on an option"
+    },
+    "onMouseDown": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when user begins clicking on an option"
+    },
+    "onMouseMove": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when user moves mouse over the option"
+    },
+    "onHover": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when user moves mouse over the option"
+    },
+    "onSelect": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when the user selects the option by clicking or keyboard interaction"
+    },
+    "selected": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates the option is currently selected"
+    },
+    "value": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Data represented by the option"
+    }
+  }
+};
+
+/**
+ * Composes multiple event handlers into one.
+ * @param {Function} fns the event handler functions
+ * @return {Function} the event handler to add to an element
+ */
+function composeEventHandlers() {
+  for (var _len = arguments.length, fns = Array(_len), _key = 0; _key < _len; _key++) {
+    fns[_key] = arguments[_key];
+  }
+
+  return function (event) {
+    for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      args[_key2 - 1] = arguments[_key2];
+    }
+
+    return fns.forEach(function (fn) {
+      return fn && fn.apply(undefined, [event].concat(args));
+    });
+  };
+}
+
+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 _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; }
+
+var Dropdown = function (_Component) {
+  _inherits$1(Dropdown, _Component);
+
+  function Dropdown() {
+    _classCallCheck$1(this, Dropdown);
+
+    return _possibleConstructorReturn$1(this, (Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).apply(this, arguments));
+  }
+
+  _createClass$1(Dropdown, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          id = _props.id,
+          label = _props.label,
+          instructions = _props.instructions,
+          placeholder = _props.placeholder,
+          required = _props.required,
+          disabled = _props.disabled,
+          onBlur = _props.onBlur,
+          onChange = _props.onChange,
+          onFocus = _props.onFocus,
+          options = _props.options;
+
+
+      return React.createElement(
+        Downshift,
+        {
+          onChange: onChange,
+          itemToString: function itemToString(item) {
+            return item ? item.label : "";
+          }
+        },
+        function (_ref) {
+          var getInputProps = _ref.getInputProps,
+              getItemProps = _ref.getItemProps,
+              isOpen = _ref.isOpen,
+              highlightedIndex = _ref.highlightedIndex,
+              selectedItem = _ref.selectedItem,
+              toggleMenu = _ref.toggleMenu;
+          return React.createElement(
+            "div",
+            {
+              className: cx("hig__dropdown", {
+                "hig__dropdown--disabled": disabled
+              })
+            },
+            React.createElement(
+              "div",
+              { className: "hig__dropdown__input-wrapper" },
+              React.createElement(TextFieldPresenter, getInputProps({
+                id: id,
+                label: label,
+                instructions: instructions,
+                required: required,
+                placeholder: placeholder,
+                disabled: disabled,
+                onBlur: onBlur,
+                onFocus: composeEventHandlers(toggleMenu, onFocus),
+                readOnly: true // @TODO: toggle based on desired type of Dropdown
+              })),
+              React.createElement(
+                "span",
+                { className: "hig__dropdown__input-caret" },
+                React.createElement(Icon, { name: "caret" })
+              )
+            ),
+            isOpen && React.createElement(
+              "div",
+              { className: "hig__dropdown-v1__menu" },
+              options.map(function (option, index) {
+                return React.createElement(
+                  Option,
+                  getItemProps({
+                    key: option.value,
+                    index: index,
+                    item: option,
+                    selected: selectedItem === option,
+                    highlighted: highlightedIndex === index
+                  }),
+                  option.label
+                );
+              })
+            )
+          );
+        }
+      );
+    }
+  }]);
+
+  return Dropdown;
+}(Component);
+
+Dropdown.propTypes = {
+  /**
+   * HTML ID attribute
+   */
+  id: PropTypes.string,
+  /**
+   * Text describing what the field represents
+   */
+  label: PropTypes.string,
+  /**
+   * Instructional text for the field
+   */
+  instructions: PropTypes.string,
+  /**
+   * Placeholder text to render when an option has not been selected
+   */
+  placeholder: PropTypes.string,
+  /**
+   * Prevents user actions on the field
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Text describing why the field is required
+   */
+  required: PropTypes.string,
+  /**
+   * An array of objects to choose from.
+   */
+  options: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.string
+  })),
+  /**
+   * Called after user changes the value of the field. Called with the entire object that was selected.
+   */
+  onChange: PropTypes.func,
+  /**
+   * Called when user moves focus from the field
+   */
+  onBlur: PropTypes.func,
+  /**
+   * Called when user puts focus onto the field
+   */
+  onFocus: PropTypes.func
+};
+Dropdown.__docgenInfo = {
+  "description": "",
+  "displayName": "Dropdown",
+  "props": {
+    "id": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "HTML ID attribute"
+    },
+    "label": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Text describing what the field represents"
+    },
+    "instructions": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Instructional text for the field"
+    },
+    "placeholder": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Placeholder text to render when an option has not been selected"
+    },
+    "disabled": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Prevents user actions on the field"
+    },
+    "required": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Text describing why the field is required"
+    },
+    "options": {
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "label": {
+              "name": "string",
+              "required": false
+            },
+            "value": {
+              "name": "string",
+              "required": false
+            }
+          }
+        }
+      },
+      "required": false,
+      "description": "An array of objects to choose from."
+    },
+    "onChange": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called after user changes the value of the field. Called with the entire object that was selected."
+    },
+    "onBlur": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when user moves focus from the field"
+    },
+    "onFocus": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when user puts focus onto the field"
+    }
+  }
+};
+
 export default Dropdown;

build/index.js

@@ -5,6 +5,433 @@ 'use strict';
 
-var higReact = require('hig-react');
+function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
-higReact.Dropdown.displayName = "Dropdown";
+var React = require('react');
+var React__default = _interopDefault(React);
+var PropTypes = _interopDefault(require('prop-types'));
+var cx = _interopDefault(require('classnames'));
+var Icon = require('@hig/icon');
+var Icon__default = _interopDefault(Icon);
+var Downshift = _interopDefault(require('downshift'));
+var textField = require('@hig/text-field');
 
-exports.default = higReact.Dropdown;
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+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; }
+
+var Option = function (_Component) {
+  _inherits(Option, _Component);
+
+  function Option() {
+    _classCallCheck(this, Option);
+
+    return _possibleConstructorReturn(this, (Option.__proto__ || Object.getPrototypeOf(Option)).apply(this, arguments));
+  }
+
+  _createClass(Option, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          children = _props.children,
+          highlighted = _props.highlighted,
+          selected = _props.selected,
+          otherProps = _objectWithoutProperties(_props, ["children", "highlighted", "selected"]);
+
+      return React__default.createElement(
+        "div",
+        _extends({
+          className: cx("hig__dropdown-option", {
+            "hig__dropdown-option--selected": selected,
+            "hig__dropdown-option--highlighted": highlighted
+          })
+        }, otherProps),
+        React__default.createElement(
+          "span",
+          { className: "hig__dropdown-option__label" },
+          children
+        ),
+        selected && React__default.createElement(
+          "div",
+          { className: "hig__dropdown-option__checkmark" },
+          React__default.createElement(Icon__default, { name: Icon.names.CHECKMARK_BLUE_DARK })
+        )
+      );
+    }
+  }]);
+
+  return Option;
+}(React.Component);
+
+Option.propTypes = {
+  /**
+   * Visual representation of the option
+   */
+  children: PropTypes.node,
+  /**
+   * Indicates the option is currently highlighted. This is comparable to hover state, but useful when interacting by keyboard.
+   */
+  highlighted: PropTypes.bool,
+  /**
+   * Called when user finishes clicking on an option
+   */
+  onClick: PropTypes.func,
+  /**
+   * Called when user begins clicking on an option
+   */
+  onMouseDown: PropTypes.func,
+  /**
+   * Called when user moves mouse over the option
+   */
+  onMouseMove: PropTypes.func,
+  /**
+   * Called when user moves mouse over the option
+   */
+  onHover: PropTypes.func,
+  /**
+   * Called when the user selects the option by clicking or keyboard interaction
+   */
+  onSelect: PropTypes.func,
+  /**
+   * Indicates the option is currently selected
+   */
+  selected: PropTypes.bool,
+  /**
+   * Data represented by the option
+   */
+  value: PropTypes.string
+};
+Option.__docgenInfo = {
+  "description": "",
+  "displayName": "Option",
+  "props": {
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": "Visual representation of the option"
+    },
+    "highlighted": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates the option is currently highlighted. This is comparable to hover state, but useful when interacting by keyboard."
+    },
+    "onClick": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when user finishes clicking on an option"
+    },
+    "onMouseDown": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when user begins clicking on an option"
+    },
+    "onMouseMove": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when user moves mouse over the option"
+    },
+    "onHover": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when user moves mouse over the option"
+    },
+    "onSelect": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when the user selects the option by clicking or keyboard interaction"
+    },
+    "selected": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Indicates the option is currently selected"
+    },
+    "value": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Data represented by the option"
+    }
+  }
+};
+
+/**
+ * Composes multiple event handlers into one.
+ * @param {Function} fns the event handler functions
+ * @return {Function} the event handler to add to an element
+ */
+function composeEventHandlers() {
+  for (var _len = arguments.length, fns = Array(_len), _key = 0; _key < _len; _key++) {
+    fns[_key] = arguments[_key];
+  }
+
+  return function (event) {
+    for (var _len2 = arguments.length, args = Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+      args[_key2 - 1] = arguments[_key2];
+    }
+
+    return fns.forEach(function (fn) {
+      return fn && fn.apply(undefined, [event].concat(args));
+    });
+  };
+}
+
+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 _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; }
+
+var Dropdown = function (_Component) {
+  _inherits$1(Dropdown, _Component);
+
+  function Dropdown() {
+    _classCallCheck$1(this, Dropdown);
+
+    return _possibleConstructorReturn$1(this, (Dropdown.__proto__ || Object.getPrototypeOf(Dropdown)).apply(this, arguments));
+  }
+
+  _createClass$1(Dropdown, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          id = _props.id,
+          label = _props.label,
+          instructions = _props.instructions,
+          placeholder = _props.placeholder,
+          required = _props.required,
+          disabled = _props.disabled,
+          onBlur = _props.onBlur,
+          onChange = _props.onChange,
+          onFocus = _props.onFocus,
+          options = _props.options;
+
+
+      return React__default.createElement(
+        Downshift,
+        {
+          onChange: onChange,
+          itemToString: function itemToString(item) {
+            return item ? item.label : "";
+          }
+        },
+        function (_ref) {
+          var getInputProps = _ref.getInputProps,
+              getItemProps = _ref.getItemProps,
+              isOpen = _ref.isOpen,
+              highlightedIndex = _ref.highlightedIndex,
+              selectedItem = _ref.selectedItem,
+              toggleMenu = _ref.toggleMenu;
+          return React__default.createElement(
+            "div",
+            {
+              className: cx("hig__dropdown", {
+                "hig__dropdown--disabled": disabled
+              })
+            },
+            React__default.createElement(
+              "div",
+              { className: "hig__dropdown__input-wrapper" },
+              React__default.createElement(textField.TextFieldPresenter, getInputProps({
+                id: id,
+                label: label,
+                instructions: instructions,
+                required: required,
+                placeholder: placeholder,
+                disabled: disabled,
+                onBlur: onBlur,
+                onFocus: composeEventHandlers(toggleMenu, onFocus),
+                readOnly: true // @TODO: toggle based on desired type of Dropdown
+              })),
+              React__default.createElement(
+                "span",
+                { className: "hig__dropdown__input-caret" },
+                React__default.createElement(Icon__default, { name: "caret" })
+              )
+            ),
+            isOpen && React__default.createElement(
+              "div",
+              { className: "hig__dropdown-v1__menu" },
+              options.map(function (option, index) {
+                return React__default.createElement(
+                  Option,
+                  getItemProps({
+                    key: option.value,
+                    index: index,
+                    item: option,
+                    selected: selectedItem === option,
+                    highlighted: highlightedIndex === index
+                  }),
+                  option.label
+                );
+              })
+            )
+          );
+        }
+      );
+    }
+  }]);
+
+  return Dropdown;
+}(React.Component);
+
+Dropdown.propTypes = {
+  /**
+   * HTML ID attribute
+   */
+  id: PropTypes.string,
+  /**
+   * Text describing what the field represents
+   */
+  label: PropTypes.string,
+  /**
+   * Instructional text for the field
+   */
+  instructions: PropTypes.string,
+  /**
+   * Placeholder text to render when an option has not been selected
+   */
+  placeholder: PropTypes.string,
+  /**
+   * Prevents user actions on the field
+   */
+  disabled: PropTypes.bool,
+  /**
+   * Text describing why the field is required
+   */
+  required: PropTypes.string,
+  /**
+   * An array of objects to choose from.
+   */
+  options: PropTypes.arrayOf(PropTypes.shape({
+    label: PropTypes.string,
+    value: PropTypes.string
+  })),
+  /**
+   * Called after user changes the value of the field. Called with the entire object that was selected.
+   */
+  onChange: PropTypes.func,
+  /**
+   * Called when user moves focus from the field
+   */
+  onBlur: PropTypes.func,
+  /**
+   * Called when user puts focus onto the field
+   */
+  onFocus: PropTypes.func
+};
+Dropdown.__docgenInfo = {
+  "description": "",
+  "displayName": "Dropdown",
+  "props": {
+    "id": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "HTML ID attribute"
+    },
+    "label": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Text describing what the field represents"
+    },
+    "instructions": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Instructional text for the field"
+    },
+    "placeholder": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Placeholder text to render when an option has not been selected"
+    },
+    "disabled": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Prevents user actions on the field"
+    },
+    "required": {
+      "type": {
+        "name": "string"
+      },
+      "required": false,
+      "description": "Text describing why the field is required"
+    },
+    "options": {
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "label": {
+              "name": "string",
+              "required": false
+            },
+            "value": {
+              "name": "string",
+              "required": false
+            }
+          }
+        }
+      },
+      "required": false,
+      "description": "An array of objects to choose from."
+    },
+    "onChange": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called after user changes the value of the field. Called with the entire object that was selected."
+    },
+    "onBlur": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when user moves focus from the field"
+    },
+    "onFocus": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when user puts focus onto the field"
+    }
+  }
+};
+
+exports.default = Dropdown;

package.json

 {
   "name": "@hig/dropdown",
-  "version": "0.1.0-alpha",
+  "version": "0.1.0-alpha.2",
   "description": "HIG Dropdown",
   "author": "Autodesk Inc.",
   "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Autodesk/hig.git"
+  },
   "publishConfig": {
@@ -17,8 +21,10 @@ "access": "public"
   "dependencies": {
+    "@hig/icon": "^0.1.2",
+    "@hig/text-field": "^0.3.1",
     "classnames": "^2.2.5",
-    "hig-react": "^0.29.0",
+    "downshift": "^1.31.15",
+    "prop-types": "^15.6.1",
     "react-lifecycles-compat": "^3.0.2"
   },
   "peerDependencies": {
-    "prop-types": "^15.5.10",
     "react": "^15.4.1 || ^16.3.2"
@@ -29,3 +35,4 @@ },
     "@hig/eslint-config": "^0.1.0",
-    "@hig/scripts": "^0.1.0",
+    "@hig/scripts": "^0.1.1",
+    "@hig/semantic-release-config": "^0.1.0",
     "@hig/styles": "^0.1.1"
@@ -35,3 +42,4 @@ },
     "build": "hig-scripts-build",
-    "lint": "eslint src --color --ext .js,.jsx"
+    "lint": "hig-scripts-lint",
+    "release": "hig-scripts-release"
   },
@@ -41,2 +49,5 @@ "eslintConfig": {
   },
+  "release": {
+    "extends": "@hig/semantic-release-config"
+  },
   "babel": {
@@ -43,0 +54,0 @@ "env": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

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

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

46003

decreased by-83.8%

Dependency count

7

increased by40%

Dev dependency count

5

increased by25%

Lines of code

1079

decreased by-86.81%

Number of medium supply chain risk alerts

2

increased by100%

Dependency changes

• + Added@hig/icon@^0.1.2

• + Added@hig/text-field@^0.3.1

• + Addeddownshift@^1.31.15

• + Addedprop-types@^15.6.1

• + Added@hig/text-field@0.3.2(transitive)

• + Addeddownshift@1.31.16(transitive)

• - Removedhig-react@^0.29.0