@hig/multi-downshift - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

build/index.es.js

@@ -6,16 +6,81 @@ import React from 'react';
 
-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 ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
 
-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; }; }();
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
 
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+  return keys;
+}
 
-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 _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+  return target;
+}
 
-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 _defineProperty(obj, key, value) {
+  if (key in obj) {
+    Object.defineProperty(obj, key, {
+      value: value,
+      enumerable: true,
+      configurable: true,
+      writable: true
+    });
+  } else {
+    obj[key] = value;
+  }
 
-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; }
+  return obj;
+}
 
+function _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
+const _excluded = ["onClick", "item"],
+      _excluded2 = ["children", "inputValue"];
 /**
@@ -38,236 +103,217 @@ * @typedef {import("downshift").DownshiftProps<any>} Props
 
-var MultiDownshift = function (_React$Component) {
-  _inherits(MultiDownshift, _React$Component);
+class MultiDownshift extends React.Component {
+  constructor() {
+    var _this;
 
-  function MultiDownshift() {
-    var _ref;
+    super(...arguments);
+    _this = this;
 
-    var _temp, _this, _ret;
+    _defineProperty(this, "state", {
+      selectedItems: this.getDefaultSelectedItem(),
+      lastClickedItem: ""
+    });
 
-    _classCallCheck(this, MultiDownshift);
+    _defineProperty(this, "getRemoveButtonProps", function () {
+      let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+      let {
+        onClick,
+        item
+      } = _ref,
+          props = _objectWithoutProperties(_ref, _excluded);
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = MultiDownshift.__proto__ || Object.getPrototypeOf(MultiDownshift)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      selectedItems: _this.getDefaultSelectedItem()
-    }, _this.getRemoveButtonProps = function () {
-      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-      var onClick = _ref2.onClick,
-          item = _ref2.item,
-          props = _objectWithoutProperties(_ref2, ["onClick", "item"]);
-
       /**
        * @param {MouseEvent} event
        */
