Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

downshift

Package Overview
Dependencies
Maintainers
1
Versions
354
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

downshift - npm Package Compare versions

Comparing version 1.0.0-beta.13 to 1.0.0-beta.14

183

dist/downshift.cjs.js

@@ -346,13 +346,10 @@ 'use strict';

}
return _this.items.find(function (item) {
return item.index === index;
});
return _this.items[index];
};
_this.getIndexFromValue = function (itemValue) {
var item = _this.items.find(function (_ref2) {
var value = _ref2.value;
return value === itemValue;
_this.getIndexFromItem = function (item) {
var itemIndex = _this.items.findIndex(function (i) {
return i === item;
});
return item ? item.index : null;
return itemIndex === -1 ? null : itemIndex;
};

@@ -373,3 +370,3 @@

_this.highlightSelectedItem = function () {
var highlightedIndex = _this.getIndexFromValue(_this.getState().selectedValue) || 0;
var highlightedIndex = _this.getIndexFromItem(_this.getState().selectedItem) || 0;
_this.internalSetState({ highlightedIndex: highlightedIndex }, function () {

@@ -418,3 +415,3 @@ _this.maybeScrollToHighlightedElement(highlightedIndex, true);

_this.internalSetState({
selectedValue: _this.multiple ? [] : '',
selectedItem: null,
isOpen: false

@@ -427,29 +424,7 @@ }, function () {

_this.selectItem = function (itemValue) {
if (!_this.props.multiple) {
_this.reset();
}
_this.internalSetState(function (_ref3) {
var previousValue = _ref3.selectedValue;
if (_this.props.multiple) {
var values = [].concat(toConsumableArray(previousValue));
var pos = values.indexOf(itemValue);
if (pos > -1) {
values.splice(pos, 1);
} else {
values.push(itemValue);
}
return {
selectedValue: values,
inputValue: values.map(function (value) {
return _this.getValue(value);
}).join(', ')
};
} else {
return {
selectedValue: itemValue,
inputValue: _this.getValue(itemValue)
};
}
_this.selectItem = function (item) {
_this.reset();
_this.internalSetState({
selectedItem: item,
inputValue: _this.props.itemToString(item)
});

@@ -467,3 +442,3 @@ };

}
_this.selectItem(item.value);
_this.selectItem(item);
};

@@ -482,8 +457,8 @@

var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref4$refKey = _ref4.refKey,
refKey = _ref4$refKey === undefined ? 'ref' : _ref4$refKey,
onClick = _ref4.onClick,
rest = objectWithoutProperties(_ref4, ['refKey', 'onClick']);
var _ref2$refKey = _ref2.refKey,
refKey = _ref2$refKey === undefined ? 'ref' : _ref2$refKey,
onClick = _ref2.onClick,
rest = objectWithoutProperties(_ref2, ['refKey', 'onClick']);

@@ -553,7 +528,7 @@ // this is used in the render to know whether the user has called getRootProps.

_this.getButtonProps = function () {
var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var onClick = _ref5.onClick,
onKeyDown = _ref5.onKeyDown,
rest = objectWithoutProperties(_ref5, ['onClick', 'onKeyDown']);
var onClick = _ref3.onClick,
onKeyDown = _ref3.onKeyDown,
rest = objectWithoutProperties(_ref3, ['onClick', 'onKeyDown']);

@@ -597,13 +572,9 @@ var _this$getState2 = _this.getState(),

_this.getValue = function (itemValue) {
return itemValue ? _this.props.getValue(itemValue) : '';
};
_this.getInputProps = function () {
var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var onChange = _ref6.onChange,
onKeyDown = _ref6.onKeyDown,
onBlur = _ref6.onBlur,
rest = objectWithoutProperties(_ref6, ['onChange', 'onKeyDown', 'onBlur']);
var onChange = _ref4.onChange,
onKeyDown = _ref4.onKeyDown,
onBlur = _ref4.onBlur,
rest = objectWithoutProperties(_ref4, ['onChange', 'onKeyDown', 'onBlur']);

@@ -655,10 +626,10 @@ _this.getInputProps.called = true;

_this.getItemProps = function () {
var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var onMouseEnter = _ref7.onMouseEnter,
value = _ref7.value,
index = _ref7.index,
rest = objectWithoutProperties(_ref7, ['onMouseEnter', 'value', 'index']);
var onMouseEnter = _ref5.onMouseEnter,
item = _ref5.item,
index = _ref5.index,
rest = objectWithoutProperties(_ref5, ['onMouseEnter', 'item', 'index']);
_this.items.push({ index: index, value: value });
_this.items[index] = item;
return _extends({

@@ -673,4 +644,4 @@ id: _this.getItemId(index),

_this.reset = function (type) {
_this.internalSetState(function (_ref8) {
var selectedValue = _ref8.selectedValue;
_this.internalSetState(function (_ref6) {
var selectedItem = _ref6.selectedItem;
return {

@@ -680,3 +651,3 @@ type: type,

highlightedIndex: null,
inputValue: _this.getValue(selectedValue)
inputValue: _this.props.itemToString(selectedItem)
};

@@ -687,4 +658,4 @@ });

_this.toggleMenu = function (newState, cb) {
_this.internalSetState(function (_ref9) {
var isOpen = _ref9.isOpen;
_this.internalSetState(function (_ref7) {
var isOpen = _ref7.isOpen;

@@ -698,11 +669,6 @@ var nextIsOpen = !isOpen;

var _this$getState4 = _this.getState(),
isOpen = _this$getState4.isOpen,
selectedValue = _this$getState4.selectedValue;
isOpen = _this$getState4.isOpen;
if (isOpen) {
if (selectedValue.length > 0) {
_this.highlightSelectedItem();
} else {
_this.setHighlightedIndex();
}
_this.setHighlightedIndex();
}

@@ -729,6 +695,6 @@ cbToCb(cb)();

var status = _this.props.getA11yStatusMessage(_extends({
getValue: _this.getValue,
itemToString: _this.props.itemToString,
previousResultCount: _this.previousResultCount,
resultCount: resultCount,
highlightedValue: item.value
highlightedItem: item
}, state));

@@ -741,6 +707,6 @@ _this.previousResultCount = resultCount;

_this.state = {
highlightedIndex: null,
inputValue: '',
isOpen: false,
selectedValue: _this.props.defaultValue || (_this.props.multiple ? [] : '')
highlightedIndex: _this.props.defaultHighlightedIndex,
inputValue: _this.props.defaultInputValue,
isOpen: _this.props.defaultIsOpen,
selectedItem: _this.props.defaultSelectedItem
};

@@ -805,3 +771,3 @@ _this.root_handleClick = composeEventHandlers(_this.props.onClick, _this.root_handleClick);

// In addition, we'll always call this.props.onChange if the
// selectedValue is changed because that's important whether
// selectedItem is changed because that's important whether
// that property is controlled or not.

@@ -820,5 +786,5 @@ value: function internalSetState(stateToSet, cb) {

// trying to update the selection
if (onStateChangeArg.hasOwnProperty('selectedValue')) {
onChangeArg.selectedValue = onStateChangeArg.selectedValue;
onChangeArg.previousValue = state.selectedValue;
if (onStateChangeArg.hasOwnProperty('selectedItem')) {
onChangeArg.selectedItem = onStateChangeArg.selectedItem;
onChangeArg.previousItem = state.selectedItem;
}

@@ -849,3 +815,3 @@ Object.keys(onStateChangeArg).forEach(function (key) {

_this3.props.onStateChange(onStateChangeArg);
// if the selectedValue changed
// if the selectedItem changed
// then let's call onChange!

@@ -863,3 +829,3 @@ if (Object.keys(onChangeArg).length) {

inputValue = _getState2.inputValue,
selectedValue = _getState2.selectedValue,
selectedItem = _getState2.selectedItem,
isOpen = _getState2.isOpen;

@@ -872,3 +838,2 @@

getItemProps = this.getItemProps,
getItemFromIndex = this.getItemFromIndex,
openMenu = this.openMenu,

@@ -890,3 +855,2 @@ closeMenu = this.closeMenu,

getItemProps: getItemProps,
getItemFromIndex: getItemFromIndex,

@@ -907,3 +871,3 @@ // actions

isOpen: isOpen,
selectedValue: selectedValue
selectedItem: selectedItem
};

@@ -922,3 +886,3 @@ }

//\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ Label
//\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ LABEL

@@ -1032,6 +996,7 @@ /////////////////////////////// INPUT

defaultHighlightedIndex: PropTypes.number,
defaultValue: PropTypes.any,
defaultSelectedItem: PropTypes.any,
defaultInputValue: PropTypes.string,
defaultIsOpen: PropTypes.bool,
getA11yStatusMessage: PropTypes.func,
getValue: PropTypes.func,
multiple: PropTypes.bool,
itemToString: PropTypes.func,
onChange: PropTypes.func.isRequired,

@@ -1043,3 +1008,3 @@ onStateChange: PropTypes.func,

/* eslint-disable react/no-unused-prop-types */
selectedValue: PropTypes.any,
selectedItem: PropTypes.any,
isOpen: PropTypes.bool,

@@ -1052,15 +1017,17 @@ inputValue: PropTypes.string,

defaultHighlightedIndex: null,
defaultValue: null,
defaultSelectedItem: null,
defaultInputValue: '',
defaultIsOpen: false,
// eslint-disable-next-line complexity
getA11yStatusMessage: function getA11yStatusMessage(_ref10) {
var isOpen = _ref10.isOpen,
highlightedValue = _ref10.highlightedValue,
selectedValue = _ref10.selectedValue,
resultCount = _ref10.resultCount,
previousResultCount = _ref10.previousResultCount,
getValue = _ref10.getValue;
getA11yStatusMessage: function getA11yStatusMessage(_ref8) {
var isOpen = _ref8.isOpen,
highlightedItem = _ref8.highlightedItem,
selectedItem = _ref8.selectedItem,
resultCount = _ref8.resultCount,
previousResultCount = _ref8.previousResultCount,
itemToString = _ref8.itemToString;
if (!isOpen) {
if (selectedValue) {
return getValue(selectedValue);
if (selectedItem) {
return itemToString(selectedItem);
} else {

@@ -1073,10 +1040,10 @@ return '';

return 'No results.';
} else if (!highlightedValue || resultCountChanged) {
} else if (!highlightedItem || resultCountChanged) {
return resultCount + ' ' + (resultCount === 1 ? 'result is' : 'results are') + ' available, use up and down arrow keys to navigate.';
}
return getValue(highlightedValue);
return itemToString(highlightedItem);
},
getValue: function getValue(i) {
return String(i);
itemToString: function itemToString(i) {
return i == null ? String(i) : '';
},

@@ -1083,0 +1050,0 @@ onStateChange: function onStateChange() {} };

183

dist/downshift.es.js

@@ -341,13 +341,10 @@ import React, { Component } from 'react';

}
return _this.items.find(function (item) {
return item.index === index;
});
return _this.items[index];
};
_this.getIndexFromValue = function (itemValue) {
var item = _this.items.find(function (_ref2) {
var value = _ref2.value;
return value === itemValue;
_this.getIndexFromItem = function (item) {
var itemIndex = _this.items.findIndex(function (i) {
return i === item;
});
return item ? item.index : null;
return itemIndex === -1 ? null : itemIndex;
};

@@ -368,3 +365,3 @@

_this.highlightSelectedItem = function () {
var highlightedIndex = _this.getIndexFromValue(_this.getState().selectedValue) || 0;
var highlightedIndex = _this.getIndexFromItem(_this.getState().selectedItem) || 0;
_this.internalSetState({ highlightedIndex: highlightedIndex }, function () {

@@ -413,3 +410,3 @@ _this.maybeScrollToHighlightedElement(highlightedIndex, true);

_this.internalSetState({
selectedValue: _this.multiple ? [] : '',
selectedItem: null,
isOpen: false

@@ -422,29 +419,7 @@ }, function () {

_this.selectItem = function (itemValue) {
if (!_this.props.multiple) {
_this.reset();
}
_this.internalSetState(function (_ref3) {
var previousValue = _ref3.selectedValue;
if (_this.props.multiple) {
var values = [].concat(toConsumableArray(previousValue));
var pos = values.indexOf(itemValue);
if (pos > -1) {
values.splice(pos, 1);
} else {
values.push(itemValue);
}
return {
selectedValue: values,
inputValue: values.map(function (value) {
return _this.getValue(value);
}).join(', ')
};
} else {
return {
selectedValue: itemValue,
inputValue: _this.getValue(itemValue)
};
}
_this.selectItem = function (item) {
_this.reset();
_this.internalSetState({
selectedItem: item,
inputValue: _this.props.itemToString(item)
});

@@ -462,3 +437,3 @@ };

}
_this.selectItem(item.value);
_this.selectItem(item);
};

@@ -477,8 +452,8 @@

var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref4$refKey = _ref4.refKey,
refKey = _ref4$refKey === undefined ? 'ref' : _ref4$refKey,
onClick = _ref4.onClick,
rest = objectWithoutProperties(_ref4, ['refKey', 'onClick']);
var _ref2$refKey = _ref2.refKey,
refKey = _ref2$refKey === undefined ? 'ref' : _ref2$refKey,
onClick = _ref2.onClick,
rest = objectWithoutProperties(_ref2, ['refKey', 'onClick']);

@@ -548,7 +523,7 @@ // this is used in the render to know whether the user has called getRootProps.

_this.getButtonProps = function () {
var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var onClick = _ref5.onClick,
onKeyDown = _ref5.onKeyDown,
rest = objectWithoutProperties(_ref5, ['onClick', 'onKeyDown']);
var onClick = _ref3.onClick,
onKeyDown = _ref3.onKeyDown,
rest = objectWithoutProperties(_ref3, ['onClick', 'onKeyDown']);

@@ -592,13 +567,9 @@ var _this$getState2 = _this.getState(),

_this.getValue = function (itemValue) {
return itemValue ? _this.props.getValue(itemValue) : '';
};
_this.getInputProps = function () {
var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var onChange = _ref6.onChange,
onKeyDown = _ref6.onKeyDown,
onBlur = _ref6.onBlur,
rest = objectWithoutProperties(_ref6, ['onChange', 'onKeyDown', 'onBlur']);
var onChange = _ref4.onChange,
onKeyDown = _ref4.onKeyDown,
onBlur = _ref4.onBlur,
rest = objectWithoutProperties(_ref4, ['onChange', 'onKeyDown', 'onBlur']);

@@ -650,10 +621,10 @@ _this.getInputProps.called = true;

_this.getItemProps = function () {
var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var onMouseEnter = _ref7.onMouseEnter,
value = _ref7.value,
index = _ref7.index,
rest = objectWithoutProperties(_ref7, ['onMouseEnter', 'value', 'index']);
var onMouseEnter = _ref5.onMouseEnter,
item = _ref5.item,
index = _ref5.index,
rest = objectWithoutProperties(_ref5, ['onMouseEnter', 'item', 'index']);
_this.items.push({ index: index, value: value });
_this.items[index] = item;
return _extends({

@@ -668,4 +639,4 @@ id: _this.getItemId(index),

_this.reset = function (type) {
_this.internalSetState(function (_ref8) {
var selectedValue = _ref8.selectedValue;
_this.internalSetState(function (_ref6) {
var selectedItem = _ref6.selectedItem;
return {

@@ -675,3 +646,3 @@ type: type,

highlightedIndex: null,
inputValue: _this.getValue(selectedValue)
inputValue: _this.props.itemToString(selectedItem)
};

@@ -682,4 +653,4 @@ });

_this.toggleMenu = function (newState, cb) {
_this.internalSetState(function (_ref9) {
var isOpen = _ref9.isOpen;
_this.internalSetState(function (_ref7) {
var isOpen = _ref7.isOpen;

@@ -693,11 +664,6 @@ var nextIsOpen = !isOpen;

var _this$getState4 = _this.getState(),
isOpen = _this$getState4.isOpen,
selectedValue = _this$getState4.selectedValue;
isOpen = _this$getState4.isOpen;
if (isOpen) {
if (selectedValue.length > 0) {
_this.highlightSelectedItem();
} else {
_this.setHighlightedIndex();
}
_this.setHighlightedIndex();
}

@@ -724,6 +690,6 @@ cbToCb(cb)();

var status = _this.props.getA11yStatusMessage(_extends({
getValue: _this.getValue,
itemToString: _this.props.itemToString,
previousResultCount: _this.previousResultCount,
resultCount: resultCount,
highlightedValue: item.value
highlightedItem: item
}, state));

@@ -736,6 +702,6 @@ _this.previousResultCount = resultCount;

_this.state = {
highlightedIndex: null,
inputValue: '',
isOpen: false,
selectedValue: _this.props.defaultValue || (_this.props.multiple ? [] : '')
highlightedIndex: _this.props.defaultHighlightedIndex,
inputValue: _this.props.defaultInputValue,
isOpen: _this.props.defaultIsOpen,
selectedItem: _this.props.defaultSelectedItem
};

@@ -800,3 +766,3 @@ _this.root_handleClick = composeEventHandlers(_this.props.onClick, _this.root_handleClick);

// In addition, we'll always call this.props.onChange if the
// selectedValue is changed because that's important whether
// selectedItem is changed because that's important whether
// that property is controlled or not.

@@ -815,5 +781,5 @@ value: function internalSetState(stateToSet, cb) {

// trying to update the selection
if (onStateChangeArg.hasOwnProperty('selectedValue')) {
onChangeArg.selectedValue = onStateChangeArg.selectedValue;
onChangeArg.previousValue = state.selectedValue;
if (onStateChangeArg.hasOwnProperty('selectedItem')) {
onChangeArg.selectedItem = onStateChangeArg.selectedItem;
onChangeArg.previousItem = state.selectedItem;
}

@@ -844,3 +810,3 @@ Object.keys(onStateChangeArg).forEach(function (key) {

_this3.props.onStateChange(onStateChangeArg);
// if the selectedValue changed
// if the selectedItem changed
// then let's call onChange!

@@ -858,3 +824,3 @@ if (Object.keys(onChangeArg).length) {

inputValue = _getState2.inputValue,
selectedValue = _getState2.selectedValue,
selectedItem = _getState2.selectedItem,
isOpen = _getState2.isOpen;

@@ -867,3 +833,2 @@

getItemProps = this.getItemProps,
getItemFromIndex = this.getItemFromIndex,
openMenu = this.openMenu,

@@ -885,3 +850,2 @@ closeMenu = this.closeMenu,

getItemProps: getItemProps,
getItemFromIndex: getItemFromIndex,

@@ -902,3 +866,3 @@ // actions

isOpen: isOpen,
selectedValue: selectedValue
selectedItem: selectedItem
};

@@ -917,3 +881,3 @@ }

//\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ Label
//\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ LABEL

@@ -1027,6 +991,7 @@ /////////////////////////////// INPUT

defaultHighlightedIndex: PropTypes.number,
defaultValue: PropTypes.any,
defaultSelectedItem: PropTypes.any,
defaultInputValue: PropTypes.string,
defaultIsOpen: PropTypes.bool,
getA11yStatusMessage: PropTypes.func,
getValue: PropTypes.func,
multiple: PropTypes.bool,
itemToString: PropTypes.func,
onChange: PropTypes.func.isRequired,

@@ -1038,3 +1003,3 @@ onStateChange: PropTypes.func,

/* eslint-disable react/no-unused-prop-types */
selectedValue: PropTypes.any,
selectedItem: PropTypes.any,
isOpen: PropTypes.bool,

@@ -1047,15 +1012,17 @@ inputValue: PropTypes.string,

defaultHighlightedIndex: null,
defaultValue: null,
defaultSelectedItem: null,
defaultInputValue: '',
defaultIsOpen: false,
// eslint-disable-next-line complexity
getA11yStatusMessage: function getA11yStatusMessage(_ref10) {
var isOpen = _ref10.isOpen,
highlightedValue = _ref10.highlightedValue,
selectedValue = _ref10.selectedValue,
resultCount = _ref10.resultCount,
previousResultCount = _ref10.previousResultCount,
getValue = _ref10.getValue;
getA11yStatusMessage: function getA11yStatusMessage(_ref8) {
var isOpen = _ref8.isOpen,
highlightedItem = _ref8.highlightedItem,
selectedItem = _ref8.selectedItem,
resultCount = _ref8.resultCount,
previousResultCount = _ref8.previousResultCount,
itemToString = _ref8.itemToString;
if (!isOpen) {
if (selectedValue) {
return getValue(selectedValue);
if (selectedItem) {
return itemToString(selectedItem);
} else {

@@ -1068,10 +1035,10 @@ return '';

return 'No results.';
} else if (!highlightedValue || resultCountChanged) {
} else if (!highlightedItem || resultCountChanged) {
return resultCount + ' ' + (resultCount === 1 ? 'result is' : 'results are') + ' available, use up and down arrow keys to navigate.';
}
return getValue(highlightedValue);
return itemToString(highlightedItem);
},
getValue: function getValue(i) {
return String(i);
itemToString: function itemToString(i) {
return i == null ? String(i) : '';
},

@@ -1078,0 +1045,0 @@ onStateChange: function onStateChange() {} };

183

dist/downshift.preact.cjs.js

@@ -372,13 +372,10 @@ 'use strict';

}
return _this.items.find(function (item) {
return item.index === index;
});
return _this.items[index];
};
_this.getIndexFromValue = function (itemValue) {
var item = _this.items.find(function (_ref2) {
var value = _ref2.value;
return value === itemValue;
_this.getIndexFromItem = function (item) {
var itemIndex = _this.items.findIndex(function (i) {
return i === item;
});
return item ? item.index : null;
return itemIndex === -1 ? null : itemIndex;
};

@@ -399,3 +396,3 @@

_this.highlightSelectedItem = function () {
var highlightedIndex = _this.getIndexFromValue(_this.getState().selectedValue) || 0;
var highlightedIndex = _this.getIndexFromItem(_this.getState().selectedItem) || 0;
_this.internalSetState({ highlightedIndex: highlightedIndex }, function () {

@@ -444,3 +441,3 @@ _this.maybeScrollToHighlightedElement(highlightedIndex, true);

_this.internalSetState({
selectedValue: _this.multiple ? [] : '',
selectedItem: null,
isOpen: false

@@ -453,29 +450,7 @@ }, function () {

_this.selectItem = function (itemValue) {
if (!_this.props.multiple) {
_this.reset();
}
_this.internalSetState(function (_ref3) {
var previousValue = _ref3.selectedValue;
if (_this.props.multiple) {
var values = [].concat(toConsumableArray(previousValue));
var pos = values.indexOf(itemValue);
if (pos > -1) {
values.splice(pos, 1);
} else {
values.push(itemValue);
}
return {
selectedValue: values,
inputValue: values.map(function (value) {
return _this.getValue(value);
}).join(', ')
};
} else {
return {
selectedValue: itemValue,
inputValue: _this.getValue(itemValue)
};
}
_this.selectItem = function (item) {
_this.reset();
_this.internalSetState({
selectedItem: item,
inputValue: _this.props.itemToString(item)
});

@@ -493,3 +468,3 @@ };

}
_this.selectItem(item.value);
_this.selectItem(item);
};

@@ -508,8 +483,8 @@

var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref4$refKey = _ref4.refKey,
refKey = _ref4$refKey === undefined ? 'ref' : _ref4$refKey,
onClick = _ref4.onClick,
rest = objectWithoutProperties(_ref4, ['refKey', 'onClick']);
var _ref2$refKey = _ref2.refKey,
refKey = _ref2$refKey === undefined ? 'ref' : _ref2$refKey,
onClick = _ref2.onClick,
rest = objectWithoutProperties(_ref2, ['refKey', 'onClick']);

@@ -579,7 +554,7 @@ // this is used in the render to know whether the user has called getRootProps.

_this.getButtonProps = function () {
var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var onClick = _ref5.onClick,
onKeyDown = _ref5.onKeyDown,
rest = objectWithoutProperties(_ref5, ['onClick', 'onKeyDown']);
var onClick = _ref3.onClick,
onKeyDown = _ref3.onKeyDown,
rest = objectWithoutProperties(_ref3, ['onClick', 'onKeyDown']);

@@ -623,13 +598,9 @@ var _this$getState2 = _this.getState(),

_this.getValue = function (itemValue) {
return itemValue ? _this.props.getValue(itemValue) : '';
};
_this.getInputProps = function () {
var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var onChange = _ref6.onChange,
onKeyDown = _ref6.onKeyDown,
onBlur = _ref6.onBlur,
rest = objectWithoutProperties(_ref6, ['onChange', 'onKeyDown', 'onBlur']);
var onChange = _ref4.onChange,
onKeyDown = _ref4.onKeyDown,
onBlur = _ref4.onBlur,
rest = objectWithoutProperties(_ref4, ['onChange', 'onKeyDown', 'onBlur']);

@@ -681,10 +652,10 @@ _this.getInputProps.called = true;

_this.getItemProps = function () {
var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var onMouseEnter = _ref7.onMouseEnter,
value = _ref7.value,
index = _ref7.index,
rest = objectWithoutProperties(_ref7, ['onMouseEnter', 'value', 'index']);
var onMouseEnter = _ref5.onMouseEnter,
item = _ref5.item,
index = _ref5.index,
rest = objectWithoutProperties(_ref5, ['onMouseEnter', 'item', 'index']);
_this.items.push({ index: index, value: value });
_this.items[index] = item;
return _extends({

@@ -699,4 +670,4 @@ id: _this.getItemId(index),

_this.reset = function (type) {
_this.internalSetState(function (_ref8) {
var selectedValue = _ref8.selectedValue;
_this.internalSetState(function (_ref6) {
var selectedItem = _ref6.selectedItem;
return {

@@ -706,3 +677,3 @@ type: type,

highlightedIndex: null,
inputValue: _this.getValue(selectedValue)
inputValue: _this.props.itemToString(selectedItem)
};

@@ -713,4 +684,4 @@ });

_this.toggleMenu = function (newState, cb) {
_this.internalSetState(function (_ref9) {
var isOpen = _ref9.isOpen;
_this.internalSetState(function (_ref7) {
var isOpen = _ref7.isOpen;

@@ -724,11 +695,6 @@ var nextIsOpen = !isOpen;

var _this$getState4 = _this.getState(),
isOpen = _this$getState4.isOpen,
selectedValue = _this$getState4.selectedValue;
isOpen = _this$getState4.isOpen;
if (isOpen) {
if (selectedValue.length > 0) {
_this.highlightSelectedItem();
} else {
_this.setHighlightedIndex();
}
_this.setHighlightedIndex();
}

@@ -755,6 +721,6 @@ cbToCb(cb)();

var status = _this.props.getA11yStatusMessage(_extends({
getValue: _this.getValue,
itemToString: _this.props.itemToString,
previousResultCount: _this.previousResultCount,
resultCount: resultCount,
highlightedValue: item.value
highlightedItem: item
}, state));

@@ -767,6 +733,6 @@ _this.previousResultCount = resultCount;

_this.state = {
highlightedIndex: null,
inputValue: '',
isOpen: false,
selectedValue: _this.props.defaultValue || (_this.props.multiple ? [] : '')
highlightedIndex: _this.props.defaultHighlightedIndex,
inputValue: _this.props.defaultInputValue,
isOpen: _this.props.defaultIsOpen,
selectedItem: _this.props.defaultSelectedItem
};

@@ -831,3 +797,3 @@ _this.root_handleClick = composeEventHandlers(_this.props.onClick, _this.root_handleClick);

// In addition, we'll always call this.props.onChange if the
// selectedValue is changed because that's important whether
// selectedItem is changed because that's important whether
// that property is controlled or not.

@@ -846,5 +812,5 @@ value: function internalSetState(stateToSet, cb) {

// trying to update the selection
if (onStateChangeArg.hasOwnProperty('selectedValue')) {
onChangeArg.selectedValue = onStateChangeArg.selectedValue;
onChangeArg.previousValue = state.selectedValue;
if (onStateChangeArg.hasOwnProperty('selectedItem')) {
onChangeArg.selectedItem = onStateChangeArg.selectedItem;
onChangeArg.previousItem = state.selectedItem;
}

@@ -875,3 +841,3 @@ Object.keys(onStateChangeArg).forEach(function (key) {

_this3.props.onStateChange(onStateChangeArg);
// if the selectedValue changed
// if the selectedItem changed
// then let's call onChange!

@@ -889,3 +855,3 @@ if (Object.keys(onChangeArg).length) {

inputValue = _getState2.inputValue,
selectedValue = _getState2.selectedValue,
selectedItem = _getState2.selectedItem,
isOpen = _getState2.isOpen;

@@ -898,3 +864,2 @@

getItemProps = this.getItemProps,
getItemFromIndex = this.getItemFromIndex,
openMenu = this.openMenu,

@@ -916,3 +881,2 @@ closeMenu = this.closeMenu,

getItemProps: getItemProps,
getItemFromIndex: getItemFromIndex,

@@ -933,3 +897,3 @@ // actions

isOpen: isOpen,
selectedValue: selectedValue
selectedItem: selectedItem
};

@@ -948,3 +912,3 @@ }

//\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ Label
//\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ LABEL

@@ -1058,6 +1022,7 @@ /////////////////////////////// INPUT

defaultHighlightedIndex: PropTypes.number,
defaultValue: PropTypes.any,
defaultSelectedItem: PropTypes.any,
defaultInputValue: PropTypes.string,
defaultIsOpen: PropTypes.bool,
getA11yStatusMessage: PropTypes.func,
getValue: PropTypes.func,
multiple: PropTypes.bool,
itemToString: PropTypes.func,
onChange: PropTypes.func.isRequired,

@@ -1069,3 +1034,3 @@ onStateChange: PropTypes.func,

/* eslint-disable react/no-unused-prop-types */
selectedValue: PropTypes.any,
selectedItem: PropTypes.any,
isOpen: PropTypes.bool,

@@ -1078,15 +1043,17 @@ inputValue: PropTypes.string,

defaultHighlightedIndex: null,
defaultValue: null,
defaultSelectedItem: null,
defaultInputValue: '',
defaultIsOpen: false,
// eslint-disable-next-line complexity
getA11yStatusMessage: function getA11yStatusMessage(_ref10) {
var isOpen = _ref10.isOpen,
highlightedValue = _ref10.highlightedValue,
selectedValue = _ref10.selectedValue,
resultCount = _ref10.resultCount,
previousResultCount = _ref10.previousResultCount,
getValue = _ref10.getValue;
getA11yStatusMessage: function getA11yStatusMessage(_ref8) {
var isOpen = _ref8.isOpen,
highlightedItem = _ref8.highlightedItem,
selectedItem = _ref8.selectedItem,
resultCount = _ref8.resultCount,
previousResultCount = _ref8.previousResultCount,
itemToString = _ref8.itemToString;
if (!isOpen) {
if (selectedValue) {
return getValue(selectedValue);
if (selectedItem) {
return itemToString(selectedItem);
} else {

@@ -1099,10 +1066,10 @@ return '';

return 'No results.';
} else if (!highlightedValue || resultCountChanged) {
} else if (!highlightedItem || resultCountChanged) {
return resultCount + ' ' + (resultCount === 1 ? 'result is' : 'results are') + ' available, use up and down arrow keys to navigate.';
}
return getValue(highlightedValue);
return itemToString(highlightedItem);
},
getValue: function getValue(i) {
return String(i);
itemToString: function itemToString(i) {
return i == null ? String(i) : '';
},

@@ -1109,0 +1076,0 @@ onStateChange: function onStateChange() {} };

183

dist/downshift.preact.es.js

@@ -371,13 +371,10 @@ import { Component } from 'preact';

}
return _this.items.find(function (item) {
return item.index === index;
});
return _this.items[index];
};
_this.getIndexFromValue = function (itemValue) {
var item = _this.items.find(function (_ref2) {
var value = _ref2.value;
return value === itemValue;
_this.getIndexFromItem = function (item) {
var itemIndex = _this.items.findIndex(function (i) {
return i === item;
});
return item ? item.index : null;
return itemIndex === -1 ? null : itemIndex;
};

@@ -398,3 +395,3 @@

_this.highlightSelectedItem = function () {
var highlightedIndex = _this.getIndexFromValue(_this.getState().selectedValue) || 0;
var highlightedIndex = _this.getIndexFromItem(_this.getState().selectedItem) || 0;
_this.internalSetState({ highlightedIndex: highlightedIndex }, function () {

@@ -443,3 +440,3 @@ _this.maybeScrollToHighlightedElement(highlightedIndex, true);

_this.internalSetState({
selectedValue: _this.multiple ? [] : '',
selectedItem: null,
isOpen: false

@@ -452,29 +449,7 @@ }, function () {

_this.selectItem = function (itemValue) {
if (!_this.props.multiple) {
_this.reset();
}
_this.internalSetState(function (_ref3) {
var previousValue = _ref3.selectedValue;
if (_this.props.multiple) {
var values = [].concat(toConsumableArray(previousValue));
var pos = values.indexOf(itemValue);
if (pos > -1) {
values.splice(pos, 1);
} else {
values.push(itemValue);
}
return {
selectedValue: values,
inputValue: values.map(function (value) {
return _this.getValue(value);
}).join(', ')
};
} else {
return {
selectedValue: itemValue,
inputValue: _this.getValue(itemValue)
};
}
_this.selectItem = function (item) {
_this.reset();
_this.internalSetState({
selectedItem: item,
inputValue: _this.props.itemToString(item)
});

@@ -492,3 +467,3 @@ };

}
_this.selectItem(item.value);
_this.selectItem(item);
};

@@ -507,8 +482,8 @@

var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref4$refKey = _ref4.refKey,
refKey = _ref4$refKey === undefined ? 'ref' : _ref4$refKey,
onClick = _ref4.onClick,
rest = objectWithoutProperties(_ref4, ['refKey', 'onClick']);
var _ref2$refKey = _ref2.refKey,
refKey = _ref2$refKey === undefined ? 'ref' : _ref2$refKey,
onClick = _ref2.onClick,
rest = objectWithoutProperties(_ref2, ['refKey', 'onClick']);

@@ -578,7 +553,7 @@ // this is used in the render to know whether the user has called getRootProps.

_this.getButtonProps = function () {
var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var onClick = _ref5.onClick,
onKeyDown = _ref5.onKeyDown,
rest = objectWithoutProperties(_ref5, ['onClick', 'onKeyDown']);
var onClick = _ref3.onClick,
onKeyDown = _ref3.onKeyDown,
rest = objectWithoutProperties(_ref3, ['onClick', 'onKeyDown']);

@@ -622,13 +597,9 @@ var _this$getState2 = _this.getState(),

_this.getValue = function (itemValue) {
return itemValue ? _this.props.getValue(itemValue) : '';
};
_this.getInputProps = function () {
var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var onChange = _ref6.onChange,
onKeyDown = _ref6.onKeyDown,
onBlur = _ref6.onBlur,
rest = objectWithoutProperties(_ref6, ['onChange', 'onKeyDown', 'onBlur']);
var onChange = _ref4.onChange,
onKeyDown = _ref4.onKeyDown,
onBlur = _ref4.onBlur,
rest = objectWithoutProperties(_ref4, ['onChange', 'onKeyDown', 'onBlur']);

@@ -680,10 +651,10 @@ _this.getInputProps.called = true;

_this.getItemProps = function () {
var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var onMouseEnter = _ref7.onMouseEnter,
value = _ref7.value,
index = _ref7.index,
rest = objectWithoutProperties(_ref7, ['onMouseEnter', 'value', 'index']);
var onMouseEnter = _ref5.onMouseEnter,
item = _ref5.item,
index = _ref5.index,
rest = objectWithoutProperties(_ref5, ['onMouseEnter', 'item', 'index']);
_this.items.push({ index: index, value: value });
_this.items[index] = item;
return _extends({

@@ -698,4 +669,4 @@ id: _this.getItemId(index),

_this.reset = function (type) {
_this.internalSetState(function (_ref8) {
var selectedValue = _ref8.selectedValue;
_this.internalSetState(function (_ref6) {
var selectedItem = _ref6.selectedItem;
return {

@@ -705,3 +676,3 @@ type: type,

highlightedIndex: null,
inputValue: _this.getValue(selectedValue)
inputValue: _this.props.itemToString(selectedItem)
};

@@ -712,4 +683,4 @@ });

_this.toggleMenu = function (newState, cb) {
_this.internalSetState(function (_ref9) {
var isOpen = _ref9.isOpen;
_this.internalSetState(function (_ref7) {
var isOpen = _ref7.isOpen;

@@ -723,11 +694,6 @@ var nextIsOpen = !isOpen;

var _this$getState4 = _this.getState(),
isOpen = _this$getState4.isOpen,
selectedValue = _this$getState4.selectedValue;
isOpen = _this$getState4.isOpen;
if (isOpen) {
if (selectedValue.length > 0) {
_this.highlightSelectedItem();
} else {
_this.setHighlightedIndex();
}
_this.setHighlightedIndex();
}

@@ -754,6 +720,6 @@ cbToCb(cb)();

var status = _this.props.getA11yStatusMessage(_extends({
getValue: _this.getValue,
itemToString: _this.props.itemToString,
previousResultCount: _this.previousResultCount,
resultCount: resultCount,
highlightedValue: item.value
highlightedItem: item
}, state));

@@ -766,6 +732,6 @@ _this.previousResultCount = resultCount;

_this.state = {
highlightedIndex: null,
inputValue: '',
isOpen: false,
selectedValue: _this.props.defaultValue || (_this.props.multiple ? [] : '')
highlightedIndex: _this.props.defaultHighlightedIndex,
inputValue: _this.props.defaultInputValue,
isOpen: _this.props.defaultIsOpen,
selectedItem: _this.props.defaultSelectedItem
};

@@ -830,3 +796,3 @@ _this.root_handleClick = composeEventHandlers(_this.props.onClick, _this.root_handleClick);

// In addition, we'll always call this.props.onChange if the
// selectedValue is changed because that's important whether
// selectedItem is changed because that's important whether
// that property is controlled or not.

@@ -845,5 +811,5 @@ value: function internalSetState(stateToSet, cb) {

// trying to update the selection
if (onStateChangeArg.hasOwnProperty('selectedValue')) {
onChangeArg.selectedValue = onStateChangeArg.selectedValue;
onChangeArg.previousValue = state.selectedValue;
if (onStateChangeArg.hasOwnProperty('selectedItem')) {
onChangeArg.selectedItem = onStateChangeArg.selectedItem;
onChangeArg.previousItem = state.selectedItem;
}

@@ -874,3 +840,3 @@ Object.keys(onStateChangeArg).forEach(function (key) {

_this3.props.onStateChange(onStateChangeArg);
// if the selectedValue changed
// if the selectedItem changed
// then let's call onChange!

@@ -888,3 +854,3 @@ if (Object.keys(onChangeArg).length) {

inputValue = _getState2.inputValue,
selectedValue = _getState2.selectedValue,
selectedItem = _getState2.selectedItem,
isOpen = _getState2.isOpen;

@@ -897,3 +863,2 @@

getItemProps = this.getItemProps,
getItemFromIndex = this.getItemFromIndex,
openMenu = this.openMenu,

@@ -915,3 +880,2 @@ closeMenu = this.closeMenu,

getItemProps: getItemProps,
getItemFromIndex: getItemFromIndex,

@@ -932,3 +896,3 @@ // actions

isOpen: isOpen,
selectedValue: selectedValue
selectedItem: selectedItem
};

@@ -947,3 +911,3 @@ }

//\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ Label
//\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ LABEL

@@ -1057,6 +1021,7 @@ /////////////////////////////// INPUT

defaultHighlightedIndex: PropTypes.number,
defaultValue: PropTypes.any,
defaultSelectedItem: PropTypes.any,
defaultInputValue: PropTypes.string,
defaultIsOpen: PropTypes.bool,
getA11yStatusMessage: PropTypes.func,
getValue: PropTypes.func,
multiple: PropTypes.bool,
itemToString: PropTypes.func,
onChange: PropTypes.func.isRequired,

@@ -1068,3 +1033,3 @@ onStateChange: PropTypes.func,

/* eslint-disable react/no-unused-prop-types */
selectedValue: PropTypes.any,
selectedItem: PropTypes.any,
isOpen: PropTypes.bool,

@@ -1077,15 +1042,17 @@ inputValue: PropTypes.string,

defaultHighlightedIndex: null,
defaultValue: null,
defaultSelectedItem: null,
defaultInputValue: '',
defaultIsOpen: false,
// eslint-disable-next-line complexity
getA11yStatusMessage: function getA11yStatusMessage(_ref10) {
var isOpen = _ref10.isOpen,
highlightedValue = _ref10.highlightedValue,
selectedValue = _ref10.selectedValue,
resultCount = _ref10.resultCount,
previousResultCount = _ref10.previousResultCount,
getValue = _ref10.getValue;
getA11yStatusMessage: function getA11yStatusMessage(_ref8) {
var isOpen = _ref8.isOpen,
highlightedItem = _ref8.highlightedItem,
selectedItem = _ref8.selectedItem,
resultCount = _ref8.resultCount,
previousResultCount = _ref8.previousResultCount,
itemToString = _ref8.itemToString;
if (!isOpen) {
if (selectedValue) {
return getValue(selectedValue);
if (selectedItem) {
return itemToString(selectedItem);
} else {

@@ -1098,10 +1065,10 @@ return '';

return 'No results.';
} else if (!highlightedValue || resultCountChanged) {
} else if (!highlightedItem || resultCountChanged) {
return resultCount + ' ' + (resultCount === 1 ? 'result is' : 'results are') + ' available, use up and down arrow keys to navigate.';
}
return getValue(highlightedValue);
return itemToString(highlightedItem);
},
getValue: function getValue(i) {
return String(i);
itemToString: function itemToString(i) {
return i == null ? String(i) : '';
},

@@ -1108,0 +1075,0 @@ onStateChange: function onStateChange() {} };

183

dist/downshift.preact.umd.js

@@ -375,13 +375,10 @@ (function (global, factory) {

}
return _this.items.find(function (item) {
return item.index === index;
});
return _this.items[index];
};
_this.getIndexFromValue = function (itemValue) {
var item = _this.items.find(function (_ref2) {
var value = _ref2.value;
return value === itemValue;
_this.getIndexFromItem = function (item) {
var itemIndex = _this.items.findIndex(function (i) {
return i === item;
});
return item ? item.index : null;
return itemIndex === -1 ? null : itemIndex;
};

@@ -402,3 +399,3 @@

_this.highlightSelectedItem = function () {
var highlightedIndex = _this.getIndexFromValue(_this.getState().selectedValue) || 0;
var highlightedIndex = _this.getIndexFromItem(_this.getState().selectedItem) || 0;
_this.internalSetState({ highlightedIndex: highlightedIndex }, function () {

@@ -447,3 +444,3 @@ _this.maybeScrollToHighlightedElement(highlightedIndex, true);

_this.internalSetState({
selectedValue: _this.multiple ? [] : '',
selectedItem: null,
isOpen: false

@@ -456,29 +453,7 @@ }, function () {

_this.selectItem = function (itemValue) {
if (!_this.props.multiple) {
_this.reset();
}
_this.internalSetState(function (_ref3) {
var previousValue = _ref3.selectedValue;
if (_this.props.multiple) {
var values = [].concat(toConsumableArray(previousValue));
var pos = values.indexOf(itemValue);
if (pos > -1) {
values.splice(pos, 1);
} else {
values.push(itemValue);
}
return {
selectedValue: values,
inputValue: values.map(function (value) {
return _this.getValue(value);
}).join(', ')
};
} else {
return {
selectedValue: itemValue,
inputValue: _this.getValue(itemValue)
};
}
_this.selectItem = function (item) {
_this.reset();
_this.internalSetState({
selectedItem: item,
inputValue: _this.props.itemToString(item)
});

@@ -496,3 +471,3 @@ };

}
_this.selectItem(item.value);
_this.selectItem(item);
};

@@ -511,8 +486,8 @@

var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref4$refKey = _ref4.refKey,
refKey = _ref4$refKey === undefined ? 'ref' : _ref4$refKey,
onClick = _ref4.onClick,
rest = objectWithoutProperties(_ref4, ['refKey', 'onClick']);
var _ref2$refKey = _ref2.refKey,
refKey = _ref2$refKey === undefined ? 'ref' : _ref2$refKey,
onClick = _ref2.onClick,
rest = objectWithoutProperties(_ref2, ['refKey', 'onClick']);

@@ -582,7 +557,7 @@ // this is used in the render to know whether the user has called getRootProps.

_this.getButtonProps = function () {
var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var onClick = _ref5.onClick,
onKeyDown = _ref5.onKeyDown,
rest = objectWithoutProperties(_ref5, ['onClick', 'onKeyDown']);
var onClick = _ref3.onClick,
onKeyDown = _ref3.onKeyDown,
rest = objectWithoutProperties(_ref3, ['onClick', 'onKeyDown']);

@@ -626,13 +601,9 @@ var _this$getState2 = _this.getState(),

_this.getValue = function (itemValue) {
return itemValue ? _this.props.getValue(itemValue) : '';
};
_this.getInputProps = function () {
var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var onChange = _ref6.onChange,
onKeyDown = _ref6.onKeyDown,
onBlur = _ref6.onBlur,
rest = objectWithoutProperties(_ref6, ['onChange', 'onKeyDown', 'onBlur']);
var onChange = _ref4.onChange,
onKeyDown = _ref4.onKeyDown,
onBlur = _ref4.onBlur,
rest = objectWithoutProperties(_ref4, ['onChange', 'onKeyDown', 'onBlur']);

@@ -684,10 +655,10 @@ _this.getInputProps.called = true;

_this.getItemProps = function () {
var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var onMouseEnter = _ref7.onMouseEnter,
value = _ref7.value,
index = _ref7.index,
rest = objectWithoutProperties(_ref7, ['onMouseEnter', 'value', 'index']);
var onMouseEnter = _ref5.onMouseEnter,
item = _ref5.item,
index = _ref5.index,
rest = objectWithoutProperties(_ref5, ['onMouseEnter', 'item', 'index']);
_this.items.push({ index: index, value: value });
_this.items[index] = item;
return _extends({

@@ -702,4 +673,4 @@ id: _this.getItemId(index),

_this.reset = function (type) {
_this.internalSetState(function (_ref8) {
var selectedValue = _ref8.selectedValue;
_this.internalSetState(function (_ref6) {
var selectedItem = _ref6.selectedItem;
return {

@@ -709,3 +680,3 @@ type: type,

highlightedIndex: null,
inputValue: _this.getValue(selectedValue)
inputValue: _this.props.itemToString(selectedItem)
};

@@ -716,4 +687,4 @@ });

_this.toggleMenu = function (newState, cb) {
_this.internalSetState(function (_ref9) {
var isOpen = _ref9.isOpen;
_this.internalSetState(function (_ref7) {
var isOpen = _ref7.isOpen;

@@ -727,11 +698,6 @@ var nextIsOpen = !isOpen;

var _this$getState4 = _this.getState(),
isOpen = _this$getState4.isOpen,
selectedValue = _this$getState4.selectedValue;
isOpen = _this$getState4.isOpen;
if (isOpen) {
if (selectedValue.length > 0) {
_this.highlightSelectedItem();
} else {
_this.setHighlightedIndex();
}
_this.setHighlightedIndex();
}

@@ -758,6 +724,6 @@ cbToCb(cb)();

var status = _this.props.getA11yStatusMessage(_extends({
getValue: _this.getValue,
itemToString: _this.props.itemToString,
previousResultCount: _this.previousResultCount,
resultCount: resultCount,
highlightedValue: item.value
highlightedItem: item
}, state));

@@ -770,6 +736,6 @@ _this.previousResultCount = resultCount;

_this.state = {
highlightedIndex: null,
inputValue: '',
isOpen: false,
selectedValue: _this.props.defaultValue || (_this.props.multiple ? [] : '')
highlightedIndex: _this.props.defaultHighlightedIndex,
inputValue: _this.props.defaultInputValue,
isOpen: _this.props.defaultIsOpen,
selectedItem: _this.props.defaultSelectedItem
};

@@ -834,3 +800,3 @@ _this.root_handleClick = composeEventHandlers(_this.props.onClick, _this.root_handleClick);

// In addition, we'll always call this.props.onChange if the
// selectedValue is changed because that's important whether
// selectedItem is changed because that's important whether
// that property is controlled or not.

@@ -849,5 +815,5 @@ value: function internalSetState(stateToSet, cb) {

// trying to update the selection
if (onStateChangeArg.hasOwnProperty('selectedValue')) {
onChangeArg.selectedValue = onStateChangeArg.selectedValue;
onChangeArg.previousValue = state.selectedValue;
if (onStateChangeArg.hasOwnProperty('selectedItem')) {
onChangeArg.selectedItem = onStateChangeArg.selectedItem;
onChangeArg.previousItem = state.selectedItem;
}

@@ -878,3 +844,3 @@ Object.keys(onStateChangeArg).forEach(function (key) {

_this3.props.onStateChange(onStateChangeArg);
// if the selectedValue changed
// if the selectedItem changed
// then let's call onChange!

@@ -892,3 +858,3 @@ if (Object.keys(onChangeArg).length) {

inputValue = _getState2.inputValue,
selectedValue = _getState2.selectedValue,
selectedItem = _getState2.selectedItem,
isOpen = _getState2.isOpen;

@@ -901,3 +867,2 @@

getItemProps = this.getItemProps,
getItemFromIndex = this.getItemFromIndex,
openMenu = this.openMenu,

@@ -919,3 +884,2 @@ closeMenu = this.closeMenu,

getItemProps: getItemProps,
getItemFromIndex: getItemFromIndex,

@@ -936,3 +900,3 @@ // actions

isOpen: isOpen,
selectedValue: selectedValue
selectedItem: selectedItem
};

@@ -951,3 +915,3 @@ }

//\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ Label
//\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ LABEL

@@ -1061,6 +1025,7 @@ /////////////////////////////// INPUT

defaultHighlightedIndex: PropTypes.number,
defaultValue: PropTypes.any,
defaultSelectedItem: PropTypes.any,
defaultInputValue: PropTypes.string,
defaultIsOpen: PropTypes.bool,
getA11yStatusMessage: PropTypes.func,
getValue: PropTypes.func,
multiple: PropTypes.bool,
itemToString: PropTypes.func,
onChange: PropTypes.func.isRequired,

@@ -1072,3 +1037,3 @@ onStateChange: PropTypes.func,

/* eslint-disable react/no-unused-prop-types */
selectedValue: PropTypes.any,
selectedItem: PropTypes.any,
isOpen: PropTypes.bool,

@@ -1081,15 +1046,17 @@ inputValue: PropTypes.string,

defaultHighlightedIndex: null,
defaultValue: null,
defaultSelectedItem: null,
defaultInputValue: '',
defaultIsOpen: false,
// eslint-disable-next-line complexity
getA11yStatusMessage: function getA11yStatusMessage(_ref10) {
var isOpen = _ref10.isOpen,
highlightedValue = _ref10.highlightedValue,
selectedValue = _ref10.selectedValue,
resultCount = _ref10.resultCount,
previousResultCount = _ref10.previousResultCount,
getValue = _ref10.getValue;
getA11yStatusMessage: function getA11yStatusMessage(_ref8) {
var isOpen = _ref8.isOpen,
highlightedItem = _ref8.highlightedItem,
selectedItem = _ref8.selectedItem,
resultCount = _ref8.resultCount,
previousResultCount = _ref8.previousResultCount,
itemToString = _ref8.itemToString;
if (!isOpen) {
if (selectedValue) {
return getValue(selectedValue);
if (selectedItem) {
return itemToString(selectedItem);
} else {

@@ -1102,10 +1069,10 @@ return '';

return 'No results.';
} else if (!highlightedValue || resultCountChanged) {
} else if (!highlightedItem || resultCountChanged) {
return resultCount + ' ' + (resultCount === 1 ? 'result is' : 'results are') + ' available, use up and down arrow keys to navigate.';
}
return getValue(highlightedValue);
return itemToString(highlightedItem);
},
getValue: function getValue(i) {
return String(i);
itemToString: function itemToString(i) {
return i == null ? String(i) : '';
},

@@ -1112,0 +1079,0 @@ onStateChange: function onStateChange() {} };

2

dist/downshift.preact.umd.min.js

@@ -1,2 +0,2 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("preact")):"function"==typeof define&&define.amd?define(["preact"],t):e.downshift=t(e.preact)}(this,function(e){"use strict";function t(){}function n(e){var t=C[C.length-1]===e;C=t?[].concat(w(C),[e]):[e],i().innerHTML=""+C.filter(Boolean).map(o).join("")}function o(e,t){return'<div style="display:'+(t===C.length-1?"block":"none")+';">'+e+"</div>"}function i(){return S||((S=document.createElement("div")).setAttribute("id","a11y-status-message"),S.setAttribute("role","status"),S.setAttribute("aria-live","assertive"),S.setAttribute("aria-relevant","additions text"),Object.assign(S.style,{border:"0",clip:"rect(0 0 0 0)",height:"1px",margin:"-1px",overflow:"hidden",padding:"0",position:"absolute",width:"1px"}),document.body.appendChild(S),S)}function r(e){return"function"==typeof e?e:u}function u(){}function l(e,t){return null!==e&&e!==t?e.scrollHeight>e.clientHeight?e:l(e.parentNode):null}function a(e,t,n){var o=l(e,t);if(null!==o){var i=getComputedStyle(o),r=o.getBoundingClientRect(),u=parseInt(i.borderTopWidth,10),a=r.top+u,s=e.getBoundingClientRect(),d=s.top+o.scrollTop-a;n||d<o.scrollTop?o.scrollTop=d:d+s.height>o.scrollTop+r.height&&(o.scrollTop=d+s.height-r.height)}}function s(e,t){var n=void 0;return function(){for(var o=arguments.length,i=Array(o),r=0;r<o;r++)i[r]=arguments[r];n&&clearTimeout(n),n=setTimeout(function(){n=null,e.apply(void 0,i)},t)}}function d(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];return function(e){for(var n=arguments.length,o=Array(n>1?n-1:0),i=1;i<n;i++)o[i-1]=arguments[i];return t.some(function(t){return t&&t.apply(void 0,[e].concat(o)),e.defaultPrevented})}}function c(e){return e+"-"+V++}function h(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];return t.find(function(e){return void 0!==e})}var p=e.default;p.Children={only:function(e){return e&&e[0]}},t.isRequired=t;var g={element:t,func:t,number:t,any:t,bool:t,string:t},f=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},m=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),v=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},y=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},I=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},b=function(e,t){var n={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n},x=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},w=function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)},S="undefined"==typeof document?null:document.getElementById("a11y-status-message"),C=[],V=1,k=function(e){function t(){var e;f(this,t);for(var o=arguments.length,i=Array(o),u=0;u<o;u++)i[u]=arguments[u];var l=x(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(i)));return l.input=null,l.items=[],l.previousResultCount=0,l.getItemFromIndex=function(e){return l.items&&l.items[0]?l.items.find(function(t){return t.index===e}):null},l.getIndexFromValue=function(e){var t=l.items.find(function(t){return t.value===e});return t?t.index:null},l.getItemNodeFromIndex=function(e){return document.getElementById(l.getItemId(e))},l.setHighlightedIndex=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:l.props.defaultHighlightedIndex;l.internalSetState({highlightedIndex:e},function(){l.maybeScrollToHighlightedElement(e)})},l.highlightSelectedItem=function(){var e=l.getIndexFromValue(l.getState().selectedValue)||0;l.internalSetState({highlightedIndex:e},function(){l.maybeScrollToHighlightedElement(e,!0)})},l.highlightIndex=function(e){l.openMenu(function(){l.setHighlightedIndex(e)})},l.moveHighlightedIndex=function(e){l.getState().isOpen?l.changeHighlighedIndex(e):l.highlightIndex()},l.changeHighlighedIndex=function(e){var t=l.items.length-1;if(!(t<0)){var n=l.getState().highlightedIndex;null===n&&(n=e>0?-1:t+1);var o=n+e;o<0?o=t:o>t&&(o=0),l.setHighlightedIndex(o)}},l.clearSelection=function(){l.internalSetState({selectedValue:l.multiple?[]:"",isOpen:!1},function(){var e=document.getElementById(l.inputId);e&&e.focus&&e.focus()})},l.selectItem=function(e){l.props.multiple||l.reset(),l.internalSetState(function(t){var n=t.selectedValue;if(l.props.multiple){var o=[].concat(w(n)),i=o.indexOf(e);return i>-1?o.splice(i,1):o.push(e),{selectedValue:o,inputValue:o.map(function(e){return l.getValue(e)}).join(", ")}}return{selectedValue:e,inputValue:l.getValue(e)}})},l.selectItemAtIndex=function(e){if(null!==e){var t=l.getItemFromIndex(e);t&&l.selectItem(t.value)}},l.selectHighlightedItem=function(){return l.selectItemAtIndex(l.getState().highlightedIndex)},l.rootRef=function(e){return l._rootNode=e},l.getRootProps=function(){var e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.refKey,o=void 0===n?"ref":n,i=t.onClick,r=b(t,["refKey","onClick"]);return l.getRootProps.called=!0,y((e={},v(e,o,l.rootRef),v(e,"onClick",d(i,l.root_handleClick)),e),r)},l.root_handleClick=function(e){e.preventDefault();var t=e.target;if(t){var n=l.getItemIndexFromId(t.getAttribute("id"));n&&l.selectItemAtIndex(n)}},l.keyDownHandlers={ArrowDown:function(e){e.preventDefault();var t=e.shiftKey?5:1;this.moveHighlightedIndex(t)},ArrowUp:function(e){e.preventDefault();var t=e.shiftKey?-5:-1;this.moveHighlightedIndex(t)},Enter:function(e){e.preventDefault(),this.getState().isOpen&&this.selectHighlightedItem()},Escape:function(e){e.preventDefault(),this.reset()}},l.buttonKeyDownHandlers=y({},l.keyDownHandlers,{" ":function(e){e.preventDefault();var t=this.getState(),n=t.isOpen,o=t.highlightedIndex;n?null===o?this.closeMenu():this.selectHighlightedItem():this.openMenu()}}),l.getButtonProps=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.onClick,n=e.onKeyDown,o=b(e,["onClick","onKeyDown"]),i=l.getState().isOpen;return y({role:"button","aria-label":i?"close menu":"open menu","aria-expanded":i,"aria-haspopup":!0,onClick:d(t,l.button_handleClick),onKeyDown:d(n,l.button_handleKeyDown)},o)},l.button_handleKeyDown=function(e){l.buttonKeyDownHandlers[e.key]&&l.buttonKeyDownHandlers[e.key].call(l,e)},l.button_handleClick=function(e){e.preventDefault(),l.toggleMenu()},l.getLabelProps=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(l.getLabelProps.called=!0,l.getInputProps.called&&e.htmlFor&&e.htmlFor!==l.inputId)throw new Error('downshift: You provided the htmlFor of "'+e.htmlFor+'" for your label, but the id of your input is "'+l.inputId+'". You must either remove the id from your input or set the htmlFor of the label equal to the input id.');return l.inputId=h(l.inputId,e.htmlFor,c("downshift-input")),y({},e,{htmlFor:l.inputId})},l.getValue=function(e){return e?l.props.getValue(e):""},l.getInputProps=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.onChange,n=e.onKeyDown,o=e.onBlur,i=b(e,["onChange","onKeyDown","onBlur"]);if(l.getInputProps.called=!0,l.getLabelProps.called&&i.id&&i.id!==l.inputId)throw new Error('downshift: You provided the id of "'+i.id+'" for your input, but the htmlFor of your label is "'+l.inputId+'". You must either remove the id from your input or set the htmlFor of the label equal to the input id.');l.inputId=h(l.inputId,i.id,c("downshift-input"));var r=l.getState(),u=r.inputValue,a=r.isOpen,s=r.highlightedIndex;return y({role:"combobox","aria-autocomplete":"list","aria-expanded":a,"aria-activedescendant":"number"==typeof s&&s>=0?l.getItemId(s):null,autoComplete:"off",value:u,onChange:d(t,l.input_handleChange),onKeyDown:d(n,l.input_handleKeyDown),onBlur:d(o,l.input_handleBlur)},i,{id:l.inputId})},l.input_handleKeyDown=function(e){e.key&&l.keyDownHandlers[e.key]?l.keyDownHandlers[e.key].call(l,e):["Shift","Meta","Alt","Control"].includes(e.key)||l.openMenu()},l.input_handleChange=function(e){l.internalSetState({inputValue:e.target.value})},l.input_handleBlur=function(){l.isMouseDown||l.reset()},l.getItemProps=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.onMouseEnter,n=e.value,o=e.index,i=b(e,["onMouseEnter","value","index"]);return l.items.push({index:o,value:n}),y({id:l.getItemId(o),onMouseEnter:d(t,function(){l.setHighlightedIndex(o)})},i)},l.reset=function(e){l.internalSetState(function(t){var n=t.selectedValue;return{type:e,isOpen:!1,highlightedIndex:null,inputValue:l.getValue(n)}})},l.toggleMenu=function(e,t){l.internalSetState(function(t){var n=!t.isOpen;return"boolean"==typeof e&&(n=e),{isOpen:n}},function(){var e=l.getState(),n=e.isOpen,o=e.selectedValue;n&&(o.length>0?l.highlightSelectedItem():l.setHighlightedIndex()),r(t)()})},l.openMenu=function(e){l.toggleMenu(!0,e)},l.closeMenu=function(e){l.toggleMenu(!1,e)},l.updateStatus=s(function(){if(l._isMounted){var e=l.getState(),t=l.getItemFromIndex(e.highlightedIndex)||{},o=l.items.length,i=l.props.getA11yStatusMessage(y({getValue:l.getValue,previousResultCount:l.previousResultCount,resultCount:o,highlightedValue:t.value},e));l.previousResultCount=o,n(i)}},200),l.id=c("downshift"),l.state={highlightedIndex:null,inputValue:"",isOpen:!1,selectedValue:l.props.defaultValue||(l.props.multiple?[]:"")},l.root_handleClick=d(l.props.onClick,l.root_handleClick),l}return I(t,e),m(t,[{key:"getState",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state;return Object.keys(t).reduce(function(t,n){return t[n]=void 0===e.props[n]?e.state[n]:e.props[n],t},{})}},{key:"maybeScrollToHighlightedElement",value:function(e,t){a(this.getItemNodeFromIndex(e),this._rootNode,t)}},{key:"internalSetState",value:function(e,t){var n=this,o={},i=void 0;return this.setState(function(t){t=n.getState(t);var r={};return(i="function"==typeof e?e(t):e).hasOwnProperty("selectedValue")&&(o.selectedValue=i.selectedValue,o.previousValue=t.selectedValue),Object.keys(i).forEach(function(e){"type"!==e&&(n.props.hasOwnProperty(e)||(r[e]=i[e]))}),r},function(){r(t)(),n.props.onStateChange(i),Object.keys(o).length&&n.props.onChange(o)})}},{key:"getControllerStateAndHelpers",value:function(){var e=this.getState(),t=e.highlightedIndex,n=e.inputValue,o=e.selectedValue,i=e.isOpen;return{getRootProps:this.getRootProps,getButtonProps:this.getButtonProps,getLabelProps:this.getLabelProps,getInputProps:this.getInputProps,getItemProps:this.getItemProps,getItemFromIndex:this.getItemFromIndex,openMenu:this.openMenu,closeMenu:this.closeMenu,toggleMenu:this.toggleMenu,selectItem:this.selectItem,selectItemAtIndex:this.selectItemAtIndex,selectHighlightedItem:this.selectHighlightedItem,setHighlightedIndex:this.setHighlightedIndex,clearSelection:this.clearSelection,highlightedIndex:t,inputValue:n,isOpen:i,selectedValue:o}}},{key:"getItemId",value:function(e){return this.id+"-item-"+e}},{key:"getItemIndexFromId",value:function(e){return e?Number(e.split(this.id+"-item-")[1]):null}},{key:"componentDidMount",value:function(){var e=this;this._isMounted=!0;var n=function(){e.isMouseDown=!0},o=function(n){e.isMouseDown=!1;var o=n.target;e._rootNode.contains(o)||e.reset(t.stateChangeTypes.mouseUp)};document.body.addEventListener("mousedown",n),document.body.addEventListener("mouseup",o),this.cleanup=function(){e._isMounted=!1,document.body.removeEventListener("mousedown",n),document.body.removeEventListener("mouseup",o)}}},{key:"componentDidUpdate",value:function(){this.updateStatus()}},{key:"componentWillUnmount",value:function(){this.cleanup()}},{key:"render",value:function(){var e=this.props.children;this.items=[],this.getRootProps.called=!1,this.getLabelProps.called=!1,this.getInputProps.called=!1;var t=p.Children.only(e(this.getControllerStateAndHelpers()));if(t){if(this.getRootProps.called)return t;if("string"==typeof t.type)return p.cloneElement(t,this.getRootProps(t.props));throw new Error("downshift: If you return a non-DOM element, you must use apply the getRootProps function")}return t}}]),t}(e.Component);return k.propTypes={children:g.func.isRequired,defaultHighlightedIndex:g.number,defaultValue:g.any,getA11yStatusMessage:g.func,getValue:g.func,multiple:g.bool,onChange:g.func.isRequired,onStateChange:g.func,onClick:g.func,selectedValue:g.any,isOpen:g.bool,inputValue:g.string,highlightedIndex:g.number},k.defaultProps={defaultHighlightedIndex:null,defaultValue:null,getA11yStatusMessage:function(e){var t=e.isOpen,n=e.highlightedValue,o=e.selectedValue,i=e.resultCount,r=e.previousResultCount,u=e.getValue;if(!t)return o?u(o):"";var l=i!==r;return i?!n||l?i+" "+(1===i?"result is":"results are")+" available, use up and down arrow keys to navigate.":u(n):"No results."},getValue:function(e){return String(e)},onStateChange:function(){}},k.stateChangeTypes={mouseUp:"__autocomplete_mouseup__"},k});
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("preact")):"function"==typeof define&&define.amd?define(["preact"],t):e.downshift=t(e.preact)}(this,function(e){"use strict";function t(){}function n(e){var t=C[C.length-1]===e;C=t?[].concat(x(C),[e]):[e],i().innerHTML=""+C.filter(Boolean).map(o).join("")}function o(e,t){return'<div style="display:'+(t===C.length-1?"block":"none")+';">'+e+"</div>"}function i(){return w||((w=document.createElement("div")).setAttribute("id","a11y-status-message"),w.setAttribute("role","status"),w.setAttribute("aria-live","assertive"),w.setAttribute("aria-relevant","additions text"),Object.assign(w.style,{border:"0",clip:"rect(0 0 0 0)",height:"1px",margin:"-1px",overflow:"hidden",padding:"0",position:"absolute",width:"1px"}),document.body.appendChild(w),w)}function r(e){return"function"==typeof e?e:u}function u(){}function l(e,t){return null!==e&&e!==t?e.scrollHeight>e.clientHeight?e:l(e.parentNode):null}function a(e,t,n){var o=l(e,t);if(null!==o){var i=getComputedStyle(o),r=o.getBoundingClientRect(),u=parseInt(i.borderTopWidth,10),a=r.top+u,s=e.getBoundingClientRect(),d=s.top+o.scrollTop-a;n||d<o.scrollTop?o.scrollTop=d:d+s.height>o.scrollTop+r.height&&(o.scrollTop=d+s.height-r.height)}}function s(e,t){var n=void 0;return function(){for(var o=arguments.length,i=Array(o),r=0;r<o;r++)i[r]=arguments[r];n&&clearTimeout(n),n=setTimeout(function(){n=null,e.apply(void 0,i)},t)}}function d(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];return function(e){for(var n=arguments.length,o=Array(n>1?n-1:0),i=1;i<n;i++)o[i-1]=arguments[i];return t.some(function(t){return t&&t.apply(void 0,[e].concat(o)),e.defaultPrevented})}}function h(e){return e+"-"+k++}function c(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];return t.find(function(e){return void 0!==e})}var p=e.default;p.Children={only:function(e){return e&&e[0]}},t.isRequired=t;var g={element:t,func:t,number:t,any:t,bool:t,string:t},f=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},m=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),I=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},y=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},v=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},b=function(e,t){var n={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n},S=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},x=function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)},w="undefined"==typeof document?null:document.getElementById("a11y-status-message"),C=[],k=1,O=function(e){function t(){var e;f(this,t);for(var o=arguments.length,i=Array(o),u=0;u<o;u++)i[u]=arguments[u];var l=S(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(i)));return l.input=null,l.items=[],l.previousResultCount=0,l.getItemFromIndex=function(e){return l.items&&l.items[0]?l.items[e]:null},l.getIndexFromItem=function(e){var t=l.items.findIndex(function(t){return t===e});return-1===t?null:t},l.getItemNodeFromIndex=function(e){return document.getElementById(l.getItemId(e))},l.setHighlightedIndex=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:l.props.defaultHighlightedIndex;l.internalSetState({highlightedIndex:e},function(){l.maybeScrollToHighlightedElement(e)})},l.highlightSelectedItem=function(){var e=l.getIndexFromItem(l.getState().selectedItem)||0;l.internalSetState({highlightedIndex:e},function(){l.maybeScrollToHighlightedElement(e,!0)})},l.highlightIndex=function(e){l.openMenu(function(){l.setHighlightedIndex(e)})},l.moveHighlightedIndex=function(e){l.getState().isOpen?l.changeHighlighedIndex(e):l.highlightIndex()},l.changeHighlighedIndex=function(e){var t=l.items.length-1;if(!(t<0)){var n=l.getState().highlightedIndex;null===n&&(n=e>0?-1:t+1);var o=n+e;o<0?o=t:o>t&&(o=0),l.setHighlightedIndex(o)}},l.clearSelection=function(){l.internalSetState({selectedItem:null,isOpen:!1},function(){var e=document.getElementById(l.inputId);e&&e.focus&&e.focus()})},l.selectItem=function(e){l.reset(),l.internalSetState({selectedItem:e,inputValue:l.props.itemToString(e)})},l.selectItemAtIndex=function(e){if(null!==e){var t=l.getItemFromIndex(e);t&&l.selectItem(t)}},l.selectHighlightedItem=function(){return l.selectItemAtIndex(l.getState().highlightedIndex)},l.rootRef=function(e){return l._rootNode=e},l.getRootProps=function(){var e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.refKey,o=void 0===n?"ref":n,i=t.onClick,r=b(t,["refKey","onClick"]);return l.getRootProps.called=!0,y((e={},I(e,o,l.rootRef),I(e,"onClick",d(i,l.root_handleClick)),e),r)},l.root_handleClick=function(e){e.preventDefault();var t=e.target;if(t){var n=l.getItemIndexFromId(t.getAttribute("id"));n&&l.selectItemAtIndex(n)}},l.keyDownHandlers={ArrowDown:function(e){e.preventDefault();var t=e.shiftKey?5:1;this.moveHighlightedIndex(t)},ArrowUp:function(e){e.preventDefault();var t=e.shiftKey?-5:-1;this.moveHighlightedIndex(t)},Enter:function(e){e.preventDefault(),this.getState().isOpen&&this.selectHighlightedItem()},Escape:function(e){e.preventDefault(),this.reset()}},l.buttonKeyDownHandlers=y({},l.keyDownHandlers,{" ":function(e){e.preventDefault();var t=this.getState(),n=t.isOpen,o=t.highlightedIndex;n?null===o?this.closeMenu():this.selectHighlightedItem():this.openMenu()}}),l.getButtonProps=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.onClick,n=e.onKeyDown,o=b(e,["onClick","onKeyDown"]),i=l.getState().isOpen;return y({role:"button","aria-label":i?"close menu":"open menu","aria-expanded":i,"aria-haspopup":!0,onClick:d(t,l.button_handleClick),onKeyDown:d(n,l.button_handleKeyDown)},o)},l.button_handleKeyDown=function(e){l.buttonKeyDownHandlers[e.key]&&l.buttonKeyDownHandlers[e.key].call(l,e)},l.button_handleClick=function(e){e.preventDefault(),l.toggleMenu()},l.getLabelProps=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(l.getLabelProps.called=!0,l.getInputProps.called&&e.htmlFor&&e.htmlFor!==l.inputId)throw new Error('downshift: You provided the htmlFor of "'+e.htmlFor+'" for your label, but the id of your input is "'+l.inputId+'". You must either remove the id from your input or set the htmlFor of the label equal to the input id.');return l.inputId=c(l.inputId,e.htmlFor,h("downshift-input")),y({},e,{htmlFor:l.inputId})},l.getInputProps=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.onChange,n=e.onKeyDown,o=e.onBlur,i=b(e,["onChange","onKeyDown","onBlur"]);if(l.getInputProps.called=!0,l.getLabelProps.called&&i.id&&i.id!==l.inputId)throw new Error('downshift: You provided the id of "'+i.id+'" for your input, but the htmlFor of your label is "'+l.inputId+'". You must either remove the id from your input or set the htmlFor of the label equal to the input id.');l.inputId=c(l.inputId,i.id,h("downshift-input"));var r=l.getState(),u=r.inputValue,a=r.isOpen,s=r.highlightedIndex;return y({role:"combobox","aria-autocomplete":"list","aria-expanded":a,"aria-activedescendant":"number"==typeof s&&s>=0?l.getItemId(s):null,autoComplete:"off",value:u,onChange:d(t,l.input_handleChange),onKeyDown:d(n,l.input_handleKeyDown),onBlur:d(o,l.input_handleBlur)},i,{id:l.inputId})},l.input_handleKeyDown=function(e){e.key&&l.keyDownHandlers[e.key]?l.keyDownHandlers[e.key].call(l,e):["Shift","Meta","Alt","Control"].includes(e.key)||l.openMenu()},l.input_handleChange=function(e){l.internalSetState({inputValue:e.target.value})},l.input_handleBlur=function(){l.isMouseDown||l.reset()},l.getItemProps=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.onMouseEnter,n=e.item,o=e.index,i=b(e,["onMouseEnter","item","index"]);return l.items[o]=n,y({id:l.getItemId(o),onMouseEnter:d(t,function(){l.setHighlightedIndex(o)})},i)},l.reset=function(e){l.internalSetState(function(t){var n=t.selectedItem;return{type:e,isOpen:!1,highlightedIndex:null,inputValue:l.props.itemToString(n)}})},l.toggleMenu=function(e,t){l.internalSetState(function(t){var n=!t.isOpen;return"boolean"==typeof e&&(n=e),{isOpen:n}},function(){l.getState().isOpen&&l.setHighlightedIndex(),r(t)()})},l.openMenu=function(e){l.toggleMenu(!0,e)},l.closeMenu=function(e){l.toggleMenu(!1,e)},l.updateStatus=s(function(){if(l._isMounted){var e=l.getState(),t=l.getItemFromIndex(e.highlightedIndex)||{},o=l.items.length,i=l.props.getA11yStatusMessage(y({itemToString:l.props.itemToString,previousResultCount:l.previousResultCount,resultCount:o,highlightedItem:t},e));l.previousResultCount=o,n(i)}},200),l.id=h("downshift"),l.state={highlightedIndex:l.props.defaultHighlightedIndex,inputValue:l.props.defaultInputValue,isOpen:l.props.defaultIsOpen,selectedItem:l.props.defaultSelectedItem},l.root_handleClick=d(l.props.onClick,l.root_handleClick),l}return v(t,e),m(t,[{key:"getState",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state;return Object.keys(t).reduce(function(t,n){return t[n]=void 0===e.props[n]?e.state[n]:e.props[n],t},{})}},{key:"maybeScrollToHighlightedElement",value:function(e,t){a(this.getItemNodeFromIndex(e),this._rootNode,t)}},{key:"internalSetState",value:function(e,t){var n=this,o={},i=void 0;return this.setState(function(t){t=n.getState(t);var r={};return(i="function"==typeof e?e(t):e).hasOwnProperty("selectedItem")&&(o.selectedItem=i.selectedItem,o.previousItem=t.selectedItem),Object.keys(i).forEach(function(e){"type"!==e&&(n.props.hasOwnProperty(e)||(r[e]=i[e]))}),r},function(){r(t)(),n.props.onStateChange(i),Object.keys(o).length&&n.props.onChange(o)})}},{key:"getControllerStateAndHelpers",value:function(){var e=this.getState(),t=e.highlightedIndex,n=e.inputValue,o=e.selectedItem,i=e.isOpen;return{getRootProps:this.getRootProps,getButtonProps:this.getButtonProps,getLabelProps:this.getLabelProps,getInputProps:this.getInputProps,getItemProps:this.getItemProps,openMenu:this.openMenu,closeMenu:this.closeMenu,toggleMenu:this.toggleMenu,selectItem:this.selectItem,selectItemAtIndex:this.selectItemAtIndex,selectHighlightedItem:this.selectHighlightedItem,setHighlightedIndex:this.setHighlightedIndex,clearSelection:this.clearSelection,highlightedIndex:t,inputValue:n,isOpen:i,selectedItem:o}}},{key:"getItemId",value:function(e){return this.id+"-item-"+e}},{key:"getItemIndexFromId",value:function(e){return e?Number(e.split(this.id+"-item-")[1]):null}},{key:"componentDidMount",value:function(){var e=this;this._isMounted=!0;var n=function(){e.isMouseDown=!0},o=function(n){e.isMouseDown=!1;var o=n.target;e._rootNode.contains(o)||e.reset(t.stateChangeTypes.mouseUp)};document.body.addEventListener("mousedown",n),document.body.addEventListener("mouseup",o),this.cleanup=function(){e._isMounted=!1,document.body.removeEventListener("mousedown",n),document.body.removeEventListener("mouseup",o)}}},{key:"componentDidUpdate",value:function(){this.updateStatus()}},{key:"componentWillUnmount",value:function(){this.cleanup()}},{key:"render",value:function(){var e=this.props.children;this.items=[],this.getRootProps.called=!1,this.getLabelProps.called=!1,this.getInputProps.called=!1;var t=p.Children.only(e(this.getControllerStateAndHelpers()));if(t){if(this.getRootProps.called)return t;if("string"==typeof t.type)return p.cloneElement(t,this.getRootProps(t.props));throw new Error("downshift: If you return a non-DOM element, you must use apply the getRootProps function")}return t}}]),t}(e.Component);return O.propTypes={children:g.func.isRequired,defaultHighlightedIndex:g.number,defaultSelectedItem:g.any,defaultInputValue:g.string,defaultIsOpen:g.bool,getA11yStatusMessage:g.func,itemToString:g.func,onChange:g.func.isRequired,onStateChange:g.func,onClick:g.func,selectedItem:g.any,isOpen:g.bool,inputValue:g.string,highlightedIndex:g.number},O.defaultProps={defaultHighlightedIndex:null,defaultSelectedItem:null,defaultInputValue:"",defaultIsOpen:!1,getA11yStatusMessage:function(e){var t=e.isOpen,n=e.highlightedItem,o=e.selectedItem,i=e.resultCount,r=e.previousResultCount,u=e.itemToString;if(!t)return o?u(o):"";var l=i!==r;return i?!n||l?i+" "+(1===i?"result is":"results are")+" available, use up and down arrow keys to navigate.":u(n):"No results."},itemToString:function(e){return null==e?String(e):""},onStateChange:function(){}},O.stateChangeTypes={mouseUp:"__autocomplete_mouseup__"},O});
//# sourceMappingURL=downshift.preact.umd.min.js.map

183

dist/downshift.umd.js

@@ -347,13 +347,10 @@ (function (global, factory) {

}
return _this.items.find(function (item) {
return item.index === index;
});
return _this.items[index];
};
_this.getIndexFromValue = function (itemValue) {
var item = _this.items.find(function (_ref2) {
var value = _ref2.value;
return value === itemValue;
_this.getIndexFromItem = function (item) {
var itemIndex = _this.items.findIndex(function (i) {
return i === item;
});
return item ? item.index : null;
return itemIndex === -1 ? null : itemIndex;
};

@@ -374,3 +371,3 @@

_this.highlightSelectedItem = function () {
var highlightedIndex = _this.getIndexFromValue(_this.getState().selectedValue) || 0;
var highlightedIndex = _this.getIndexFromItem(_this.getState().selectedItem) || 0;
_this.internalSetState({ highlightedIndex: highlightedIndex }, function () {

@@ -419,3 +416,3 @@ _this.maybeScrollToHighlightedElement(highlightedIndex, true);

_this.internalSetState({
selectedValue: _this.multiple ? [] : '',
selectedItem: null,
isOpen: false

@@ -428,29 +425,7 @@ }, function () {

_this.selectItem = function (itemValue) {
if (!_this.props.multiple) {
_this.reset();
}
_this.internalSetState(function (_ref3) {
var previousValue = _ref3.selectedValue;
if (_this.props.multiple) {
var values = [].concat(toConsumableArray(previousValue));
var pos = values.indexOf(itemValue);
if (pos > -1) {
values.splice(pos, 1);
} else {
values.push(itemValue);
}
return {
selectedValue: values,
inputValue: values.map(function (value) {
return _this.getValue(value);
}).join(', ')
};
} else {
return {
selectedValue: itemValue,
inputValue: _this.getValue(itemValue)
};
}
_this.selectItem = function (item) {
_this.reset();
_this.internalSetState({
selectedItem: item,
inputValue: _this.props.itemToString(item)
});

@@ -468,3 +443,3 @@ };

}
_this.selectItem(item.value);
_this.selectItem(item);
};

@@ -483,8 +458,8 @@

var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref2 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref4$refKey = _ref4.refKey,
refKey = _ref4$refKey === undefined ? 'ref' : _ref4$refKey,
onClick = _ref4.onClick,
rest = objectWithoutProperties(_ref4, ['refKey', 'onClick']);
var _ref2$refKey = _ref2.refKey,
refKey = _ref2$refKey === undefined ? 'ref' : _ref2$refKey,
onClick = _ref2.onClick,
rest = objectWithoutProperties(_ref2, ['refKey', 'onClick']);

@@ -554,7 +529,7 @@ // this is used in the render to know whether the user has called getRootProps.

_this.getButtonProps = function () {
var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var onClick = _ref5.onClick,
onKeyDown = _ref5.onKeyDown,
rest = objectWithoutProperties(_ref5, ['onClick', 'onKeyDown']);
var onClick = _ref3.onClick,
onKeyDown = _ref3.onKeyDown,
rest = objectWithoutProperties(_ref3, ['onClick', 'onKeyDown']);

@@ -598,13 +573,9 @@ var _this$getState2 = _this.getState(),

_this.getValue = function (itemValue) {
return itemValue ? _this.props.getValue(itemValue) : '';
};
_this.getInputProps = function () {
var _ref6 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var onChange = _ref6.onChange,
onKeyDown = _ref6.onKeyDown,
onBlur = _ref6.onBlur,
rest = objectWithoutProperties(_ref6, ['onChange', 'onKeyDown', 'onBlur']);
var onChange = _ref4.onChange,
onKeyDown = _ref4.onKeyDown,
onBlur = _ref4.onBlur,
rest = objectWithoutProperties(_ref4, ['onChange', 'onKeyDown', 'onBlur']);

@@ -656,10 +627,10 @@ _this.getInputProps.called = true;

_this.getItemProps = function () {
var _ref7 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var _ref5 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var onMouseEnter = _ref7.onMouseEnter,
value = _ref7.value,
index = _ref7.index,
rest = objectWithoutProperties(_ref7, ['onMouseEnter', 'value', 'index']);
var onMouseEnter = _ref5.onMouseEnter,
item = _ref5.item,
index = _ref5.index,
rest = objectWithoutProperties(_ref5, ['onMouseEnter', 'item', 'index']);
_this.items.push({ index: index, value: value });
_this.items[index] = item;
return _extends({

@@ -674,4 +645,4 @@ id: _this.getItemId(index),

_this.reset = function (type) {
_this.internalSetState(function (_ref8) {
var selectedValue = _ref8.selectedValue;
_this.internalSetState(function (_ref6) {
var selectedItem = _ref6.selectedItem;
return {

@@ -681,3 +652,3 @@ type: type,

highlightedIndex: null,
inputValue: _this.getValue(selectedValue)
inputValue: _this.props.itemToString(selectedItem)
};

@@ -688,4 +659,4 @@ });

_this.toggleMenu = function (newState, cb) {
_this.internalSetState(function (_ref9) {
var isOpen = _ref9.isOpen;
_this.internalSetState(function (_ref7) {
var isOpen = _ref7.isOpen;

@@ -699,11 +670,6 @@ var nextIsOpen = !isOpen;

var _this$getState4 = _this.getState(),
isOpen = _this$getState4.isOpen,
selectedValue = _this$getState4.selectedValue;
isOpen = _this$getState4.isOpen;
if (isOpen) {
if (selectedValue.length > 0) {
_this.highlightSelectedItem();
} else {
_this.setHighlightedIndex();
}
_this.setHighlightedIndex();
}

@@ -730,6 +696,6 @@ cbToCb(cb)();

var status = _this.props.getA11yStatusMessage(_extends({
getValue: _this.getValue,
itemToString: _this.props.itemToString,
previousResultCount: _this.previousResultCount,
resultCount: resultCount,
highlightedValue: item.value
highlightedItem: item
}, state));

@@ -742,6 +708,6 @@ _this.previousResultCount = resultCount;

_this.state = {
highlightedIndex: null,
inputValue: '',
isOpen: false,
selectedValue: _this.props.defaultValue || (_this.props.multiple ? [] : '')
highlightedIndex: _this.props.defaultHighlightedIndex,
inputValue: _this.props.defaultInputValue,
isOpen: _this.props.defaultIsOpen,
selectedItem: _this.props.defaultSelectedItem
};

@@ -806,3 +772,3 @@ _this.root_handleClick = composeEventHandlers(_this.props.onClick, _this.root_handleClick);

// In addition, we'll always call this.props.onChange if the
// selectedValue is changed because that's important whether
// selectedItem is changed because that's important whether
// that property is controlled or not.

@@ -821,5 +787,5 @@ value: function internalSetState(stateToSet, cb) {

// trying to update the selection
if (onStateChangeArg.hasOwnProperty('selectedValue')) {
onChangeArg.selectedValue = onStateChangeArg.selectedValue;
onChangeArg.previousValue = state.selectedValue;
if (onStateChangeArg.hasOwnProperty('selectedItem')) {
onChangeArg.selectedItem = onStateChangeArg.selectedItem;
onChangeArg.previousItem = state.selectedItem;
}

@@ -850,3 +816,3 @@ Object.keys(onStateChangeArg).forEach(function (key) {

_this3.props.onStateChange(onStateChangeArg);
// if the selectedValue changed
// if the selectedItem changed
// then let's call onChange!

@@ -864,3 +830,3 @@ if (Object.keys(onChangeArg).length) {

inputValue = _getState2.inputValue,
selectedValue = _getState2.selectedValue,
selectedItem = _getState2.selectedItem,
isOpen = _getState2.isOpen;

@@ -873,3 +839,2 @@

getItemProps = this.getItemProps,
getItemFromIndex = this.getItemFromIndex,
openMenu = this.openMenu,

@@ -891,3 +856,2 @@ closeMenu = this.closeMenu,

getItemProps: getItemProps,
getItemFromIndex: getItemFromIndex,

@@ -908,3 +872,3 @@ // actions

isOpen: isOpen,
selectedValue: selectedValue
selectedItem: selectedItem
};

@@ -923,3 +887,3 @@ }

//\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ Label
//\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ LABEL

@@ -1033,6 +997,7 @@ /////////////////////////////// INPUT

defaultHighlightedIndex: PropTypes.number,
defaultValue: PropTypes.any,
defaultSelectedItem: PropTypes.any,
defaultInputValue: PropTypes.string,
defaultIsOpen: PropTypes.bool,
getA11yStatusMessage: PropTypes.func,
getValue: PropTypes.func,
multiple: PropTypes.bool,
itemToString: PropTypes.func,
onChange: PropTypes.func.isRequired,

@@ -1044,3 +1009,3 @@ onStateChange: PropTypes.func,

/* eslint-disable react/no-unused-prop-types */
selectedValue: PropTypes.any,
selectedItem: PropTypes.any,
isOpen: PropTypes.bool,

@@ -1053,15 +1018,17 @@ inputValue: PropTypes.string,

defaultHighlightedIndex: null,
defaultValue: null,
defaultSelectedItem: null,
defaultInputValue: '',
defaultIsOpen: false,
// eslint-disable-next-line complexity
getA11yStatusMessage: function getA11yStatusMessage(_ref10) {
var isOpen = _ref10.isOpen,
highlightedValue = _ref10.highlightedValue,
selectedValue = _ref10.selectedValue,
resultCount = _ref10.resultCount,
previousResultCount = _ref10.previousResultCount,
getValue = _ref10.getValue;
getA11yStatusMessage: function getA11yStatusMessage(_ref8) {
var isOpen = _ref8.isOpen,
highlightedItem = _ref8.highlightedItem,
selectedItem = _ref8.selectedItem,
resultCount = _ref8.resultCount,
previousResultCount = _ref8.previousResultCount,
itemToString = _ref8.itemToString;
if (!isOpen) {
if (selectedValue) {
return getValue(selectedValue);
if (selectedItem) {
return itemToString(selectedItem);
} else {

@@ -1074,10 +1041,10 @@ return '';

return 'No results.';
} else if (!highlightedValue || resultCountChanged) {
} else if (!highlightedItem || resultCountChanged) {
return resultCount + ' ' + (resultCount === 1 ? 'result is' : 'results are') + ' available, use up and down arrow keys to navigate.';
}
return getValue(highlightedValue);
return itemToString(highlightedItem);
},
getValue: function getValue(i) {
return String(i);
itemToString: function itemToString(i) {
return i == null ? String(i) : '';
},

@@ -1084,0 +1051,0 @@ onStateChange: function onStateChange() {} };

2

dist/downshift.umd.min.js

@@ -1,2 +0,2 @@

!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):e.downshift=t(e.React,e.PropTypes)}(this,function(e,t){"use strict";function n(e){var t=S[S.length-1]===e;S=t?[].concat(x(S),[e]):[e],i().innerHTML=""+S.filter(Boolean).map(o).join("")}function o(e,t){return'<div style="display:'+(t===S.length-1?"block":"none")+';">'+e+"</div>"}function i(){return w||((w=document.createElement("div")).setAttribute("id","a11y-status-message"),w.setAttribute("role","status"),w.setAttribute("aria-live","assertive"),w.setAttribute("aria-relevant","additions text"),Object.assign(w.style,{border:"0",clip:"rect(0 0 0 0)",height:"1px",margin:"-1px",overflow:"hidden",padding:"0",position:"absolute",width:"1px"}),document.body.appendChild(w),w)}function r(e){return"function"==typeof e?e:u}function u(){}function l(e,t){return null!==e&&e!==t?e.scrollHeight>e.clientHeight?e:l(e.parentNode):null}function a(e,t,n){var o=l(e,t);if(null!==o){var i=getComputedStyle(o),r=o.getBoundingClientRect(),u=parseInt(i.borderTopWidth,10),a=r.top+u,s=e.getBoundingClientRect(),d=s.top+o.scrollTop-a;n||d<o.scrollTop?o.scrollTop=d:d+s.height>o.scrollTop+r.height&&(o.scrollTop=d+s.height-r.height)}}function s(e,t){var n=void 0;return function(){for(var o=arguments.length,i=Array(o),r=0;r<o;r++)i[r]=arguments[r];n&&clearTimeout(n),n=setTimeout(function(){n=null,e.apply(void 0,i)},t)}}function d(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];return function(e){for(var n=arguments.length,o=Array(n>1?n-1:0),i=1;i<n;i++)o[i-1]=arguments[i];return t.some(function(t){return t&&t.apply(void 0,[e].concat(o)),e.defaultPrevented})}}function h(e){return e+"-"+C++}function c(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];return t.find(function(e){return void 0!==e})}var p="default"in e?e.default:e;t=t&&t.hasOwnProperty("default")?t.default:t;var g=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},f=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),m=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},v=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},y=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},I=function(e,t){var n={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n},b=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},x=function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)},w="undefined"==typeof document?null:document.getElementById("a11y-status-message"),S=[],C=1,V=function(e){function t(){var e;g(this,t);for(var o=arguments.length,i=Array(o),u=0;u<o;u++)i[u]=arguments[u];var l=b(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(i)));return l.input=null,l.items=[],l.previousResultCount=0,l.getItemFromIndex=function(e){return l.items&&l.items[0]?l.items.find(function(t){return t.index===e}):null},l.getIndexFromValue=function(e){var t=l.items.find(function(t){return t.value===e});return t?t.index:null},l.getItemNodeFromIndex=function(e){return document.getElementById(l.getItemId(e))},l.setHighlightedIndex=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:l.props.defaultHighlightedIndex;l.internalSetState({highlightedIndex:e},function(){l.maybeScrollToHighlightedElement(e)})},l.highlightSelectedItem=function(){var e=l.getIndexFromValue(l.getState().selectedValue)||0;l.internalSetState({highlightedIndex:e},function(){l.maybeScrollToHighlightedElement(e,!0)})},l.highlightIndex=function(e){l.openMenu(function(){l.setHighlightedIndex(e)})},l.moveHighlightedIndex=function(e){l.getState().isOpen?l.changeHighlighedIndex(e):l.highlightIndex()},l.changeHighlighedIndex=function(e){var t=l.items.length-1;if(!(t<0)){var n=l.getState().highlightedIndex;null===n&&(n=e>0?-1:t+1);var o=n+e;o<0?o=t:o>t&&(o=0),l.setHighlightedIndex(o)}},l.clearSelection=function(){l.internalSetState({selectedValue:l.multiple?[]:"",isOpen:!1},function(){var e=document.getElementById(l.inputId);e&&e.focus&&e.focus()})},l.selectItem=function(e){l.props.multiple||l.reset(),l.internalSetState(function(t){var n=t.selectedValue;if(l.props.multiple){var o=[].concat(x(n)),i=o.indexOf(e);return i>-1?o.splice(i,1):o.push(e),{selectedValue:o,inputValue:o.map(function(e){return l.getValue(e)}).join(", ")}}return{selectedValue:e,inputValue:l.getValue(e)}})},l.selectItemAtIndex=function(e){if(null!==e){var t=l.getItemFromIndex(e);t&&l.selectItem(t.value)}},l.selectHighlightedItem=function(){return l.selectItemAtIndex(l.getState().highlightedIndex)},l.rootRef=function(e){return l._rootNode=e},l.getRootProps=function(){var e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.refKey,o=void 0===n?"ref":n,i=t.onClick,r=I(t,["refKey","onClick"]);return l.getRootProps.called=!0,v((e={},m(e,o,l.rootRef),m(e,"onClick",d(i,l.root_handleClick)),e),r)},l.root_handleClick=function(e){e.preventDefault();var t=e.target;if(t){var n=l.getItemIndexFromId(t.getAttribute("id"));n&&l.selectItemAtIndex(n)}},l.keyDownHandlers={ArrowDown:function(e){e.preventDefault();var t=e.shiftKey?5:1;this.moveHighlightedIndex(t)},ArrowUp:function(e){e.preventDefault();var t=e.shiftKey?-5:-1;this.moveHighlightedIndex(t)},Enter:function(e){e.preventDefault(),this.getState().isOpen&&this.selectHighlightedItem()},Escape:function(e){e.preventDefault(),this.reset()}},l.buttonKeyDownHandlers=v({},l.keyDownHandlers,{" ":function(e){e.preventDefault();var t=this.getState(),n=t.isOpen,o=t.highlightedIndex;n?null===o?this.closeMenu():this.selectHighlightedItem():this.openMenu()}}),l.getButtonProps=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.onClick,n=e.onKeyDown,o=I(e,["onClick","onKeyDown"]),i=l.getState().isOpen;return v({role:"button","aria-label":i?"close menu":"open menu","aria-expanded":i,"aria-haspopup":!0,onClick:d(t,l.button_handleClick),onKeyDown:d(n,l.button_handleKeyDown)},o)},l.button_handleKeyDown=function(e){l.buttonKeyDownHandlers[e.key]&&l.buttonKeyDownHandlers[e.key].call(l,e)},l.button_handleClick=function(e){e.preventDefault(),l.toggleMenu()},l.getLabelProps=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(l.getLabelProps.called=!0,l.getInputProps.called&&e.htmlFor&&e.htmlFor!==l.inputId)throw new Error('downshift: You provided the htmlFor of "'+e.htmlFor+'" for your label, but the id of your input is "'+l.inputId+'". You must either remove the id from your input or set the htmlFor of the label equal to the input id.');return l.inputId=c(l.inputId,e.htmlFor,h("downshift-input")),v({},e,{htmlFor:l.inputId})},l.getValue=function(e){return e?l.props.getValue(e):""},l.getInputProps=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.onChange,n=e.onKeyDown,o=e.onBlur,i=I(e,["onChange","onKeyDown","onBlur"]);if(l.getInputProps.called=!0,l.getLabelProps.called&&i.id&&i.id!==l.inputId)throw new Error('downshift: You provided the id of "'+i.id+'" for your input, but the htmlFor of your label is "'+l.inputId+'". You must either remove the id from your input or set the htmlFor of the label equal to the input id.');l.inputId=c(l.inputId,i.id,h("downshift-input"));var r=l.getState(),u=r.inputValue,a=r.isOpen,s=r.highlightedIndex;return v({role:"combobox","aria-autocomplete":"list","aria-expanded":a,"aria-activedescendant":"number"==typeof s&&s>=0?l.getItemId(s):null,autoComplete:"off",value:u,onChange:d(t,l.input_handleChange),onKeyDown:d(n,l.input_handleKeyDown),onBlur:d(o,l.input_handleBlur)},i,{id:l.inputId})},l.input_handleKeyDown=function(e){e.key&&l.keyDownHandlers[e.key]?l.keyDownHandlers[e.key].call(l,e):["Shift","Meta","Alt","Control"].includes(e.key)||l.openMenu()},l.input_handleChange=function(e){l.internalSetState({inputValue:e.target.value})},l.input_handleBlur=function(){l.isMouseDown||l.reset()},l.getItemProps=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.onMouseEnter,n=e.value,o=e.index,i=I(e,["onMouseEnter","value","index"]);return l.items.push({index:o,value:n}),v({id:l.getItemId(o),onMouseEnter:d(t,function(){l.setHighlightedIndex(o)})},i)},l.reset=function(e){l.internalSetState(function(t){var n=t.selectedValue;return{type:e,isOpen:!1,highlightedIndex:null,inputValue:l.getValue(n)}})},l.toggleMenu=function(e,t){l.internalSetState(function(t){var n=!t.isOpen;return"boolean"==typeof e&&(n=e),{isOpen:n}},function(){var e=l.getState(),n=e.isOpen,o=e.selectedValue;n&&(o.length>0?l.highlightSelectedItem():l.setHighlightedIndex()),r(t)()})},l.openMenu=function(e){l.toggleMenu(!0,e)},l.closeMenu=function(e){l.toggleMenu(!1,e)},l.updateStatus=s(function(){if(l._isMounted){var e=l.getState(),t=l.getItemFromIndex(e.highlightedIndex)||{},o=l.items.length,i=l.props.getA11yStatusMessage(v({getValue:l.getValue,previousResultCount:l.previousResultCount,resultCount:o,highlightedValue:t.value},e));l.previousResultCount=o,n(i)}},200),l.id=h("downshift"),l.state={highlightedIndex:null,inputValue:"",isOpen:!1,selectedValue:l.props.defaultValue||(l.props.multiple?[]:"")},l.root_handleClick=d(l.props.onClick,l.root_handleClick),l}return y(t,e),f(t,[{key:"getState",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state;return Object.keys(t).reduce(function(t,n){return t[n]=void 0===e.props[n]?e.state[n]:e.props[n],t},{})}},{key:"maybeScrollToHighlightedElement",value:function(e,t){a(this.getItemNodeFromIndex(e),this._rootNode,t)}},{key:"internalSetState",value:function(e,t){var n=this,o={},i=void 0;return this.setState(function(t){t=n.getState(t);var r={};return(i="function"==typeof e?e(t):e).hasOwnProperty("selectedValue")&&(o.selectedValue=i.selectedValue,o.previousValue=t.selectedValue),Object.keys(i).forEach(function(e){"type"!==e&&(n.props.hasOwnProperty(e)||(r[e]=i[e]))}),r},function(){r(t)(),n.props.onStateChange(i),Object.keys(o).length&&n.props.onChange(o)})}},{key:"getControllerStateAndHelpers",value:function(){var e=this.getState(),t=e.highlightedIndex,n=e.inputValue,o=e.selectedValue,i=e.isOpen;return{getRootProps:this.getRootProps,getButtonProps:this.getButtonProps,getLabelProps:this.getLabelProps,getInputProps:this.getInputProps,getItemProps:this.getItemProps,getItemFromIndex:this.getItemFromIndex,openMenu:this.openMenu,closeMenu:this.closeMenu,toggleMenu:this.toggleMenu,selectItem:this.selectItem,selectItemAtIndex:this.selectItemAtIndex,selectHighlightedItem:this.selectHighlightedItem,setHighlightedIndex:this.setHighlightedIndex,clearSelection:this.clearSelection,highlightedIndex:t,inputValue:n,isOpen:i,selectedValue:o}}},{key:"getItemId",value:function(e){return this.id+"-item-"+e}},{key:"getItemIndexFromId",value:function(e){return e?Number(e.split(this.id+"-item-")[1]):null}},{key:"componentDidMount",value:function(){var e=this;this._isMounted=!0;var n=function(){e.isMouseDown=!0},o=function(n){e.isMouseDown=!1;var o=n.target;e._rootNode.contains(o)||e.reset(t.stateChangeTypes.mouseUp)};document.body.addEventListener("mousedown",n),document.body.addEventListener("mouseup",o),this.cleanup=function(){e._isMounted=!1,document.body.removeEventListener("mousedown",n),document.body.removeEventListener("mouseup",o)}}},{key:"componentDidUpdate",value:function(){this.updateStatus()}},{key:"componentWillUnmount",value:function(){this.cleanup()}},{key:"render",value:function(){var e=this.props.children;this.items=[],this.getRootProps.called=!1,this.getLabelProps.called=!1,this.getInputProps.called=!1;var t=p.Children.only(e(this.getControllerStateAndHelpers()));if(t){if(this.getRootProps.called)return t;if("string"==typeof t.type)return p.cloneElement(t,this.getRootProps(t.props));throw new Error("downshift: If you return a non-DOM element, you must use apply the getRootProps function")}return t}}]),t}(e.Component);return V.propTypes={children:t.func.isRequired,defaultHighlightedIndex:t.number,defaultValue:t.any,getA11yStatusMessage:t.func,getValue:t.func,multiple:t.bool,onChange:t.func.isRequired,onStateChange:t.func,onClick:t.func,selectedValue:t.any,isOpen:t.bool,inputValue:t.string,highlightedIndex:t.number},V.defaultProps={defaultHighlightedIndex:null,defaultValue:null,getA11yStatusMessage:function(e){var t=e.isOpen,n=e.highlightedValue,o=e.selectedValue,i=e.resultCount,r=e.previousResultCount,u=e.getValue;if(!t)return o?u(o):"";var l=i!==r;return i?!n||l?i+" "+(1===i?"result is":"results are")+" available, use up and down arrow keys to navigate.":u(n):"No results."},getValue:function(e){return String(e)},onStateChange:function(){}},V.stateChangeTypes={mouseUp:"__autocomplete_mouseup__"},V});
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("prop-types")):"function"==typeof define&&define.amd?define(["react","prop-types"],t):e.downshift=t(e.React,e.PropTypes)}(this,function(e,t){"use strict";function n(e){var t=w[w.length-1]===e;w=t?[].concat(S(w),[e]):[e],i().innerHTML=""+w.filter(Boolean).map(o).join("")}function o(e,t){return'<div style="display:'+(t===w.length-1?"block":"none")+';">'+e+"</div>"}function i(){return x||((x=document.createElement("div")).setAttribute("id","a11y-status-message"),x.setAttribute("role","status"),x.setAttribute("aria-live","assertive"),x.setAttribute("aria-relevant","additions text"),Object.assign(x.style,{border:"0",clip:"rect(0 0 0 0)",height:"1px",margin:"-1px",overflow:"hidden",padding:"0",position:"absolute",width:"1px"}),document.body.appendChild(x),x)}function r(e){return"function"==typeof e?e:u}function u(){}function l(e,t){return null!==e&&e!==t?e.scrollHeight>e.clientHeight?e:l(e.parentNode):null}function a(e,t,n){var o=l(e,t);if(null!==o){var i=getComputedStyle(o),r=o.getBoundingClientRect(),u=parseInt(i.borderTopWidth,10),a=r.top+u,s=e.getBoundingClientRect(),d=s.top+o.scrollTop-a;n||d<o.scrollTop?o.scrollTop=d:d+s.height>o.scrollTop+r.height&&(o.scrollTop=d+s.height-r.height)}}function s(e,t){var n=void 0;return function(){for(var o=arguments.length,i=Array(o),r=0;r<o;r++)i[r]=arguments[r];n&&clearTimeout(n),n=setTimeout(function(){n=null,e.apply(void 0,i)},t)}}function d(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];return function(e){for(var n=arguments.length,o=Array(n>1?n-1:0),i=1;i<n;i++)o[i-1]=arguments[i];return t.some(function(t){return t&&t.apply(void 0,[e].concat(o)),e.defaultPrevented})}}function h(e){return e+"-"+C++}function c(){for(var e=arguments.length,t=Array(e),n=0;n<e;n++)t[n]=arguments[n];return t.find(function(e){return void 0!==e})}var p="default"in e?e.default:e;t=t&&t.hasOwnProperty("default")?t.default:t;var g=function(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")},f=function(){function e(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}return function(t,n,o){return n&&e(t.prototype,n),o&&e(t,o),t}}(),m=function(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e},I=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e},y=function(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)},v=function(e,t){var n={};for(var o in e)t.indexOf(o)>=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n},b=function(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t},S=function(e){if(Array.isArray(e)){for(var t=0,n=Array(e.length);t<e.length;t++)n[t]=e[t];return n}return Array.from(e)},x="undefined"==typeof document?null:document.getElementById("a11y-status-message"),w=[],C=1,O=function(e){function t(){var e;g(this,t);for(var o=arguments.length,i=Array(o),u=0;u<o;u++)i[u]=arguments[u];var l=b(this,(e=t.__proto__||Object.getPrototypeOf(t)).call.apply(e,[this].concat(i)));return l.input=null,l.items=[],l.previousResultCount=0,l.getItemFromIndex=function(e){return l.items&&l.items[0]?l.items[e]:null},l.getIndexFromItem=function(e){var t=l.items.findIndex(function(t){return t===e});return-1===t?null:t},l.getItemNodeFromIndex=function(e){return document.getElementById(l.getItemId(e))},l.setHighlightedIndex=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:l.props.defaultHighlightedIndex;l.internalSetState({highlightedIndex:e},function(){l.maybeScrollToHighlightedElement(e)})},l.highlightSelectedItem=function(){var e=l.getIndexFromItem(l.getState().selectedItem)||0;l.internalSetState({highlightedIndex:e},function(){l.maybeScrollToHighlightedElement(e,!0)})},l.highlightIndex=function(e){l.openMenu(function(){l.setHighlightedIndex(e)})},l.moveHighlightedIndex=function(e){l.getState().isOpen?l.changeHighlighedIndex(e):l.highlightIndex()},l.changeHighlighedIndex=function(e){var t=l.items.length-1;if(!(t<0)){var n=l.getState().highlightedIndex;null===n&&(n=e>0?-1:t+1);var o=n+e;o<0?o=t:o>t&&(o=0),l.setHighlightedIndex(o)}},l.clearSelection=function(){l.internalSetState({selectedItem:null,isOpen:!1},function(){var e=document.getElementById(l.inputId);e&&e.focus&&e.focus()})},l.selectItem=function(e){l.reset(),l.internalSetState({selectedItem:e,inputValue:l.props.itemToString(e)})},l.selectItemAtIndex=function(e){if(null!==e){var t=l.getItemFromIndex(e);t&&l.selectItem(t)}},l.selectHighlightedItem=function(){return l.selectItemAtIndex(l.getState().highlightedIndex)},l.rootRef=function(e){return l._rootNode=e},l.getRootProps=function(){var e,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},n=t.refKey,o=void 0===n?"ref":n,i=t.onClick,r=v(t,["refKey","onClick"]);return l.getRootProps.called=!0,I((e={},m(e,o,l.rootRef),m(e,"onClick",d(i,l.root_handleClick)),e),r)},l.root_handleClick=function(e){e.preventDefault();var t=e.target;if(t){var n=l.getItemIndexFromId(t.getAttribute("id"));n&&l.selectItemAtIndex(n)}},l.keyDownHandlers={ArrowDown:function(e){e.preventDefault();var t=e.shiftKey?5:1;this.moveHighlightedIndex(t)},ArrowUp:function(e){e.preventDefault();var t=e.shiftKey?-5:-1;this.moveHighlightedIndex(t)},Enter:function(e){e.preventDefault(),this.getState().isOpen&&this.selectHighlightedItem()},Escape:function(e){e.preventDefault(),this.reset()}},l.buttonKeyDownHandlers=I({},l.keyDownHandlers,{" ":function(e){e.preventDefault();var t=this.getState(),n=t.isOpen,o=t.highlightedIndex;n?null===o?this.closeMenu():this.selectHighlightedItem():this.openMenu()}}),l.getButtonProps=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.onClick,n=e.onKeyDown,o=v(e,["onClick","onKeyDown"]),i=l.getState().isOpen;return I({role:"button","aria-label":i?"close menu":"open menu","aria-expanded":i,"aria-haspopup":!0,onClick:d(t,l.button_handleClick),onKeyDown:d(n,l.button_handleKeyDown)},o)},l.button_handleKeyDown=function(e){l.buttonKeyDownHandlers[e.key]&&l.buttonKeyDownHandlers[e.key].call(l,e)},l.button_handleClick=function(e){e.preventDefault(),l.toggleMenu()},l.getLabelProps=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};if(l.getLabelProps.called=!0,l.getInputProps.called&&e.htmlFor&&e.htmlFor!==l.inputId)throw new Error('downshift: You provided the htmlFor of "'+e.htmlFor+'" for your label, but the id of your input is "'+l.inputId+'". You must either remove the id from your input or set the htmlFor of the label equal to the input id.');return l.inputId=c(l.inputId,e.htmlFor,h("downshift-input")),I({},e,{htmlFor:l.inputId})},l.getInputProps=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.onChange,n=e.onKeyDown,o=e.onBlur,i=v(e,["onChange","onKeyDown","onBlur"]);if(l.getInputProps.called=!0,l.getLabelProps.called&&i.id&&i.id!==l.inputId)throw new Error('downshift: You provided the id of "'+i.id+'" for your input, but the htmlFor of your label is "'+l.inputId+'". You must either remove the id from your input or set the htmlFor of the label equal to the input id.');l.inputId=c(l.inputId,i.id,h("downshift-input"));var r=l.getState(),u=r.inputValue,a=r.isOpen,s=r.highlightedIndex;return I({role:"combobox","aria-autocomplete":"list","aria-expanded":a,"aria-activedescendant":"number"==typeof s&&s>=0?l.getItemId(s):null,autoComplete:"off",value:u,onChange:d(t,l.input_handleChange),onKeyDown:d(n,l.input_handleKeyDown),onBlur:d(o,l.input_handleBlur)},i,{id:l.inputId})},l.input_handleKeyDown=function(e){e.key&&l.keyDownHandlers[e.key]?l.keyDownHandlers[e.key].call(l,e):["Shift","Meta","Alt","Control"].includes(e.key)||l.openMenu()},l.input_handleChange=function(e){l.internalSetState({inputValue:e.target.value})},l.input_handleBlur=function(){l.isMouseDown||l.reset()},l.getItemProps=function(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{},t=e.onMouseEnter,n=e.item,o=e.index,i=v(e,["onMouseEnter","item","index"]);return l.items[o]=n,I({id:l.getItemId(o),onMouseEnter:d(t,function(){l.setHighlightedIndex(o)})},i)},l.reset=function(e){l.internalSetState(function(t){var n=t.selectedItem;return{type:e,isOpen:!1,highlightedIndex:null,inputValue:l.props.itemToString(n)}})},l.toggleMenu=function(e,t){l.internalSetState(function(t){var n=!t.isOpen;return"boolean"==typeof e&&(n=e),{isOpen:n}},function(){l.getState().isOpen&&l.setHighlightedIndex(),r(t)()})},l.openMenu=function(e){l.toggleMenu(!0,e)},l.closeMenu=function(e){l.toggleMenu(!1,e)},l.updateStatus=s(function(){if(l._isMounted){var e=l.getState(),t=l.getItemFromIndex(e.highlightedIndex)||{},o=l.items.length,i=l.props.getA11yStatusMessage(I({itemToString:l.props.itemToString,previousResultCount:l.previousResultCount,resultCount:o,highlightedItem:t},e));l.previousResultCount=o,n(i)}},200),l.id=h("downshift"),l.state={highlightedIndex:l.props.defaultHighlightedIndex,inputValue:l.props.defaultInputValue,isOpen:l.props.defaultIsOpen,selectedItem:l.props.defaultSelectedItem},l.root_handleClick=d(l.props.onClick,l.root_handleClick),l}return y(t,e),f(t,[{key:"getState",value:function(){var e=this,t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:this.state;return Object.keys(t).reduce(function(t,n){return t[n]=void 0===e.props[n]?e.state[n]:e.props[n],t},{})}},{key:"maybeScrollToHighlightedElement",value:function(e,t){a(this.getItemNodeFromIndex(e),this._rootNode,t)}},{key:"internalSetState",value:function(e,t){var n=this,o={},i=void 0;return this.setState(function(t){t=n.getState(t);var r={};return(i="function"==typeof e?e(t):e).hasOwnProperty("selectedItem")&&(o.selectedItem=i.selectedItem,o.previousItem=t.selectedItem),Object.keys(i).forEach(function(e){"type"!==e&&(n.props.hasOwnProperty(e)||(r[e]=i[e]))}),r},function(){r(t)(),n.props.onStateChange(i),Object.keys(o).length&&n.props.onChange(o)})}},{key:"getControllerStateAndHelpers",value:function(){var e=this.getState(),t=e.highlightedIndex,n=e.inputValue,o=e.selectedItem,i=e.isOpen;return{getRootProps:this.getRootProps,getButtonProps:this.getButtonProps,getLabelProps:this.getLabelProps,getInputProps:this.getInputProps,getItemProps:this.getItemProps,openMenu:this.openMenu,closeMenu:this.closeMenu,toggleMenu:this.toggleMenu,selectItem:this.selectItem,selectItemAtIndex:this.selectItemAtIndex,selectHighlightedItem:this.selectHighlightedItem,setHighlightedIndex:this.setHighlightedIndex,clearSelection:this.clearSelection,highlightedIndex:t,inputValue:n,isOpen:i,selectedItem:o}}},{key:"getItemId",value:function(e){return this.id+"-item-"+e}},{key:"getItemIndexFromId",value:function(e){return e?Number(e.split(this.id+"-item-")[1]):null}},{key:"componentDidMount",value:function(){var e=this;this._isMounted=!0;var n=function(){e.isMouseDown=!0},o=function(n){e.isMouseDown=!1;var o=n.target;e._rootNode.contains(o)||e.reset(t.stateChangeTypes.mouseUp)};document.body.addEventListener("mousedown",n),document.body.addEventListener("mouseup",o),this.cleanup=function(){e._isMounted=!1,document.body.removeEventListener("mousedown",n),document.body.removeEventListener("mouseup",o)}}},{key:"componentDidUpdate",value:function(){this.updateStatus()}},{key:"componentWillUnmount",value:function(){this.cleanup()}},{key:"render",value:function(){var e=this.props.children;this.items=[],this.getRootProps.called=!1,this.getLabelProps.called=!1,this.getInputProps.called=!1;var t=p.Children.only(e(this.getControllerStateAndHelpers()));if(t){if(this.getRootProps.called)return t;if("string"==typeof t.type)return p.cloneElement(t,this.getRootProps(t.props));throw new Error("downshift: If you return a non-DOM element, you must use apply the getRootProps function")}return t}}]),t}(e.Component);return O.propTypes={children:t.func.isRequired,defaultHighlightedIndex:t.number,defaultSelectedItem:t.any,defaultInputValue:t.string,defaultIsOpen:t.bool,getA11yStatusMessage:t.func,itemToString:t.func,onChange:t.func.isRequired,onStateChange:t.func,onClick:t.func,selectedItem:t.any,isOpen:t.bool,inputValue:t.string,highlightedIndex:t.number},O.defaultProps={defaultHighlightedIndex:null,defaultSelectedItem:null,defaultInputValue:"",defaultIsOpen:!1,getA11yStatusMessage:function(e){var t=e.isOpen,n=e.highlightedItem,o=e.selectedItem,i=e.resultCount,r=e.previousResultCount,u=e.itemToString;if(!t)return o?u(o):"";var l=i!==r;return i?!n||l?i+" "+(1===i?"result is":"results are")+" available, use up and down arrow keys to navigate.":u(n):"No results."},itemToString:function(e){return null==e?String(e):""},onStateChange:function(){}},O.stateChangeTypes={mouseUp:"__autocomplete_mouseup__"},O});
//# sourceMappingURL=downshift.umd.min.js.map

2

package.json
{
"name": "downshift",
"version": "1.0.0-beta.13",
"version": "1.0.0-beta.14",
"description": "A set of primitives to build simple, flexible, WAI-ARIA compliant React autocomplete components",

@@ -5,0 +5,0 @@ "main": "dist/downshift.cjs.js",

136

README.md

@@ -82,3 +82,3 @@ <h1 align="center">

inputValue,
selectedValue,
selectedItem,
highlightedIndex

@@ -98,3 +98,3 @@ }) => (

<div
{...getItemProps({value: item, index})}
{...getItemProps({item, index})}
key={item}

@@ -104,3 +104,3 @@ style={{

highlightedIndex === index ? 'gray' : 'white',
fontWeight: selectedValue === item ? 'bold' : 'normal',
fontWeight: selectedItem === item ? 'bold' : 'normal',
}}

@@ -123,3 +123,3 @@ >

items={['apple', 'orange', 'carrot']}
onChange={({selectedValue}) => console.log(selectedValue)}
onChange={({selectedItem}) => console.log(selectedItem)}
/>

@@ -137,12 +137,6 @@ )

#### getValue
#### defaultSelectedItem
> `function(item: any)` | defaults to an identity function (`i => String(i)`)
> `any` | defaults to `null`
Used to determine the `value` for the selected item.
#### defaultValue
> `any`/`Array(any)` | defaults to `null` or an empty array (`[]`) if the `multiple` prop is true
Pass an item or an array of items that should be selected by default.

@@ -156,9 +150,21 @@

#### multiple
#### defaultInputValue
> `string` | defaults to `''`
This is the initial input value.
#### defaultIsOpen
> `boolean` | defaults to `false`
Specifies that multiple items can be selected at once. This means that when an item is selected
it will be added to the `value` array rather than replacing the existing `value`.
This is the initial `isOpen` value.
#### itemToString
> `function(item: any)` | defaults to: `i => (i == null ? String(i) : '')`
Used to determine the string value for the selected item (which is used to
compute the `inputValue`.
#### getA11yStatusMessage

@@ -174,4 +180,4 @@

highlighted, "`resultCount` results are available, use up and down arrow keys
to navigate." If an item is highlighted it will run `getValue(highlightedItem)`
and display the value of the `highlightedItem`.
to navigate." If an item is highlighted it will run
`itemToString(highlightedItem)` and display the value of the `highlightedItem`.

@@ -183,16 +189,16 @@ The object you are passed to generate your status message has the following

| property | type | description |
|-----------------------|-----------------|------------------------------------------------------------------------------------------|
| `getValue` | `function(any)` | The `getValue` function (see props) for getting the string value from one of the options |
| `resultCount` | `number` | The total items showing in the dropdown |
| `previousResultCount` | `number` | The total items showing in the dropdown the last time the status was updated |
| `highlightedValue` | `any` | The value of the highlighted item |
| `highlightedIndex` | `number`/`null` | The currently highlighted index |
| `inputValue` | `string` | The current input value |
| `isOpen` | `boolean` | The `isOpen` state |
| `selectedValue` | `any` | The value of the currently selected item |
| property | type | description |
|-----------------------|-----------------|----------------------------------------------------------------------------------------------|
| `highlightedIndex` | `number`/`null` | The currently highlighted index |
| `highlightedValue` | `any` | The value of the highlighted item |
| `inputValue` | `string` | The current input value |
| `isOpen` | `boolean` | The `isOpen` state |
| `itemToString` | `function(any)` | The `itemToString` function (see props) for getting the string value from one of the options |
| `previousResultCount` | `number` | The total items showing in the dropdown the last time the status was updated |
| `resultCount` | `number` | The total items showing in the dropdown |
| `selectedItem` | `any` | The value of the currently selected item |
#### onChange
> `function({selectedValue, previousValue})` | *required*
> `function({selectedItem, previousItem})` | *required*

@@ -203,7 +209,7 @@ Called when the user selects an item

> `function({highlightedIndex, inputValue, isOpen, selectedValue})` | not required, no useful default
> `function({highlightedIndex, inputValue, isOpen, selectedItem})` | not required, no useful default
This function is called anytime the internal state changes. This can be useful
if you're using downshift as a "controlled" component, where you manage some or
all of the state (e.g. isOpen, selectedValue, highlightedIndex, etc) and then
all of the state (e.g. isOpen, selectedItem, highlightedIndex, etc) and then
pass it as props, rather than letting downshift control all its state itself.

@@ -232,7 +238,7 @@

#### `selectedValue`
#### `selectedItem`
> `any`/`Array(any)` | **state prop** (read more below)
The currently selected value.
The currently selected item.

@@ -243,27 +249,8 @@ #### children

This is called with an object with the properties listed below:
This is called with an object. The properties of this object can be split into
three categories as indicated below:
<!-- This table was generated via http://www.tablesgenerator.com/markdown_tables -->
##### prop getters
| property | type | description |
|-------------------------|----------------------------|------------------------------------------------------------------------------------------------------------------|
| `getRootProps` | `function({})` | returns the props you should apply to the root element that you render. It can be optional. Read more below |
| `getInputProps` | `function({})` | returns the props you should apply to the `input` element that you render. Read more below |
| `getLabelProps` | `function({})` | returns the props you should apply to the `label` element that you render. Read more below |
| `getItemProps` | `function({})` | returns the props you should apply to any menu item elements you render. Read more below |
| `getButtonProps` | `function({})` | returns the props you should apply to any menu toggle button element you render. Read more below |
| `highlightedIndex` | `number` / `null` | the currently highlighted item |
| `setHighlightedIndex` | `function(index: number)` | call to set a new highlighted index |
| `value` | `any` / `Array(any)` | the currently selected item value(s) input |
| `inputValue` | `string` / `null` | the current value of the `getInputProps` input |
| `isOpen` | `boolean` | the menu open state |
| `toggleMenu` | `function(state: boolean)` | toggle the menu open state (if `state` is not provided, then it will be set to the inverse of the current state) |
| `openMenu` | `function()` | opens the menu |
| `closeMenu` | `function()` | closes the menu |
| `clearSelection` | `function()` | clears the selection |
| `selectItem` | `function(item: any)` | selects the given item |
| `selectItemAtIndex` | `function(index: number)` | selects the item at the given index |
| `selectHighlightedItem` | `function()` | selects the item that is currently highlighted |
The functions below are used to apply props to the elements that you render.
These functions are used to apply props to the elements that you render.
This gives you maximum flexibility to render what, when, and wherever you like.

@@ -276,2 +263,12 @@ You call these on the element in question (for example:

<!-- This table was generated via http://www.tablesgenerator.com/markdown_tables -->
| property | type | description |
|------------------|----------------|---------------------------------------------------------------------------------------------|
| `getButtonProps` | `function({})` | returns the props you should apply to any menu toggle button element you render. |
| `getInputProps` | `function({})` | returns the props you should apply to the `input` element that you render. |
| `getItemProps` | `function({})` | returns the props you should apply to any menu item elements you render. |
| `getLabelProps` | `function({})` | returns the props you should apply to the `label` element that you render. |
| `getRootProps` | `function({})` | returns the props you should apply to the root element that you render. It can be optional. |
##### `getRootProps`

@@ -319,3 +316,3 @@

This method should be applied to any menu items you render. You pass it an object
and that object must contain `index` (number) and `value` (anything) properties.
and that object must contain `index` (number) and `item` (anything) properties.

@@ -326,3 +323,3 @@ Required properties:

updating the `highlightedIndex` as the user keys around.
- `value`: this is the item data that will be selected when the user selects a
- `item`: this is the item data that will be selected when the user selects a
particular item.

@@ -345,2 +342,26 @@

##### actions
<!-- This table was generated via http://www.tablesgenerator.com/markdown_tables -->
| property | type | description |
|-------------------------|----------------------------|------------------------------------------------------------------------------------------------------------------|
| `clearSelection` | `function()` | clears the selection |
| `closeMenu` | `function()` | closes the menu |
| `openMenu` | `function()` | opens the menu |
| `selectHighlightedItem` | `function()` | selects the item that is currently highlighted |
| `selectItem` | `function(item: any)` | selects the given item |
| `selectItemAtIndex` | `function(index: number)` | selects the item at the given index |
| `setHighlightedIndex` | `function(index: number)` | call to set a new highlighted index |
| `toggleMenu` | `function(state: boolean)` | toggle the menu open state (if `state` is not provided, then it will be set to the inverse of the current state) |
##### state
| property | type | description |
|--------------------|-------------------|------------------------------------------------|
| `highlightedIndex` | `number` / `null` | the currently highlighted item |
| `inputValue` | `string` / `null` | the current value of the `getInputProps` input |
| `isOpen` | `boolean` | the menu open state |
| `selectedItem` | `any` | the currently selected item input |
### State Props

@@ -361,2 +382,3 @@

- [multiple selection example](https://codesandbox.io/s/W6gyJ30kn) (uses controlled `selectedItem` API).
- [downshift Apollo example](https://codesandbox.io/s/j2omZpK3W)

@@ -363,0 +385,0 @@ - [downshift Spectre.css example](https://codesandbox.io/s/M89KQOBRB)

dist/downshift.preact.umd.js.map

Sorry, the diff of this file is not supported yet

dist/downshift.preact.umd.min.js.map

Sorry, the diff of this file is not supported yet

dist/downshift.umd.js.map

Sorry, the diff of this file is not supported yet

dist/downshift.umd.min.js.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc