@hig/dropdown - npm Package Compare versions

Comparing version 0.1.1-alpha to 0.1.1

build/index.es.js

@@ -1,5 +0,734 @@
-import { Dropdown } from 'hig-react';
+import React, { Component } from 'react';
+import Icon, { names } from '@hig/icon';
+import { TextFieldPresenter } from '@hig/text-field';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import Downshift from 'downshift';
+import MultiDownshift from '@hig/multi-downshift';
 
-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; };
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function InputPresenter(props) {
+  return React.createElement(
+    "div",
+    { className: "hig__dropdown__input-wrapper" },
+    React.createElement(TextFieldPresenter, _extends({}, props, { type: "button", readOnly: true })),
+    React.createElement(
+      "span",
+      { className: "hig__dropdown__input-caret" },
+      React.createElement(Icon, { name: "caret" })
+    )
+  );
+}
+
+function createPropTypes() {
+  var _TextFieldPresenter$p = TextFieldPresenter.propTypes,
+      type = _TextFieldPresenter$p.type,
+      readOnly = _TextFieldPresenter$p.readOnly,
+      otherPropTypes = _objectWithoutProperties(_TextFieldPresenter$p, ["type", "readOnly"]);
+
+  return otherPropTypes;
+}
+
+InputPresenter.propTypes = createPropTypes();
+InputPresenter.__docgenInfo = {
+  "description": "",
+  "displayName": "InputPresenter"
+};
+
+var _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+function _objectWithoutProperties$1(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function MenuPresenter(_ref) {
+  var isOpen = _ref.isOpen,
+      children = _ref.children,
+      otherProps = _objectWithoutProperties$1(_ref, ["isOpen", "children"]);
+
+  var classes = cx("hig__dropdown-v1__menu", {
+    "hig__dropdown-v1__menu--open": isOpen
+  });
+
+  return React.createElement(
+    "div",
+    _extends$1({ className: classes }, otherProps),
+    children
+  );
+}
+
+MenuPresenter.propTypes = {
+  isOpen: PropTypes.bool,
+  children: PropTypes.node
+};
+MenuPresenter.__docgenInfo = {
+  "description": "",
+  "displayName": "MenuPresenter",
+  "props": {
+    "isOpen": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};
+
+/**
+ * @typedef {Object} WrapperProps
+ * @property {JSX.Element} [input]
+ * @property {JSX.Element} [menu]
+ * @property {boolean} [disabled]
+ * @property {boolean} [isOpen]
+ */
+
+/**
+ * Downshift requires a reference to the component's root element.
+ * As a result, this presenter should be purely functional so that it can
+ * be used as function with Downshift.
+ *
+ * @param {WrapperProps} prop
+ * @returns {JSX.Element}
+ * @see https://github.com/paypal/downshift#getrootprops
+ */
+function WrapperPresenter(props) {
+  var children = props.children,
+      disabled = props.disabled;
+
+
+  var containerClasses = cx("hig__dropdown", {
+    "hig__dropdown--disabled": disabled
+  });
+
+  return React.createElement(
+    "div",
+    { className: containerClasses },
+    children
+  );
+}
+
+WrapperPresenter.propTypes = {
+  disabled: PropTypes.bool,
+  children: PropTypes.node
+};
+WrapperPresenter.__docgenInfo = {
+  "description": "Downshift requires a reference to the component's root element.\nAs a result, this presenter should be purely functional so that it can\nbe used as function with Downshift.\n\n@param {WrapperProps} prop\n@returns {JSX.Element}\n@see https://github.com/paypal/downshift#getrootprops",
+  "displayName": "WrapperPresenter",
+  "props": {
+    "disabled": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};
+
+var _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _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$2(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _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 OptionPresenter = function (_Component) {
+  _inherits(OptionPresenter, _Component);
+
+  function OptionPresenter() {
+    _classCallCheck(this, OptionPresenter);
+
+    return _possibleConstructorReturn(this, (OptionPresenter.__proto__ || Object.getPrototypeOf(OptionPresenter)).apply(this, arguments));
+  }
+
+  _createClass(OptionPresenter, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          children = _props.children,
+          highlighted = _props.highlighted,
+          selected = _props.selected,
+          otherProps = _objectWithoutProperties$2(_props, ["children", "highlighted", "selected"]);
+
+      return React.createElement(
+        "div",
+        _extends$2({
+          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 OptionPresenter;
+}(Component);
+
+OptionPresenter.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
+};
+OptionPresenter.__docgenInfo = {
+  "description": "",
+  "displayName": "OptionPresenter",
+  "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"
+    }
+  }
+};
+
+/**
+ * @typedef {any} OptionMeta
+ */
+
+/** @typedef {import("downshift").ControllerStateAndHelpers} DownshiftHelpers */
+
+/**
+ * @param {DownshiftHelpers} downshift
+ * @returns {function(OptionMeta): boolean}
+ */
+function createSelectedDeterminer(downshift) {
+  var multiple = downshift.multiple,
+      selectedItem = downshift.selectedItem,
+      selectedItems = downshift.selectedItems;
+
+
+  return function (option) {
+    return multiple ? selectedItems.includes(option) : option === selectedItem;
+  };
+}
+
+/**
+ * @param {DownshiftHelpers} downshift
+ * @returns {function(OptionMeta, number): JSX.Element}
+ */
+function createOptionRenderer(downshift) {
+  var formatOption = downshift.formatOption,
+      getItemProps = downshift.getItemProps,
+      highlightedIndex = downshift.highlightedIndex;
+
+  var isSelected = createSelectedDeterminer(downshift);
+
+  return function (option, index) {
+    var itemProps = getItemProps({
+      index: index,
+      key: "option-" + index,
+      item: option,
+      selected: isSelected(option),
+      highlighted: highlightedIndex === index
+    });
+
+    return React.createElement(
+      OptionPresenter,
+      itemProps,
+      formatOption(option)
+    );
+  };
+}
+
+/** @typedef {DownshiftHelpers & { options: OptionMeta[] }} RenderOptionsProps */
+
+/**
+ * @param {RenderOptionsProps} props
+ * @todo Convert into a functional component once `React.Fragment` can be used
+ */
+function renderOptions(props) {
+  var _props$options = props.options,
+      options = _props$options === undefined ? [] : _props$options,
+      _props$multiple = props.multiple,
+      multiple = _props$multiple === undefined ? false : _props$multiple,
+      _props$formatOption = props.formatOption,
+      formatOption = _props$formatOption === undefined ? function (option) {
+    return String(option);
+  } : _props$formatOption,
+      _props$getItemProps = props.getItemProps,
+      getItemProps = _props$getItemProps === undefined ? function (itemProps) {
+    return itemProps;
+  } : _props$getItemProps,
+      highlightedIndex = props.highlightedIndex,
+      selectedItem = props.selectedItem,
+      _props$selectedItems = props.selectedItems,
+      selectedItems = _props$selectedItems === undefined ? [] : _props$selectedItems;
+
+  var downshift = {
+    multiple: multiple,
+    formatOption: formatOption,
+    getItemProps: getItemProps,
+    highlightedIndex: highlightedIndex,
+    selectedItem: selectedItem,
+    selectedItems: selectedItems
+  };
+  var renderOption = createOptionRenderer(downshift);
+
+  return options.map(renderOption);
+}
+
+var _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _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; }
+
+/** @typedef {import("./presenters/renderOptions").OptionMeta} OptionMeta */
+/** @typedef {import("downshift").ControllerStateAndHelpers} DownshiftHelpers */
+
+var Dropdown = function (_Component) {
+  _inherits$1(Dropdown, _Component);
+
+  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];
+    }
+
+    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;
+
+
+      if (onChange) {
+        onChange(value);
+      }
+    }, _this.renderPresenter = function (downshift) {
+      var disabled = _this.props.disabled;
+
+      /**
+       * The `Wrapper` presenter is used as a function to avoid having to use Downshift's `getRootProps`
+       * @see https://github.com/paypal/downshift#getrootprops
+       */
+
+      return WrapperPresenter({
+        disabled: disabled,
+        children: [_this.renderInput(downshift), _this.renderMenu(downshift)]
+      });
+    }, _temp), _possibleConstructorReturn$1(_this, _ret);
+  }
+
+  /**
+   * > 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
+   */
+
+
+  _createClass$1(Dropdown, [{
+    key: "renderInput",
+
+
+    /**
+     * @param {DownshiftHelpers} downshift
+     * @returns {JSX.Element}
+     */
+    value: function renderInput(downshift) {
+      var id = downshift.id,
+          toggleMenu = downshift.toggleMenu,
+          getInputProps = downshift.getInputProps;
+      var _props = this.props,
+          label = _props.label,
+          instructions = _props.instructions,
+          placeholder = _props.placeholder,
+          disabled = _props.disabled,
+          required = _props.required,
+          onBlur = _props.onBlur,
+          onFocus = _props.onFocus;
+
+
+      var inputProps = getInputProps({
+        id: id,
+        label: label,
+        instructions: instructions,
+        placeholder: placeholder,
+        disabled: disabled,
+        required: required,
+        onBlur: onBlur,
+        onFocus: onFocus,
+        onClick: toggleMenu
+      });
+
+      return React.createElement(InputPresenter, _extends$3({ key: "input" }, inputProps));
+    }
+
+    /**
+     * @param {DownshiftHelpers} downshift
+     * @returns {JSX.Element}
+     */
+
+  }, {
+    key: "renderMenu",
+    value: function renderMenu(downshift) {
+      var isOpen = downshift.isOpen,
+          getItemProps = downshift.getItemProps,
+          getMenuProps = downshift.getMenuProps,
+          highlightedIndex = downshift.highlightedIndex,
+          selectedItem = downshift.selectedItem,
+          selectedItems = downshift.selectedItems;
+
+      var menuProps = getMenuProps({ isOpen: isOpen });
+      var _props2 = this.props,
+          multiple = _props2.multiple,
+          options = _props2.options,
+          formatOption = _props2.formatOption;
+
+      var children = renderOptions({
+        multiple: multiple,
+        options: options,
+        formatOption: formatOption,
+        getItemProps: getItemProps,
+        highlightedIndex: highlightedIndex,
+        selectedItem: selectedItem,
+        selectedItems: selectedItems
+      });
+
+      return React.createElement(
+        MenuPresenter,
+        _extends$3({ key: "menu" }, menuProps),
+        children
+      );
+    }
+
+    /**
+     * @param {DownshiftHelpers} downshift
+     * @returns {JSX.Element}
+     */
+
+  }, {
+    key: "render",
+    value: function render() {
+      var _props3 = this.props,
+          id = _props3.id,
+          multiple = _props3.multiple,
+          formatOption = _props3.formatOption;
+
+      var Behavior = multiple ? MultiDownshift : Downshift;
+
+      return React.createElement(
+        Behavior,
+        {
+          id: id,
+          onChange: this.handleChange,
+          itemToString: formatOption
+        },
+        this.renderPresenter
+      );
+    }
+  }]);
+
+  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,
+  /**
+   * Enables multiple selection
+   */
+  multiple: PropTypes.bool,
+  /**
+   * 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
+   */
+  value: PropTypes.oneOfType([PropTypes.any, PropTypes.arrayOf(PropTypes.any)]),
+  /**
+   * An array of unique values of any type except `undefined`
+   */
+  options: PropTypes.arrayOf(PropTypes.any),
+  /**
+   * Called with the selected option when the value changes
+   */
+  onChange: PropTypes.func,
+  /**
+   * Called when the text field is blurred
+   */
+  onBlur: PropTypes.func,
+  /**
+   * Called when the text field is focused
+   */
+  onFocus: PropTypes.func,
+  /**
+   * Used to format options into human readable strings
+   */
+  formatOption: PropTypes.func
+};
+Dropdown.defaultProps = {
+  /**
+   * @param {OptionMeta} option
+   * @returns {string}
+   */
+  formatOption: function formatOption(option) {
+    return option ? String(option) : "";
+  }
+};
+Dropdown.__docgenInfo = {
+  "description": "@typedef {import(\"downshift\").ControllerStateAndHelpers} DownshiftHelpers",
+  "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"
+    },
+    "multiple": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Enables multiple selection"
+    },
+    "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"
+    },
+    "value": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "any"
+        }, {
+          "name": "arrayOf",
+          "value": {
+            "name": "any"
+          }
+        }]
+      },
+      "required": false,
+      "description": "An array of objects to choose from"
+    },
+    "options": {
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "any"
+        }
+      },
+      "required": false,
+      "description": "An array of unique values of any type except `undefined`"
+    },
+    "onChange": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called with the selected option when the value changes"
+    },
+    "onBlur": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when the text field is blurred"
+    },
+    "onFocus": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when the text field is focused"
+    },
+    "formatOption": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Used to format options into human readable strings",
+      "defaultValue": {
+        "value": "function(option) {\n  return option ? String(option) : \"\";\n}",
+        "computed": false
+      }
+    }
+  }
+};
+
 export default Dropdown;