-      var handleRemoveButtonClick = function handleRemoveButtonClick(event) {
+      const handleRemoveButtonClick = event => {
         event.stopPropagation();
+
         _this.unselectItem(item);
       };
 
-      var handleClick = combineEventHandlers(onClick, handleRemoveButtonClick);
-
-      return _extends({}, props, {
+      const handleClick = combineEventHandlers(onClick, handleRemoveButtonClick);
+      return _objectSpread2(_objectSpread2({}, props), {}, {
         onClick: handleClick
       });
-    }, _this.stateReducer = function (state, changes) {
+    });
+
+    _defineProperty(this, "stateReducer", (state, changes) => {
       switch (changes.type) {
         case Downshift.stateChangeTypes.clickItem:
-          return _extends({}, changes, {
+          return _objectSpread2(_objectSpread2({}, changes), {}, {
             isOpen: true
           });
+
         default:
           return changes;
       }
-    }, _this.handleSelect = function (selectedItem, downshift) {
-      var selectedItems = _this.getSelectedItems();
-      var triggerChange = _this.createChangeTrigger(downshift);
+    });
 
+    _defineProperty(this, "handleSelect", (selectedItem, downshift) => {
+      const selectedItems = this.getSelectedItems();
+      const triggerChange = this.createChangeTrigger(downshift, selectedItem);
+
       if (selectedItems.includes(selectedItem)) {
-        _this.unselectItem(selectedItem, triggerChange);
+        this.unselectItem(selectedItem, triggerChange);
       } else {
-        _this.selectItem(selectedItem, triggerChange);
+        this.selectItem(selectedItem, triggerChange);
       }
-    }, _this.renderPresenter = function (downshift) {
-      return _this.props.children(_this.getStateAndHelpers(downshift));
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    });
+
+    _defineProperty(this, "renderPresenter", downshift => this.props.children(this.getStateAndHelpers(downshift)));
   }
 
-  _createClass(MultiDownshift, [{
-    key: "getDefaultSelectedItem",
-    value: function getDefaultSelectedItem() {
-      var initialSelectedItems = this.props.initialSelectedItems;
+  getDefaultSelectedItem() {
+    const {
+      initialSelectedItems
+    } = this.props;
+    return initialSelectedItems;
+  }
+  /**
+   * @returns {any[]}
+   */
 
 
-      return initialSelectedItems;
-    }
+  getSelectedItems() {
+    const controlledSelectedItems = this.props.selectedItems;
+    const {
+      selectedItems
+    } = this.state;
+    return controlledSelectedItems !== undefined ? controlledSelectedItems : selectedItems;
+  }
+  /**
+   * @param {import("downshift").ControllerStateAndHelpers<any>} downshift
+   * @returns {ControllerStateAndHelpers}
+   */
 
-    /**
-     * @returns {any[]}
-     */
 
-  }, {
-    key: "getSelectedItems",
-    value: function getSelectedItems() {
-      var controlledSelectedItems = this.props.selectedItems;
-      var selectedItems = this.state.selectedItems;
+  getStateAndHelpers(downshift) {
+    const selectedItems = this.getSelectedItems();
+    const {
+      getRemoveButtonProps
+    } = this;
+    return _objectSpread2(_objectSpread2({}, downshift), {}, {
+      getRemoveButtonProps,
+      selectedItems
+    });
+  }
+  /**
+   * @param {GetRemoveButtonPropsOptions} options
+   * @returns {any}
+   */
 
 
-      return controlledSelectedItems !== undefined ? controlledSelectedItems : selectedItems;
-    }
+  /**
+   * @returns {import("downshift").ControllerStateAndHelpers}
+   */
+  getDownshiftProps() {
+    const _this$props = this.props,
+          {
+      children,
+      inputValue
+    } = _this$props,
+          otherProps = _objectWithoutProperties(_this$props, _excluded2);
 
-    /**
-     * @param {import("downshift").ControllerStateAndHelpers<any>} downshift
-     * @returns {ControllerStateAndHelpers}
-     */
+    const controlledInputValue = inputValue !== undefined ? inputValue : this.selectedItemsToString();
+    return _objectSpread2(_objectSpread2({}, otherProps), {}, {
+      inputValue: controlledInputValue,
+      onSelect: this.handleSelect,
+      stateReducer: this.stateReducer
+    });
+  }
+  /**
+   * @param {import("downshift").DownshiftState<any>} state
+   * @param {import("downshift").StateChangeOptions<any>} changes
+   * @returns {import("downshift").Partial<StateChangeOptions<any>>}
+   */
 
-  }, {
-    key: "getStateAndHelpers",
-    value: function getStateAndHelpers(downshift) {
-      var selectedItems = this.getSelectedItems();
-      var getRemoveButtonProps = this.getRemoveButtonProps;
 
+  /**
+   * @param {import("downshift").ControllerStateAndHelpers} downshift
+   */
+  createChangeTrigger(downshift, selectedItem) {
+    const multiDownshift = this.getStateAndHelpers(downshift);
+    return () => {
+      const {
+        onChange
+      } = this.props;
+      const selectedItems = this.getSelectedItems();
 
-      return _extends({}, downshift, {
-        getRemoveButtonProps: getRemoveButtonProps,
-        selectedItems: selectedItems
-      });
-    }
+      if (this.state.lastClickedItem !== selectedItem) {
+        this.setState({
+          lastClickedItem: selectedItem
+        });
+      }
 
-    /**
-     * @param {GetRemoveButtonPropsOptions} options
-     * @returns {any}
-     */
+      if (onChange) {
+        onChange(selectedItems, multiDownshift);
 
-  }, {
-    key: "getDownshiftProps",
-
-
-    /**
-     * @returns {import("downshift").ControllerStateAndHelpers}
-     */
-    value: function getDownshiftProps() {
-      var _props = this.props,
-          children = _props.children,
-          inputValue = _props.inputValue,
-          otherProps = _objectWithoutProperties(_props, ["children", "inputValue"]);
-
-      var controlledInputValue = inputValue !== undefined ? inputValue : this.selectedItemsToString();
-
-      return _extends({}, otherProps, {
-        inputValue: controlledInputValue,
-        onSelect: this.handleSelect,
-        stateReducer: this.stateReducer
-      });
-    }
-
-    /**
-     * @param {import("downshift").DownshiftState<any>} state
-     * @param {import("downshift").StateChangeOptions<any>} changes
-     * @returns {import("downshift").Partial<StateChangeOptions<any>>}
-     */
-
-  }, {
-    key: "createChangeTrigger",
-
-
-    /**
-     * @param {import("downshift").ControllerStateAndHelpers} downshift
-     */
-    value: function createChangeTrigger(downshift) {
-      var _this2 = this;
-
-      var multiDownshift = this.getStateAndHelpers(downshift);
-
-      return function () {
-        var onChange = _this2.props.onChange;
-
-        var selectedItems = _this2.getSelectedItems();
-
-        if (onChange) {
-          onChange(selectedItems, multiDownshift);
+        if (this.state.lastClickedItem === selectedItem) {
+          onChange(selectedItem, multiDownshift);
         }
-      };
-    }
+      }
+    };
+  }
+  /**
+   * @returns {string}
+   * @todo Add intelligent formatting
+   */
 
-    /**
-     * @param {any} selectedItem
-     * @param {import("downshift").ControllerStateAndHelpers} downshift
-     */
 
-  }, {
-    key: "selectedItemsToString",
+  selectedItemsToString() {
+    const {
+      itemToString
+    } = this.props;
+    const selectedItems = this.getSelectedItems();
+    return selectedItems.map(itemToString).join(", ");
+  }
+  /**
+   * @param {any} item
+   * @param {Function} done
+   */
 
 
-    /**
-     * @returns {string}
-     * @todo Add intelligent formatting
-     */
-    value: function selectedItemsToString() {
-      var itemToString = this.props.itemToString;
+  unselectItem(item, done) {
+    const selectedItems = this.getSelectedItems();
+    const nextSelectedItems = selectedItems.filter(selectedItem => selectedItem !== item);
+    this.setState({
+      selectedItems: nextSelectedItems
+    }, done);
+  }
+  /**
+   * @param {any} removedItem
+   * @param {Function} done
+   */
 
-      var selectedItems = this.getSelectedItems();
 
-      return selectedItems.map(itemToString).join(", ");
-    }
+  selectItem(item, done) {
+    const selectedItems = this.getSelectedItems();
+    const nextSelectedItems = [...selectedItems, item];
+    this.setState({
+      selectedItems: nextSelectedItems
+    }, done);
+  }
+  /**
+   * @param {import("downshift").ControllerStateAndHelpers} downshift
+   */
 
-    /**
-     * @param {any} item
-     * @param {Function} done
-     */
 
-  }, {
-    key: "unselectItem",
-    value: function unselectItem(item, done) {
-      var selectedItems = this.getSelectedItems();
-      var nextSelectedItems = selectedItems.filter(function (selectedItem) {
-        return selectedItem !== item;
-      });
+  render() {
+    return /*#__PURE__*/React.createElement(Downshift, this.getDownshiftProps(), this.renderPresenter);
+  }
 
-      this.setState({ selectedItems: nextSelectedItems }, done);
-    }
+}
 
-    /**
-     * @param {any} removedItem
-     * @param {Function} done
-     */
-
-  }, {
-    key: "selectItem",
-    value: function selectItem(item, done) {
-      var selectedItems = this.getSelectedItems();
-      var nextSelectedItems = [].concat(_toConsumableArray(selectedItems), [item]);
-
-      this.setState({ selectedItems: nextSelectedItems }, done);
-    }
-
-    /**
-     * @param {import("downshift").ControllerStateAndHelpers} downshift
-     */
-
-  }, {
-    key: "render",
-    value: function render() {
-      return React.createElement(
-        Downshift,
-        this.getDownshiftProps(),
-        this.renderPresenter
-      );
-    }
-  }]);
-
-  return MultiDownshift;
-}(React.Component);
-
-MultiDownshift.propTypes = _extends({}, Downshift.propTypes, {
+_defineProperty(MultiDownshift, "propTypes", _objectSpread2(_objectSpread2({}, Downshift.propTypes), {}, {
   /** Controlled: the currently selected items */
   selectedItems: PropTypes.arrayOf(PropTypes.any),
+
   /** Items selected by default */
   initialSelectedItems: PropTypes.arrayOf(PropTypes.any)
+}));
+
+_defineProperty(MultiDownshift, "defaultProps", {
+  initialSelectedItems: []
 });
-MultiDownshift.defaultProps = {
-  initialSelectedItems: []
-};
+
 MultiDownshift.__docgenInfo = {
@@ -305,2 +351,2 @@ "description": "@typedef {import(\"downshift\").ControllerStateAndHelpers<any>} ControllerStateAndHelpers\n@property {function(GetRemoveButtonPropsOptions): any} getRemoveButtonProps\n@property {any[]} selectedItems",
 
-export default MultiDownshift;
+export { MultiDownshift as default };

build/index.js

@@ -5,23 +5,92 @@ 'use strict';
 
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
-var React = _interopDefault(require('react'));
-var PropTypes = _interopDefault(require('prop-types'));
-var Downshift = _interopDefault(require('downshift'));
+var React = require('react');
+var PropTypes = require('prop-types');
+var Downshift = require('downshift');
 var utils = require('@hig/utils');
 
-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 _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
-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 React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var Downshift__default = /*#__PURE__*/_interopDefaultLegacy(Downshift);
 
-function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } }
+function ownKeys(object, enumerableOnly) {
+  var keys = Object.keys(object);
 
-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; }
+  if (Object.getOwnPropertySymbols) {
+    var symbols = Object.getOwnPropertySymbols(object);
+    enumerableOnly && (symbols = symbols.filter(function (sym) {
+      return Object.getOwnPropertyDescriptor(object, sym).enumerable;
+    })), keys.push.apply(keys, symbols);
+  }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+  return keys;
+}
 
-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 _objectSpread2(target) {
+  for (var i = 1; i < arguments.length; i++) {
+    var source = null != arguments[i] ? arguments[i] : {};
+    i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
+      _defineProperty(target, key, source[key]);
+    }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
+      Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
+    });
+  }
 
-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; }
+  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 _objectWithoutPropertiesLoose(source, excluded) {
+  if (source == null) return {};
+  var target = {};
+  var sourceKeys = Object.keys(source);
+  var key, i;
+
+  for (i = 0; i < sourceKeys.length; i++) {
+    key = sourceKeys[i];
+    if (excluded.indexOf(key) >= 0) continue;
+    target[key] = source[key];
+  }
+
+  return target;
+}
+
+function _objectWithoutProperties(source, excluded) {
+  if (source == null) return {};
+
+  var target = _objectWithoutPropertiesLoose(source, excluded);
+
+  var key, i;
+
+  if (Object.getOwnPropertySymbols) {
+    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
+
+    for (i = 0; i < sourceSymbolKeys.length; i++) {
+      key = sourceSymbolKeys[i];
+      if (excluded.indexOf(key) >= 0) continue;
+      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
+      target[key] = source[key];
+    }
+  }
+
+  return target;
+}
+
+const _excluded = ["onClick", "item"],
+      _excluded2 = ["children", "inputValue"];
 /**
@@ -44,236 +113,217 @@ * @typedef {import("downshift").DownshiftProps<any>} Props
 
-var MultiDownshift = function (_React$Component) {
-  _inherits(MultiDownshift, _React$Component);
+class MultiDownshift extends React__default["default"].Component {
+  constructor() {
+    var _this;
 
-  function MultiDownshift() {
-    var _ref;
+    super(...arguments);
+    _this = this;
 
-    var _temp, _this, _ret;
+    _defineProperty(this, "state", {
+      selectedItems: this.getDefaultSelectedItem(),
+      lastClickedItem: ""
+    });
 
-    _classCallCheck(this, MultiDownshift);
+    _defineProperty(this, "getRemoveButtonProps", function () {
+      let _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
+      let {
+        onClick,
+        item
+      } = _ref,
+          props = _objectWithoutProperties(_ref, _excluded);
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = MultiDownshift.__proto__ || Object.getPrototypeOf(MultiDownshift)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      selectedItems: _this.getDefaultSelectedItem()
-    }, _this.getRemoveButtonProps = function () {
-      var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-
-      var onClick = _ref2.onClick,
-          item = _ref2.item,
-          props = _objectWithoutProperties(_ref2, ["onClick", "item"]);
-
       /**
        * @param {MouseEvent} event
        */
