instantsearch-ui-components 0.11.2 → 0.13.0
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.
- package/dist/cjs/components/Button.js +29 -0
- package/dist/cjs/components/Carousel.js +26 -6
- package/dist/cjs/components/autocomplete/Autocomplete.js +23 -0
- package/dist/cjs/components/autocomplete/AutocompleteIndex.js +44 -0
- package/dist/cjs/components/autocomplete/AutocompletePanel.js +25 -0
- package/dist/cjs/components/autocomplete/AutocompleteSearch.js +70 -0
- package/dist/cjs/components/autocomplete/AutocompleteSuggestion.js +20 -0
- package/dist/cjs/components/autocomplete/createAutocompletePropGetters.js +222 -0
- package/dist/cjs/components/autocomplete/icons.js +56 -0
- package/dist/cjs/components/autocomplete/index.js +71 -0
- package/dist/cjs/components/chat/Chat.js +79 -0
- package/dist/cjs/components/chat/ChatHeader.js +89 -0
- package/dist/cjs/components/chat/ChatMessage.js +138 -0
- package/dist/cjs/components/chat/ChatMessageError.js +57 -0
- package/dist/cjs/components/chat/ChatMessageLoader.js +47 -0
- package/dist/cjs/components/chat/ChatMessages.js +192 -0
- package/dist/cjs/components/chat/ChatPrompt.js +179 -0
- package/dist/cjs/components/chat/ChatToggleButton.js +46 -0
- package/dist/cjs/components/chat/icons.js +375 -0
- package/dist/cjs/components/chat/types.js +1 -0
- package/dist/cjs/components/index.js +132 -0
- package/dist/cjs/lib/index.js +22 -0
- package/dist/cjs/lib/stickToBottom.js +481 -0
- package/dist/cjs/lib/utils/find.js +15 -0
- package/dist/cjs/lib/utils/index.js +27 -0
- package/dist/cjs/lib/utils/startsWith.js +9 -0
- package/dist/cjs/version.js +1 -1
- package/dist/cjs/warn.js +40 -0
- package/dist/es/components/Button.d.ts +38 -0
- package/dist/es/components/Button.js +22 -0
- package/dist/es/components/Carousel.d.ts +11 -0
- package/dist/es/components/Carousel.js +26 -6
- package/dist/es/components/autocomplete/Autocomplete.d.ts +13 -0
- package/dist/es/components/autocomplete/Autocomplete.js +16 -0
- package/dist/es/components/autocomplete/AutocompleteIndex.d.ts +38 -0
- package/dist/es/components/autocomplete/AutocompleteIndex.js +37 -0
- package/dist/es/components/autocomplete/AutocompletePanel.d.ts +17 -0
- package/dist/es/components/autocomplete/AutocompletePanel.js +18 -0
- package/dist/es/components/autocomplete/AutocompleteSearch.d.ts +8 -0
- package/dist/es/components/autocomplete/AutocompleteSearch.js +63 -0
- package/dist/es/components/autocomplete/AutocompleteSuggestion.d.ts +16 -0
- package/dist/es/components/autocomplete/AutocompleteSuggestion.js +14 -0
- package/dist/es/components/autocomplete/createAutocompletePropGetters.d.ts +49 -0
- package/dist/es/components/autocomplete/createAutocompletePropGetters.js +215 -0
- package/dist/es/components/autocomplete/icons.d.ts +7 -0
- package/dist/es/components/autocomplete/icons.js +48 -0
- package/dist/es/components/autocomplete/index.d.ts +6 -0
- package/dist/es/components/autocomplete/index.js +6 -0
- package/dist/es/components/chat/Chat.d.ts +42 -0
- package/dist/es/components/chat/Chat.js +72 -0
- package/dist/es/components/chat/ChatHeader.d.ts +99 -0
- package/dist/es/components/chat/ChatHeader.js +82 -0
- package/dist/es/components/chat/ChatMessage.d.ts +124 -0
- package/dist/es/components/chat/ChatMessage.js +131 -0
- package/dist/es/components/chat/ChatMessageError.d.ts +27 -0
- package/dist/es/components/chat/ChatMessageError.js +50 -0
- package/dist/es/components/chat/ChatMessageLoader.d.ts +15 -0
- package/dist/es/components/chat/ChatMessageLoader.js +40 -0
- package/dist/es/components/chat/ChatMessages.d.ts +139 -0
- package/dist/es/components/chat/ChatMessages.js +185 -0
- package/dist/es/components/chat/ChatPrompt.d.ts +119 -0
- package/dist/es/components/chat/ChatPrompt.js +172 -0
- package/dist/es/components/chat/ChatToggleButton.d.ts +29 -0
- package/dist/es/components/chat/ChatToggleButton.js +39 -0
- package/dist/es/components/chat/icons.d.ts +22 -0
- package/dist/es/components/chat/icons.js +355 -0
- package/dist/es/components/chat/types.d.ts +29 -0
- package/dist/es/components/chat/types.js +1 -0
- package/dist/es/components/index.d.ts +12 -0
- package/dist/es/components/index.js +12 -0
- package/dist/es/lib/index.d.ts +2 -0
- package/dist/es/lib/index.js +3 -1
- package/dist/es/lib/stickToBottom.d.ts +114 -0
- package/dist/es/lib/stickToBottom.js +474 -0
- package/dist/es/lib/utils/find.d.ts +1 -0
- package/dist/es/lib/utils/find.js +9 -0
- package/dist/es/lib/utils/index.d.ts +2 -0
- package/dist/es/lib/utils/index.js +2 -0
- package/dist/es/lib/utils/startsWith.d.ts +1 -0
- package/dist/es/lib/utils/startsWith.js +3 -0
- package/dist/es/types/Renderer.d.ts +1 -1
- package/dist/es/version.d.ts +1 -1
- package/dist/es/version.js +1 -1
- package/dist/es/warn.d.ts +10 -0
- package/dist/es/warn.js +33 -0
- package/package.json +7 -3
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.createButtonComponent = createButtonComponent;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
|
+
var _cx = require("../lib/cx");
|
|
11
|
+
var _excluded = ["variant", "size", "iconOnly", "className", "children"];
|
|
12
|
+
function createButtonComponent(_ref) {
|
|
13
|
+
var createElement = _ref.createElement;
|
|
14
|
+
return function Button(userProps) {
|
|
15
|
+
var _userProps$variant = userProps.variant,
|
|
16
|
+
variant = _userProps$variant === void 0 ? 'primary' : _userProps$variant,
|
|
17
|
+
_userProps$size = userProps.size,
|
|
18
|
+
size = _userProps$size === void 0 ? 'md' : _userProps$size,
|
|
19
|
+
_userProps$iconOnly = userProps.iconOnly,
|
|
20
|
+
iconOnly = _userProps$iconOnly === void 0 ? false : _userProps$iconOnly,
|
|
21
|
+
className = userProps.className,
|
|
22
|
+
children = userProps.children,
|
|
23
|
+
props = (0, _objectWithoutProperties2.default)(userProps, _excluded);
|
|
24
|
+
return createElement("button", (0, _extends2.default)({
|
|
25
|
+
type: "button",
|
|
26
|
+
className: (0, _cx.cx)('ais-Button', "ais-Button--".concat(variant), "ais-Button--".concat(size), iconOnly && 'ais-Button--icon-only', className)
|
|
27
|
+
}, props), children);
|
|
28
|
+
};
|
|
29
|
+
}
|
|
@@ -11,7 +11,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
|
|
|
11
11
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
12
12
|
var _lib = require("../lib");
|
|
13
13
|
var _recommendShared = require("./recommend-shared");
|
|
14
|
-
var _excluded = ["listRef", "nextButtonRef", "previousButtonRef", "carouselIdRef", "classNames", "itemComponent", "previousIconComponent", "nextIconComponent", "items", "translations", "sendEvent"];
|
|
14
|
+
var _excluded = ["listRef", "nextButtonRef", "previousButtonRef", "carouselIdRef", "canScrollLeft", "canScrollRight", "setCanScrollLeft", "setCanScrollRight", "classNames", "itemComponent", "previousIconComponent", "nextIconComponent", "headerComponent", "showNavigation", "items", "translations", "sendEvent"];
|
|
15
15
|
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
16
16
|
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
17
17
|
var lastCarouselId = 0;
|
|
@@ -54,6 +54,10 @@ function createCarouselComponent(_ref3) {
|
|
|
54
54
|
nextButtonRef = userProps.nextButtonRef,
|
|
55
55
|
previousButtonRef = userProps.previousButtonRef,
|
|
56
56
|
carouselIdRef = userProps.carouselIdRef,
|
|
57
|
+
canScrollLeft = userProps.canScrollLeft,
|
|
58
|
+
canScrollRight = userProps.canScrollRight,
|
|
59
|
+
setCanScrollLeft = userProps.setCanScrollLeft,
|
|
60
|
+
setCanScrollRight = userProps.setCanScrollRight,
|
|
57
61
|
_userProps$classNames = userProps.classNames,
|
|
58
62
|
classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
|
|
59
63
|
_userProps$itemCompon = userProps.itemComponent,
|
|
@@ -65,6 +69,9 @@ function createCarouselComponent(_ref3) {
|
|
|
65
69
|
PreviousIconComponent = _userProps$previousIc === void 0 ? PreviousIconDefaultComponent : _userProps$previousIc,
|
|
66
70
|
_userProps$nextIconCo = userProps.nextIconComponent,
|
|
67
71
|
NextIconComponent = _userProps$nextIconCo === void 0 ? NextIconDefaultComponent : _userProps$nextIconCo,
|
|
72
|
+
HeaderComponent = userProps.headerComponent,
|
|
73
|
+
_userProps$showNaviga = userProps.showNavigation,
|
|
74
|
+
showNavigation = _userProps$showNaviga === void 0 ? true : _userProps$showNaviga,
|
|
68
75
|
items = userProps.items,
|
|
69
76
|
userTranslations = userProps.translations,
|
|
70
77
|
sendEvent = userProps.sendEvent,
|
|
@@ -95,18 +102,31 @@ function createCarouselComponent(_ref3) {
|
|
|
95
102
|
}
|
|
96
103
|
}
|
|
97
104
|
function updateNavigationButtonsProps() {
|
|
98
|
-
if (!listRef.current
|
|
105
|
+
if (!listRef.current) {
|
|
99
106
|
return;
|
|
100
107
|
}
|
|
101
|
-
|
|
102
|
-
|
|
108
|
+
var isLeftHidden = listRef.current.scrollLeft <= 0;
|
|
109
|
+
var isRightHidden = listRef.current.scrollLeft + listRef.current.clientWidth >= listRef.current.scrollWidth;
|
|
110
|
+
setCanScrollLeft(!isLeftHidden);
|
|
111
|
+
setCanScrollRight(!isRightHidden);
|
|
112
|
+
if (previousButtonRef.current) {
|
|
113
|
+
previousButtonRef.current.hidden = isLeftHidden;
|
|
114
|
+
}
|
|
115
|
+
if (nextButtonRef.current) {
|
|
116
|
+
nextButtonRef.current.hidden = isRightHidden;
|
|
117
|
+
}
|
|
103
118
|
}
|
|
104
119
|
if (items.length === 0) {
|
|
105
120
|
return null;
|
|
106
121
|
}
|
|
107
122
|
return createElement("div", (0, _extends2.default)({}, props, {
|
|
108
123
|
className: (0, _lib.cx)(cssClasses.root)
|
|
109
|
-
}), createElement(
|
|
124
|
+
}), HeaderComponent && createElement(HeaderComponent, {
|
|
125
|
+
canScrollLeft: canScrollLeft,
|
|
126
|
+
canScrollRight: canScrollRight,
|
|
127
|
+
scrollLeft: scrollLeft,
|
|
128
|
+
scrollRight: scrollRight
|
|
129
|
+
}), showNavigation && createElement("button", {
|
|
110
130
|
ref: previousButtonRef,
|
|
111
131
|
title: translations.previousButtonTitle,
|
|
112
132
|
"aria-label": translations.previousButtonLabel,
|
|
@@ -153,7 +173,7 @@ function createCarouselComponent(_ref3) {
|
|
|
153
173
|
item: item,
|
|
154
174
|
sendEvent: sendEvent
|
|
155
175
|
}));
|
|
156
|
-
})), createElement("button", {
|
|
176
|
+
})), showNavigation && createElement("button", {
|
|
157
177
|
ref: nextButtonRef,
|
|
158
178
|
title: translations.nextButtonTitle,
|
|
159
179
|
"aria-label": translations.nextButtonLabel,
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.createAutocompleteComponent = createAutocompleteComponent;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
|
+
var _cx = require("../../lib/cx");
|
|
11
|
+
var _excluded = ["children", "classNames"];
|
|
12
|
+
function createAutocompleteComponent(_ref) {
|
|
13
|
+
var createElement = _ref.createElement;
|
|
14
|
+
return function Autocomplete(userProps) {
|
|
15
|
+
var children = userProps.children,
|
|
16
|
+
_userProps$classNames = userProps.classNames,
|
|
17
|
+
classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
|
|
18
|
+
props = (0, _objectWithoutProperties2.default)(userProps, _excluded);
|
|
19
|
+
return createElement("div", (0, _extends2.default)({
|
|
20
|
+
className: (0, _cx.cx)('ais-Autocomplete', classNames.root)
|
|
21
|
+
}, props), children);
|
|
22
|
+
};
|
|
23
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.createAutocompleteIndexComponent = createAutocompleteIndexComponent;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
|
+
var _cx = require("../../lib/cx");
|
|
11
|
+
var _excluded = ["className", "onSelect"];
|
|
12
|
+
function createAutocompleteIndexComponent(_ref) {
|
|
13
|
+
var createElement = _ref.createElement;
|
|
14
|
+
return function AutocompleteIndex(userProps) {
|
|
15
|
+
var items = userProps.items,
|
|
16
|
+
HeaderComponent = userProps.HeaderComponent,
|
|
17
|
+
ItemComponent = userProps.ItemComponent,
|
|
18
|
+
getItemProps = userProps.getItemProps,
|
|
19
|
+
_userProps$classNames = userProps.classNames,
|
|
20
|
+
classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames;
|
|
21
|
+
return createElement("div", {
|
|
22
|
+
className: (0, _cx.cx)('ais-AutocompleteIndex', classNames.root)
|
|
23
|
+
}, HeaderComponent && createElement("div", {
|
|
24
|
+
className: (0, _cx.cx)('ais-AutocompleteIndexHeader', classNames.header)
|
|
25
|
+
}, createElement(HeaderComponent, {
|
|
26
|
+
items: items
|
|
27
|
+
})), createElement("ol", {
|
|
28
|
+
className: (0, _cx.cx)('ais-AutocompleteIndexList', classNames.list)
|
|
29
|
+
}, items.map(function (item, index) {
|
|
30
|
+
var _getItemProps = getItemProps(item, index),
|
|
31
|
+
className = _getItemProps.className,
|
|
32
|
+
onSelect = _getItemProps.onSelect,
|
|
33
|
+
itemProps = (0, _objectWithoutProperties2.default)(_getItemProps, _excluded);
|
|
34
|
+
return createElement("li", (0, _extends2.default)({
|
|
35
|
+
key: item.objectID
|
|
36
|
+
}, itemProps, {
|
|
37
|
+
className: (0, _cx.cx)('ais-AutocompleteIndexItem', classNames.item, className)
|
|
38
|
+
}), createElement(ItemComponent, {
|
|
39
|
+
item: item,
|
|
40
|
+
onSelect: onSelect
|
|
41
|
+
}));
|
|
42
|
+
})));
|
|
43
|
+
};
|
|
44
|
+
}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.createAutocompletePanelComponent = createAutocompletePanelComponent;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
10
|
+
var _cx = require("../../lib/cx");
|
|
11
|
+
var _excluded = ["children", "classNames"];
|
|
12
|
+
function createAutocompletePanelComponent(_ref) {
|
|
13
|
+
var createElement = _ref.createElement;
|
|
14
|
+
return function AutocompletePanel(userProps) {
|
|
15
|
+
var children = userProps.children,
|
|
16
|
+
_userProps$classNames = userProps.classNames,
|
|
17
|
+
classNames = _userProps$classNames === void 0 ? {} : _userProps$classNames,
|
|
18
|
+
props = (0, _objectWithoutProperties2.default)(userProps, _excluded);
|
|
19
|
+
return createElement("div", (0, _extends2.default)({}, props, {
|
|
20
|
+
className: (0, _cx.cx)('ais-AutocompletePanel', classNames.root, props.className)
|
|
21
|
+
}), createElement("div", {
|
|
22
|
+
className: (0, _cx.cx)('ais-AutocompletePanelLayout', classNames.layout)
|
|
23
|
+
}, children));
|
|
24
|
+
};
|
|
25
|
+
}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.createAutocompleteSearchComponent = createAutocompleteSearchComponent;
|
|
8
|
+
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
|
|
9
|
+
var _icons = require("./icons");
|
|
10
|
+
function createAutocompleteSearchComponent(_ref) {
|
|
11
|
+
var createElement = _ref.createElement;
|
|
12
|
+
return function AutocompleteSearch(_ref2) {
|
|
13
|
+
var inputProps = _ref2.inputProps,
|
|
14
|
+
onClear = _ref2.onClear,
|
|
15
|
+
query = _ref2.query,
|
|
16
|
+
isSearchStalled = _ref2.isSearchStalled;
|
|
17
|
+
return createElement("form", {
|
|
18
|
+
className: "ais-AutocompleteForm",
|
|
19
|
+
action: "",
|
|
20
|
+
noValidate: true,
|
|
21
|
+
role: "search",
|
|
22
|
+
onSubmit: function onSubmit(e) {
|
|
23
|
+
return e.preventDefault();
|
|
24
|
+
}
|
|
25
|
+
}, createElement("div", {
|
|
26
|
+
className: "ais-AutocompleteInputWrapperPrefix"
|
|
27
|
+
}, createElement("label", {
|
|
28
|
+
className: "ais-AutocompleteLabel",
|
|
29
|
+
"aria-label": "Submit",
|
|
30
|
+
htmlFor: inputProps.id,
|
|
31
|
+
id: "".concat(inputProps.id, "-label")
|
|
32
|
+
}, createElement("button", {
|
|
33
|
+
className: "ais-AutocompleteSubmitButton",
|
|
34
|
+
type: "submit",
|
|
35
|
+
title: "Submit"
|
|
36
|
+
}, createElement(_icons.AutocompleteSubmitIcon, {
|
|
37
|
+
createElement: createElement
|
|
38
|
+
}))), createElement("div", {
|
|
39
|
+
className: "ais-AutocompleteLoadingIndicator",
|
|
40
|
+
hidden: !isSearchStalled
|
|
41
|
+
}, createElement(_icons.AutocompleteLoadingIcon, {
|
|
42
|
+
createElement: createElement
|
|
43
|
+
}))), createElement("div", {
|
|
44
|
+
className: "ais-AutocompleteInputWrapper"
|
|
45
|
+
}, createElement("input", (0, _extends2.default)({
|
|
46
|
+
className: "ais-AutocompleteInput",
|
|
47
|
+
"aria-autocomplete": "both",
|
|
48
|
+
"aria-labelledby": "".concat(inputProps.id, "-label"),
|
|
49
|
+
autoComplete: "off",
|
|
50
|
+
autoCorrect: "off",
|
|
51
|
+
autoCapitalize: "off",
|
|
52
|
+
enterKeyHint: "search",
|
|
53
|
+
spellCheck: "false",
|
|
54
|
+
placeholder: "",
|
|
55
|
+
maxLength: 512,
|
|
56
|
+
type: "search",
|
|
57
|
+
value: query
|
|
58
|
+
}, inputProps))), createElement("div", {
|
|
59
|
+
className: "ais-AutocompleteInputWrapperSuffix"
|
|
60
|
+
}, createElement("button", {
|
|
61
|
+
className: "ais-AutocompleteClearButton",
|
|
62
|
+
type: "reset",
|
|
63
|
+
title: "Clear",
|
|
64
|
+
hidden: query.length === 0 || isSearchStalled,
|
|
65
|
+
onClick: onClear
|
|
66
|
+
}, createElement(_icons.AutocompleteClearIcon, {
|
|
67
|
+
createElement: createElement
|
|
68
|
+
}))));
|
|
69
|
+
};
|
|
70
|
+
}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.createAutocompleteSuggestionComponent = createAutocompleteSuggestionComponent;
|
|
7
|
+
var _lib = require("../../lib");
|
|
8
|
+
function createAutocompleteSuggestionComponent(_ref) {
|
|
9
|
+
var createElement = _ref.createElement;
|
|
10
|
+
return function AutocompleteSuggestion(_ref2) {
|
|
11
|
+
var item = _ref2.item,
|
|
12
|
+
onSelect = _ref2.onSelect,
|
|
13
|
+
_ref2$classNames = _ref2.classNames,
|
|
14
|
+
classNames = _ref2$classNames === void 0 ? {} : _ref2$classNames;
|
|
15
|
+
return createElement("div", {
|
|
16
|
+
onClick: onSelect,
|
|
17
|
+
className: (0, _lib.cx)('ais-AutocompleteSuggestion', classNames.root)
|
|
18
|
+
}, item.query);
|
|
19
|
+
};
|
|
20
|
+
}
|
|
@@ -0,0 +1,222 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
|
|
4
|
+
Object.defineProperty(exports, "__esModule", {
|
|
5
|
+
value: true
|
|
6
|
+
});
|
|
7
|
+
exports.createAutocompletePropGetters = createAutocompletePropGetters;
|
|
8
|
+
var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
|
|
9
|
+
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
10
|
+
function createAutocompletePropGetters(_ref) {
|
|
11
|
+
var useEffect = _ref.useEffect,
|
|
12
|
+
useId = _ref.useId,
|
|
13
|
+
useMemo = _ref.useMemo,
|
|
14
|
+
useRef = _ref.useRef,
|
|
15
|
+
useState = _ref.useState;
|
|
16
|
+
return function usePropGetters(_ref2) {
|
|
17
|
+
var indices = _ref2.indices,
|
|
18
|
+
indicesConfig = _ref2.indicesConfig,
|
|
19
|
+
onRefine = _ref2.onRefine,
|
|
20
|
+
globalOnSelect = _ref2.onSelect;
|
|
21
|
+
var getElementId = createGetElementId(useId());
|
|
22
|
+
var rootRef = useRef(null);
|
|
23
|
+
var _useState = useState(false),
|
|
24
|
+
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
|
|
25
|
+
isOpen = _useState2[0],
|
|
26
|
+
setIsOpen = _useState2[1];
|
|
27
|
+
var _useState3 = useState(undefined),
|
|
28
|
+
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
|
|
29
|
+
activeDescendant = _useState4[0],
|
|
30
|
+
setActiveDescendant = _useState4[1];
|
|
31
|
+
var _useMemo = useMemo(function () {
|
|
32
|
+
return buildItems({
|
|
33
|
+
indices: indices,
|
|
34
|
+
indicesConfig: indicesConfig,
|
|
35
|
+
getElementId: getElementId
|
|
36
|
+
});
|
|
37
|
+
}, [indices, indicesConfig, getElementId]),
|
|
38
|
+
items = _useMemo.items,
|
|
39
|
+
itemsIds = _useMemo.itemsIds;
|
|
40
|
+
useEffect(function () {
|
|
41
|
+
var onBodyClick = function onBodyClick(event) {
|
|
42
|
+
var _unwrapRef;
|
|
43
|
+
if ((_unwrapRef = unwrapRef(rootRef)) !== null && _unwrapRef !== void 0 && _unwrapRef.contains(event.target)) {
|
|
44
|
+
return;
|
|
45
|
+
}
|
|
46
|
+
setIsOpen(false);
|
|
47
|
+
};
|
|
48
|
+
document.body.addEventListener('click', onBodyClick);
|
|
49
|
+
return function () {
|
|
50
|
+
document.body.removeEventListener('click', onBodyClick);
|
|
51
|
+
};
|
|
52
|
+
}, [rootRef]);
|
|
53
|
+
var getNextActiveDescendent = function getNextActiveDescendent(key) {
|
|
54
|
+
switch (key) {
|
|
55
|
+
case 'ArrowLeft':
|
|
56
|
+
case 'ArrowUp':
|
|
57
|
+
{
|
|
58
|
+
var prevIndex = itemsIds.indexOf(activeDescendant || '') - 1;
|
|
59
|
+
return itemsIds[prevIndex] || itemsIds[itemsIds.length - 1];
|
|
60
|
+
}
|
|
61
|
+
case 'ArrowRight':
|
|
62
|
+
case 'ArrowDown':
|
|
63
|
+
{
|
|
64
|
+
var nextIndex = itemsIds.indexOf(activeDescendant || '') + 1;
|
|
65
|
+
return itemsIds[nextIndex] || itemsIds[0];
|
|
66
|
+
}
|
|
67
|
+
default:
|
|
68
|
+
return undefined;
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
var submit = function submit() {
|
|
72
|
+
var actualActiveDescendant = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : activeDescendant;
|
|
73
|
+
setIsOpen(false);
|
|
74
|
+
if (actualActiveDescendant && items.has(actualActiveDescendant)) {
|
|
75
|
+
var _getQuery;
|
|
76
|
+
var _ref3 = items.get(actualActiveDescendant),
|
|
77
|
+
_item = _ref3.item,
|
|
78
|
+
_ref3$config = _ref3.config,
|
|
79
|
+
indexOnSelect = _ref3$config.onSelect,
|
|
80
|
+
getQuery = _ref3$config.getQuery,
|
|
81
|
+
getURL = _ref3$config.getURL;
|
|
82
|
+
var actualOnSelect = indexOnSelect !== null && indexOnSelect !== void 0 ? indexOnSelect : globalOnSelect;
|
|
83
|
+
actualOnSelect({
|
|
84
|
+
item: _item,
|
|
85
|
+
query: (_getQuery = getQuery === null || getQuery === void 0 ? void 0 : getQuery(_item)) !== null && _getQuery !== void 0 ? _getQuery : '',
|
|
86
|
+
url: getURL === null || getURL === void 0 ? void 0 : getURL(_item),
|
|
87
|
+
setQuery: function setQuery(query) {
|
|
88
|
+
return onRefine(query);
|
|
89
|
+
}
|
|
90
|
+
});
|
|
91
|
+
setActiveDescendant(undefined);
|
|
92
|
+
}
|
|
93
|
+
};
|
|
94
|
+
return {
|
|
95
|
+
getInputProps: function getInputProps() {
|
|
96
|
+
return {
|
|
97
|
+
id: getElementId('input'),
|
|
98
|
+
role: 'combobox',
|
|
99
|
+
'aria-autocomplete': 'list',
|
|
100
|
+
'aria-expanded': isOpen,
|
|
101
|
+
'aria-haspopup': 'grid',
|
|
102
|
+
'aria-controls': getElementId('panel'),
|
|
103
|
+
'aria-activedescendant': activeDescendant,
|
|
104
|
+
onFocus: function onFocus() {
|
|
105
|
+
return setIsOpen(true);
|
|
106
|
+
},
|
|
107
|
+
onKeyDown: function onKeyDown(event) {
|
|
108
|
+
if (event.key === 'Escape') {
|
|
109
|
+
setActiveDescendant(undefined);
|
|
110
|
+
setIsOpen(false);
|
|
111
|
+
return;
|
|
112
|
+
}
|
|
113
|
+
switch (event.key) {
|
|
114
|
+
case 'ArrowLeft':
|
|
115
|
+
case 'ArrowUp':
|
|
116
|
+
case 'ArrowRight':
|
|
117
|
+
case 'ArrowDown':
|
|
118
|
+
{
|
|
119
|
+
var _document$getElementB;
|
|
120
|
+
var nextActiveDescendent = getNextActiveDescendent(event.key);
|
|
121
|
+
setActiveDescendant(nextActiveDescendent);
|
|
122
|
+
(_document$getElementB = document.getElementById(nextActiveDescendent)) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.scrollIntoView(false);
|
|
123
|
+
event.preventDefault();
|
|
124
|
+
break;
|
|
125
|
+
}
|
|
126
|
+
case 'Enter':
|
|
127
|
+
{
|
|
128
|
+
submit();
|
|
129
|
+
break;
|
|
130
|
+
}
|
|
131
|
+
case 'Tab':
|
|
132
|
+
setIsOpen(false);
|
|
133
|
+
break;
|
|
134
|
+
default:
|
|
135
|
+
return;
|
|
136
|
+
}
|
|
137
|
+
},
|
|
138
|
+
onKeyUp: function onKeyUp(event) {
|
|
139
|
+
switch (event.key) {
|
|
140
|
+
case 'ArrowLeft':
|
|
141
|
+
case 'ArrowUp':
|
|
142
|
+
case 'ArrowRight':
|
|
143
|
+
case 'ArrowDown':
|
|
144
|
+
case 'Escape':
|
|
145
|
+
case 'Return':
|
|
146
|
+
event.preventDefault();
|
|
147
|
+
return;
|
|
148
|
+
default:
|
|
149
|
+
setActiveDescendant(undefined);
|
|
150
|
+
break;
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
};
|
|
154
|
+
},
|
|
155
|
+
getItemProps: function getItemProps(item, index) {
|
|
156
|
+
var id = getElementId('item', item.__indexName, index);
|
|
157
|
+
return {
|
|
158
|
+
id: id,
|
|
159
|
+
role: 'row',
|
|
160
|
+
'aria-selected': id === activeDescendant,
|
|
161
|
+
onSelect: function onSelect() {
|
|
162
|
+
return submit(id);
|
|
163
|
+
}
|
|
164
|
+
};
|
|
165
|
+
},
|
|
166
|
+
getPanelProps: function getPanelProps() {
|
|
167
|
+
return {
|
|
168
|
+
hidden: !isOpen,
|
|
169
|
+
id: getElementId('panel'),
|
|
170
|
+
role: 'grid',
|
|
171
|
+
'aria-labelledby': getElementId('input')
|
|
172
|
+
};
|
|
173
|
+
},
|
|
174
|
+
getRootProps: function getRootProps() {
|
|
175
|
+
return {
|
|
176
|
+
ref: rootRef
|
|
177
|
+
};
|
|
178
|
+
}
|
|
179
|
+
};
|
|
180
|
+
};
|
|
181
|
+
}
|
|
182
|
+
function buildItems(_ref4) {
|
|
183
|
+
var indices = _ref4.indices,
|
|
184
|
+
indicesConfig = _ref4.indicesConfig,
|
|
185
|
+
getElementId = _ref4.getElementId;
|
|
186
|
+
var itemsIds = [];
|
|
187
|
+
var items = new Map();
|
|
188
|
+
for (var i = 0; i < indicesConfig.length; i++) {
|
|
189
|
+
var _indices$i;
|
|
190
|
+
var config = indicesConfig[i];
|
|
191
|
+
var hits = ((_indices$i = indices[i]) === null || _indices$i === void 0 ? void 0 : _indices$i.hits) || [];
|
|
192
|
+
for (var position = 0; position < hits.length; position++) {
|
|
193
|
+
var itemId = getElementId('item', config.indexName, position);
|
|
194
|
+
items.set(itemId, {
|
|
195
|
+
item: hits[position],
|
|
196
|
+
config: config
|
|
197
|
+
});
|
|
198
|
+
itemsIds.push(itemId);
|
|
199
|
+
}
|
|
200
|
+
}
|
|
201
|
+
return {
|
|
202
|
+
items: items,
|
|
203
|
+
itemsIds: itemsIds
|
|
204
|
+
};
|
|
205
|
+
}
|
|
206
|
+
function createGetElementId(autocompleteId) {
|
|
207
|
+
return function getElementId() {
|
|
208
|
+
var prefix = 'autocomplete';
|
|
209
|
+
for (var _len = arguments.length, suffixes = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
210
|
+
suffixes[_key] = arguments[_key];
|
|
211
|
+
}
|
|
212
|
+
return "".concat(prefix).concat(autocompleteId).concat(suffixes.join(':'));
|
|
213
|
+
};
|
|
214
|
+
}
|
|
215
|
+
|
|
216
|
+
/**
|
|
217
|
+
* Returns the framework-agnostic value of a ref.
|
|
218
|
+
*/
|
|
219
|
+
function unwrapRef(ref) {
|
|
220
|
+
return ref.current && (0, _typeof2.default)(ref.current) === 'object' && 'base' in ref.current ? ref.current.base // Preact
|
|
221
|
+
: ref.current; // React
|
|
222
|
+
}
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.AutocompleteClearIcon = AutocompleteClearIcon;
|
|
7
|
+
exports.AutocompleteLoadingIcon = AutocompleteLoadingIcon;
|
|
8
|
+
exports.AutocompleteSubmitIcon = AutocompleteSubmitIcon;
|
|
9
|
+
function AutocompleteSubmitIcon(_ref) {
|
|
10
|
+
var createElement = _ref.createElement;
|
|
11
|
+
return createElement("svg", {
|
|
12
|
+
className: "ais-AutocompleteSubmitIcon",
|
|
13
|
+
viewBox: "0 0 24 24",
|
|
14
|
+
width: "20",
|
|
15
|
+
height: "20",
|
|
16
|
+
fill: "currentColor"
|
|
17
|
+
}, createElement("path", {
|
|
18
|
+
d: "M16.041 15.856c-0.034 0.026-0.067 0.055-0.099 0.087s-0.060 0.064-0.087 0.099c-1.258 1.213-2.969 1.958-4.855 1.958-1.933 0-3.682-0.782-4.95-2.050s-2.050-3.017-2.050-4.95 0.782-3.682 2.050-4.95 3.017-2.050 4.95-2.050 3.682 0.782 4.95 2.050 2.050 3.017 2.050 4.95c0 1.886-0.745 3.597-1.959 4.856zM21.707 20.293l-3.675-3.675c1.231-1.54 1.968-3.493 1.968-5.618 0-2.485-1.008-4.736-2.636-6.364s-3.879-2.636-6.364-2.636-4.736 1.008-6.364 2.636-2.636 3.879-2.636 6.364 1.008 4.736 2.636 6.364 3.879 2.636 6.364 2.636c2.125 0 4.078-0.737 5.618-1.968l3.675 3.675c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414z"
|
|
19
|
+
}));
|
|
20
|
+
}
|
|
21
|
+
function AutocompleteLoadingIcon(_ref2) {
|
|
22
|
+
var createElement = _ref2.createElement;
|
|
23
|
+
return createElement("svg", {
|
|
24
|
+
className: "ais-AutocompleteLoadingIcon",
|
|
25
|
+
viewBox: "0 0 100 100",
|
|
26
|
+
width: "20",
|
|
27
|
+
height: "20"
|
|
28
|
+
}, createElement("circle", {
|
|
29
|
+
cx: "50",
|
|
30
|
+
cy: "50",
|
|
31
|
+
fill: "none",
|
|
32
|
+
r: "35",
|
|
33
|
+
stroke: "currentColor",
|
|
34
|
+
strokeDasharray: "164.93361431346415 56.97787143782138",
|
|
35
|
+
strokeWidth: "6"
|
|
36
|
+
}, createElement("animateTransform", {
|
|
37
|
+
attributeName: "transform",
|
|
38
|
+
type: "rotate",
|
|
39
|
+
repeatCount: "indefinite",
|
|
40
|
+
dur: "1s",
|
|
41
|
+
values: "0 50 50;90 50 50;180 50 50;360 50 50",
|
|
42
|
+
keyTimes: "0;0.40;0.65;1"
|
|
43
|
+
})));
|
|
44
|
+
}
|
|
45
|
+
function AutocompleteClearIcon(_ref3) {
|
|
46
|
+
var createElement = _ref3.createElement;
|
|
47
|
+
return createElement("svg", {
|
|
48
|
+
className: "ais-AutocompleteClearIcon",
|
|
49
|
+
viewBox: "0 0 24 24",
|
|
50
|
+
width: "18",
|
|
51
|
+
height: "18",
|
|
52
|
+
fill: "currentColor"
|
|
53
|
+
}, createElement("path", {
|
|
54
|
+
d: "M5.293 6.707l5.293 5.293-5.293 5.293c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0l5.293-5.293 5.293 5.293c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-5.293-5.293 5.293-5.293c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-5.293 5.293-5.293-5.293c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414z"
|
|
55
|
+
}));
|
|
56
|
+
}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
var _Autocomplete = require("./Autocomplete");
|
|
7
|
+
Object.keys(_Autocomplete).forEach(function (key) {
|
|
8
|
+
if (key === "default" || key === "__esModule") return;
|
|
9
|
+
if (key in exports && exports[key] === _Autocomplete[key]) return;
|
|
10
|
+
Object.defineProperty(exports, key, {
|
|
11
|
+
enumerable: true,
|
|
12
|
+
get: function get() {
|
|
13
|
+
return _Autocomplete[key];
|
|
14
|
+
}
|
|
15
|
+
});
|
|
16
|
+
});
|
|
17
|
+
var _AutocompleteIndex = require("./AutocompleteIndex");
|
|
18
|
+
Object.keys(_AutocompleteIndex).forEach(function (key) {
|
|
19
|
+
if (key === "default" || key === "__esModule") return;
|
|
20
|
+
if (key in exports && exports[key] === _AutocompleteIndex[key]) return;
|
|
21
|
+
Object.defineProperty(exports, key, {
|
|
22
|
+
enumerable: true,
|
|
23
|
+
get: function get() {
|
|
24
|
+
return _AutocompleteIndex[key];
|
|
25
|
+
}
|
|
26
|
+
});
|
|
27
|
+
});
|
|
28
|
+
var _AutocompletePanel = require("./AutocompletePanel");
|
|
29
|
+
Object.keys(_AutocompletePanel).forEach(function (key) {
|
|
30
|
+
if (key === "default" || key === "__esModule") return;
|
|
31
|
+
if (key in exports && exports[key] === _AutocompletePanel[key]) return;
|
|
32
|
+
Object.defineProperty(exports, key, {
|
|
33
|
+
enumerable: true,
|
|
34
|
+
get: function get() {
|
|
35
|
+
return _AutocompletePanel[key];
|
|
36
|
+
}
|
|
37
|
+
});
|
|
38
|
+
});
|
|
39
|
+
var _AutocompleteSearch = require("./AutocompleteSearch");
|
|
40
|
+
Object.keys(_AutocompleteSearch).forEach(function (key) {
|
|
41
|
+
if (key === "default" || key === "__esModule") return;
|
|
42
|
+
if (key in exports && exports[key] === _AutocompleteSearch[key]) return;
|
|
43
|
+
Object.defineProperty(exports, key, {
|
|
44
|
+
enumerable: true,
|
|
45
|
+
get: function get() {
|
|
46
|
+
return _AutocompleteSearch[key];
|
|
47
|
+
}
|
|
48
|
+
});
|
|
49
|
+
});
|
|
50
|
+
var _AutocompleteSuggestion = require("./AutocompleteSuggestion");
|
|
51
|
+
Object.keys(_AutocompleteSuggestion).forEach(function (key) {
|
|
52
|
+
if (key === "default" || key === "__esModule") return;
|
|
53
|
+
if (key in exports && exports[key] === _AutocompleteSuggestion[key]) return;
|
|
54
|
+
Object.defineProperty(exports, key, {
|
|
55
|
+
enumerable: true,
|
|
56
|
+
get: function get() {
|
|
57
|
+
return _AutocompleteSuggestion[key];
|
|
58
|
+
}
|
|
59
|
+
});
|
|
60
|
+
});
|
|
61
|
+
var _createAutocompletePropGetters = require("./createAutocompletePropGetters");
|
|
62
|
+
Object.keys(_createAutocompletePropGetters).forEach(function (key) {
|
|
63
|
+
if (key === "default" || key === "__esModule") return;
|
|
64
|
+
if (key in exports && exports[key] === _createAutocompletePropGetters[key]) return;
|
|
65
|
+
Object.defineProperty(exports, key, {
|
|
66
|
+
enumerable: true,
|
|
67
|
+
get: function get() {
|
|
68
|
+
return _createAutocompletePropGetters[key];
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
});
|