build/index.js

@@ -5,6 +5,739 @@ '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 Icon = require('@hig/icon');
+var Icon__default = _interopDefault(Icon);
+var textField = require('@hig/text-field');
+var PropTypes = _interopDefault(require('prop-types'));
+var cx = _interopDefault(require('classnames'));
+var Downshift = _interopDefault(require('downshift'));
+var MultiDownshift = _interopDefault(require('@hig/multi-downshift'));
 
-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; };
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function InputPresenter(props) {
+  return React__default.createElement(
+    "div",
+    { className: "hig__dropdown__input-wrapper" },
+    React__default.createElement(textField.TextFieldPresenter, _extends({}, props, { type: "button", readOnly: true })),
+    React__default.createElement(
+      "span",
+      { className: "hig__dropdown__input-caret" },
+      React__default.createElement(Icon__default, { name: "caret" })
+    )
+  );
+}
+
+function createPropTypes() {
+  var _TextFieldPresenter$p = textField.TextFieldPresenter.propTypes,
+      type = _TextFieldPresenter$p.type,
+      readOnly = _TextFieldPresenter$p.readOnly,
+      otherPropTypes = _objectWithoutProperties(_TextFieldPresenter$p, ["type", "readOnly"]);
+
+  return otherPropTypes;
+}
+
+InputPresenter.propTypes = createPropTypes();
+InputPresenter.__docgenInfo = {
+  "description": "",
+  "displayName": "InputPresenter"
+};
+
+var _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+function _objectWithoutProperties$1(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function MenuPresenter(_ref) {
+  var isOpen = _ref.isOpen,
+      children = _ref.children,
+      otherProps = _objectWithoutProperties$1(_ref, ["isOpen", "children"]);
+
+  var classes = cx("hig__dropdown-v1__menu", {
+    "hig__dropdown-v1__menu--open": isOpen
+  });
+
+  return React__default.createElement(
+    "div",
+    _extends$1({ className: classes }, otherProps),
+    children
+  );
+}
+
+MenuPresenter.propTypes = {
+  isOpen: PropTypes.bool,
+  children: PropTypes.node
+};
+MenuPresenter.__docgenInfo = {
+  "description": "",
+  "displayName": "MenuPresenter",
+  "props": {
+    "isOpen": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};
+
+/**
+ * @typedef {Object} WrapperProps
+ * @property {JSX.Element} [input]
+ * @property {JSX.Element} [menu]
+ * @property {boolean} [disabled]
+ * @property {boolean} [isOpen]
+ */
+
+/**
+ * Downshift requires a reference to the component's root element.
+ * As a result, this presenter should be purely functional so that it can
+ * be used as function with Downshift.
+ *
+ * @param {WrapperProps} prop
+ * @returns {JSX.Element}
+ * @see https://github.com/paypal/downshift#getrootprops
+ */
+function WrapperPresenter(props) {
+  var children = props.children,
+      disabled = props.disabled;
+
+
+  var containerClasses = cx("hig__dropdown", {
+    "hig__dropdown--disabled": disabled
+  });
+
+  return React__default.createElement(
+    "div",
+    { className: containerClasses },
+    children
+  );
+}
+
+WrapperPresenter.propTypes = {
+  disabled: PropTypes.bool,
+  children: PropTypes.node
+};
+WrapperPresenter.__docgenInfo = {
+  "description": "Downshift requires a reference to the component's root element.\nAs a result, this presenter should be purely functional so that it can\nbe used as function with Downshift.\n\n@param {WrapperProps} prop\n@returns {JSX.Element}\n@see https://github.com/paypal/downshift#getrootprops",
+  "displayName": "WrapperPresenter",
+  "props": {
+    "disabled": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": ""
+    },
+    "children": {
+      "type": {
+        "name": "node"
+      },
+      "required": false,
+      "description": ""
+    }
+  }
+};
+
+var _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _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$2(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+function _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 OptionPresenter = function (_Component) {
+  _inherits(OptionPresenter, _Component);
+
+  function OptionPresenter() {
+    _classCallCheck(this, OptionPresenter);
+
+    return _possibleConstructorReturn(this, (OptionPresenter.__proto__ || Object.getPrototypeOf(OptionPresenter)).apply(this, arguments));
+  }
+
+  _createClass(OptionPresenter, [{
+    key: "render",
+    value: function render() {
+      var _props = this.props,
+          children = _props.children,
+          highlighted = _props.highlighted,
+          selected = _props.selected,
+          otherProps = _objectWithoutProperties$2(_props, ["children", "highlighted", "selected"]);
+
+      return React__default.createElement(
+        "div",
+        _extends$2({
+          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 OptionPresenter;
+}(React.Component);
+
+OptionPresenter.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
+};
+OptionPresenter.__docgenInfo = {
+  "description": "",
+  "displayName": "OptionPresenter",
+  "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"
+    }
+  }
+};
+
+/**
+ * @typedef {any} OptionMeta
+ */
+
+/** @typedef {import("downshift").ControllerStateAndHelpers} DownshiftHelpers */
+
+/**
+ * @param {DownshiftHelpers} downshift
+ * @returns {function(OptionMeta): boolean}
+ */
+function createSelectedDeterminer(downshift) {
+  var multiple = downshift.multiple,
+      selectedItem = downshift.selectedItem,
+      selectedItems = downshift.selectedItems;
+
+
+  return function (option) {
+    return multiple ? selectedItems.includes(option) : option === selectedItem;
+  };
+}
+
+/**
+ * @param {DownshiftHelpers} downshift
+ * @returns {function(OptionMeta, number): JSX.Element}
+ */
+function createOptionRenderer(downshift) {
+  var formatOption = downshift.formatOption,
+      getItemProps = downshift.getItemProps,
+      highlightedIndex = downshift.highlightedIndex;
+
+  var isSelected = createSelectedDeterminer(downshift);
+
+  return function (option, index) {
+    var itemProps = getItemProps({
+      index: index,
+      key: "option-" + index,
+      item: option,
+      selected: isSelected(option),
+      highlighted: highlightedIndex === index
+    });
+
+    return React__default.createElement(
+      OptionPresenter,
+      itemProps,
+      formatOption(option)
+    );
+  };
+}
+
+/** @typedef {DownshiftHelpers & { options: OptionMeta[] }} RenderOptionsProps */
+
+/**
+ * @param {RenderOptionsProps} props
+ * @todo Convert into a functional component once `React.Fragment` can be used
+ */
+function renderOptions(props) {
+  var _props$options = props.options,
+      options = _props$options === undefined ? [] : _props$options,
+      _props$multiple = props.multiple,
+      multiple = _props$multiple === undefined ? false : _props$multiple,
+      _props$formatOption = props.formatOption,
+      formatOption = _props$formatOption === undefined ? function (option) {
+    return String(option);
+  } : _props$formatOption,
+      _props$getItemProps = props.getItemProps,
+      getItemProps = _props$getItemProps === undefined ? function (itemProps) {
+    return itemProps;
+  } : _props$getItemProps,
+      highlightedIndex = props.highlightedIndex,
+      selectedItem = props.selectedItem,
+      _props$selectedItems = props.selectedItems,
+      selectedItems = _props$selectedItems === undefined ? [] : _props$selectedItems;
+
+  var downshift = {
+    multiple: multiple,
+    formatOption: formatOption,
+    getItemProps: getItemProps,
+    highlightedIndex: highlightedIndex,
+    selectedItem: selectedItem,
+    selectedItems: selectedItems
+  };
+  var renderOption = createOptionRenderer(downshift);
+
+  return options.map(renderOption);
+}
+
+var _extends$3 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _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; }
+
+/** @typedef {import("./presenters/renderOptions").OptionMeta} OptionMeta */
+/** @typedef {import("downshift").ControllerStateAndHelpers} DownshiftHelpers */
+
+var Dropdown = function (_Component) {
+  _inherits$1(Dropdown, _Component);
+
+  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];
+    }
+
+    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;
+
+
+      if (onChange) {
+        onChange(value);
+      }
+    }, _this.renderPresenter = function (downshift) {
+      var disabled = _this.props.disabled;
+
+      /**
+       * The `Wrapper` presenter is used as a function to avoid having to use Downshift's `getRootProps`
+       * @see https://github.com/paypal/downshift#getrootprops
+       */
+
+      return WrapperPresenter({
+        disabled: disabled,
+        children: [_this.renderInput(downshift), _this.renderMenu(downshift)]
+      });
+    }, _temp), _possibleConstructorReturn$1(_this, _ret);
+  }
+
+  /**
+   * > 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
+   */
+
+
+  _createClass$1(Dropdown, [{
+    key: "renderInput",
+
+
+    /**
+     * @param {DownshiftHelpers} downshift
+     * @returns {JSX.Element}
+     */
+    value: function renderInput(downshift) {
+      var id = downshift.id,
+          toggleMenu = downshift.toggleMenu,
+          getInputProps = downshift.getInputProps;
+      var _props = this.props,
+          label = _props.label,
+          instructions = _props.instructions,
+          placeholder = _props.placeholder,
+          disabled = _props.disabled,
+          required = _props.required,
+          onBlur = _props.onBlur,
+          onFocus = _props.onFocus;
+
+
+      var inputProps = getInputProps({
+        id: id,
+        label: label,
+        instructions: instructions,
+        placeholder: placeholder,
+        disabled: disabled,
+        required: required,
+        onBlur: onBlur,
+        onFocus: onFocus,
+        onClick: toggleMenu
+      });
+
+      return React__default.createElement(InputPresenter, _extends$3({ key: "input" }, inputProps));
+    }
+
+    /**
+     * @param {DownshiftHelpers} downshift
+     * @returns {JSX.Element}
+     */
+
+  }, {
+    key: "renderMenu",
+    value: function renderMenu(downshift) {
+      var isOpen = downshift.isOpen,
+          getItemProps = downshift.getItemProps,
+          getMenuProps = downshift.getMenuProps,
+          highlightedIndex = downshift.highlightedIndex,
+          selectedItem = downshift.selectedItem,
+          selectedItems = downshift.selectedItems;
+
+      var menuProps = getMenuProps({ isOpen: isOpen });
+      var _props2 = this.props,
+          multiple = _props2.multiple,
+          options = _props2.options,
+          formatOption = _props2.formatOption;
+
+      var children = renderOptions({
+        multiple: multiple,
+        options: options,
+        formatOption: formatOption,
+        getItemProps: getItemProps,
+        highlightedIndex: highlightedIndex,
+        selectedItem: selectedItem,
+        selectedItems: selectedItems
+      });
+
+      return React__default.createElement(
+        MenuPresenter,
+        _extends$3({ key: "menu" }, menuProps),
+        children
+      );
+    }
+
+    /**
+     * @param {DownshiftHelpers} downshift
+     * @returns {JSX.Element}
+     */
+
+  }, {
+    key: "render",
+    value: function render() {
+      var _props3 = this.props,
+          id = _props3.id,
+          multiple = _props3.multiple,
+          formatOption = _props3.formatOption;
+
+      var Behavior = multiple ? MultiDownshift : Downshift;
+
+      return React__default.createElement(
+        Behavior,
+        {
+          id: id,
+          onChange: this.handleChange,
+          itemToString: formatOption
+        },
+        this.renderPresenter
+      );
+    }
+  }]);
+
+  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,
+  /**
+   * Enables multiple selection
+   */
+  multiple: PropTypes.bool,
+  /**
+   * 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
+   */
+  value: PropTypes.oneOfType([PropTypes.any, PropTypes.arrayOf(PropTypes.any)]),
+  /**
+   * An array of unique values of any type except `undefined`
+   */
+  options: PropTypes.arrayOf(PropTypes.any),
+  /**
+   * Called with the selected option when the value changes
+   */
+  onChange: PropTypes.func,
+  /**
+   * Called when the text field is blurred
+   */
+  onBlur: PropTypes.func,
+  /**
+   * Called when the text field is focused
+   */
+  onFocus: PropTypes.func,
+  /**
+   * Used to format options into human readable strings
+   */
+  formatOption: PropTypes.func
+};
+Dropdown.defaultProps = {
+  /**
+   * @param {OptionMeta} option
+   * @returns {string}
+   */
+  formatOption: function formatOption(option) {
+    return option ? String(option) : "";
+  }
+};
+Dropdown.__docgenInfo = {
+  "description": "@typedef {import(\"downshift\").ControllerStateAndHelpers} DownshiftHelpers",
+  "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"
+    },
+    "multiple": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Enables multiple selection"
+    },
+    "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"
+    },
+    "value": {
+      "type": {
+        "name": "union",
+        "value": [{
+          "name": "any"
+        }, {
+          "name": "arrayOf",
+          "value": {
+            "name": "any"
+          }
+        }]
+      },
+      "required": false,
+      "description": "An array of objects to choose from"
+    },
+    "options": {
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "any"
+        }
+      },
+      "required": false,
+      "description": "An array of unique values of any type except `undefined`"
+    },
+    "onChange": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called with the selected option when the value changes"
+    },
+    "onBlur": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when the text field is blurred"
+    },
+    "onFocus": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Called when the text field is focused"
+    },
+    "formatOption": {
+      "type": {
+        "name": "func"
+      },
+      "required": false,
+      "description": "Used to format options into human readable strings",
+      "defaultValue": {
+        "value": "function(option) {\n  return option ? String(option) : \"\";\n}",
+        "computed": false
+      }
+    }
+  }
+};
+
+exports.default = Dropdown;