-      var handleRemoveButtonClick = function handleRemoveButtonClick(event) {
+      const handleRemoveButtonClick = event => {
         event.stopPropagation();
+
         _this.unselectItem(item);
       };
 
-      var handleClick = utils.combineEventHandlers(onClick, handleRemoveButtonClick);
-
-      return _extends({}, props, {
+      const handleClick = utils.combineEventHandlers(onClick, handleRemoveButtonClick);
+      return _objectSpread2(_objectSpread2({}, props), {}, {
         onClick: handleClick
       });
-    }, _this.stateReducer = function (state, changes) {
+    });
+
+    _defineProperty(this, "stateReducer", (state, changes) => {
       switch (changes.type) {
-        case Downshift.stateChangeTypes.clickItem:
-          return _extends({}, changes, {
+        case Downshift__default["default"].stateChangeTypes.clickItem:
+          return _objectSpread2(_objectSpread2({}, changes), {}, {
             isOpen: true
           });
+
         default:
           return changes;
       }
-    }, _this.handleSelect = function (selectedItem, downshift) {
-      var selectedItems = _this.getSelectedItems();
-      var triggerChange = _this.createChangeTrigger(downshift);
+    });
 
+    _defineProperty(this, "handleSelect", (selectedItem, downshift) => {
+      const selectedItems = this.getSelectedItems();
+      const triggerChange = this.createChangeTrigger(downshift, selectedItem);
+
       if (selectedItems.includes(selectedItem)) {
-        _this.unselectItem(selectedItem, triggerChange);
+        this.unselectItem(selectedItem, triggerChange);
       } else {
-        _this.selectItem(selectedItem, triggerChange);
+        this.selectItem(selectedItem, triggerChange);
       }
-    }, _this.renderPresenter = function (downshift) {
-      return _this.props.children(_this.getStateAndHelpers(downshift));
-    }, _temp), _possibleConstructorReturn(_this, _ret);
+    });
+
+    _defineProperty(this, "renderPresenter", downshift => this.props.children(this.getStateAndHelpers(downshift)));
   }
 
