@heroui/autocomplete 2.3.11 → 2.3.12

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2020 Next UI
+Copyright (c) 2020 Next UI Inc.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -15,10 +15,10 @@ npm i @heroui/autocomplete
 ## Contribution
 
 Yes please! See the
-[contributing guidelines](https://github.com/frontio-ai/heroui/blob/master/CONTRIBUTING.md)
+[contributing guidelines](https://github.com/heroui-inc/heroui/blob/master/CONTRIBUTING.md)
 for details.
 
 ## License
 
 This project is licensed under the terms of the
-[MIT license](https://github.com/frontio-ai/heroui/blob/master/LICENSE).
+[MIT license](https://github.com/heroui-inc/heroui/blob/master/LICENSE).

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@heroui/autocomplete",
-  "version": "2.3.11",
+  "version": "2.3.12",
   "description": "An autocomplete combines a text input with a listbox, allowing users to filter a list of options to items matching a query.",
   "keywords": [
     "autocomplete"
   ],
-  "author": "Junior Garcia <jrgarciadev@gmail.com>",
+  "author": "HeroUI <support@heroui.com>",
   "homepage": "https://heroui.com",
   "license": "MIT",
   "main": "dist/index.js",
@@ -25,35 +25,35 @@
     "url": "https://github.com/heroui-inc/heroui/issues"
   },
   "peerDependencies": {
-    "@heroui/system": ">=2.4.0",
-    "@heroui/theme": ">=2.4.0",
+    "@heroui/system": ">=2.4.7",
+    "@heroui/theme": ">=2.4.6",
     "framer-motion": ">=11.5.6 || >=12.0.0-alpha.1",
     "react": ">=18 || >=19.0.0-rc.0",
     "react-dom": ">=18 || >=19.0.0-rc.0"
   },
   "dependencies": {
-    "@react-aria/combobox": "3.11.0",
-    "@react-aria/focus": "3.19.0",
-    "@react-aria/i18n": "3.12.4",
-    "@react-aria/interactions": "3.22.5",
-    "@react-aria/utils": "3.26.0",
-    "@react-aria/visually-hidden": "3.8.18",
-    "@react-stately/combobox": "3.10.1",
-    "@react-types/combobox": "3.13.1",
-    "@react-types/shared": "3.26.0",
-    "@heroui/form": "2.1.9",
-    "@heroui/aria-utils": "2.2.8",
-    "@heroui/button": "2.2.10",
-    "@heroui/input": "2.4.10",
-    "@heroui/listbox": "2.3.10",
-    "@heroui/popover": "2.3.10",
-    "@heroui/react-utils": "2.1.4",
-    "@heroui/scroll-shadow": "2.3.6",
-    "@heroui/shared-icons": "2.1.2",
-    "@heroui/shared-utils": "2.1.3",
-    "@heroui/spinner": "2.2.7",
-    "@heroui/use-aria-button": "2.2.5",
-    "@heroui/use-safe-layout-effect": "2.1.2"
+    "@react-aria/combobox": "3.11.1",
+    "@react-aria/focus": "3.19.1",
+    "@react-aria/i18n": "3.12.5",
+    "@react-aria/interactions": "3.23.0",
+    "@react-aria/utils": "3.27.0",
+    "@react-aria/visually-hidden": "3.8.19",
+    "@react-stately/combobox": "3.10.2",
+    "@react-types/combobox": "3.13.2",
+    "@react-types/shared": "3.27.0",
+    "@heroui/form": "2.1.10",
+    "@heroui/aria-utils": "2.2.9",
+    "@heroui/button": "2.2.11",
+    "@heroui/input": "2.4.11",
+    "@heroui/listbox": "2.3.11",
+    "@heroui/popover": "2.3.11",
+    "@heroui/react-utils": "2.1.5",
+    "@heroui/scroll-shadow": "2.3.7",
+    "@heroui/shared-icons": "2.1.3",
+    "@heroui/shared-utils": "2.1.4",
+    "@heroui/spinner": "2.2.8",
+    "@heroui/use-aria-button": "2.2.6",
+    "@heroui/use-safe-layout-effect": "2.1.3"
   },
   "clean-package": "../../../clean-package.config.json",
   "module": "dist/index.mjs",

package/dist/autocomplete.d.ts

@@ -1,21 +0,0 @@
-import { ReactElement } from 'react';
-import { UseAutocompleteProps } from './use-autocomplete.js';
-import 'tailwind-variants';
-import '@react-stately/combobox';
-import '@heroui/system';
-import '@heroui/theme';
-import '@heroui/react-utils';
-import '@react-types/combobox';
-import '@heroui/popover';
-import '@heroui/listbox';
-import '@heroui/input';
-import '@heroui/scroll-shadow';
-import '@heroui/button';
-import '@react-types/shared';
-
-interface Props<T> extends UseAutocompleteProps<T> {
-}
-type AutocompleteProps<T extends object = object> = Props<T>;
-declare const Autocomplete: <T extends object>(props: AutocompleteProps<T>) => ReactElement;
-
-export { AutocompleteProps, Autocomplete as default };

package/dist/autocomplete.js

@@ -1,447 +0,0 @@
-"use client";
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/autocomplete.tsx
-var autocomplete_exports = {};
-__export(autocomplete_exports, {
-  default: () => autocomplete_default
-});
-module.exports = __toCommonJS(autocomplete_exports);
-var import_system2 = require("@heroui/system");
-var import_popover = require("@heroui/popover");
-var import_scroll_shadow = require("@heroui/scroll-shadow");
-var import_shared_icons = require("@heroui/shared-icons");
-var import_listbox = require("@heroui/listbox");
-var import_button = require("@heroui/button");
-var import_input = require("@heroui/input");
-var import_framer_motion = require("framer-motion");
-
-// src/use-autocomplete.ts
-var import_system = require("@heroui/system");
-var import_use_safe_layout_effect = require("@heroui/use-safe-layout-effect");
-var import_theme = require("@heroui/theme");
-var import_i18n = require("@react-aria/i18n");
-var import_combobox = require("@react-stately/combobox");
-var import_react_utils = require("@heroui/react-utils");
-var import_react = require("react");
-var import_shared_utils = require("@heroui/shared-utils");
-var import_utils = require("@react-aria/utils");
-var import_combobox2 = require("@react-aria/combobox");
-var import_form = require("@heroui/form");
-var import_aria_utils = require("@heroui/aria-utils");
-function useAutocomplete(originalProps) {
-  var _a, _b, _c, _d, _e;
-  const globalContext = (0, import_system.useProviderContext)();
-  const { validationBehavior: formValidationBehavior } = (0, import_form.useSlottedContext)(import_form.FormContext) || {};
-  const [props, variantProps] = (0, import_system.mapPropsVariants)(originalProps, import_theme.autocomplete.variantKeys);
-  const disableAnimation = (_b = (_a = originalProps.disableAnimation) != null ? _a : globalContext == null ? void 0 : globalContext.disableAnimation) != null ? _b : false;
-  const isClearable = originalProps.disableClearable !== void 0 ? !originalProps.disableClearable : originalProps.isReadOnly ? false : originalProps.isClearable;
-  const {
-    ref,
-    as,
-    label,
-    isLoading,
-    menuTrigger = "focus",
-    filterOptions = {
-      sensitivity: "base"
-    },
-    children,
-    selectorIcon,
-    clearIcon,
-    scrollRef: scrollRefProp,
-    defaultFilter,
-    endContent,
-    allowsEmptyCollection = true,
-    shouldCloseOnBlur = true,
-    popoverProps = {},
-    inputProps: userInputProps = {},
-    scrollShadowProps = {},
-    listboxProps = {},
-    selectorButtonProps = {},
-    clearButtonProps = {},
-    showScrollIndicators = true,
-    allowsCustomValue = false,
-    isVirtualized,
-    maxListboxHeight = 256,
-    itemHeight = 32,
-    validationBehavior = (_c = formValidationBehavior != null ? formValidationBehavior : globalContext == null ? void 0 : globalContext.validationBehavior) != null ? _c : "native",
-    className,
-    classNames,
-    errorMessage,
-    onOpenChange,
-    onClose,
-    isReadOnly = false,
-    ...otherProps
-  } = props;
-  const { contains } = (0, import_i18n.useFilter)(filterOptions);
-  let state = (0, import_combobox.useComboBoxState)({
-    ...originalProps,
-    children,
-    menuTrigger,
-    validationBehavior,
-    shouldCloseOnBlur,
-    allowsEmptyCollection,
-    defaultFilter: defaultFilter && typeof defaultFilter === "function" ? defaultFilter : contains,
-    onOpenChange: (open, menuTrigger2) => {
-      onOpenChange == null ? void 0 : onOpenChange(open, menuTrigger2);
-      if (!open) {
-        onClose == null ? void 0 : onClose();
-      }
-    }
-  });
-  state = {
-    ...state,
-    ...isReadOnly && {
-      disabledKeys: /* @__PURE__ */ new Set([...state.collection.getKeys()])
-    }
-  };
-  const buttonRef = (0, import_react.useRef)(null);
-  const inputWrapperRef = (0, import_react.useRef)(null);
-  const listBoxRef = (0, import_react.useRef)(null);
-  const popoverRef = (0, import_react.useRef)(null);
-  const inputRef = (0, import_react_utils.useDOMRef)(ref);
-  const scrollShadowRef = (0, import_react_utils.useDOMRef)(scrollRefProp);
-  const {
-    buttonProps,
-    inputProps,
-    listBoxProps,
-    isInvalid: isAriaInvalid,
-    validationDetails,
-    validationErrors
-  } = (0, import_combobox2.useComboBox)(
-    {
-      validationBehavior,
-      ...originalProps,
-      inputRef,
-      buttonRef,
-      listBoxRef,
-      popoverRef
-    },
-    state
-  );
-  const isInvalid = originalProps.isInvalid || isAriaInvalid;
-  const slotsProps = {
-    inputProps: (0, import_utils.mergeProps)(
-      {
-        label,
-        ref: inputRef,
-        wrapperRef: inputWrapperRef,
-        onClick: () => {
-          if (!state.isOpen && !!state.selectedItem) {
-            state.open();
-          }
-        },
-        isClearable: false,
-        disableAnimation
-      },
-      userInputProps
-    ),
-    popoverProps: (0, import_utils.mergeProps)(
-      {
-        offset: 5,
-        placement: "bottom",
-        triggerScaleOnOpen: false,
-        disableAnimation
-      },
-      popoverProps
-    ),
-    scrollShadowProps: (0, import_utils.mergeProps)(
-      {
-        ref: scrollShadowRef,
-        isEnabled: (_d = showScrollIndicators && state.collection.size > 5) != null ? _d : true,
-        hideScrollBar: true,
-        offset: 15
-      },
-      scrollShadowProps
-    ),
-    listboxProps: (0, import_utils.mergeProps)(
-      {
-        hideEmptyContent: allowsCustomValue,
-        emptyContent: "No results found.",
-        disableAnimation
-      },
-      listboxProps
-    ),
-    selectorButtonProps: (0, import_utils.mergeProps)(
-      {
-        isLoading,
-        size: "sm",
-        variant: "light",
-        radius: "full",
-        color: isInvalid ? "danger" : originalProps == null ? void 0 : originalProps.color,
-        isIconOnly: true,
-        disableAnimation
-      },
-      selectorButtonProps
-    ),
-    clearButtonProps: (0, import_utils.mergeProps)(
-      {
-        size: "sm",
-        variant: "light",
-        radius: "full",
-        color: isInvalid ? "danger" : originalProps == null ? void 0 : originalProps.color,
-        isIconOnly: true,
-        disableAnimation
-      },
-      clearButtonProps
-    )
-  };
-  const baseStyles = (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.base, className);
-  const isOpen = ((_e = slotsProps.listboxProps) == null ? void 0 : _e.hideEmptyContent) ? state.isOpen && !!state.collection.size : state.isOpen;
-  (0, import_use_safe_layout_effect.useSafeLayoutEffect)(() => {
-    if (!inputRef.current)
-      return;
-    const key = inputRef.current.value;
-    const item = state.collection.getItem(key);
-    if (item && state.inputValue !== item.textValue) {
-      state.setSelectedKey(key);
-      state.setInputValue(item.textValue);
-    }
-  }, [inputRef.current]);
-  (0, import_react.useEffect)(() => {
-    let key = state.collection.getFirstKey();
-    while (key && state.disabledKeys.has(key)) {
-      key = state.collection.getKeyAfter(key);
-    }
-    state.selectionManager.setFocusedKey(key);
-  }, [state.collection, state.disabledKeys]);
-  (0, import_react.useEffect)(() => {
-    if (isOpen) {
-      if (popoverRef.current && inputWrapperRef.current) {
-        let rect = inputWrapperRef.current.getBoundingClientRect();
-        let popover = popoverRef.current;
-        popover.style.width = rect.width + "px";
-      }
-    }
-  }, [isOpen]);
-  if (inputProps.onKeyDown) {
-    const originalOnKeyDown = inputProps.onKeyDown;
-    inputProps.onKeyDown = (e) => {
-      if ("continuePropagation" in e) {
-        e.stopPropagation = () => {
-        };
-      }
-      return originalOnKeyDown(e);
-    };
-  }
-  const Component = as || "div";
-  const slots = (0, import_react.useMemo)(
-    () => (0, import_theme.autocomplete)({
-      ...variantProps,
-      isClearable,
-      disableAnimation,
-      className
-    }),
-    [(0, import_shared_utils.objectToDeps)(variantProps), isClearable, disableAnimation, className]
-  );
-  const getBaseProps = () => ({
-    "data-invalid": (0, import_shared_utils.dataAttr)(isInvalid),
-    "data-open": (0, import_shared_utils.dataAttr)(state.isOpen),
-    className: slots.base({ class: baseStyles })
-  });
-  const getSelectorButtonProps = () => {
-    var _a2;
-    return {
-      ref: buttonRef,
-      ...(0, import_utils.mergeProps)(buttonProps, slotsProps.selectorButtonProps),
-      "data-open": (0, import_shared_utils.dataAttr)(state.isOpen),
-      className: slots.selectorButton({
-        class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.selectorButton, (_a2 = slotsProps.selectorButtonProps) == null ? void 0 : _a2.className)
-      })
-    };
-  };
-  const getClearButtonProps = () => {
-    var _a2, _b2;
-    return {
-      ...(0, import_utils.mergeProps)(buttonProps, slotsProps.clearButtonProps),
-      onPressStart: () => {
-        var _a3;
-        (_a3 = inputRef.current) == null ? void 0 : _a3.focus();
-      },
-      onPress: (e) => {
-        var _a3, _b3;
-        (_b3 = (_a3 = slotsProps.clearButtonProps) == null ? void 0 : _a3.onPress) == null ? void 0 : _b3.call(_a3, e);
-        if (state.selectedItem) {
-          state.setSelectedKey(null);
-        }
-        state.setInputValue("");
-        state.open();
-      },
-      "data-visible": !!state.selectedItem || ((_a2 = state.inputValue) == null ? void 0 : _a2.length) > 0,
-      className: slots.clearButton({
-        class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.clearButton, (_b2 = slotsProps.clearButtonProps) == null ? void 0 : _b2.className)
-      })
-    };
-  };
-  const hasUncommittedValidation = validationBehavior === "native" && state.displayValidation.isInvalid === false && state.realtimeValidation.isInvalid === true;
-  const getInputProps = () => ({
-    ...otherProps,
-    ...inputProps,
-    ...slotsProps.inputProps,
-    isInvalid: hasUncommittedValidation ? void 0 : isInvalid,
-    validationBehavior,
-    errorMessage: typeof errorMessage === "function" ? errorMessage({ isInvalid, validationErrors, validationDetails }) : errorMessage || (validationErrors == null ? void 0 : validationErrors.join(" ")),
-    onClick: (0, import_utils.chain)(slotsProps.inputProps.onClick, otherProps.onClick)
-  });
-  const getListBoxProps = () => {
-    const shouldVirtualize = isVirtualized != null ? isVirtualized : state.collection.size > 50;
-    return {
-      state,
-      ref: listBoxRef,
-      isVirtualized: shouldVirtualize,
-      virtualization: shouldVirtualize ? {
-        maxListboxHeight,
-        itemHeight
-      } : void 0,
-      scrollShadowProps: slotsProps.scrollShadowProps,
-      ...(0, import_utils.mergeProps)(slotsProps.listboxProps, listBoxProps, {
-        shouldHighlightOnFocus: true
-      })
-    };
-  };
-  const getPopoverProps = (props2 = {}) => {
-    var _a2, _b2, _c2;
-    const popoverProps2 = (0, import_utils.mergeProps)(slotsProps.popoverProps, props2);
-    return {
-      state,
-      ref: popoverRef,
-      triggerRef: inputWrapperRef,
-      scrollRef: listBoxRef,
-      triggerType: "listbox",
-      ...popoverProps2,
-      classNames: {
-        ...(_a2 = slotsProps.popoverProps) == null ? void 0 : _a2.classNames,
-        content: slots.popoverContent({
-          class: (0, import_shared_utils.clsx)(
-            classNames == null ? void 0 : classNames.popoverContent,
-            (_c2 = (_b2 = slotsProps.popoverProps) == null ? void 0 : _b2.classNames) == null ? void 0 : _c2["content"],
-            props2.className
-          )
-        })
-      },
-      shouldCloseOnInteractOutside: (popoverProps2 == null ? void 0 : popoverProps2.shouldCloseOnInteractOutside) ? popoverProps2.shouldCloseOnInteractOutside : (element) => (0, import_aria_utils.ariaShouldCloseOnInteractOutside)(element, inputWrapperRef, state),
-      disableDialogFocus: true
-    };
-  };
-  const getEmptyPopoverProps = () => {
-    return {
-      ref: popoverRef,
-      className: "hidden"
-    };
-  };
-  const getListBoxWrapperProps = (props2 = {}) => {
-    var _a2, _b2;
-    return {
-      ...(0, import_utils.mergeProps)(slotsProps.scrollShadowProps, props2),
-      className: slots.listboxWrapper({
-        class: (0, import_shared_utils.clsx)(
-          classNames == null ? void 0 : classNames.listboxWrapper,
-          (_a2 = slotsProps.scrollShadowProps) == null ? void 0 : _a2.className,
-          props2 == null ? void 0 : props2.className
-        )
-      }),
-      style: {
-        maxHeight: (_b2 = originalProps.maxListboxHeight) != null ? _b2 : 256
-      }
-    };
-  };
-  const getEndContentWrapperProps = (props2 = {}) => ({
-    className: slots.endContentWrapper({
-      class: (0, import_shared_utils.clsx)(classNames == null ? void 0 : classNames.endContentWrapper, props2 == null ? void 0 : props2.className)
-    }),
-    onPointerDown: (0, import_utils.chain)(props2.onPointerDown, (e) => {
-      var _a2;
-      if (e.button === 0 && e.currentTarget === e.target) {
-        (_a2 = inputRef.current) == null ? void 0 : _a2.focus();
-      }
-    }),
-    onMouseDown: (0, import_utils.chain)(props2.onMouseDown, (e) => {
-      if (e.button === 0 && e.currentTarget === e.target) {
-        e.preventDefault();
-      }
-    })
-  });
-  return {
-    Component,
-    inputRef,
-    label,
-    state,
-    slots,
-    classNames,
-    isLoading,
-    clearIcon,
-    isOpen,
-    endContent,
-    isClearable,
-    disableAnimation,
-    allowsCustomValue,
-    selectorIcon,
-    getBaseProps,
-    getInputProps,
-    getListBoxProps,
-    getPopoverProps,
-    getEmptyPopoverProps,
-    getClearButtonProps,
-    getSelectorButtonProps,
-    getListBoxWrapperProps,
-    getEndContentWrapperProps
-  };
-}
-
-// src/autocomplete.tsx
-var import_jsx_runtime = require("react/jsx-runtime");
-var Autocomplete = (0, import_system2.forwardRef)(function Autocomplete2(props, ref) {
-  var _a;
-  const {
-    Component,
-    isOpen,
-    disableAnimation,
-    selectorIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_shared_icons.ChevronDownIcon, {}),
-    clearIcon = /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_shared_icons.CloseIcon, {}),
-    endContent,
-    getBaseProps,
-    getSelectorButtonProps,
-    getInputProps,
-    getListBoxProps,
-    getPopoverProps,
-    getEmptyPopoverProps,
-    getClearButtonProps,
-    getListBoxWrapperProps,
-    getEndContentWrapperProps
-  } = useAutocomplete({ ...props, ref });
-  const listboxProps = getListBoxProps();
-  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;
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Component, { ...getBaseProps(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      import_input.Input,
-      {
-        ...getInputProps(),
-        endContent: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ...getEndContentWrapperProps(), children: [
-          endContent || /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { ...getClearButtonProps(), children: clearIcon }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_button.Button, { ...getSelectorButtonProps(), children: selectorIcon })
-        ] })
-      }
-    ),
-    disableAnimation ? popoverContent : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { children: popoverContent })
-  ] });
-});
-var autocomplete_default = Autocomplete;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {});

package/dist/autocomplete.mjs

@@ -1,8 +0,0 @@
-"use client";
-import {
-  autocomplete_default
-} from "./chunk-SV7R5B4H.mjs";
-import "./chunk-QZCVHGAT.mjs";
-export {
-  autocomplete_default as default
-};