@heroui/autocomplete 2.3.11 → 2.3.12

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/index.js DELETED
@@ -1,458 +0,0 @@
1
- "use client";
2
- "use strict";
3
- var __defProp = Object.defineProperty;
4
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
5
- var __getOwnPropNames = Object.getOwnPropertyNames;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __export = (target, all) => {
8
- for (var name in all)
9
- __defProp(target, name, { get: all[name], enumerable: true });
10
- };
11
- var __copyProps = (to, from, except, desc) => {
12
- if (from && typeof from === "object" || typeof from === "function") {
13
- for (let key of __getOwnPropNames(from))
14
- if (!__hasOwnProp.call(to, key) && key !== except)
15
- __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
16
- }
17
- return to;
18
- };
19
- var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
20
-
21
- // src/index.ts
22
- var src_exports = {};
23
- __export(src_exports, {
24
- Autocomplete: () => autocomplete_default,
25
- AutocompleteItem: () => import_listbox2.ListboxItem,
26
- AutocompleteSection: () => import_listbox2.ListboxSection,
27
- useAutocomplete: () => useAutocomplete
28
- });
29
- module.exports = __toCommonJS(src_exports);
30
- var import_listbox2 = require("@heroui/listbox");
31
-
32
- // src/autocomplete.tsx
33
- var import_system2 = require("@heroui/system");
34
- var import_popover = require("@heroui/popover");
35
- var import_scroll_shadow = require("@heroui/scroll-shadow");
36
- var import_shared_icons = require("@heroui/shared-icons");
37
- var import_listbox = require("@heroui/listbox");
38
- var import_button = require("@heroui/button");
39
- var import_input = require("@heroui/input");
40
- var import_framer_motion = require("framer-motion");
41
-
42
- // src/use-autocomplete.ts
43
- var import_system = require("@heroui/system");
44
- var import_use_safe_layout_effect = require("@heroui/use-safe-layout-effect");
45
- var import_theme = require("@heroui/theme");
46
- var import_i18n = require("@react-aria/i18n");
47
- var import_combobox = require("@react-stately/combobox");
48
- var import_react_utils = require("@heroui/react-utils");
49
- var import_react = require("react");
50
- var import_shared_utils = require("@heroui/shared-utils");
51
- var import_utils = require("@react-aria/utils");
52
- var import_combobox2 = require("@react-aria/combobox");
53
- var import_form = require("@heroui/form");
54
- var import_aria_utils = require("@heroui/aria-utils");
55
- function useAutocomplete(originalProps) {
56
- var _a, _b, _c, _d, _e;
57
- const globalContext = (0, import_system.useProviderContext)();
58
- const { validationBehavior: formValidationBehavior } = (0, import_form.useSlottedContext)(import_form.FormContext) || {};
59
- const [props, variantProps] = (0, import_system.mapPropsVariants)(originalProps, import_theme.autocomplete.variantKeys);
60
- const disableAnimation = (_b = (_a = originalProps.disableAnimation) != null ? _a : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _b : false;
61
- const isClearable = originalProps.disableClearable !== void 0 ? !originalProps.disableClearable : originalProps.isReadOnly ? false : originalProps.isClearable;
62
- const {
63
- ref,
64
- as,
65
- label,
66
- isLoading,
67
- menuTrigger = "focus",
68
- filterOptions = {
69
- sensitivity: "base"
70
- },
71
- children,
72
- selectorIcon,
73
- clearIcon,
74
- scrollRef: scrollRefProp,
75
- defaultFilter,
76
- endContent,
77
- allowsEmptyCollection = true,
78
- shouldCloseOnBlur = true,
79
- popoverProps = {},
80
- inputProps: userInputProps = {},
81
- scrollShadowProps = {},
82
- listboxProps = {},
83
- selectorButtonProps = {},
84
- clearButtonProps = {},
85
- showScrollIndicators = true,
86
- allowsCustomValue = false,
87
- isVirtualized,
88
- maxListboxHeight = 256,
89
- itemHeight = 32,
90
- validationBehavior = (_c = formValidationBehavior != null ? formValidationBehavior : globalContext == null ? void 0 : globalContext.validationBehavior) != null ? _c : "native",
91
- className,
92
- classNames,
93
- errorMessage,
94
- onOpenChange,
95
- onClose,
96
- isReadOnly = false,
97
- ...otherProps
98
- } = props;
99
- const { contains } = (0, import_i18n.useFilter)(filterOptions);
100
- let state = (0, import_combobox.useComboBoxState)({
101
- ...originalProps,
102
- children,
103
- menuTrigger,
104
- validationBehavior,
105
- shouldCloseOnBlur,
106
- allowsEmptyCollection,
107
- defaultFilter: defaultFilter && typeof defaultFilter === "function" ? defaultFilter : contains,
108
- onOpenChange: (open, menuTrigger2) => {
109
- onOpenChange == null ? void 0 : onOpenChange(open, menuTrigger2);
110
- if (!open) {
111
- onClose == null ? void 0 : onClose();
112
- }
113
- }
114
- });
115
- state = {
116
- ...state,
117
- ...isReadOnly && {
118
- disabledKeys: /* @__PURE__ */ new Set([...state.collection.getKeys()])
119
- }
120
- };
121
- const buttonRef = (0, import_react.useRef)(null);
122
- const inputWrapperRef = (0, import_react.useRef)(null);
123
- const listBoxRef = (0, import_react.useRef)(null);
124
- const popoverRef = (0, import_react.useRef)(null);
125
- const inputRef = (0, import_react_utils.useDOMRef)(ref);
126
- const scrollShadowRef = (0, import_react_utils.useDOMRef)(scrollRefProp);
127
- const {
128
- buttonProps,
129
- inputProps,
130
- listBoxProps,
131
- isInvalid: isAriaInvalid,
132
- validationDetails,
133
- validationErrors
134
- } = (0, import_combobox2.useComboBox)(
135
- {
136
- validationBehavior,
137
- ...originalProps,
138
- inputRef,
139
- buttonRef,
140
- listBoxRef,
141
- popoverRef
142
- },
143
- state
144
- );
145
- const isInvalid = originalProps.isInvalid || isAriaInvalid;
146
- const slotsProps = {
147
- inputProps: (0, import_utils.mergeProps)(
148
- {
149
- label,
150
- ref: inputRef,
151
- wrapperRef: inputWrapperRef,
152
- onClick: () => {
153
- if (!state.isOpen && !!state.selectedItem) {
154
- state.open();
155
- }
156
- },
157
- isClearable: false,
158
- disableAnimation
159
- },
160
- userInputProps
161
- ),
162
- popoverProps: (0, import_utils.mergeProps)(
163
- {
164
- offset: 5,
165
- placement: "bottom",
166
- triggerScaleOnOpen: false,
167
- disableAnimation
168
- },
169
- popoverProps
170
- ),
171
- scrollShadowProps: (0, import_utils.mergeProps)(
172
- {
173
- ref: scrollShadowRef,
174
- isEnabled: (_d = showScrollIndicators && state.collection.size > 5) != null ? _d : true,
175
- hideScrollBar: true,
176
- offset: 15
177
- },
178
- scrollShadowProps
179
- ),
180
- listboxProps: (0, import_utils.mergeProps)(
181
- {
182
- hideEmptyContent: allowsCustomValue,
183
- emptyContent: "No results found.",
184
- disableAnimation
185
- },
186
- listboxProps
187
- ),
188
- selectorButtonProps: (0, import_utils.mergeProps)(
189
- {
190
- isLoading,
191
- size: "sm",
192
- variant: "light",
193
- radius: "full",
194
- color: isInvalid ? "danger" : originalProps == null ? void 0 : originalProps.color,
195
- isIconOnly: true,
196
- disableAnimation
197
- },
198
- selectorButtonProps
199
- ),
200
- clearButtonProps: (0, import_utils.mergeProps)(
201
- {
202
- size: "sm",
203
- variant: "light",
204
- radius: "full",
205
- color: isInvalid ? "danger" : originalProps == null ? void 0 : originalProps.color,
206
- isIconOnly: true,
207
- disableAnimation
208
- },
209
- clearButtonProps
210
- )
211
- };
212
- const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
213
- const isOpen = ((_e = slotsProps.listboxProps) == null ? void 0 : _e.hideEmptyContent) ? state.isOpen && !!state.collection.size : state.isOpen;
214
- (0, import_use_safe_layout_effect.useSafeLayoutEffect)(() => {
215
- if (!inputRef.current)
216
- return;
217
- const key = inputRef.current.value;
218
- const item = state.collection.getItem(key);
219
- if (item && state.inputValue !== item.textValue) {
220
- state.setSelectedKey(key);
221
- state.setInputValue(item.textValue);
222
- }
223
- }, [inputRef.current]);
224
- (0, import_react.useEffect)(() => {
225
- let key = state.collection.getFirstKey();
226
- while (key && state.disabledKeys.has(key)) {
227
- key = state.collection.getKeyAfter(key);
228
- }
229
- state.selectionManager.setFocusedKey(key);
230
- }, [state.collection, state.disabledKeys]);
231
- (0, import_react.useEffect)(() => {
232
- if (isOpen) {
233
- if (popoverRef.current && inputWrapperRef.current) {
234
- let rect = inputWrapperRef.current.getBoundingClientRect();
235
- let popover = popoverRef.current;
236
- popover.style.width = rect.width + "px";
237
- }
238
- }
239
- }, [isOpen]);
240
- if (inputProps.onKeyDown) {
241
- const originalOnKeyDown = inputProps.onKeyDown;
242
- inputProps.onKeyDown = (e) => {
243
- if ("continuePropagation" in e) {
244
- e.stopPropagation = () => {
245
- };
246
- }
247
- return originalOnKeyDown(e);
248
- };
249
- }
250
- const Component = as || "div";
251
- const slots = (0, import_react.useMemo)(
252
- () => (0, import_theme.autocomplete)({
253
- ...variantProps,
254
- isClearable,
255
- disableAnimation,
256
- className
257
- }),
258
- [(0, import_shared_utils.objectToDeps)(variantProps), isClearable, disableAnimation, className]
259
- );
260
- const getBaseProps = () => ({
261
- "data-invalid": (0, import_shared_utils.dataAttr)(isInvalid),
262
- "data-open": (0, import_shared_utils.dataAttr)(state.isOpen),
263
- className: slots.base({ class: baseStyles })
264
- });
265
- const getSelectorButtonProps = () => {
266
- var _a2;
267
- return {
268
- ref: buttonRef,
269
- ...(0, import_utils.mergeProps)(buttonProps, slotsProps.selectorButtonProps),
270
- "data-open": (0, import_shared_utils.dataAttr)(state.isOpen),
271
- className: slots.selectorButton({
272
- class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.selectorButton, (_a2 = slotsProps.selectorButtonProps) == null ? void 0 : _a2.className)
273
- })
274
- };
275
- };
276
- const getClearButtonProps = () => {
277
- var _a2, _b2;
278
- return {
279
- ...(0, import_utils.mergeProps)(buttonProps, slotsProps.clearButtonProps),
280
- onPressStart: () => {
281
- var _a3;
282
- (_a3 = inputRef.current) == null ? void 0 : _a3.focus();
283
- },
284
- onPress: (e) => {
285
- var _a3, _b3;
286
- (_b3 = (_a3 = slotsProps.clearButtonProps) == null ? void 0 : _a3.onPress) == null ? void 0 : _b3.call(_a3, e);
287
- if (state.selectedItem) {
288
- state.setSelectedKey(null);
289
- }
290
- state.setInputValue("");
291
- state.open();
292
- },
293
- "data-visible": !!state.selectedItem || ((_a2 = state.inputValue) == null ? void 0 : _a2.length) > 0,
294
- className: slots.clearButton({
295
- class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.clearButton, (_b2 = slotsProps.clearButtonProps) == null ? void 0 : _b2.className)
296
- })
297
- };
298
- };
299
- const hasUncommittedValidation = validationBehavior === "native" && state.displayValidation.isInvalid === false && state.realtimeValidation.isInvalid === true;
300
- const getInputProps = () => ({
301
- ...otherProps,
302
- ...inputProps,
303
- ...slotsProps.inputProps,
304
- isInvalid: hasUncommittedValidation ? void 0 : isInvalid,
305
- validationBehavior,
306
- errorMessage: typeof errorMessage === "function" ? errorMessage({ isInvalid, validationErrors, validationDetails }) : errorMessage || (validationErrors == null ? void 0 : validationErrors.join(" ")),
307
- onClick: (0, import_utils.chain)(slotsProps.inputProps.onClick, otherProps.onClick)
308
- });
309
- const getListBoxProps = () => {
310
- const shouldVirtualize = isVirtualized != null ? isVirtualized : state.collection.size > 50;
311
- return {
312
- state,
313
- ref: listBoxRef,
314
- isVirtualized: shouldVirtualize,
315
- virtualization: shouldVirtualize ? {
316
- maxListboxHeight,
317
- itemHeight
318
- } : void 0,
319
- scrollShadowProps: slotsProps.scrollShadowProps,
320
- ...(0, import_utils.mergeProps)(slotsProps.listboxProps, listBoxProps, {
321
- shouldHighlightOnFocus: true
322
- })
323
- };
324
- };
325
- const getPopoverProps = (props2 = {}) => {
326
- var _a2, _b2, _c2;
327
- const popoverProps2 = (0, import_utils.mergeProps)(slotsProps.popoverProps, props2);
328
- return {
329
- state,
330
- ref: popoverRef,
331
- triggerRef: inputWrapperRef,
332
- scrollRef: listBoxRef,
333
- triggerType: "listbox",
334
- ...popoverProps2,
335
- classNames: {
336
- ...(_a2 = slotsProps.popoverProps) == null ? void 0 : _a2.classNames,
337
- content: slots.popoverContent({
338
- class: (0, import_shared_utils.clsx)(
339
- classNames == null ? void 0 : classNames.popoverContent,
340
- (_c2 = (_b2 = slotsProps.popoverProps) == null ? void 0 : _b2.classNames) == null ? void 0 : _c2["content"],
341
- props2.className
342
- )
343
- })
344
- },
345
- shouldCloseOnInteractOutside: (popoverProps2 == null ? void 0 : popoverProps2.shouldCloseOnInteractOutside) ? popoverProps2.shouldCloseOnInteractOutside : (element) => (0, import_aria_utils.ariaShouldCloseOnInteractOutside)(element, inputWrapperRef, state),
346
- disableDialogFocus: true
347
- };
348
- };
349
- const getEmptyPopoverProps = () => {
350
- return {
351
- ref: popoverRef,
352
- className: "hidden"
353
- };
354
- };
355
- const getListBoxWrapperProps = (props2 = {}) => {
356
- var _a2, _b2;
357
- return {
358
- ...(0, import_utils.mergeProps)(slotsProps.scrollShadowProps, props2),
359
- className: slots.listboxWrapper({
360
- class: (0, import_shared_utils.clsx)(
361
- classNames == null ? void 0 : classNames.listboxWrapper,
362
- (_a2 = slotsProps.scrollShadowProps) == null ? void 0 : _a2.className,
363
- props2 == null ? void 0 : props2.className
364
- )
365
- }),
366
- style: {
367
- maxHeight: (_b2 = originalProps.maxListboxHeight) != null ? _b2 : 256
368
- }
369
- };
370
- };
371
- const getEndContentWrapperProps = (props2 = {}) => ({
372
- className: slots.endContentWrapper({
373
- class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.endContentWrapper, props2 == null ? void 0 : props2.className)
374
- }),
375
- onPointerDown: (0, import_utils.chain)(props2.onPointerDown, (e) => {
376
- var _a2;
377
- if (e.button === 0 && e.currentTarget === e.target) {
378
- (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
379
- }
380
- }),
381
- onMouseDown: (0, import_utils.chain)(props2.onMouseDown, (e) => {
382
- if (e.button === 0 && e.currentTarget === e.target) {
383
- e.preventDefault();
384
- }
385
- })
386
- });
387
- return {
388
- Component,
389
- inputRef,
390
- label,
391
- state,
392
- slots,
393
- classNames,
394
- isLoading,
395
- clearIcon,
396
- isOpen,
397
- endContent,
398
- isClearable,
399
- disableAnimation,
400
- allowsCustomValue,
401
- selectorIcon,
402
- getBaseProps,
403
- getInputProps,
404
- getListBoxProps,
405
- getPopoverProps,
406
- getEmptyPopoverProps,
407
- getClearButtonProps,
408
- getSelectorButtonProps,
409
- getListBoxWrapperProps,
410
- getEndContentWrapperProps
411
- };
412
- }
413
-
414
- // src/autocomplete.tsx
415
- var import_jsx_runtime = require("react/jsx-runtime");
416
- var Autocomplete = (0, import_system2.forwardRef)(function Autocomplete2(props, ref) {
417
- var _a;
418
- const {
419
- Component,
420
- isOpen,
421
- disableAnimation,
422
- selectorIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_shared_icons.ChevronDownIcon, {}),
423
- clearIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_shared_icons.CloseIcon, {}),
424
- endContent,
425
- getBaseProps,
426
- getSelectorButtonProps,
427
- getInputProps,
428
- getListBoxProps,
429
- getPopoverProps,
430
- getEmptyPopoverProps,
431
- getClearButtonProps,
432
- getListBoxWrapperProps,
433
- getEndContentWrapperProps
434
- } = useAutocomplete({ ...props, ref });
435
- const listboxProps = getListBoxProps();
436
- const popoverContent = isOpen ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_popover.FreeSoloPopover, { ...getPopoverProps(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_scroll_shadow.ScrollShadow, { ...getListBoxWrapperProps(), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_listbox.Listbox, { ...listboxProps }) }) }) : ((_a = listboxProps.state) == null ? void 0 : _a.collection.size) === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ...getEmptyPopoverProps() }) : null;
437
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Component, { ...getBaseProps(), children: [
438
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
439
- import_input.Input,
440
- {
441
- ...getInputProps(),
442
- endContent: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...getEndContentWrapperProps(), children: [
443
- endContent || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { ...getClearButtonProps(), children: clearIcon }),
444
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { ...getSelectorButtonProps(), children: selectorIcon })
445
- ] })
446
- }
447
- ),
448
- disableAnimation ? popoverContent : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: popoverContent })
449
- ] });
450
- });
451
- var autocomplete_default = Autocomplete;
452
- // Annotate the CommonJS export names for ESM import in node:
453
- 0 && (module.exports = {
454
- Autocomplete,
455
- AutocompleteItem,
456
- AutocompleteSection,
457
- useAutocomplete
458
- });
package/dist/index.mjs DELETED
@@ -1,16 +0,0 @@
1
- "use client";
2
- import {
3
- autocomplete_default
4
- } from "./chunk-SV7R5B4H.mjs";
5
- import {
6
- useAutocomplete
7
- } from "./chunk-QZCVHGAT.mjs";
8
-
9
- // src/index.ts
10
- import { ListboxItem, ListboxSection } from "@heroui/listbox";
11
- export {
12
- autocomplete_default as Autocomplete,
13
- ListboxItem as AutocompleteItem,
14
- ListboxSection as AutocompleteSection,
15
- useAutocomplete
16
- };