@heroui/autocomplete 2.3.28 → 2.3.30

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/autocomplete.js +11 -9
  2. package/dist/autocomplete.mjs +2 -2
  3. package/dist/{chunk-JHANFQCV.mjs → chunk-NJJHRP6D.mjs} +13 -11
  4. package/dist/{chunk-S6H5EOGR.mjs → chunk-RXKUWVQZ.mjs} +1 -1
  5. package/dist/index.js +11 -9
  6. package/dist/index.mjs +2 -2
  7. package/dist/use-autocomplete.d.mts +15 -15
  8. package/dist/use-autocomplete.d.ts +15 -15
  9. package/dist/use-autocomplete.js +11 -9
  10. package/dist/use-autocomplete.mjs +1 -1
  11. package/package.json +16 -16
package/dist/autocomplete.js CHANGED
@@ -50,7 +50,7 @@ function useAutocomplete(originalProps) {
50
50
  const { validationBehavior: formValidationBehavior } = (0, import_form.useSlottedContext)(import_form.FormContext) || {};
51
51
  const [props, variantProps] = (0, import_system.mapPropsVariants)(originalProps, import_theme.autocomplete.variantKeys);
52
52
  const disableAnimation = (_b = (_a = originalProps.disableAnimation) != null ? _a : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _b : false;
53
- const isClearable = originalProps.disableClearable !== void 0 ? !originalProps.disableClearable : originalProps.isReadOnly ? false : originalProps.isClearable;
53
+ const isClearable = originalProps.disableClearable !== void 0 ? !originalProps.disableClearable : originalProps.isDisabled ? false : originalProps.isReadOnly ? false : originalProps.isClearable;
54
54
  const {
55
55
  ref,
56
56
  as,
@@ -172,7 +172,7 @@ function useAutocomplete(originalProps) {
172
172
  ),
173
173
  listboxProps: (0, import_shared_utils.mergeProps)(
174
174
  {
175
- hideEmptyContent: allowsCustomValue,
175
+ hideEmptyContent: allowsCustomValue && !(listboxProps == null ? void 0 : listboxProps.emptyContent),
176
176
  emptyContent: "No results found.",
177
177
  disableAnimation
178
178
  },
@@ -202,7 +202,7 @@ function useAutocomplete(originalProps) {
202
202
  clearButtonProps
203
203
  )
204
204
  };
205
- const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
205
+ const baseStyles = (0, import_theme.cn)(classNames == null ? void 0 : classNames.base, className);
206
206
  const isOpen = ((_e = slotsProps.listboxProps) == null ? void 0 : _e.hideEmptyContent) ? state.isOpen && !!state.collection.size : state.isOpen;
207
207
  (0, import_use_safe_layout_effect.useSafeLayoutEffect)(() => {
208
208
  if (!inputRef.current) return;
@@ -278,14 +278,16 @@ function useAutocomplete(originalProps) {
278
278
  ...(0, import_shared_utils.mergeProps)(buttonProps, slotsProps.selectorButtonProps),
279
279
  "data-open": (0, import_shared_utils.dataAttr)(state.isOpen),
280
280
  className: slots.selectorButton({
281
- class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.selectorButton, (_a2 = slotsProps.selectorButtonProps) == null ? void 0 : _a2.className)
281
+ class: (0, import_theme.cn)(classNames == null ? void 0 : classNames.selectorButton, (_a2 = slotsProps.selectorButtonProps) == null ? void 0 : _a2.className)
282
282
  })
283
283
  };
284
284
  };
285
285
  const getClearButtonProps = () => {
286
286
  var _a2, _b2;
287
287
  return {
288
- ...(0, import_shared_utils.mergeProps)(buttonProps, slotsProps.clearButtonProps),
288
+ ...slotsProps.clearButtonProps,
289
+ preventFocusOnPress: true,
290
+ excludeFromTabOrder: true,
289
291
  // disable original focus and state toggle from react aria
290
292
  onPressStart: () => {
291
293
  var _a3;
@@ -303,7 +305,7 @@ function useAutocomplete(originalProps) {
303
305
  },
304
306
  "data-visible": !!state.selectedItem || ((_a2 = state.inputValue) == null ? void 0 : _a2.length) > 0,
305
307
  className: slots.clearButton({
306
- class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.clearButton, (_b2 = slotsProps.clearButtonProps) == null ? void 0 : _b2.className)
308
+ class: (0, import_theme.cn)(classNames == null ? void 0 : classNames.clearButton, (_b2 = slotsProps.clearButtonProps) == null ? void 0 : _b2.className)
307
309
  })
308
310
  };
309
311
  };
@@ -346,7 +348,7 @@ function useAutocomplete(originalProps) {
346
348
  classNames: {
347
349
  ...(_a2 = slotsProps.popoverProps) == null ? void 0 : _a2.classNames,
348
350
  content: slots.popoverContent({
349
- class: (0, import_shared_utils.clsx)(
351
+ class: (0, import_theme.cn)(
350
352
  classNames == null ? void 0 : classNames.popoverContent,
351
353
  (_c2 = (_b2 = slotsProps.popoverProps) == null ? void 0 : _b2.classNames) == null ? void 0 : _c2["content"],
352
354
  props2.className
@@ -369,7 +371,7 @@ function useAutocomplete(originalProps) {
369
371
  return {
370
372
  ...(0, import_shared_utils.mergeProps)(slotsProps.scrollShadowProps, props2),
371
373
  className: slots.listboxWrapper({
372
- class: (0, import_shared_utils.clsx)(
374
+ class: (0, import_theme.cn)(
373
375
  classNames == null ? void 0 : classNames.listboxWrapper,
374
376
  (_a2 = slotsProps.scrollShadowProps) == null ? void 0 : _a2.className,
375
377
  props2 == null ? void 0 : props2.className
@@ -382,7 +384,7 @@ function useAutocomplete(originalProps) {
382
384
  };
383
385
  const getEndContentWrapperProps = (props2 = {}) => ({
384
386
  className: slots.endContentWrapper({
385
- class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.endContentWrapper, props2 == null ? void 0 : props2.className)
387
+ class: (0, import_theme.cn)(classNames == null ? void 0 : classNames.endContentWrapper, props2 == null ? void 0 : props2.className)
386
388
  }),
387
389
  onPointerDown: (0, import_shared_utils.chain)(props2.onPointerDown, (e) => {
388
390
  var _a2;
package/dist/autocomplete.mjs CHANGED
@@ -1,8 +1,8 @@
1
1
  "use client";
2
2
  import {
3
3
  autocomplete_default
4
- } from "./chunk-S6H5EOGR.mjs";
5
- import "./chunk-JHANFQCV.mjs";
4
+ } from "./chunk-RXKUWVQZ.mjs";
5
+ import "./chunk-NJJHRP6D.mjs";
6
6
  export {
7
7
  autocomplete_default as default
8
8
  };
package/dist/{chunk-JHANFQCV.mjs → chunk-NJJHRP6D.mjs} RENAMED
@@ -1,12 +1,12 @@
1
1
  "use client";
2
2
 
3
3
  // src/use-autocomplete.ts
4
- import { clsx, dataAttr, objectToDeps, chain, mergeProps } from "@heroui/shared-utils";
4
+ import { dataAttr, objectToDeps, chain, mergeProps } from "@heroui/shared-utils";
5
5
  import { useEffect, useMemo, useRef } from "react";
6
6
  import { useDOMRef } from "@heroui/react-utils";
7
7
  import { useComboBoxState } from "@react-stately/combobox";
8
8
  import { useFilter } from "@react-aria/i18n";
9
- import { autocomplete } from "@heroui/theme";
9
+ import { autocomplete, cn } from "@heroui/theme";
10
10
  import { useSafeLayoutEffect } from "@heroui/use-safe-layout-effect";
11
11
  import { mapPropsVariants, useProviderContext } from "@heroui/system";
12
12
  import { useComboBox } from "@react-aria/combobox";
@@ -17,7 +17,7 @@ function useAutocomplete(originalProps) {
17
17
  const { validationBehavior: formValidationBehavior } = useSlottedContext(FormContext) || {};
18
18
  const [props, variantProps] = mapPropsVariants(originalProps, autocomplete.variantKeys);
19
19
  const disableAnimation = (_b = (_a = originalProps.disableAnimation) != null ? _a : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _b : false;
20
- const isClearable = originalProps.disableClearable !== void 0 ? !originalProps.disableClearable : originalProps.isReadOnly ? false : originalProps.isClearable;
20
+ const isClearable = originalProps.disableClearable !== void 0 ? !originalProps.disableClearable : originalProps.isDisabled ? false : originalProps.isReadOnly ? false : originalProps.isClearable;
21
21
  const {
22
22
  ref,
23
23
  as,
@@ -139,7 +139,7 @@ function useAutocomplete(originalProps) {
139
139
  ),
140
140
  listboxProps: mergeProps(
141
141
  {
142
- hideEmptyContent: allowsCustomValue,
142
+ hideEmptyContent: allowsCustomValue && !(listboxProps == null ? void 0 : listboxProps.emptyContent),
143
143
  emptyContent: "No results found.",
144
144
  disableAnimation
145
145
  },
@@ -169,7 +169,7 @@ function useAutocomplete(originalProps) {
169
169
  clearButtonProps
170
170
  )
171
171
  };
172
- const baseStyles = clsx(classNames == null ? void 0 : classNames.base, className);
172
+ const baseStyles = cn(classNames == null ? void 0 : classNames.base, className);
173
173
  const isOpen = ((_e = slotsProps.listboxProps) == null ? void 0 : _e.hideEmptyContent) ? state.isOpen && !!state.collection.size : state.isOpen;
174
174
  useSafeLayoutEffect(() => {
175
175
  if (!inputRef.current) return;
@@ -245,14 +245,16 @@ function useAutocomplete(originalProps) {
245
245
  ...mergeProps(buttonProps, slotsProps.selectorButtonProps),
246
246
  "data-open": dataAttr(state.isOpen),
247
247
  className: slots.selectorButton({
248
- class: clsx(classNames == null ? void 0 : classNames.selectorButton, (_a2 = slotsProps.selectorButtonProps) == null ? void 0 : _a2.className)
248
+ class: cn(classNames == null ? void 0 : classNames.selectorButton, (_a2 = slotsProps.selectorButtonProps) == null ? void 0 : _a2.className)
249
249
  })
250
250
  };
251
251
  };
252
252
  const getClearButtonProps = () => {
253
253
  var _a2, _b2;
254
254
  return {
255
- ...mergeProps(buttonProps, slotsProps.clearButtonProps),
255
+ ...slotsProps.clearButtonProps,
256
+ preventFocusOnPress: true,
257
+ excludeFromTabOrder: true,
256
258
  // disable original focus and state toggle from react aria
257
259
  onPressStart: () => {
258
260
  var _a3;
@@ -270,7 +272,7 @@ function useAutocomplete(originalProps) {
270
272
  },
271
273
  "data-visible": !!state.selectedItem || ((_a2 = state.inputValue) == null ? void 0 : _a2.length) > 0,
272
274
  className: slots.clearButton({
273
- class: clsx(classNames == null ? void 0 : classNames.clearButton, (_b2 = slotsProps.clearButtonProps) == null ? void 0 : _b2.className)
275
+ class: cn(classNames == null ? void 0 : classNames.clearButton, (_b2 = slotsProps.clearButtonProps) == null ? void 0 : _b2.className)
274
276
  })
275
277
  };
276
278
  };
@@ -313,7 +315,7 @@ function useAutocomplete(originalProps) {
313
315
  classNames: {
314
316
  ...(_a2 = slotsProps.popoverProps) == null ? void 0 : _a2.classNames,
315
317
  content: slots.popoverContent({
316
- class: clsx(
318
+ class: cn(
317
319
  classNames == null ? void 0 : classNames.popoverContent,
318
320
  (_c2 = (_b2 = slotsProps.popoverProps) == null ? void 0 : _b2.classNames) == null ? void 0 : _c2["content"],
319
321
  props2.className
@@ -336,7 +338,7 @@ function useAutocomplete(originalProps) {
336
338
  return {
337
339
  ...mergeProps(slotsProps.scrollShadowProps, props2),
338
340
  className: slots.listboxWrapper({
339
- class: clsx(
341
+ class: cn(
340
342
  classNames == null ? void 0 : classNames.listboxWrapper,
341
343
  (_a2 = slotsProps.scrollShadowProps) == null ? void 0 : _a2.className,
342
344
  props2 == null ? void 0 : props2.className
@@ -349,7 +351,7 @@ function useAutocomplete(originalProps) {
349
351
  };
350
352
  const getEndContentWrapperProps = (props2 = {}) => ({
351
353
  className: slots.endContentWrapper({
352
- class: clsx(classNames == null ? void 0 : classNames.endContentWrapper, props2 == null ? void 0 : props2.className)
354
+ class: cn(classNames == null ? void 0 : classNames.endContentWrapper, props2 == null ? void 0 : props2.className)
353
355
  }),
354
356
  onPointerDown: chain(props2.onPointerDown, (e) => {
355
357
  var _a2;
package/dist/{chunk-S6H5EOGR.mjs → chunk-RXKUWVQZ.mjs} RENAMED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  useAutocomplete
4
- } from "./chunk-JHANFQCV.mjs";
4
+ } from "./chunk-NJJHRP6D.mjs";
5
5
 
6
6
  // src/autocomplete.tsx
7
7
  import { forwardRef } from "@heroui/system";
package/dist/index.js CHANGED
@@ -56,7 +56,7 @@ function useAutocomplete(originalProps) {
56
56
  const { validationBehavior: formValidationBehavior } = (0, import_form.useSlottedContext)(import_form.FormContext) || {};
57
57
  const [props, variantProps] = (0, import_system.mapPropsVariants)(originalProps, import_theme.autocomplete.variantKeys);
58
58
  const disableAnimation = (_b = (_a = originalProps.disableAnimation) != null ? _a : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _b : false;
59
- const isClearable = originalProps.disableClearable !== void 0 ? !originalProps.disableClearable : originalProps.isReadOnly ? false : originalProps.isClearable;
59
+ const isClearable = originalProps.disableClearable !== void 0 ? !originalProps.disableClearable : originalProps.isDisabled ? false : originalProps.isReadOnly ? false : originalProps.isClearable;
60
60
  const {
61
61
  ref,
62
62
  as,
@@ -178,7 +178,7 @@ function useAutocomplete(originalProps) {
178
178
  ),
179
179
  listboxProps: (0, import_shared_utils.mergeProps)(
180
180
  {
181
- hideEmptyContent: allowsCustomValue,
181
+ hideEmptyContent: allowsCustomValue && !(listboxProps == null ? void 0 : listboxProps.emptyContent),
182
182
  emptyContent: "No results found.",
183
183
  disableAnimation
184
184
  },
@@ -208,7 +208,7 @@ function useAutocomplete(originalProps) {
208
208
  clearButtonProps
209
209
  )
210
210
  };
211
- const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
211
+ const baseStyles = (0, import_theme.cn)(classNames == null ? void 0 : classNames.base, className);
212
212
  const isOpen = ((_e = slotsProps.listboxProps) == null ? void 0 : _e.hideEmptyContent) ? state.isOpen && !!state.collection.size : state.isOpen;
213
213
  (0, import_use_safe_layout_effect.useSafeLayoutEffect)(() => {
214
214
  if (!inputRef.current) return;
@@ -284,14 +284,16 @@ function useAutocomplete(originalProps) {
284
284
  ...(0, import_shared_utils.mergeProps)(buttonProps, slotsProps.selectorButtonProps),
285
285
  "data-open": (0, import_shared_utils.dataAttr)(state.isOpen),
286
286
  className: slots.selectorButton({
287
- class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.selectorButton, (_a2 = slotsProps.selectorButtonProps) == null ? void 0 : _a2.className)
287
+ class: (0, import_theme.cn)(classNames == null ? void 0 : classNames.selectorButton, (_a2 = slotsProps.selectorButtonProps) == null ? void 0 : _a2.className)
288
288
  })
289
289
  };
290
290
  };
291
291
  const getClearButtonProps = () => {
292
292
  var _a2, _b2;
293
293
  return {
294
- ...(0, import_shared_utils.mergeProps)(buttonProps, slotsProps.clearButtonProps),
294
+ ...slotsProps.clearButtonProps,
295
+ preventFocusOnPress: true,
296
+ excludeFromTabOrder: true,
295
297
  // disable original focus and state toggle from react aria
296
298
  onPressStart: () => {
297
299
  var _a3;
@@ -309,7 +311,7 @@ function useAutocomplete(originalProps) {
309
311
  },
310
312
  "data-visible": !!state.selectedItem || ((_a2 = state.inputValue) == null ? void 0 : _a2.length) > 0,
311
313
  className: slots.clearButton({
312
- class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.clearButton, (_b2 = slotsProps.clearButtonProps) == null ? void 0 : _b2.className)
314
+ class: (0, import_theme.cn)(classNames == null ? void 0 : classNames.clearButton, (_b2 = slotsProps.clearButtonProps) == null ? void 0 : _b2.className)
313
315
  })
314
316
  };
315
317
  };
@@ -352,7 +354,7 @@ function useAutocomplete(originalProps) {
352
354
  classNames: {
353
355
  ...(_a2 = slotsProps.popoverProps) == null ? void 0 : _a2.classNames,
354
356
  content: slots.popoverContent({
355
- class: (0, import_shared_utils.clsx)(
357
+ class: (0, import_theme.cn)(
356
358
  classNames == null ? void 0 : classNames.popoverContent,
357
359
  (_c2 = (_b2 = slotsProps.popoverProps) == null ? void 0 : _b2.classNames) == null ? void 0 : _c2["content"],
358
360
  props2.className
@@ -375,7 +377,7 @@ function useAutocomplete(originalProps) {
375
377
  return {
376
378
  ...(0, import_shared_utils.mergeProps)(slotsProps.scrollShadowProps, props2),
377
379
  className: slots.listboxWrapper({
378
- class: (0, import_shared_utils.clsx)(
380
+ class: (0, import_theme.cn)(
379
381
  classNames == null ? void 0 : classNames.listboxWrapper,
380
382
  (_a2 = slotsProps.scrollShadowProps) == null ? void 0 : _a2.className,
381
383
  props2 == null ? void 0 : props2.className
@@ -388,7 +390,7 @@ function useAutocomplete(originalProps) {
388
390
  };
389
391
  const getEndContentWrapperProps = (props2 = {}) => ({
390
392
  className: slots.endContentWrapper({
391
- class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.endContentWrapper, props2 == null ? void 0 : props2.className)
393
+ class: (0, import_theme.cn)(classNames == null ? void 0 : classNames.endContentWrapper, props2 == null ? void 0 : props2.className)
392
394
  }),
393
395
  onPointerDown: (0, import_shared_utils.chain)(props2.onPointerDown, (e) => {
394
396
  var _a2;
package/dist/index.mjs CHANGED
@@ -1,10 +1,10 @@
1
1
  "use client";
2
2
  import {
3
3
  autocomplete_default
4
- } from "./chunk-S6H5EOGR.mjs";
4
+ } from "./chunk-RXKUWVQZ.mjs";
5
5
  import {
6
6
  useAutocomplete
7
- } from "./chunk-JHANFQCV.mjs";
7
+ } from "./chunk-NJJHRP6D.mjs";
8
8
 
9
9
  // src/index.ts
10
10
  import { ListboxItem, ListboxSection } from "@heroui/listbox";
package/dist/use-autocomplete.d.mts CHANGED
@@ -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
- disableSelectorIconRotation?: boolean | undefined;
141
140
  disableAnimation?: boolean | undefined;
141
+ disableSelectorIconRotation?: boolean | undefined;
142
142
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
143
143
  listboxWrapper: (slotProps?: ({
144
144
  isClearable?: boolean | undefined;
145
- disableSelectorIconRotation?: boolean | undefined;
146
145
  disableAnimation?: boolean | undefined;
146
+ disableSelectorIconRotation?: boolean | undefined;
147
147
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
148
148
  listbox: (slotProps?: ({
149
149
  isClearable?: boolean | undefined;
150
- disableSelectorIconRotation?: boolean | undefined;
151
150
  disableAnimation?: boolean | undefined;
151
+ disableSelectorIconRotation?: boolean | undefined;
152
152
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
153
153
  popoverContent: (slotProps?: ({
154
154
  isClearable?: boolean | undefined;
155
- disableSelectorIconRotation?: boolean | undefined;
156
155
  disableAnimation?: boolean | undefined;
156
+ disableSelectorIconRotation?: boolean | undefined;
157
157
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
158
158
  endContentWrapper: (slotProps?: ({
159
159
  isClearable?: boolean | undefined;
160
- disableSelectorIconRotation?: boolean | undefined;
161
160
  disableAnimation?: boolean | undefined;
161
+ disableSelectorIconRotation?: boolean | undefined;
162
162
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
163
163
  clearButton: (slotProps?: ({
164
164
  isClearable?: boolean | undefined;
165
- disableSelectorIconRotation?: boolean | undefined;
166
165
  disableAnimation?: boolean | undefined;
166
+ disableSelectorIconRotation?: boolean | undefined;
167
167
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
168
168
  selectorButton: (slotProps?: ({
169
169
  isClearable?: boolean | undefined;
170
- disableSelectorIconRotation?: boolean | undefined;
171
170
  disableAnimation?: boolean | undefined;
171
+ disableSelectorIconRotation?: boolean | undefined;
172
172
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
173
173
  } & {
174
174
  base: (slotProps?: ({
175
175
  isClearable?: boolean | undefined;
176
- disableSelectorIconRotation?: boolean | undefined;
177
176
  disableAnimation?: boolean | undefined;
177
+ disableSelectorIconRotation?: boolean | undefined;
178
178
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
179
179
  listboxWrapper: (slotProps?: ({
180
180
  isClearable?: boolean | undefined;
181
- disableSelectorIconRotation?: boolean | undefined;
182
181
  disableAnimation?: boolean | undefined;
182
+ disableSelectorIconRotation?: boolean | undefined;
183
183
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
184
184
  listbox: (slotProps?: ({
185
185
  isClearable?: boolean | undefined;
186
- disableSelectorIconRotation?: boolean | undefined;
187
186
  disableAnimation?: boolean | undefined;
187
+ disableSelectorIconRotation?: boolean | undefined;
188
188
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
189
189
  popoverContent: (slotProps?: ({
190
190
  isClearable?: boolean | undefined;
191
- disableSelectorIconRotation?: boolean | undefined;
192
191
  disableAnimation?: boolean | undefined;
192
+ disableSelectorIconRotation?: boolean | undefined;
193
193
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
194
194
  endContentWrapper: (slotProps?: ({
195
195
  isClearable?: boolean | undefined;
196
- disableSelectorIconRotation?: boolean | undefined;
197
196
  disableAnimation?: boolean | undefined;
197
+ disableSelectorIconRotation?: boolean | undefined;
198
198
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
199
199
  clearButton: (slotProps?: ({
200
200
  isClearable?: boolean | undefined;
201
- disableSelectorIconRotation?: boolean | undefined;
202
201
  disableAnimation?: boolean | undefined;
202
+ disableSelectorIconRotation?: boolean | undefined;
203
203
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
204
204
  selectorButton: (slotProps?: ({
205
205
  isClearable?: boolean | undefined;
206
- disableSelectorIconRotation?: boolean | undefined;
207
206
  disableAnimation?: boolean | undefined;
207
+ disableSelectorIconRotation?: boolean | undefined;
208
208
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
209
209
  } & {};
210
- classNames: SlotsToClasses<"base" | "listboxWrapper" | "listbox" | "popoverContent" | "endContentWrapper" | "selectorButton" | "clearButton"> | undefined;
210
+ classNames: SlotsToClasses<"base" | "clearButton" | "listbox" | "listboxWrapper" | "popoverContent" | "endContentWrapper" | "selectorButton"> | undefined;
211
211
  isLoading: boolean | undefined;
212
212
  clearIcon: ReactNode;
213
213
  isOpen: boolean;
package/dist/use-autocomplete.d.ts CHANGED
@@ -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
- disableSelectorIconRotation?: boolean | undefined;
141
140
  disableAnimation?: boolean | undefined;
141
+ disableSelectorIconRotation?: boolean | undefined;
142
142
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
143
143
  listboxWrapper: (slotProps?: ({
144
144
  isClearable?: boolean | undefined;
145
- disableSelectorIconRotation?: boolean | undefined;
146
145
  disableAnimation?: boolean | undefined;
146
+ disableSelectorIconRotation?: boolean | undefined;
147
147
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
148
148
  listbox: (slotProps?: ({
149
149
  isClearable?: boolean | undefined;
150
- disableSelectorIconRotation?: boolean | undefined;
151
150
  disableAnimation?: boolean | undefined;
151
+ disableSelectorIconRotation?: boolean | undefined;
152
152
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
153
153
  popoverContent: (slotProps?: ({
154
154
  isClearable?: boolean | undefined;
155
- disableSelectorIconRotation?: boolean | undefined;
156
155
  disableAnimation?: boolean | undefined;
156
+ disableSelectorIconRotation?: boolean | undefined;
157
157
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
158
158
  endContentWrapper: (slotProps?: ({
159
159
  isClearable?: boolean | undefined;
160
- disableSelectorIconRotation?: boolean | undefined;
161
160
  disableAnimation?: boolean | undefined;
161
+ disableSelectorIconRotation?: boolean | undefined;
162
162
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
163
163
  clearButton: (slotProps?: ({
164
164
  isClearable?: boolean | undefined;
165
- disableSelectorIconRotation?: boolean | undefined;
166
165
  disableAnimation?: boolean | undefined;
166
+ disableSelectorIconRotation?: boolean | undefined;
167
167
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
168
168
  selectorButton: (slotProps?: ({
169
169
  isClearable?: boolean | undefined;
170
- disableSelectorIconRotation?: boolean | undefined;
171
170
  disableAnimation?: boolean | undefined;
171
+ disableSelectorIconRotation?: boolean | undefined;
172
172
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
173
173
  } & {
174
174
  base: (slotProps?: ({
175
175
  isClearable?: boolean | undefined;
176
- disableSelectorIconRotation?: boolean | undefined;
177
176
  disableAnimation?: boolean | undefined;
177
+ disableSelectorIconRotation?: boolean | undefined;
178
178
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
179
179
  listboxWrapper: (slotProps?: ({
180
180
  isClearable?: boolean | undefined;
181
- disableSelectorIconRotation?: boolean | undefined;
182
181
  disableAnimation?: boolean | undefined;
182
+ disableSelectorIconRotation?: boolean | undefined;
183
183
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
184
184
  listbox: (slotProps?: ({
185
185
  isClearable?: boolean | undefined;
186
- disableSelectorIconRotation?: boolean | undefined;
187
186
  disableAnimation?: boolean | undefined;
187
+ disableSelectorIconRotation?: boolean | undefined;
188
188
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
189
189
  popoverContent: (slotProps?: ({
190
190
  isClearable?: boolean | undefined;
191
- disableSelectorIconRotation?: boolean | undefined;
192
191
  disableAnimation?: boolean | undefined;
192
+ disableSelectorIconRotation?: boolean | undefined;
193
193
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
194
194
  endContentWrapper: (slotProps?: ({
195
195
  isClearable?: boolean | undefined;
196
- disableSelectorIconRotation?: boolean | undefined;
197
196
  disableAnimation?: boolean | undefined;
197
+ disableSelectorIconRotation?: boolean | undefined;
198
198
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
199
199
  clearButton: (slotProps?: ({
200
200
  isClearable?: boolean | undefined;
201
- disableSelectorIconRotation?: boolean | undefined;
202
201
  disableAnimation?: boolean | undefined;
202
+ disableSelectorIconRotation?: boolean | undefined;
203
203
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
204
204
  selectorButton: (slotProps?: ({
205
205
  isClearable?: boolean | undefined;
206
- disableSelectorIconRotation?: boolean | undefined;
207
206
  disableAnimation?: boolean | undefined;
207
+ disableSelectorIconRotation?: boolean | undefined;
208
208
  } & tailwind_variants.ClassProp<tailwind_variants.ClassValue>) | undefined) => string;
209
209
  } & {};
210
- classNames: SlotsToClasses<"base" | "listboxWrapper" | "listbox" | "popoverContent" | "endContentWrapper" | "selectorButton" | "clearButton"> | undefined;
210
+ classNames: SlotsToClasses<"base" | "clearButton" | "listbox" | "listboxWrapper" | "popoverContent" | "endContentWrapper" | "selectorButton"> | undefined;
211
211
  isLoading: boolean | undefined;
212
212
  clearIcon: ReactNode;
213
213
  isOpen: boolean;
package/dist/use-autocomplete.js CHANGED
@@ -40,7 +40,7 @@ function useAutocomplete(originalProps) {
40
40
  const { validationBehavior: formValidationBehavior } = (0, import_form.useSlottedContext)(import_form.FormContext) || {};
41
41
  const [props, variantProps] = (0, import_system.mapPropsVariants)(originalProps, import_theme.autocomplete.variantKeys);
42
42
  const disableAnimation = (_b = (_a = originalProps.disableAnimation) != null ? _a : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _b : false;
43
- const isClearable = originalProps.disableClearable !== void 0 ? !originalProps.disableClearable : originalProps.isReadOnly ? false : originalProps.isClearable;
43
+ const isClearable = originalProps.disableClearable !== void 0 ? !originalProps.disableClearable : originalProps.isDisabled ? false : originalProps.isReadOnly ? false : originalProps.isClearable;
44
44
  const {
45
45
  ref,
46
46
  as,
@@ -162,7 +162,7 @@ function useAutocomplete(originalProps) {
162
162
  ),
163
163
  listboxProps: (0, import_shared_utils.mergeProps)(
164
164
  {
165
- hideEmptyContent: allowsCustomValue,
165
+ hideEmptyContent: allowsCustomValue && !(listboxProps == null ? void 0 : listboxProps.emptyContent),
166
166
  emptyContent: "No results found.",
167
167
  disableAnimation
168
168
  },
@@ -192,7 +192,7 @@ function useAutocomplete(originalProps) {
192
192
  clearButtonProps
193
193
  )
194
194
  };
195
- const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
195
+ const baseStyles = (0, import_theme.cn)(classNames == null ? void 0 : classNames.base, className);
196
196
  const isOpen = ((_e = slotsProps.listboxProps) == null ? void 0 : _e.hideEmptyContent) ? state.isOpen && !!state.collection.size : state.isOpen;
197
197
  (0, import_use_safe_layout_effect.useSafeLayoutEffect)(() => {
198
198
  if (!inputRef.current) return;
@@ -268,14 +268,16 @@ function useAutocomplete(originalProps) {
268
268
  ...(0, import_shared_utils.mergeProps)(buttonProps, slotsProps.selectorButtonProps),
269
269
  "data-open": (0, import_shared_utils.dataAttr)(state.isOpen),
270
270
  className: slots.selectorButton({
271
- class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.selectorButton, (_a2 = slotsProps.selectorButtonProps) == null ? void 0 : _a2.className)
271
+ class: (0, import_theme.cn)(classNames == null ? void 0 : classNames.selectorButton, (_a2 = slotsProps.selectorButtonProps) == null ? void 0 : _a2.className)
272
272
  })
273
273
  };
274
274
  };
275
275
  const getClearButtonProps = () => {
276
276
  var _a2, _b2;
277
277
  return {
278
- ...(0, import_shared_utils.mergeProps)(buttonProps, slotsProps.clearButtonProps),
278
+ ...slotsProps.clearButtonProps,
279
+ preventFocusOnPress: true,
280
+ excludeFromTabOrder: true,
279
281
  // disable original focus and state toggle from react aria
280
282
  onPressStart: () => {
281
283
  var _a3;
@@ -293,7 +295,7 @@ function useAutocomplete(originalProps) {
293
295
  },
294
296
  "data-visible": !!state.selectedItem || ((_a2 = state.inputValue) == null ? void 0 : _a2.length) > 0,
295
297
  className: slots.clearButton({
296
- class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.clearButton, (_b2 = slotsProps.clearButtonProps) == null ? void 0 : _b2.className)
298
+ class: (0, import_theme.cn)(classNames == null ? void 0 : classNames.clearButton, (_b2 = slotsProps.clearButtonProps) == null ? void 0 : _b2.className)
297
299
  })
298
300
  };
299
301
  };
@@ -336,7 +338,7 @@ function useAutocomplete(originalProps) {
336
338
  classNames: {
337
339
  ...(_a2 = slotsProps.popoverProps) == null ? void 0 : _a2.classNames,
338
340
  content: slots.popoverContent({
339
- class: (0, import_shared_utils.clsx)(
341
+ class: (0, import_theme.cn)(
340
342
  classNames == null ? void 0 : classNames.popoverContent,
341
343
  (_c2 = (_b2 = slotsProps.popoverProps) == null ? void 0 : _b2.classNames) == null ? void 0 : _c2["content"],
342
344
  props2.className
@@ -359,7 +361,7 @@ function useAutocomplete(originalProps) {
359
361
  return {
360
362
  ...(0, import_shared_utils.mergeProps)(slotsProps.scrollShadowProps, props2),
361
363
  className: slots.listboxWrapper({
362
- class: (0, import_shared_utils.clsx)(
364
+ class: (0, import_theme.cn)(
363
365
  classNames == null ? void 0 : classNames.listboxWrapper,
364
366
  (_a2 = slotsProps.scrollShadowProps) == null ? void 0 : _a2.className,
365
367
  props2 == null ? void 0 : props2.className
@@ -372,7 +374,7 @@ function useAutocomplete(originalProps) {
372
374
  };
373
375
  const getEndContentWrapperProps = (props2 = {}) => ({
374
376
  className: slots.endContentWrapper({
375
- class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.endContentWrapper, props2 == null ? void 0 : props2.className)
377
+ class: (0, import_theme.cn)(classNames == null ? void 0 : classNames.endContentWrapper, props2 == null ? void 0 : props2.className)
376
378
  }),
377
379
  onPointerDown: (0, import_shared_utils.chain)(props2.onPointerDown, (e) => {
378
380
  var _a2;
package/dist/use-autocomplete.mjs CHANGED
@@ -1,7 +1,7 @@
1
1
  "use client";
2
2
  import {
3
3
  useAutocomplete
4
- } from "./chunk-JHANFQCV.mjs";
4
+ } from "./chunk-NJJHRP6D.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.28",
3
+ "version": "2.3.30",
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"
@@ -26,27 +26,27 @@
26
26
  },
27
27
  "peerDependencies": {
28
28
  "@heroui/system": ">=2.4.18",
29
- "@heroui/theme": ">=2.4.17",
29
+ "@heroui/theme": ">=2.4.23",
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"
33
33
  },
34
34
  "dependencies": {
35
- "@react-aria/combobox": "3.13.1",
36
- "@react-aria/i18n": "3.12.12",
37
- "@react-stately/combobox": "3.11.1",
38
- "@react-types/combobox": "3.13.8",
39
- "@react-types/shared": "3.32.0",
40
- "@heroui/form": "2.1.26",
41
- "@heroui/aria-utils": "2.2.23",
42
- "@heroui/button": "2.2.26",
43
- "@heroui/input": "2.4.27",
44
- "@heroui/listbox": "2.3.25",
45
- "@heroui/popover": "2.3.26",
46
- "@heroui/react-utils": "2.1.13",
47
- "@heroui/scroll-shadow": "2.3.17",
35
+ "@react-aria/combobox": "3.14.0",
36
+ "@react-aria/i18n": "3.12.13",
37
+ "@react-stately/combobox": "3.12.0",
38
+ "@react-types/combobox": "3.13.9",
39
+ "@react-types/shared": "3.32.1",
40
+ "@heroui/form": "2.1.28",
41
+ "@heroui/aria-utils": "2.2.25",
42
+ "@heroui/button": "2.2.28",
43
+ "@heroui/input": "2.4.29",
44
+ "@heroui/listbox": "2.3.27",
45
+ "@heroui/popover": "2.3.28",
46
+ "@heroui/react-utils": "2.1.14",
47
+ "@heroui/scroll-shadow": "2.3.19",
48
48
  "@heroui/shared-icons": "2.1.10",
49
- "@heroui/shared-utils": "2.1.11",
49
+ "@heroui/shared-utils": "2.1.12",
50
50
  "@heroui/use-safe-layout-effect": "2.1.8"
51
51
  },
52
52
  "clean-package": "../../../clean-package.config.json",