@algolia/satellite 1.0.0-beta.169 → 1.0.0-beta.170

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/cjs/AutoComplete/AutoComplete.js +23 -19
  2. package/esm/AutoComplete/AutoComplete.js +23 -19
  3. package/package.json +1 -1
package/cjs/AutoComplete/AutoComplete.js CHANGED
@@ -123,8 +123,16 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
123
123
  _useState4 = (0, _slicedToArray2["default"])(_useState3, 2),
124
124
  internalInputValue = _useState4[0],
125
125
  setInternalInputValue = _useState4[1];
126
+
127
+ // See https://github.com/downshift-js/downshift/issues/1108
128
+ // as to why we manage the input value ourselves completely
129
+ var updateInputValue = function updateInputValue(value) {
130
+ setInternalInputValue(value);
131
+ onTextChange === null || onTextChange === void 0 || onTextChange(value);
132
+ };
126
133
  (0, _react.useEffect)(function () {
127
- return setInternalInputValue((inputValueProp !== null && inputValueProp !== void 0 ? inputValueProp : multiple) ? "" : value ? (0, _utils.optionToString)(value) : "");
134
+ if (multiple || typeof inputValueProp !== "undefined") return;
135
+ setInternalInputValue((0, _utils.optionToString)(value !== null && value !== void 0 ? value : null));
128
136
  }, [multiple, inputValueProp, value]);
129
137
  var inputValue = inputValueProp !== null && inputValueProp !== void 0 ? inputValueProp : internalInputValue;
130
138
  var _useState5 = (0, _react.useState)(null),
@@ -224,32 +232,19 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
224
232
  combobox.setHighlightedIndex(maxItems);
225
233
  } else if (multiple) {
226
234
  multipleSelection.addSelectedItem(selectedItem);
227
- combobox.setInputValue("");
235
+ updateInputValue("");
228
236
  setShowAllItems(false);
229
237
  } else {
230
238
  multipleSelection.setSelectedItems([selectedItem]);
231
- combobox.setInputValue((0, _utils.optionToString)(selectedItem));
239
+ updateInputValue((0, _utils.optionToString)(selectedItem));
232
240
  setShowAllItems(false);
233
241
  }
234
242
  break;
235
243
  }
236
- case _downshift.useCombobox.stateChangeTypes.FunctionSetInputValue:
237
- case _downshift.useCombobox.stateChangeTypes.InputChange:
238
- {
239
- var _changes$inputValue, _menuPopper$update;
240
- var newInputValue = (_changes$inputValue = changes.inputValue) !== null && _changes$inputValue !== void 0 ? _changes$inputValue : "";
241
- setInternalInputValue(newInputValue);
242
- onTextChange === null || onTextChange === void 0 || onTextChange(newInputValue);
243
- if (!multiple && value && !newInputValue) {
244
- multipleSelection.setSelectedItems([]);
245
- }
246
- (_menuPopper$update = menuPopper.update) === null || _menuPopper$update === void 0 || _menuPopper$update.call(menuPopper);
247
- break;
248
- }
249
244
  case _downshift.useCombobox.stateChangeTypes.InputKeyDownEscape:
250
245
  {
251
246
  if (!combobox.isOpen) {
252
- combobox.setInputValue("");
247
+ updateInputValue("");
253
248
  multipleSelection.setSelectedItems([]);
254
249
  }
255
250
  break;
@@ -266,6 +261,15 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
266
261
  ref: inputRef,
267
262
  autoFocus: autoFocus,
268
263
  disabled: disabled,
264
+ onChange: function onChange(evt) {
265
+ var _value, _menuPopper$update;
266
+ var newInputValue = (_value = evt.currentTarget.value) !== null && _value !== void 0 ? _value : "";
267
+ updateInputValue(newInputValue);
268
+ if (!multiple && value && !newInputValue) {
269
+ multipleSelection.setSelectedItems([]);
270
+ }
271
+ (_menuPopper$update = menuPopper.update) === null || _menuPopper$update === void 0 || _menuPopper$update.call(menuPopper);
272
+ },
269
273
  // We need to make sure to define event handlers here so that they can be composed properly
270
274
  onFocus: function onFocus(evt) {
271
275
  var _menuPopper$update2;
@@ -290,7 +294,7 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
290
294
  newOption = _createFromInputValue2[0];
291
295
  if (newOption && !newOption.disabled) {
292
296
  multipleSelection.addSelectedItem(newOption);
293
- combobox.setInputValue("");
297
+ updateInputValue("");
294
298
  }
295
299
  }
296
300
  }
@@ -384,7 +388,7 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
384
388
  className: (0, _satellitePrefixer["default"])(_templateObject19 || (_templateObject19 = (0, _taggedTemplateLiteral2["default"])(["w-6 h-6 flex items-center justify-center text-grey-500"]))),
385
389
  onClick: function onClick(evt) {
386
390
  evt.stopPropagation();
387
- combobox.setInputValue("");
391
+ updateInputValue("");
388
392
  multipleSelection.setSelectedItems([]);
389
393
  },
390
394
  "aria-label": locale.clearInputButton,
package/esm/AutoComplete/AutoComplete.js CHANGED
@@ -118,8 +118,16 @@ export var AutoComplete = function AutoComplete(_ref) {
118
118
  _useState4 = _slicedToArray(_useState3, 2),
119
119
  internalInputValue = _useState4[0],
120
120
  setInternalInputValue = _useState4[1];
121
+
122
+ // See https://github.com/downshift-js/downshift/issues/1108
123
+ // as to why we manage the input value ourselves completely
124
+ var updateInputValue = function updateInputValue(value) {
125
+ setInternalInputValue(value);
126
+ onTextChange === null || onTextChange === void 0 || onTextChange(value);
127
+ };
121
128
  useEffect(function () {
122
- return setInternalInputValue((inputValueProp !== null && inputValueProp !== void 0 ? inputValueProp : multiple) ? "" : value ? optionToString(value) : "");
129
+ if (multiple || typeof inputValueProp !== "undefined") return;
130
+ setInternalInputValue(optionToString(value !== null && value !== void 0 ? value : null));
123
131
  }, [multiple, inputValueProp, value]);
124
132
  var inputValue = inputValueProp !== null && inputValueProp !== void 0 ? inputValueProp : internalInputValue;
125
133
  var _useState5 = useState(null),
@@ -219,32 +227,19 @@ export var AutoComplete = function AutoComplete(_ref) {
219
227
  combobox.setHighlightedIndex(maxItems);
220
228
  } else if (multiple) {
221
229
  multipleSelection.addSelectedItem(selectedItem);
222
- combobox.setInputValue("");
230
+ updateInputValue("");
223
231
  setShowAllItems(false);
224
232
  } else {
225
233
  multipleSelection.setSelectedItems([selectedItem]);
226
- combobox.setInputValue(optionToString(selectedItem));
234
+ updateInputValue(optionToString(selectedItem));
227
235
  setShowAllItems(false);
228
236
  }
229
237
  break;
230
238
  }
231
- case useCombobox.stateChangeTypes.FunctionSetInputValue:
232
- case useCombobox.stateChangeTypes.InputChange:
233
- {
234
- var _changes$inputValue, _menuPopper$update;
235
- var newInputValue = (_changes$inputValue = changes.inputValue) !== null && _changes$inputValue !== void 0 ? _changes$inputValue : "";
236
- setInternalInputValue(newInputValue);
237
- onTextChange === null || onTextChange === void 0 || onTextChange(newInputValue);
238
- if (!multiple && value && !newInputValue) {
239
- multipleSelection.setSelectedItems([]);
240
- }
241
- (_menuPopper$update = menuPopper.update) === null || _menuPopper$update === void 0 || _menuPopper$update.call(menuPopper);
242
- break;
243
- }
244
239
  case useCombobox.stateChangeTypes.InputKeyDownEscape:
245
240
  {
246
241
  if (!combobox.isOpen) {
247
- combobox.setInputValue("");
242
+ updateInputValue("");
248
243
  multipleSelection.setSelectedItems([]);
249
244
  }
250
245
  break;
@@ -261,6 +256,15 @@ export var AutoComplete = function AutoComplete(_ref) {
261
256
  ref: inputRef,
262
257
  autoFocus: autoFocus,
263
258
  disabled: disabled,
259
+ onChange: function onChange(evt) {
260
+ var _value, _menuPopper$update;
261
+ var newInputValue = (_value = evt.currentTarget.value) !== null && _value !== void 0 ? _value : "";
262
+ updateInputValue(newInputValue);
263
+ if (!multiple && value && !newInputValue) {
264
+ multipleSelection.setSelectedItems([]);
265
+ }
266
+ (_menuPopper$update = menuPopper.update) === null || _menuPopper$update === void 0 || _menuPopper$update.call(menuPopper);
267
+ },
264
268
  // We need to make sure to define event handlers here so that they can be composed properly
265
269
  onFocus: function onFocus(evt) {
266
270
  var _menuPopper$update2;
@@ -285,7 +289,7 @@ export var AutoComplete = function AutoComplete(_ref) {
285
289
  newOption = _createFromInputValue2[0];
286
290
  if (newOption && !newOption.disabled) {
287
291
  multipleSelection.addSelectedItem(newOption);
288
- combobox.setInputValue("");
292
+ updateInputValue("");
289
293
  }
290
294
  }
291
295
  }
@@ -379,7 +383,7 @@ export var AutoComplete = function AutoComplete(_ref) {
379
383
  className: stl(_templateObject19 || (_templateObject19 = _taggedTemplateLiteral(["w-6 h-6 flex items-center justify-center text-grey-500"]))),
380
384
  onClick: function onClick(evt) {
381
385
  evt.stopPropagation();
382
- combobox.setInputValue("");
386
+ updateInputValue("");
383
387
  multipleSelection.setSelectedItems([]);
384
388
  },
385
389
  "aria-label": locale.clearInputButton,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@algolia/satellite",
3
- "version": "1.0.0-beta.169",
3
+ "version": "1.0.0-beta.170",
4
4
  "description": "Algolia design system React components",
5
5
  "scripts": {
6
6
  "clean": "rimraf dist",