package.json

 {
   "name": "@hig/dropdown",
-  "version": "0.1.1-alpha",
+  "version": "0.1.1",
   "description": "HIG Dropdown",
   "author": "Autodesk Inc.",
   "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Autodesk/hig.git"
+  },
   "publishConfig": {
@@ -17,4 +21,7 @@ "access": "public"
   "dependencies": {
+    "@hig/icon": "^0.1.3",
+    "@hig/multi-downshift": "^0.0.1",
+    "@hig/text-field": "^0.4.0",
     "classnames": "^2.2.5",
-    "hig-react": "^0.29.0",
+    "downshift": "^2.0.12",
     "prop-types": "^15.6.1",
@@ -29,3 +36,5 @@ "react-lifecycles-compat": "^3.0.2"
     "@hig/eslint-config": "^0.1.0",
-    "@hig/scripts": "^0.1.0",
+    "@hig/jest-preset": "^0.1.0",
+    "@hig/scripts": "^0.1.2",
+    "@hig/semantic-release-config": "^0.1.0",
     "@hig/styles": "^0.1.1"
@@ -35,3 +44,5 @@ },
     "build": "hig-scripts-build",
-    "lint": "eslint src --color --ext .js,.jsx"
+    "lint": "hig-scripts-lint",
+    "test": "hig-scripts-test",
+    "release": "hig-scripts-release"
   },
@@ -41,2 +52,8 @@ "eslintConfig": {
   },
+  "jest": {
+    "preset": "@hig/jest-preset"
+  },
+  "release": {
+    "extends": "@hig/semantic-release-config"
+  },
   "babel": {
@@ -43,0 +60,0 @@ "env": {

README.md

@@ -18,4 +18,4 @@ # Dropdown
 ```js
-import Dropdown from '@hig/dropdown';
-import '@hig/dropdown/build/index.css';
+import Dropdown from "@hig/dropdown";
+import "@hig/dropdown/build/index.css";
 ```
@@ -30,13 +30,4 @@
   placeholder="placeholder for regular Uncontrolled dropdown"
-  options={[
-    {
-      label: "foo",
-      value: "foo value"
-    },
-    {
-      label: "bar",
-      value: "bar value"
-    }
-  ]}
+  options={["Foo", "Bar"]}
 />
 ```

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

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

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 package files

7

increased by16.67%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

79004

decreased by-72.19%

Dependency count

8

increased by60%

Dev dependency count

6

increased by50%

Lines of code

1963

decreased by-76.03%

Number of lines in readme file

32

decreased by-21.95%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@hig/icon@^0.1.3

• + Added@hig/multi-downshift@^0.0.1

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

• + Addeddownshift@^2.0.12

• + Added@hig/icon@0.2.1(transitive)

• + Added@hig/icon-button@0.2.2(transitive)

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

• + Added@hig/multi-downshift@0.0.1(transitive)

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

• + Added@hig/utils@0.1.00.3.0(transitive)

• + Addedcompute-scroll-into-view@1.0.20(transitive)

• + Addeddownshift@2.2.3(transitive)

• + Addedlodash.memoize@4.1.2(transitive)

• - Removedhig-react@^0.29.0

• - Removed@babel/runtime@7.25.6(transitive)

• - Removed@hig/avatar@0.1.3(transitive)

• - Removed@hig/icon-button@0.1.3(transitive)

• - Removed@hig/timestamp@0.1.4(transitive)

• - Removed@hig/typography@0.1.4(transitive)

• - Removedasap@2.0.6(transitive)

• - Removedcore-js@1.2.7(transitive)

• - Removedcreate-react-class@15.7.0(transitive)

• - Removeddom-helpers@3.4.0(transitive)

• - Removedencoding@0.1.13(transitive)

• - Removedfbjs@0.8.18(transitive)

• - Removedhig-interface@0.1.19(transitive)

• - Removedhig-react@0.29.0(transitive)

• - Removedhig-vanilla@0.1.27(transitive)

• - Removediconv-lite@0.6.3(transitive)

• - Removedis-stream@1.1.0(transitive)

• - Removedisomorphic-fetch@2.2.1(transitive)

• - Removednode-fetch@1.7.3(transitive)

• - Removedpromise@7.3.1(transitive)

• - Removedreact@15.7.018.3.1(transitive)

• - Removedreact-dom@15.7.018.3.1(transitive)

• - Removedreact-flip-move@3.0.5(transitive)

• - Removedreact-transition-group@2.9.0(transitive)

• - Removedregenerator-runtime@0.14.1(transitive)

• - Removedsafer-buffer@2.1.2(transitive)

• - Removedscheduler@0.23.2(transitive)

• - Removedsetimmediate@1.0.5(transitive)

• - Removedua-parser-js@0.7.39(transitive)

• - Removedwhatwg-fetch@3.6.20(transitive)