@heroui/autocomplete 2.3.23 → 2.3.24-beta.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.
@@ -34,7 +34,6 @@ var import_input = require("@heroui/input");
34
34
  var import_framer_motion = require("framer-motion");
35
35
 
36
36
  // src/use-autocomplete.ts
37
- var import_utils = require("@react-aria/utils");
38
37
  var import_shared_utils = require("@heroui/shared-utils");
39
38
  var import_react = require("react");
40
39
  var import_react_utils = require("@heroui/react-utils");
@@ -45,7 +44,6 @@ var import_use_safe_layout_effect = require("@heroui/use-safe-layout-effect");
45
44
  var import_system = require("@heroui/system");
46
45
  var import_combobox2 = require("@react-aria/combobox");
47
46
  var import_form = require("@heroui/form");
48
- var import_aria_utils = require("@heroui/aria-utils");
49
47
  function useAutocomplete(originalProps) {
50
48
  var _a, _b, _c, _d, _e;
51
49
  const globalContext = (0, import_system.useProviderContext)();
@@ -139,7 +137,7 @@ function useAutocomplete(originalProps) {
139
137
  );
140
138
  const isInvalid = originalProps.isInvalid || isAriaInvalid;
141
139
  const slotsProps = {
142
- inputProps: (0, import_utils.mergeProps)(
140
+ inputProps: (0, import_shared_utils.mergeProps)(
143
141
  {
144
142
  label,
145
143
  ref: inputRef,
@@ -154,7 +152,7 @@ function useAutocomplete(originalProps) {
154
152
  },
155
153
  userInputProps
156
154
  ),
157
- popoverProps: (0, import_utils.mergeProps)(
155
+ popoverProps: (0, import_shared_utils.mergeProps)(
158
156
  {
159
157
  offset: 5,
160
158
  placement: "bottom",
@@ -163,7 +161,7 @@ function useAutocomplete(originalProps) {
163
161
  },
164
162
  popoverProps
165
163
  ),
166
- scrollShadowProps: (0, import_utils.mergeProps)(
164
+ scrollShadowProps: (0, import_shared_utils.mergeProps)(
167
165
  {
168
166
  ref: scrollShadowRef,
169
167
  isEnabled: (_d = showScrollIndicators && state.collection.size > 5) != null ? _d : true,
@@ -172,7 +170,7 @@ function useAutocomplete(originalProps) {
172
170
  },
173
171
  scrollShadowProps
174
172
  ),
175
- listboxProps: (0, import_utils.mergeProps)(
173
+ listboxProps: (0, import_shared_utils.mergeProps)(
176
174
  {
177
175
  hideEmptyContent: allowsCustomValue,
178
176
  emptyContent: "No results found.",
@@ -180,7 +178,7 @@ function useAutocomplete(originalProps) {
180
178
  },
181
179
  listboxProps
182
180
  ),
183
- selectorButtonProps: (0, import_utils.mergeProps)(
181
+ selectorButtonProps: (0, import_shared_utils.mergeProps)(
184
182
  {
185
183
  isLoading,
186
184
  size: "sm",
@@ -192,7 +190,7 @@ function useAutocomplete(originalProps) {
192
190
  },
193
191
  selectorButtonProps
194
192
  ),
195
- clearButtonProps: (0, import_utils.mergeProps)(
193
+ clearButtonProps: (0, import_shared_utils.mergeProps)(
196
194
  {
197
195
  size: "sm",
198
196
  variant: "light",
@@ -277,7 +275,7 @@ function useAutocomplete(originalProps) {
277
275
  var _a2;
278
276
  return {
279
277
  ref: buttonRef,
280
- ...(0, import_utils.mergeProps)(buttonProps, slotsProps.selectorButtonProps),
278
+ ...(0, import_shared_utils.mergeProps)(buttonProps, slotsProps.selectorButtonProps),
281
279
  "data-open": (0, import_shared_utils.dataAttr)(state.isOpen),
282
280
  className: slots.selectorButton({
283
281
  class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.selectorButton, (_a2 = slotsProps.selectorButtonProps) == null ? void 0 : _a2.className)
@@ -287,7 +285,7 @@ function useAutocomplete(originalProps) {
287
285
  const getClearButtonProps = () => {
288
286
  var _a2, _b2;
289
287
  return {
290
- ...(0, import_utils.mergeProps)(buttonProps, slotsProps.clearButtonProps),
288
+ ...(0, import_shared_utils.mergeProps)(buttonProps, slotsProps.clearButtonProps),
291
289
  // disable original focus and state toggle from react aria
292
290
  onPressStart: () => {
293
291
  var _a3;
@@ -317,7 +315,7 @@ function useAutocomplete(originalProps) {
317
315
  isInvalid: hasUncommittedValidation ? void 0 : isInvalid,
318
316
  validationBehavior,
319
317
  errorMessage: typeof errorMessage === "function" ? errorMessage({ isInvalid, validationErrors, validationDetails }) : errorMessage || (validationErrors == null ? void 0 : validationErrors.join(" ")),
320
- onClick: (0, import_utils.chain)(slotsProps.inputProps.onClick, otherProps.onClick)
318
+ onClick: (0, import_shared_utils.chain)(slotsProps.inputProps.onClick, otherProps.onClick)
321
319
  });
322
320
  const getListBoxProps = () => {
323
321
  const shouldVirtualize = isVirtualized != null ? isVirtualized : state.collection.size > 50;
@@ -330,14 +328,14 @@ function useAutocomplete(originalProps) {
330
328
  itemHeight
331
329
  } : void 0,
332
330
  scrollShadowProps: slotsProps.scrollShadowProps,
333
- ...(0, import_utils.mergeProps)(slotsProps.listboxProps, listBoxProps, {
331
+ ...(0, import_shared_utils.mergeProps)(slotsProps.listboxProps, listBoxProps, {
334
332
  shouldHighlightOnFocus: true
335
333
  })
336
334
  };
337
335
  };
338
336
  const getPopoverProps = (props2 = {}) => {
339
337
  var _a2, _b2, _c2;
340
- const popoverProps2 = (0, import_utils.mergeProps)(slotsProps.popoverProps, props2);
338
+ const popoverProps2 = (0, import_shared_utils.mergeProps)(slotsProps.popoverProps, props2);
341
339
  return {
342
340
  state,
343
341
  ref: popoverRef,
@@ -355,7 +353,6 @@ function useAutocomplete(originalProps) {
355
353
  )
356
354
  })
357
355
  },
358
- shouldCloseOnInteractOutside: (popoverProps2 == null ? void 0 : popoverProps2.shouldCloseOnInteractOutside) ? popoverProps2.shouldCloseOnInteractOutside : (element) => (0, import_aria_utils.ariaShouldCloseOnInteractOutside)(element, inputWrapperRef, state),
359
356
  // when the popover is open, the focus should be on input instead of dialog
360
357
  // therefore, we skip dialog focus here
361
358
  disableDialogFocus: true
@@ -370,7 +367,7 @@ function useAutocomplete(originalProps) {
370
367
  const getListBoxWrapperProps = (props2 = {}) => {
371
368
  var _a2, _b2;
372
369
  return {
373
- ...(0, import_utils.mergeProps)(slotsProps.scrollShadowProps, props2),
370
+ ...(0, import_shared_utils.mergeProps)(slotsProps.scrollShadowProps, props2),
374
371
  className: slots.listboxWrapper({
375
372
  class: (0, import_shared_utils.clsx)(
376
373
  classNames == null ? void 0 : classNames.listboxWrapper,
@@ -387,13 +384,13 @@ function useAutocomplete(originalProps) {
387
384
  className: slots.endContentWrapper({
388
385
  class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.endContentWrapper, props2 == null ? void 0 : props2.className)
389
386
  }),
390
- onPointerDown: (0, import_utils.chain)(props2.onPointerDown, (e) => {
387
+ onPointerDown: (0, import_shared_utils.chain)(props2.onPointerDown, (e) => {
391
388
  var _a2;
392
389
  if (e.button === 0 && e.currentTarget === e.target) {
393
390
  (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
394
391
  }
395
392
  }),
396
- onMouseDown: (0, import_utils.chain)(props2.onMouseDown, (e) => {
393
+ onMouseDown: (0, import_shared_utils.chain)(props2.onMouseDown, (e) => {
397
394
  if (e.button === 0 && e.currentTarget === e.target) {
398
395
  e.preventDefault();
399
396
  }
@@ -1,8 +1,8 @@
1
1
  "use client";
2
2
  import {
3
3
  autocomplete_default
4
- } from "./chunk-FWJM6QZX.mjs";
5
- import "./chunk-ENG265Z6.mjs";
4
+ } from "./chunk-PRL2CTH4.mjs";
5
+ import "./chunk-JHANFQCV.mjs";
6
6
  export {
7
7
  autocomplete_default as default
8
8
  };
@@ -1,8 +1,7 @@
1
1
  "use client";
2
2
 
3
3
  // src/use-autocomplete.ts
4
- import { chain, mergeProps } from "@react-aria/utils";
5
- import { clsx, dataAttr, objectToDeps } from "@heroui/shared-utils";
4
+ import { clsx, dataAttr, objectToDeps, chain, mergeProps } from "@heroui/shared-utils";
6
5
  import { useEffect, useMemo, useRef } from "react";
7
6
  import { useDOMRef } from "@heroui/react-utils";
8
7
  import { useComboBoxState } from "@react-stately/combobox";
@@ -12,7 +11,6 @@ import { useSafeLayoutEffect } from "@heroui/use-safe-layout-effect";
12
11
  import { mapPropsVariants, useProviderContext } from "@heroui/system";
13
12
  import { useComboBox } from "@react-aria/combobox";
14
13
  import { FormContext, useSlottedContext } from "@heroui/form";
15
- import { ariaShouldCloseOnInteractOutside } from "@heroui/aria-utils";
16
14
  function useAutocomplete(originalProps) {
17
15
  var _a, _b, _c, _d, _e;
18
16
  const globalContext = useProviderContext();
@@ -322,7 +320,6 @@ function useAutocomplete(originalProps) {
322
320
  )
323
321
  })
324
322
  },
325
- shouldCloseOnInteractOutside: (popoverProps2 == null ? void 0 : popoverProps2.shouldCloseOnInteractOutside) ? popoverProps2.shouldCloseOnInteractOutside : (element) => ariaShouldCloseOnInteractOutside(element, inputWrapperRef, state),
326
323
  // when the popover is open, the focus should be on input instead of dialog
327
324
  // therefore, we skip dialog focus here
328
325
  disableDialogFocus: true
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  useAutocomplete
4
- } from "./chunk-ENG265Z6.mjs";
4
+ } from "./chunk-JHANFQCV.mjs";
5
5
 
6
6
  // src/autocomplete.tsx
7
7
  import { forwardRef } from "@heroui/system";
package/dist/index.js CHANGED
@@ -40,7 +40,6 @@ var import_input = require("@heroui/input");
40
40
  var import_framer_motion = require("framer-motion");
41
41
 
42
42
  // src/use-autocomplete.ts
43
- var import_utils = require("@react-aria/utils");
44
43
  var import_shared_utils = require("@heroui/shared-utils");
45
44
  var import_react = require("react");
46
45
  var import_react_utils = require("@heroui/react-utils");
@@ -51,7 +50,6 @@ var import_use_safe_layout_effect = require("@heroui/use-safe-layout-effect");
51
50
  var import_system = require("@heroui/system");
52
51
  var import_combobox2 = require("@react-aria/combobox");
53
52
  var import_form = require("@heroui/form");
54
- var import_aria_utils = require("@heroui/aria-utils");
55
53
  function useAutocomplete(originalProps) {
56
54
  var _a, _b, _c, _d, _e;
57
55
  const globalContext = (0, import_system.useProviderContext)();
@@ -145,7 +143,7 @@ function useAutocomplete(originalProps) {
145
143
  );
146
144
  const isInvalid = originalProps.isInvalid || isAriaInvalid;
147
145
  const slotsProps = {
148
- inputProps: (0, import_utils.mergeProps)(
146
+ inputProps: (0, import_shared_utils.mergeProps)(
149
147
  {
150
148
  label,
151
149
  ref: inputRef,
@@ -160,7 +158,7 @@ function useAutocomplete(originalProps) {
160
158
  },
161
159
  userInputProps
162
160
  ),
163
- popoverProps: (0, import_utils.mergeProps)(
161
+ popoverProps: (0, import_shared_utils.mergeProps)(
164
162
  {
165
163
  offset: 5,
166
164
  placement: "bottom",
@@ -169,7 +167,7 @@ function useAutocomplete(originalProps) {
169
167
  },
170
168
  popoverProps
171
169
  ),
172
- scrollShadowProps: (0, import_utils.mergeProps)(
170
+ scrollShadowProps: (0, import_shared_utils.mergeProps)(
173
171
  {
174
172
  ref: scrollShadowRef,
175
173
  isEnabled: (_d = showScrollIndicators && state.collection.size > 5) != null ? _d : true,
@@ -178,7 +176,7 @@ function useAutocomplete(originalProps) {
178
176
  },
179
177
  scrollShadowProps
180
178
  ),
181
- listboxProps: (0, import_utils.mergeProps)(
179
+ listboxProps: (0, import_shared_utils.mergeProps)(
182
180
  {
183
181
  hideEmptyContent: allowsCustomValue,
184
182
  emptyContent: "No results found.",
@@ -186,7 +184,7 @@ function useAutocomplete(originalProps) {
186
184
  },
187
185
  listboxProps
188
186
  ),
189
- selectorButtonProps: (0, import_utils.mergeProps)(
187
+ selectorButtonProps: (0, import_shared_utils.mergeProps)(
190
188
  {
191
189
  isLoading,
192
190
  size: "sm",
@@ -198,7 +196,7 @@ function useAutocomplete(originalProps) {
198
196
  },
199
197
  selectorButtonProps
200
198
  ),
201
- clearButtonProps: (0, import_utils.mergeProps)(
199
+ clearButtonProps: (0, import_shared_utils.mergeProps)(
202
200
  {
203
201
  size: "sm",
204
202
  variant: "light",
@@ -283,7 +281,7 @@ function useAutocomplete(originalProps) {
283
281
  var _a2;
284
282
  return {
285
283
  ref: buttonRef,
286
- ...(0, import_utils.mergeProps)(buttonProps, slotsProps.selectorButtonProps),
284
+ ...(0, import_shared_utils.mergeProps)(buttonProps, slotsProps.selectorButtonProps),
287
285
  "data-open": (0, import_shared_utils.dataAttr)(state.isOpen),
288
286
  className: slots.selectorButton({
289
287
  class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.selectorButton, (_a2 = slotsProps.selectorButtonProps) == null ? void 0 : _a2.className)
@@ -293,7 +291,7 @@ function useAutocomplete(originalProps) {
293
291
  const getClearButtonProps = () => {
294
292
  var _a2, _b2;
295
293
  return {
296
- ...(0, import_utils.mergeProps)(buttonProps, slotsProps.clearButtonProps),
294
+ ...(0, import_shared_utils.mergeProps)(buttonProps, slotsProps.clearButtonProps),
297
295
  // disable original focus and state toggle from react aria
298
296
  onPressStart: () => {
299
297
  var _a3;
@@ -323,7 +321,7 @@ function useAutocomplete(originalProps) {
323
321
  isInvalid: hasUncommittedValidation ? void 0 : isInvalid,
324
322
  validationBehavior,
325
323
  errorMessage: typeof errorMessage === "function" ? errorMessage({ isInvalid, validationErrors, validationDetails }) : errorMessage || (validationErrors == null ? void 0 : validationErrors.join(" ")),
326
- onClick: (0, import_utils.chain)(slotsProps.inputProps.onClick, otherProps.onClick)
324
+ onClick: (0, import_shared_utils.chain)(slotsProps.inputProps.onClick, otherProps.onClick)
327
325
  });
328
326
  const getListBoxProps = () => {
329
327
  const shouldVirtualize = isVirtualized != null ? isVirtualized : state.collection.size > 50;
@@ -336,14 +334,14 @@ function useAutocomplete(originalProps) {
336
334
  itemHeight
337
335
  } : void 0,
338
336
  scrollShadowProps: slotsProps.scrollShadowProps,
339
- ...(0, import_utils.mergeProps)(slotsProps.listboxProps, listBoxProps, {
337
+ ...(0, import_shared_utils.mergeProps)(slotsProps.listboxProps, listBoxProps, {
340
338
  shouldHighlightOnFocus: true
341
339
  })
342
340
  };
343
341
  };
344
342
  const getPopoverProps = (props2 = {}) => {
345
343
  var _a2, _b2, _c2;
346
- const popoverProps2 = (0, import_utils.mergeProps)(slotsProps.popoverProps, props2);
344
+ const popoverProps2 = (0, import_shared_utils.mergeProps)(slotsProps.popoverProps, props2);
347
345
  return {
348
346
  state,
349
347
  ref: popoverRef,
@@ -361,7 +359,6 @@ function useAutocomplete(originalProps) {
361
359
  )
362
360
  })
363
361
  },
364
- shouldCloseOnInteractOutside: (popoverProps2 == null ? void 0 : popoverProps2.shouldCloseOnInteractOutside) ? popoverProps2.shouldCloseOnInteractOutside : (element) => (0, import_aria_utils.ariaShouldCloseOnInteractOutside)(element, inputWrapperRef, state),
365
362
  // when the popover is open, the focus should be on input instead of dialog
366
363
  // therefore, we skip dialog focus here
367
364
  disableDialogFocus: true
@@ -376,7 +373,7 @@ function useAutocomplete(originalProps) {
376
373
  const getListBoxWrapperProps = (props2 = {}) => {
377
374
  var _a2, _b2;
378
375
  return {
379
- ...(0, import_utils.mergeProps)(slotsProps.scrollShadowProps, props2),
376
+ ...(0, import_shared_utils.mergeProps)(slotsProps.scrollShadowProps, props2),
380
377
  className: slots.listboxWrapper({
381
378
  class: (0, import_shared_utils.clsx)(
382
379
  classNames == null ? void 0 : classNames.listboxWrapper,
@@ -393,13 +390,13 @@ function useAutocomplete(originalProps) {
393
390
  className: slots.endContentWrapper({
394
391
  class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.endContentWrapper, props2 == null ? void 0 : props2.className)
395
392
  }),
396
- onPointerDown: (0, import_utils.chain)(props2.onPointerDown, (e) => {
393
+ onPointerDown: (0, import_shared_utils.chain)(props2.onPointerDown, (e) => {
397
394
  var _a2;
398
395
  if (e.button === 0 && e.currentTarget === e.target) {
399
396
  (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
400
397
  }
401
398
  }),
402
- onMouseDown: (0, import_utils.chain)(props2.onMouseDown, (e) => {
399
+ onMouseDown: (0, import_shared_utils.chain)(props2.onMouseDown, (e) => {
403
400
  if (e.button === 0 && e.currentTarget === e.target) {
404
401
  e.preventDefault();
405
402
  }
package/dist/index.mjs CHANGED
@@ -1,10 +1,10 @@
1
1
  "use client";
2
2
  import {
3
3
  autocomplete_default
4
- } from "./chunk-FWJM6QZX.mjs";
4
+ } from "./chunk-PRL2CTH4.mjs";
5
5
  import {
6
6
  useAutocomplete
7
- } from "./chunk-ENG265Z6.mjs";
7
+ } from "./chunk-JHANFQCV.mjs";
8
8
 
9
9
  // src/index.ts
10
10
  import { ListboxItem, ListboxSection } from "@heroui/listbox";
@@ -4,8 +4,8 @@ import { FilterFn } from '@react-stately/combobox';
4
4
  import * as react from 'react';
5
5
  import { ReactNode } from 'react';
6
6
  import * as _heroui_system from '@heroui/system';
7
- import { PropGetter, DOMAttributes, HTMLHeroUIProps } from '@heroui/system';
8
- import { AutocompleteVariantProps, SlotsToClasses, AutocompleteSlots } from '@heroui/theme';
7
+ import { HTMLHeroUIProps, PropGetter, DOMAttributes } from '@heroui/system';
8
+ import { SlotsToClasses, AutocompleteSlots, AutocompleteVariantProps } from '@heroui/theme';
9
9
  import { ReactRef } from '@heroui/react-utils';
10
10
  import { ComboBoxProps } from '@react-types/combobox';
11
11
  import { PopoverProps } from '@heroui/popover';
@@ -137,77 +137,77 @@ declare function useAutocomplete<T extends object>(originalProps: UseAutocomplet
137
137
  slots: {
138
138
  base: (slotProps?: ({
139
139
  isClearable?: boolean | undefined;
140
- disableAnimation?: boolean | undefined;
141
140
  disableSelectorIconRotation?: boolean | undefined;
141
+ disableAnimation?: boolean | undefined;
142
142
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
143
143
  listboxWrapper: (slotProps?: ({
144
144
  isClearable?: boolean | undefined;
145
- disableAnimation?: boolean | undefined;
146
145
  disableSelectorIconRotation?: boolean | undefined;
146
+ disableAnimation?: boolean | undefined;
147
147
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
148
148
  listbox: (slotProps?: ({
149
149
  isClearable?: boolean | undefined;
150
- disableAnimation?: boolean | undefined;
151
150
  disableSelectorIconRotation?: boolean | undefined;
151
+ disableAnimation?: boolean | undefined;
152
152
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
153
153
  popoverContent: (slotProps?: ({
154
154
  isClearable?: boolean | undefined;
155
- disableAnimation?: boolean | undefined;
156
155
  disableSelectorIconRotation?: boolean | undefined;
156
+ disableAnimation?: boolean | undefined;
157
157
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
158
158
  endContentWrapper: (slotProps?: ({
159
159
  isClearable?: boolean | undefined;
160
- disableAnimation?: boolean | undefined;
161
160
  disableSelectorIconRotation?: boolean | undefined;
161
+ disableAnimation?: boolean | undefined;
162
162
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
163
163
  clearButton: (slotProps?: ({
164
164
  isClearable?: boolean | undefined;
165
- disableAnimation?: boolean | undefined;
166
165
  disableSelectorIconRotation?: boolean | undefined;
166
+ disableAnimation?: boolean | undefined;
167
167
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
168
168
  selectorButton: (slotProps?: ({
169
169
  isClearable?: boolean | undefined;
170
- disableAnimation?: boolean | undefined;
171
170
  disableSelectorIconRotation?: boolean | undefined;
171
+ disableAnimation?: boolean | undefined;
172
172
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
173
173
  } & {
174
174
  base: (slotProps?: ({
175
175
  isClearable?: boolean | undefined;
176
- disableAnimation?: boolean | undefined;
177
176
  disableSelectorIconRotation?: boolean | undefined;
177
+ disableAnimation?: boolean | undefined;
178
178
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
179
179
  listboxWrapper: (slotProps?: ({
180
180
  isClearable?: boolean | undefined;
181
- disableAnimation?: boolean | undefined;
182
181
  disableSelectorIconRotation?: boolean | undefined;
182
+ disableAnimation?: boolean | undefined;
183
183
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
184
184
  listbox: (slotProps?: ({
185
185
  isClearable?: boolean | undefined;
186
- disableAnimation?: boolean | undefined;
187
186
  disableSelectorIconRotation?: boolean | undefined;
187
+ disableAnimation?: boolean | undefined;
188
188
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
189
189
  popoverContent: (slotProps?: ({
190
190
  isClearable?: boolean | undefined;
191
- disableAnimation?: boolean | undefined;
192
191
  disableSelectorIconRotation?: boolean | undefined;
192
+ disableAnimation?: boolean | undefined;
193
193
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
194
194
  endContentWrapper: (slotProps?: ({
195
195
  isClearable?: boolean | undefined;
196
- disableAnimation?: boolean | undefined;
197
196
  disableSelectorIconRotation?: boolean | undefined;
197
+ disableAnimation?: boolean | undefined;
198
198
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
199
199
  clearButton: (slotProps?: ({
200
200
  isClearable?: boolean | undefined;
201
- disableAnimation?: boolean | undefined;
202
201
  disableSelectorIconRotation?: boolean | undefined;
202
+ disableAnimation?: boolean | undefined;
203
203
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
204
204
  selectorButton: (slotProps?: ({
205
205
  isClearable?: boolean | undefined;
206
- disableAnimation?: boolean | undefined;
207
206
  disableSelectorIconRotation?: boolean | undefined;
207
+ disableAnimation?: boolean | undefined;
208
208
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
209
209
  } & {};
210
- classNames: SlotsToClasses<"base" | "clearButton" | "listbox" | "listboxWrapper" | "popoverContent" | "endContentWrapper" | "selectorButton"> | undefined;
210
+ classNames: SlotsToClasses<"base" | "listboxWrapper" | "listbox" | "popoverContent" | "endContentWrapper" | "selectorButton" | "clearButton"> | undefined;
211
211
  isLoading: boolean | undefined;
212
212
  clearIcon: ReactNode;
213
213
  isOpen: boolean;
@@ -4,8 +4,8 @@ import { FilterFn } from '@react-stately/combobox';
4
4
  import * as react from 'react';
5
5
  import { ReactNode } from 'react';
6
6
  import * as _heroui_system from '@heroui/system';
7
- import { PropGetter, DOMAttributes, HTMLHeroUIProps } from '@heroui/system';
8
- import { AutocompleteVariantProps, SlotsToClasses, AutocompleteSlots } from '@heroui/theme';
7
+ import { HTMLHeroUIProps, PropGetter, DOMAttributes } from '@heroui/system';
8
+ import { SlotsToClasses, AutocompleteSlots, AutocompleteVariantProps } from '@heroui/theme';
9
9
  import { ReactRef } from '@heroui/react-utils';
10
10
  import { ComboBoxProps } from '@react-types/combobox';
11
11
  import { PopoverProps } from '@heroui/popover';
@@ -137,77 +137,77 @@ declare function useAutocomplete<T extends object>(originalProps: UseAutocomplet
137
137
  slots: {
138
138
  base: (slotProps?: ({
139
139
  isClearable?: boolean | undefined;
140
- disableAnimation?: boolean | undefined;
141
140
  disableSelectorIconRotation?: boolean | undefined;
141
+ disableAnimation?: boolean | undefined;
142
142
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
143
143
  listboxWrapper: (slotProps?: ({
144
144
  isClearable?: boolean | undefined;
145
- disableAnimation?: boolean | undefined;
146
145
  disableSelectorIconRotation?: boolean | undefined;
146
+ disableAnimation?: boolean | undefined;
147
147
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
148
148
  listbox: (slotProps?: ({
149
149
  isClearable?: boolean | undefined;
150
- disableAnimation?: boolean | undefined;
151
150
  disableSelectorIconRotation?: boolean | undefined;
151
+ disableAnimation?: boolean | undefined;
152
152
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
153
153
  popoverContent: (slotProps?: ({
154
154
  isClearable?: boolean | undefined;
155
- disableAnimation?: boolean | undefined;
156
155
  disableSelectorIconRotation?: boolean | undefined;
156
+ disableAnimation?: boolean | undefined;
157
157
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
158
158
  endContentWrapper: (slotProps?: ({
159
159
  isClearable?: boolean | undefined;
160
- disableAnimation?: boolean | undefined;
161
160
  disableSelectorIconRotation?: boolean | undefined;
161
+ disableAnimation?: boolean | undefined;
162
162
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
163
163
  clearButton: (slotProps?: ({
164
164
  isClearable?: boolean | undefined;
165
- disableAnimation?: boolean | undefined;
166
165
  disableSelectorIconRotation?: boolean | undefined;
166
+ disableAnimation?: boolean | undefined;
167
167
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
168
168
  selectorButton: (slotProps?: ({
169
169
  isClearable?: boolean | undefined;
170
- disableAnimation?: boolean | undefined;
171
170
  disableSelectorIconRotation?: boolean | undefined;
171
+ disableAnimation?: boolean | undefined;
172
172
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
173
173
  } & {
174
174
  base: (slotProps?: ({
175
175
  isClearable?: boolean | undefined;
176
- disableAnimation?: boolean | undefined;
177
176
  disableSelectorIconRotation?: boolean | undefined;
177
+ disableAnimation?: boolean | undefined;
178
178
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
179
179
  listboxWrapper: (slotProps?: ({
180
180
  isClearable?: boolean | undefined;
181
- disableAnimation?: boolean | undefined;
182
181
  disableSelectorIconRotation?: boolean | undefined;
182
+ disableAnimation?: boolean | undefined;
183
183
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
184
184
  listbox: (slotProps?: ({
185
185
  isClearable?: boolean | undefined;
186
- disableAnimation?: boolean | undefined;
187
186
  disableSelectorIconRotation?: boolean | undefined;
187
+ disableAnimation?: boolean | undefined;
188
188
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
189
189
  popoverContent: (slotProps?: ({
190
190
  isClearable?: boolean | undefined;
191
- disableAnimation?: boolean | undefined;
192
191
  disableSelectorIconRotation?: boolean | undefined;
192
+ disableAnimation?: boolean | undefined;
193
193
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
194
194
  endContentWrapper: (slotProps?: ({
195
195
  isClearable?: boolean | undefined;
196
- disableAnimation?: boolean | undefined;
197
196
  disableSelectorIconRotation?: boolean | undefined;
197
+ disableAnimation?: boolean | undefined;
198
198
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
199
199
  clearButton: (slotProps?: ({
200
200
  isClearable?: boolean | undefined;
201
- disableAnimation?: boolean | undefined;
202
201
  disableSelectorIconRotation?: boolean | undefined;
202
+ disableAnimation?: boolean | undefined;
203
203
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
204
204
  selectorButton: (slotProps?: ({
205
205
  isClearable?: boolean | undefined;
206
- disableAnimation?: boolean | undefined;
207
206
  disableSelectorIconRotation?: boolean | undefined;
207
+ disableAnimation?: boolean | undefined;
208
208
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
209
209
  } & {};
210
- classNames: SlotsToClasses<"base" | "clearButton" | "listbox" | "listboxWrapper" | "popoverContent" | "endContentWrapper" | "selectorButton"> | undefined;
210
+ classNames: SlotsToClasses<"base" | "listboxWrapper" | "listbox" | "popoverContent" | "endContentWrapper" | "selectorButton" | "clearButton"> | undefined;
211
211
  isLoading: boolean | undefined;
212
212
  clearIcon: ReactNode;
213
213
  isOpen: boolean;
@@ -24,7 +24,6 @@ __export(use_autocomplete_exports, {
24
24
  useAutocomplete: () => useAutocomplete
25
25
  });
26
26
  module.exports = __toCommonJS(use_autocomplete_exports);
27
- var import_utils = require("@react-aria/utils");
28
27
  var import_shared_utils = require("@heroui/shared-utils");
29
28
  var import_react = require("react");
30
29
  var import_react_utils = require("@heroui/react-utils");
@@ -35,7 +34,6 @@ var import_use_safe_layout_effect = require("@heroui/use-safe-layout-effect");
35
34
  var import_system = require("@heroui/system");
36
35
  var import_combobox2 = require("@react-aria/combobox");
37
36
  var import_form = require("@heroui/form");
38
- var import_aria_utils = require("@heroui/aria-utils");
39
37
  function useAutocomplete(originalProps) {
40
38
  var _a, _b, _c, _d, _e;
41
39
  const globalContext = (0, import_system.useProviderContext)();
@@ -129,7 +127,7 @@ function useAutocomplete(originalProps) {
129
127
  );
130
128
  const isInvalid = originalProps.isInvalid || isAriaInvalid;
131
129
  const slotsProps = {
132
- inputProps: (0, import_utils.mergeProps)(
130
+ inputProps: (0, import_shared_utils.mergeProps)(
133
131
  {
134
132
  label,
135
133
  ref: inputRef,
@@ -144,7 +142,7 @@ function useAutocomplete(originalProps) {
144
142
  },
145
143
  userInputProps
146
144
  ),
147
- popoverProps: (0, import_utils.mergeProps)(
145
+ popoverProps: (0, import_shared_utils.mergeProps)(
148
146
  {
149
147
  offset: 5,
150
148
  placement: "bottom",
@@ -153,7 +151,7 @@ function useAutocomplete(originalProps) {
153
151
  },
154
152
  popoverProps
155
153
  ),
156
- scrollShadowProps: (0, import_utils.mergeProps)(
154
+ scrollShadowProps: (0, import_shared_utils.mergeProps)(
157
155
  {
158
156
  ref: scrollShadowRef,
159
157
  isEnabled: (_d = showScrollIndicators && state.collection.size > 5) != null ? _d : true,
@@ -162,7 +160,7 @@ function useAutocomplete(originalProps) {
162
160
  },
163
161
  scrollShadowProps
164
162
  ),
165
- listboxProps: (0, import_utils.mergeProps)(
163
+ listboxProps: (0, import_shared_utils.mergeProps)(
166
164
  {
167
165
  hideEmptyContent: allowsCustomValue,
168
166
  emptyContent: "No results found.",
@@ -170,7 +168,7 @@ function useAutocomplete(originalProps) {
170
168
  },
171
169
  listboxProps
172
170
  ),
173
- selectorButtonProps: (0, import_utils.mergeProps)(
171
+ selectorButtonProps: (0, import_shared_utils.mergeProps)(
174
172
  {
175
173
  isLoading,
176
174
  size: "sm",
@@ -182,7 +180,7 @@ function useAutocomplete(originalProps) {
182
180
  },
183
181
  selectorButtonProps
184
182
  ),
185
- clearButtonProps: (0, import_utils.mergeProps)(
183
+ clearButtonProps: (0, import_shared_utils.mergeProps)(
186
184
  {
187
185
  size: "sm",
188
186
  variant: "light",
@@ -267,7 +265,7 @@ function useAutocomplete(originalProps) {
267
265
  var _a2;
268
266
  return {
269
267
  ref: buttonRef,
270
- ...(0, import_utils.mergeProps)(buttonProps, slotsProps.selectorButtonProps),
268
+ ...(0, import_shared_utils.mergeProps)(buttonProps, slotsProps.selectorButtonProps),
271
269
  "data-open": (0, import_shared_utils.dataAttr)(state.isOpen),
272
270
  className: slots.selectorButton({
273
271
  class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.selectorButton, (_a2 = slotsProps.selectorButtonProps) == null ? void 0 : _a2.className)
@@ -277,7 +275,7 @@ function useAutocomplete(originalProps) {
277
275
  const getClearButtonProps = () => {
278
276
  var _a2, _b2;
279
277
  return {
280
- ...(0, import_utils.mergeProps)(buttonProps, slotsProps.clearButtonProps),
278
+ ...(0, import_shared_utils.mergeProps)(buttonProps, slotsProps.clearButtonProps),
281
279
  // disable original focus and state toggle from react aria
282
280
  onPressStart: () => {
283
281
  var _a3;
@@ -307,7 +305,7 @@ function useAutocomplete(originalProps) {
307
305
  isInvalid: hasUncommittedValidation ? void 0 : isInvalid,
308
306
  validationBehavior,
309
307
  errorMessage: typeof errorMessage === "function" ? errorMessage({ isInvalid, validationErrors, validationDetails }) : errorMessage || (validationErrors == null ? void 0 : validationErrors.join(" ")),
310
- onClick: (0, import_utils.chain)(slotsProps.inputProps.onClick, otherProps.onClick)
308
+ onClick: (0, import_shared_utils.chain)(slotsProps.inputProps.onClick, otherProps.onClick)
311
309
  });
312
310
  const getListBoxProps = () => {
313
311
  const shouldVirtualize = isVirtualized != null ? isVirtualized : state.collection.size > 50;
@@ -320,14 +318,14 @@ function useAutocomplete(originalProps) {
320
318
  itemHeight
321
319
  } : void 0,
322
320
  scrollShadowProps: slotsProps.scrollShadowProps,
323
- ...(0, import_utils.mergeProps)(slotsProps.listboxProps, listBoxProps, {
321
+ ...(0, import_shared_utils.mergeProps)(slotsProps.listboxProps, listBoxProps, {
324
322
  shouldHighlightOnFocus: true
325
323
  })
326
324
  };
327
325
  };
328
326
  const getPopoverProps = (props2 = {}) => {
329
327
  var _a2, _b2, _c2;
330
- const popoverProps2 = (0, import_utils.mergeProps)(slotsProps.popoverProps, props2);
328
+ const popoverProps2 = (0, import_shared_utils.mergeProps)(slotsProps.popoverProps, props2);
331
329
  return {
332
330
  state,
333
331
  ref: popoverRef,
@@ -345,7 +343,6 @@ function useAutocomplete(originalProps) {
345
343
  )
346
344
  })
347
345
  },
348
- shouldCloseOnInteractOutside: (popoverProps2 == null ? void 0 : popoverProps2.shouldCloseOnInteractOutside) ? popoverProps2.shouldCloseOnInteractOutside : (element) => (0, import_aria_utils.ariaShouldCloseOnInteractOutside)(element, inputWrapperRef, state),
349
346
  // when the popover is open, the focus should be on input instead of dialog
350
347
  // therefore, we skip dialog focus here
351
348
  disableDialogFocus: true
@@ -360,7 +357,7 @@ function useAutocomplete(originalProps) {
360
357
  const getListBoxWrapperProps = (props2 = {}) => {
361
358
  var _a2, _b2;
362
359
  return {
363
- ...(0, import_utils.mergeProps)(slotsProps.scrollShadowProps, props2),
360
+ ...(0, import_shared_utils.mergeProps)(slotsProps.scrollShadowProps, props2),
364
361
  className: slots.listboxWrapper({
365
362
  class: (0, import_shared_utils.clsx)(
366
363
  classNames == null ? void 0 : classNames.listboxWrapper,
@@ -377,13 +374,13 @@ function useAutocomplete(originalProps) {
377
374
  className: slots.endContentWrapper({
378
375
  class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.endContentWrapper, props2 == null ? void 0 : props2.className)
379
376
  }),
380
- onPointerDown: (0, import_utils.chain)(props2.onPointerDown, (e) => {
377
+ onPointerDown: (0, import_shared_utils.chain)(props2.onPointerDown, (e) => {
381
378
  var _a2;
382
379
  if (e.button === 0 && e.currentTarget === e.target) {
383
380
  (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
384
381
  }
385
382
  }),
386
- onMouseDown: (0, import_utils.chain)(props2.onMouseDown, (e) => {
383
+ onMouseDown: (0, import_shared_utils.chain)(props2.onMouseDown, (e) => {
387
384
  if (e.button === 0 && e.currentTarget === e.target) {
388
385
  e.preventDefault();
389
386
  }
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  useAutocomplete
4
- } from "./chunk-ENG265Z6.mjs";
4
+ } from "./chunk-JHANFQCV.mjs";
5
5
  export {
6
6
  useAutocomplete
7
7
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@heroui/autocomplete",
3
- "version": "2.3.23",
3
+ "version": "2.3.24-beta.0",
4
4
  "description": "An autocomplete combines a text input with a listbox, allowing users to filter a list of options to items matching a query.",
5
5
  "keywords": [
6
6
  "autocomplete"
@@ -25,8 +25,8 @@
25
25
  "url": "https://github.com/heroui-inc/heroui/issues"
26
26
  },
27
27
  "peerDependencies": {
28
- "@heroui/system": ">=2.4.17",
29
- "@heroui/theme": ">=2.4.6",
28
+ "@heroui/system": ">=2.4.19-beta.0",
29
+ "@heroui/theme": ">=2.4.18-beta.0",
30
30
  "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
31
31
  "react": ">=18 || >=19.0.0-rc.0",
32
32
  "react-dom": ">=18 || >=19.0.0-rc.0"
@@ -34,21 +34,20 @@
34
34
  "dependencies": {
35
35
  "@react-aria/combobox": "3.12.5",
36
36
  "@react-aria/i18n": "3.12.10",
37
- "@react-aria/utils": "3.29.1",
38
37
  "@react-stately/combobox": "3.10.6",
39
38
  "@react-types/combobox": "3.13.6",
40
39
  "@react-types/shared": "3.30.0",
41
- "@heroui/form": "2.1.21",
42
- "@heroui/aria-utils": "2.2.19",
43
- "@heroui/button": "2.2.22",
44
- "@heroui/input": "2.4.22",
45
- "@heroui/listbox": "2.3.21",
46
- "@heroui/popover": "2.3.22",
47
- "@heroui/react-utils": "2.1.11",
48
- "@heroui/scroll-shadow": "2.3.15",
49
- "@heroui/shared-icons": "2.1.9",
50
- "@heroui/shared-utils": "2.1.9",
51
- "@heroui/use-safe-layout-effect": "2.1.7"
40
+ "@heroui/form": "2.1.22-beta.0",
41
+ "@heroui/aria-utils": "2.2.20-beta.0",
42
+ "@heroui/button": "2.2.23-beta.0",
43
+ "@heroui/input": "2.4.23-beta.0",
44
+ "@heroui/listbox": "2.3.22-beta.0",
45
+ "@heroui/popover": "2.3.23-beta.0",
46
+ "@heroui/react-utils": "2.1.12-beta.3",
47
+ "@heroui/scroll-shadow": "2.3.16-beta.0",
48
+ "@heroui/shared-icons": "2.1.10-beta.3",
49
+ "@heroui/shared-utils": "2.1.10-beta.5",
50
+ "@heroui/use-safe-layout-effect": "2.1.8-beta.5"
52
51
  },
53
52
  "clean-package": "../../../clean-package.config.json",
54
53
  "module": "dist/index.mjs",