@algolia/satellite 1.0.0-beta.167 → 1.0.0-beta.169
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.
|
@@ -123,6 +123,9 @@ 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
|
+
(0, _react.useEffect)(function () {
|
|
127
|
+
return setInternalInputValue((inputValueProp !== null && inputValueProp !== void 0 ? inputValueProp : multiple) ? "" : value ? (0, _utils.optionToString)(value) : "");
|
|
128
|
+
}, [multiple, inputValueProp, value]);
|
|
126
129
|
var inputValue = inputValueProp !== null && inputValueProp !== void 0 ? inputValueProp : internalInputValue;
|
|
127
130
|
var _useState5 = (0, _react.useState)(null),
|
|
128
131
|
_useState6 = (0, _slicedToArray2["default"])(_useState5, 2),
|
|
@@ -392,7 +395,7 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
|
|
|
392
395
|
})]
|
|
393
396
|
}), createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(_ClickAwayContainer.ClickAwayContainer, {
|
|
394
397
|
element: menuRef.current,
|
|
395
|
-
children: /*#__PURE__*/(0, _jsxRuntime.
|
|
398
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.Card, _objectSpread(_objectSpread({}, menuPopper.attributes), {}, {
|
|
396
399
|
className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject20 || (_templateObject20 = (0, _taggedTemplateLiteral2["default"])(["z-dropdown"]))), menuClassName),
|
|
397
400
|
style: _objectSpread(_objectSpread(_objectSpread({}, menuPopper.styles.popper), hideMenu && {
|
|
398
401
|
display: "none"
|
|
@@ -403,41 +406,43 @@ var AutoComplete = exports.AutoComplete = function AutoComplete(_ref) {
|
|
|
403
406
|
ref: menuRef,
|
|
404
407
|
elevation: "300",
|
|
405
408
|
fullBleed: true,
|
|
406
|
-
children:
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
})) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollIndicator["default"], {
|
|
418
|
-
className: menuSize === "large" ? (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["max-h-96"]))) : (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["max-h-64"]))),
|
|
419
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", _objectSpread(_objectSpread({}, combobox.getMenuProps()), {}, {
|
|
420
|
-
children: items.map(function (item, index) {
|
|
421
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", _objectSpread(_objectSpread({}, combobox.getItemProps({
|
|
422
|
-
item: item,
|
|
423
|
-
className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-result flex items-center min-h-10 px-4 cursor-pointer"]))), index === combobox.highlightedIndex && (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100"]))), item.disabled && (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["cursor-not-allowed"]))))
|
|
424
|
-
})), {}, {
|
|
425
|
-
children: item.value === SHOW_ALL_ITEMS_ID ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
426
|
-
className: (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["w-full py-2 truncate text-center text-grey-900"]))),
|
|
427
|
-
children: item.label
|
|
428
|
-
}, item.value) : /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionItem, {
|
|
429
|
-
multiple: Boolean(multiple),
|
|
430
|
-
inputValue: inputValue,
|
|
431
|
-
highlighted: index === combobox.highlightedIndex,
|
|
432
|
-
option: item
|
|
433
|
-
})
|
|
434
|
-
}), String(item.value));
|
|
409
|
+
children: hideMenu ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread({}, combobox.getMenuProps())) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
|
|
410
|
+
children: [items.length === 0 ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", _objectSpread(_objectSpread({}, combobox.getMenuProps({
|
|
411
|
+
className: (0, _satellitePrefixer["default"])(_templateObject21 || (_templateObject21 = (0, _taggedTemplateLiteral2["default"])(["min-h-10"])))
|
|
412
|
+
})), {}, {
|
|
413
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
414
|
+
role: "option",
|
|
415
|
+
"aria-disabled": "true",
|
|
416
|
+
"aria-selected": "false",
|
|
417
|
+
children: emptyState !== null && emptyState !== void 0 ? emptyState : /*#__PURE__*/(0, _jsxRuntime.jsx)(_AutoCompleteEmptyState["default"], {
|
|
418
|
+
title: locale.emptyStateTitle
|
|
419
|
+
})
|
|
435
420
|
})
|
|
436
|
-
}))
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
|
|
421
|
+
})) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScrollIndicator["default"], {
|
|
422
|
+
className: menuSize === "large" ? (0, _satellitePrefixer["default"])(_templateObject22 || (_templateObject22 = (0, _taggedTemplateLiteral2["default"])(["max-h-96"]))) : (0, _satellitePrefixer["default"])(_templateObject23 || (_templateObject23 = (0, _taggedTemplateLiteral2["default"])(["max-h-64"]))),
|
|
423
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", _objectSpread(_objectSpread({}, combobox.getMenuProps()), {}, {
|
|
424
|
+
children: items.map(function (item, index) {
|
|
425
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", _objectSpread(_objectSpread({}, combobox.getItemProps({
|
|
426
|
+
item: item,
|
|
427
|
+
className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject24 || (_templateObject24 = (0, _taggedTemplateLiteral2["default"])(["autocomplete-result flex items-center min-h-10 px-4 cursor-pointer"]))), index === combobox.highlightedIndex && (0, _satellitePrefixer["default"])(_templateObject25 || (_templateObject25 = (0, _taggedTemplateLiteral2["default"])(["bg-grey-100"]))), item.disabled && (0, _satellitePrefixer["default"])(_templateObject26 || (_templateObject26 = (0, _taggedTemplateLiteral2["default"])(["cursor-not-allowed"]))))
|
|
428
|
+
})), {}, {
|
|
429
|
+
children: item.value === SHOW_ALL_ITEMS_ID ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
430
|
+
className: (0, _satellitePrefixer["default"])(_templateObject27 || (_templateObject27 = (0, _taggedTemplateLiteral2["default"])(["w-full py-2 truncate text-center text-grey-900"]))),
|
|
431
|
+
children: item.label
|
|
432
|
+
}, item.value) : /*#__PURE__*/(0, _jsxRuntime.jsx)(OptionItem, {
|
|
433
|
+
multiple: Boolean(multiple),
|
|
434
|
+
inputValue: inputValue,
|
|
435
|
+
highlighted: index === combobox.highlightedIndex,
|
|
436
|
+
option: item
|
|
437
|
+
})
|
|
438
|
+
}), String(item.value));
|
|
439
|
+
})
|
|
440
|
+
}))
|
|
441
|
+
}), !!menuFooter && /*#__PURE__*/(0, _jsxRuntime.jsx)("footer", {
|
|
442
|
+
className: (0, _satellitePrefixer["default"])(_templateObject28 || (_templateObject28 = (0, _taggedTemplateLiteral2["default"])(["flex items-center justify-center min-h-12 p-4 bg-grey-100 border-t border-grey-200 text-grey-600"]))),
|
|
443
|
+
children: menuFooter
|
|
444
|
+
})]
|
|
445
|
+
})
|
|
441
446
|
}))
|
|
442
447
|
}))]
|
|
443
448
|
})
|
|
@@ -25,6 +25,7 @@ import { DefaultOptionItem } from "./components/DefaultOptionItem";
|
|
|
25
25
|
import { DEFAULT_AUTOCOMPLETE_LOCALE, defaultCreateFromInputValue, filter, optionToString } from "./utils";
|
|
26
26
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
27
27
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
28
|
+
import { Fragment as _Fragment } from "react/jsx-runtime";
|
|
28
29
|
var MENU_POPPER_OPTIONS = {
|
|
29
30
|
strategy: "fixed",
|
|
30
31
|
placement: "bottom-start",
|
|
@@ -117,6 +118,9 @@ export var AutoComplete = function AutoComplete(_ref) {
|
|
|
117
118
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
118
119
|
internalInputValue = _useState4[0],
|
|
119
120
|
setInternalInputValue = _useState4[1];
|
|
121
|
+
useEffect(function () {
|
|
122
|
+
return setInternalInputValue((inputValueProp !== null && inputValueProp !== void 0 ? inputValueProp : multiple) ? "" : value ? optionToString(value) : "");
|
|
123
|
+
}, [multiple, inputValueProp, value]);
|
|
120
124
|
var inputValue = inputValueProp !== null && inputValueProp !== void 0 ? inputValueProp : internalInputValue;
|
|
121
125
|
var _useState5 = useState(null),
|
|
122
126
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
@@ -386,7 +390,7 @@ export var AutoComplete = function AutoComplete(_ref) {
|
|
|
386
390
|
})]
|
|
387
391
|
}), createPortal( /*#__PURE__*/_jsx(ClickAwayContainer, {
|
|
388
392
|
element: menuRef.current,
|
|
389
|
-
children: /*#__PURE__*/
|
|
393
|
+
children: /*#__PURE__*/_jsx(Card, _objectSpread(_objectSpread({}, menuPopper.attributes), {}, {
|
|
390
394
|
className: cx(stl(_templateObject20 || (_templateObject20 = _taggedTemplateLiteral(["z-dropdown"]))), menuClassName),
|
|
391
395
|
style: _objectSpread(_objectSpread(_objectSpread({}, menuPopper.styles.popper), hideMenu && {
|
|
392
396
|
display: "none"
|
|
@@ -397,41 +401,43 @@ export var AutoComplete = function AutoComplete(_ref) {
|
|
|
397
401
|
ref: menuRef,
|
|
398
402
|
elevation: "300",
|
|
399
403
|
fullBleed: true,
|
|
400
|
-
children:
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
|
|
410
|
-
|
|
411
|
-
})) : /*#__PURE__*/_jsx(ScrollIndicator, {
|
|
412
|
-
className: menuSize === "large" ? stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["max-h-96"]))) : stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["max-h-64"]))),
|
|
413
|
-
children: /*#__PURE__*/_jsx("ul", _objectSpread(_objectSpread({}, combobox.getMenuProps()), {}, {
|
|
414
|
-
children: items.map(function (item, index) {
|
|
415
|
-
return /*#__PURE__*/_jsx("li", _objectSpread(_objectSpread({}, combobox.getItemProps({
|
|
416
|
-
item: item,
|
|
417
|
-
className: cx(stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["autocomplete-result flex items-center min-h-10 px-4 cursor-pointer"]))), index === combobox.highlightedIndex && stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["bg-grey-100"]))), item.disabled && stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["cursor-not-allowed"]))))
|
|
418
|
-
})), {}, {
|
|
419
|
-
children: item.value === SHOW_ALL_ITEMS_ID ? /*#__PURE__*/_jsx("span", {
|
|
420
|
-
className: stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["w-full py-2 truncate text-center text-grey-900"]))),
|
|
421
|
-
children: item.label
|
|
422
|
-
}, item.value) : /*#__PURE__*/_jsx(OptionItem, {
|
|
423
|
-
multiple: Boolean(multiple),
|
|
424
|
-
inputValue: inputValue,
|
|
425
|
-
highlighted: index === combobox.highlightedIndex,
|
|
426
|
-
option: item
|
|
427
|
-
})
|
|
428
|
-
}), String(item.value));
|
|
404
|
+
children: hideMenu ? /*#__PURE__*/_jsx("div", _objectSpread({}, combobox.getMenuProps())) : /*#__PURE__*/_jsxs(_Fragment, {
|
|
405
|
+
children: [items.length === 0 ? /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, combobox.getMenuProps({
|
|
406
|
+
className: stl(_templateObject21 || (_templateObject21 = _taggedTemplateLiteral(["min-h-10"])))
|
|
407
|
+
})), {}, {
|
|
408
|
+
children: /*#__PURE__*/_jsx("div", {
|
|
409
|
+
role: "option",
|
|
410
|
+
"aria-disabled": "true",
|
|
411
|
+
"aria-selected": "false",
|
|
412
|
+
children: emptyState !== null && emptyState !== void 0 ? emptyState : /*#__PURE__*/_jsx(AutoCompleteEmptyState, {
|
|
413
|
+
title: locale.emptyStateTitle
|
|
414
|
+
})
|
|
429
415
|
})
|
|
430
|
-
}))
|
|
431
|
-
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
416
|
+
})) : /*#__PURE__*/_jsx(ScrollIndicator, {
|
|
417
|
+
className: menuSize === "large" ? stl(_templateObject22 || (_templateObject22 = _taggedTemplateLiteral(["max-h-96"]))) : stl(_templateObject23 || (_templateObject23 = _taggedTemplateLiteral(["max-h-64"]))),
|
|
418
|
+
children: /*#__PURE__*/_jsx("ul", _objectSpread(_objectSpread({}, combobox.getMenuProps()), {}, {
|
|
419
|
+
children: items.map(function (item, index) {
|
|
420
|
+
return /*#__PURE__*/_jsx("li", _objectSpread(_objectSpread({}, combobox.getItemProps({
|
|
421
|
+
item: item,
|
|
422
|
+
className: cx(stl(_templateObject24 || (_templateObject24 = _taggedTemplateLiteral(["autocomplete-result flex items-center min-h-10 px-4 cursor-pointer"]))), index === combobox.highlightedIndex && stl(_templateObject25 || (_templateObject25 = _taggedTemplateLiteral(["bg-grey-100"]))), item.disabled && stl(_templateObject26 || (_templateObject26 = _taggedTemplateLiteral(["cursor-not-allowed"]))))
|
|
423
|
+
})), {}, {
|
|
424
|
+
children: item.value === SHOW_ALL_ITEMS_ID ? /*#__PURE__*/_jsx("span", {
|
|
425
|
+
className: stl(_templateObject27 || (_templateObject27 = _taggedTemplateLiteral(["w-full py-2 truncate text-center text-grey-900"]))),
|
|
426
|
+
children: item.label
|
|
427
|
+
}, item.value) : /*#__PURE__*/_jsx(OptionItem, {
|
|
428
|
+
multiple: Boolean(multiple),
|
|
429
|
+
inputValue: inputValue,
|
|
430
|
+
highlighted: index === combobox.highlightedIndex,
|
|
431
|
+
option: item
|
|
432
|
+
})
|
|
433
|
+
}), String(item.value));
|
|
434
|
+
})
|
|
435
|
+
}))
|
|
436
|
+
}), !!menuFooter && /*#__PURE__*/_jsx("footer", {
|
|
437
|
+
className: stl(_templateObject28 || (_templateObject28 = _taggedTemplateLiteral(["flex items-center justify-center min-h-12 p-4 bg-grey-100 border-t border-grey-200 text-grey-600"]))),
|
|
438
|
+
children: menuFooter
|
|
439
|
+
})]
|
|
440
|
+
})
|
|
435
441
|
}))
|
|
436
442
|
}))]
|
|
437
443
|
})
|