-  _createClass(MultiDownshift, [{
-    key: "getDefaultSelectedItem",
-    value: function getDefaultSelectedItem() {
-      var initialSelectedItems = this.props.initialSelectedItems;
+  getDefaultSelectedItem() {
+    const {
+      initialSelectedItems
+    } = this.props;
+    return initialSelectedItems;
+  }
+  /**
+   * @returns {any[]}
+   */
 
 
-      return initialSelectedItems;
-    }
+  getSelectedItems() {
+    const controlledSelectedItems = this.props.selectedItems;
+    const {
+      selectedItems
+    } = this.state;
+    return controlledSelectedItems !== undefined ? controlledSelectedItems : selectedItems;
+  }
+  /**
+   * @param {import("downshift").ControllerStateAndHelpers<any>} downshift
+   * @returns {ControllerStateAndHelpers}
+   */
 
-    /**
-     * @returns {any[]}
-     */
 
-  }, {
-    key: "getSelectedItems",
-    value: function getSelectedItems() {
-      var controlledSelectedItems = this.props.selectedItems;
-      var selectedItems = this.state.selectedItems;
+  getStateAndHelpers(downshift) {
+    const selectedItems = this.getSelectedItems();
+    const {
+      getRemoveButtonProps
+    } = this;
+    return _objectSpread2(_objectSpread2({}, downshift), {}, {
+      getRemoveButtonProps,
+      selectedItems
+    });
+  }
+  /**
+   * @param {GetRemoveButtonPropsOptions} options
+   * @returns {any}
+   */
 
 
-      return controlledSelectedItems !== undefined ? controlledSelectedItems : selectedItems;
-    }
+  /**
+   * @returns {import("downshift").ControllerStateAndHelpers}
+   */
+  getDownshiftProps() {
+    const _this$props = this.props,
+          {
+      children,
+      inputValue
+    } = _this$props,
+          otherProps = _objectWithoutProperties(_this$props, _excluded2);
 
-    /**
-     * @param {import("downshift").ControllerStateAndHelpers<any>} downshift
-     * @returns {ControllerStateAndHelpers}
-     */
+    const controlledInputValue = inputValue !== undefined ? inputValue : this.selectedItemsToString();
+    return _objectSpread2(_objectSpread2({}, otherProps), {}, {
+      inputValue: controlledInputValue,
+      onSelect: this.handleSelect,
+      stateReducer: this.stateReducer
+    });
+  }
+  /**
+   * @param {import("downshift").DownshiftState<any>} state
+   * @param {import("downshift").StateChangeOptions<any>} changes
+   * @returns {import("downshift").Partial<StateChangeOptions<any>>}
+   */
 
-  }, {
-    key: "getStateAndHelpers",
-    value: function getStateAndHelpers(downshift) {
-      var selectedItems = this.getSelectedItems();
-      var getRemoveButtonProps = this.getRemoveButtonProps;
 
+  /**
+   * @param {import("downshift").ControllerStateAndHelpers} downshift
+   */
+  createChangeTrigger(downshift, selectedItem) {
+    const multiDownshift = this.getStateAndHelpers(downshift);
+    return () => {
+      const {
+        onChange
+      } = this.props;
+      const selectedItems = this.getSelectedItems();
 
-      return _extends({}, downshift, {
-        getRemoveButtonProps: getRemoveButtonProps,
-        selectedItems: selectedItems
-      });
-    }
+      if (this.state.lastClickedItem !== selectedItem) {
+        this.setState({
+          lastClickedItem: selectedItem
+        });
+      }
 
-    /**
-     * @param {GetRemoveButtonPropsOptions} options
-     * @returns {any}
-     */
+      if (onChange) {
+        onChange(selectedItems, multiDownshift);
 
-  }, {
-    key: "getDownshiftProps",
-
-
-    /**
-     * @returns {import("downshift").ControllerStateAndHelpers}
-     */
-    value: function getDownshiftProps() {
-      var _props = this.props,
-          children = _props.children,
-          inputValue = _props.inputValue,
-          otherProps = _objectWithoutProperties(_props, ["children", "inputValue"]);
-
-      var controlledInputValue = inputValue !== undefined ? inputValue : this.selectedItemsToString();
-
-      return _extends({}, otherProps, {
-        inputValue: controlledInputValue,
-        onSelect: this.handleSelect,
-        stateReducer: this.stateReducer
-      });
-    }
-
-    /**
-     * @param {import("downshift").DownshiftState<any>} state
-     * @param {import("downshift").StateChangeOptions<any>} changes
-     * @returns {import("downshift").Partial<StateChangeOptions<any>>}
-     */
-
-  }, {
-    key: "createChangeTrigger",
-
-
-    /**
-     * @param {import("downshift").ControllerStateAndHelpers} downshift
-     */
-    value: function createChangeTrigger(downshift) {
-      var _this2 = this;
-
-      var multiDownshift = this.getStateAndHelpers(downshift);
-
-      return function () {
-        var onChange = _this2.props.onChange;
-
-        var selectedItems = _this2.getSelectedItems();
-
-        if (onChange) {
-          onChange(selectedItems, multiDownshift);
+        if (this.state.lastClickedItem === selectedItem) {
+          onChange(selectedItem, multiDownshift);
         }
-      };
-    }
+      }
+    };
+  }
+  /**
+   * @returns {string}
+   * @todo Add intelligent formatting
+   */
 
-    /**
-     * @param {any} selectedItem
-     * @param {import("downshift").ControllerStateAndHelpers} downshift
-     */
 
-  }, {
-    key: "selectedItemsToString",
+  selectedItemsToString() {
+    const {
+      itemToString
+    } = this.props;
+    const selectedItems = this.getSelectedItems();
+    return selectedItems.map(itemToString).join(", ");
+  }
+  /**
+   * @param {any} item
+   * @param {Function} done
+   */
 
 
-    /**
-     * @returns {string}
-     * @todo Add intelligent formatting
-     */
-    value: function selectedItemsToString() {
-      var itemToString = this.props.itemToString;
+  unselectItem(item, done) {
+    const selectedItems = this.getSelectedItems();
+    const nextSelectedItems = selectedItems.filter(selectedItem => selectedItem !== item);
+    this.setState({
+      selectedItems: nextSelectedItems
+    }, done);
+  }
+  /**
+   * @param {any} removedItem
+   * @param {Function} done
+   */
 
-      var selectedItems = this.getSelectedItems();
 
-      return selectedItems.map(itemToString).join(", ");
-    }
+  selectItem(item, done) {
+    const selectedItems = this.getSelectedItems();
+    const nextSelectedItems = [...selectedItems, item];
+    this.setState({
+      selectedItems: nextSelectedItems
+    }, done);
+  }
+  /**
+   * @param {import("downshift").ControllerStateAndHelpers} downshift
+   */
 
-    /**
-     * @param {any} item
-     * @param {Function} done
-     */
 
-  }, {
-    key: "unselectItem",
-    value: function unselectItem(item, done) {
-      var selectedItems = this.getSelectedItems();
-      var nextSelectedItems = selectedItems.filter(function (selectedItem) {
-        return selectedItem !== item;
-      });
+  render() {
+    return /*#__PURE__*/React__default["default"].createElement(Downshift__default["default"], this.getDownshiftProps(), this.renderPresenter);
+  }
 
-      this.setState({ selectedItems: nextSelectedItems }, done);
-    }
+}
 
-    /**
-     * @param {any} removedItem
-     * @param {Function} done
-     */
+_defineProperty(MultiDownshift, "propTypes", _objectSpread2(_objectSpread2({}, Downshift__default["default"].propTypes), {}, {
+  /** Controlled: the currently selected items */
+  selectedItems: PropTypes__default["default"].arrayOf(PropTypes__default["default"].any),
 
-  }, {
-    key: "selectItem",
-    value: function selectItem(item, done) {
-      var selectedItems = this.getSelectedItems();
-      var nextSelectedItems = [].concat(_toConsumableArray(selectedItems), [item]);
+  /** Items selected by default */
+  initialSelectedItems: PropTypes__default["default"].arrayOf(PropTypes__default["default"].any)
+}));
 
-      this.setState({ selectedItems: nextSelectedItems }, done);
-    }
+_defineProperty(MultiDownshift, "defaultProps", {
+  initialSelectedItems: []
+});
 
-    /**
-     * @param {import("downshift").ControllerStateAndHelpers} downshift
-     */
-
-  }, {
-    key: "render",
-    value: function render() {
-      return React.createElement(
-        Downshift,
-        this.getDownshiftProps(),
-        this.renderPresenter
-      );
-    }
-  }]);
-
-  return MultiDownshift;
-}(React.Component);
-
-MultiDownshift.propTypes = _extends({}, Downshift.propTypes, {
-  /** Controlled: the currently selected items */
-  selectedItems: PropTypes.arrayOf(PropTypes.any),
-  /** Items selected by default */
-  initialSelectedItems: PropTypes.arrayOf(PropTypes.any)
-});
-MultiDownshift.defaultProps = {
-  initialSelectedItems: []
-};
 MultiDownshift.__docgenInfo = {
@@ -311,2 +361,2 @@ "description": "@typedef {import(\"downshift\").ControllerStateAndHelpers<any>} ControllerStateAndHelpers\n@property {function(GetRemoveButtonPropsOptions): any} getRemoveButtonProps\n@property {any[]} selectedItems",
 
-exports.default = MultiDownshift;
+exports["default"] = MultiDownshift;

CHANGELOG.md

@@ -0,1 +1,13 @@
+# [@hig/multi-downshift-v2.2.0](https://github.com/Autodesk/hig/compare/@hig/multi-downshift@2.1.0...@hig/multi-downshift@2.2.0) (2022-05-20)
+
+
+### Bug Fixes
+
+* trigger onChange when same option clicked back to back ([f7f317d](https://github.com/Autodesk/hig/commit/f7f317d))
+
+
+### Features
+
+* update to Downshift 6.0.0 ([ff46de1](https://github.com/Autodesk/hig/commit/ff46de1))
+
 # [@hig/multi-downshift-v2.1.0](https://github.com/Autodesk/hig/compare/@hig/multi-downshift@2.0.0...@hig/multi-downshift@2.1.0) (2022-01-24)
@@ -2,0 +14,0 @@

package.json

 {
   "name": "@hig/multi-downshift",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "Multi-selection support for Downshift",
@@ -30,3 +30,3 @@ "author": "Autodesk Inc.",
   "peerDependencies": {
-    "downshift": "^3.2.0",
+    "downshift": "^6.0.0",
     "react": "^17.0.0"
@@ -33,0 +33,0 @@ },

New alerts

License Policy Violation

License

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

Found 1 instance in 1 package

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

Improved metrics

Lines of code

586

increased by20.33%

Worsened metrics

Total package byte prevSize

24421

decreased by-4.5%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes