@seekho/ui 0.1.53 → 0.1.55

package/dist/index.d.mts

@@ -57,10 +57,20 @@ interface AutoCompleteProps<T> {
     isOptionEqualToValue?: (option: T, value: T) => boolean;
     isLoading?: boolean;
     renderOption?: (props: RenderOptionProps, option: T) => React.ReactNode;
+    /**
+     * Override how `options` are narrowed down for the dropdown. Defaults to a
+     * case-insensitive match of the input against `getOptionLabel`.
+     * Pass `(options) => options` when `options` already come from a server-side
+     * search, so results that don't match the label (e.g. an id or phone lookup)
+     * aren't filtered out.
+     */
+    filterOptions?: (options: T[], state: {
+        inputValue: string;
+    }) => T[];
     onChange: (value: T | null) => void;
     onInputChange?: (value: string) => void;
 }
-declare function AutoComplete<T>({ label: _label, value, options, disabled, error, className, getOptionLabel, isOptionEqualToValue, isLoading, renderOption, onChange, onInputChange, }: AutoCompleteProps<T>): react_jsx_runtime.JSX.Element;
+declare function AutoComplete<T>({ label: _label, value, options, disabled, error, className, getOptionLabel, isOptionEqualToValue, isLoading, renderOption, filterOptions, onChange, onInputChange, }: AutoCompleteProps<T>): react_jsx_runtime.JSX.Element;
 
 interface BreadcrumbProps {
     /** Current URL pathname — pass location.pathname (React Router) or router.pathname (Next.js) */

package/dist/index.d.ts

@@ -57,10 +57,20 @@ interface AutoCompleteProps<T> {
     isOptionEqualToValue?: (option: T, value: T) => boolean;
     isLoading?: boolean;
     renderOption?: (props: RenderOptionProps, option: T) => React.ReactNode;
+    /**
+     * Override how `options` are narrowed down for the dropdown. Defaults to a
+     * case-insensitive match of the input against `getOptionLabel`.
+     * Pass `(options) => options` when `options` already come from a server-side
+     * search, so results that don't match the label (e.g. an id or phone lookup)
+     * aren't filtered out.
+     */
+    filterOptions?: (options: T[], state: {
+        inputValue: string;
+    }) => T[];
     onChange: (value: T | null) => void;
     onInputChange?: (value: string) => void;
 }
-declare function AutoComplete<T>({ label: _label, value, options, disabled, error, className, getOptionLabel, isOptionEqualToValue, isLoading, renderOption, onChange, onInputChange, }: AutoCompleteProps<T>): react_jsx_runtime.JSX.Element;
+declare function AutoComplete<T>({ label: _label, value, options, disabled, error, className, getOptionLabel, isOptionEqualToValue, isLoading, renderOption, filterOptions, onChange, onInputChange, }: AutoCompleteProps<T>): react_jsx_runtime.JSX.Element;
 
 interface BreadcrumbProps {
     /** Current URL pathname — pass location.pathname (React Router) or router.pathname (Next.js) */

package/dist/index.js

@@ -217,6 +217,12 @@ var Chip = ({
     }
   );
 };
+var defaultFilterOptions = (options, {
+  inputValue,
+  getOptionLabel
+}) => options.filter(
+  (option) => getOptionLabel(option).toLowerCase().includes(inputValue.toLowerCase())
+);
 function AutoComplete({
   label: _label,
   value,
@@ -228,6 +234,7 @@ function AutoComplete({
   isOptionEqualToValue,
   isLoading = false,
   renderOption,
+  filterOptions,
   onChange,
   onInputChange
 }) {
@@ -241,18 +248,20 @@ function AutoComplete({
   );
   const [highlightedIndex, setHighlightedIndex] = React8.useState(-1);
   const [dropdownPos, setDropdownPos] = React8.useState(null);
+  const DROPDOWN_MAX_HEIGHT = 240;
   const handelUpdateDropdownPosition = () => {
     if (!containerRef.current) return;
     const rect = containerRef.current.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const openUpward = spaceBelow < DROPDOWN_MAX_HEIGHT + 8 && rect.top > spaceBelow;
     setDropdownPos({
-      top: rect.bottom + 4,
+      top: openUpward ? void 0 : rect.bottom + 4,
+      bottom: openUpward ? window.innerHeight - rect.top + 4 : void 0,
       left: rect.left,
       width: rect.width
     });
   };
-  const filteredOptions = options.filter(
-    (option) => getOptionLabel(option).toLowerCase().includes(inputValue.toLowerCase())
-  );
+  const filteredOptions = filterOptions ? filterOptions(options, { inputValue }) : defaultFilterOptions(options, { inputValue, getOptionLabel });
   const handleOpen = () => {
     const selectedIdx = filteredOptions.findIndex(
       (opt) => value ? isOptionEqualToValue ? isOptionEqualToValue(opt, value) : getOptionLabel(opt) === getOptionLabel(value) : false
@@ -467,6 +476,7 @@ function AutoComplete({
               style: {
                 position: "fixed",
                 top: dropdownPos.top,
+                bottom: dropdownPos.bottom,
                 left: dropdownPos.left,
                 width: dropdownPos.width
               },

package/dist/index.mjs

@@ -210,6 +210,12 @@ var Chip = ({
     }
   );
 };
+var defaultFilterOptions = (options, {
+  inputValue,
+  getOptionLabel
+}) => options.filter(
+  (option) => getOptionLabel(option).toLowerCase().includes(inputValue.toLowerCase())
+);
 function AutoComplete({
   label: _label,
   value,
@@ -221,6 +227,7 @@ function AutoComplete({
   isOptionEqualToValue,
   isLoading = false,
   renderOption,
+  filterOptions,
   onChange,
   onInputChange
 }) {
@@ -234,18 +241,20 @@ function AutoComplete({
   );
   const [highlightedIndex, setHighlightedIndex] = useState(-1);
   const [dropdownPos, setDropdownPos] = useState(null);
+  const DROPDOWN_MAX_HEIGHT = 240;
   const handelUpdateDropdownPosition = () => {
     if (!containerRef.current) return;
     const rect = containerRef.current.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom;
+    const openUpward = spaceBelow < DROPDOWN_MAX_HEIGHT + 8 && rect.top > spaceBelow;
     setDropdownPos({
-      top: rect.bottom + 4,
+      top: openUpward ? void 0 : rect.bottom + 4,
+      bottom: openUpward ? window.innerHeight - rect.top + 4 : void 0,
       left: rect.left,
       width: rect.width
     });
   };
-  const filteredOptions = options.filter(
-    (option) => getOptionLabel(option).toLowerCase().includes(inputValue.toLowerCase())
-  );
+  const filteredOptions = filterOptions ? filterOptions(options, { inputValue }) : defaultFilterOptions(options, { inputValue, getOptionLabel });
   const handleOpen = () => {
     const selectedIdx = filteredOptions.findIndex(
       (opt) => value ? isOptionEqualToValue ? isOptionEqualToValue(opt, value) : getOptionLabel(opt) === getOptionLabel(value) : false
@@ -460,6 +469,7 @@ function AutoComplete({
               style: {
                 position: "fixed",
                 top: dropdownPos.top,
+                bottom: dropdownPos.bottom,
                 left: dropdownPos.left,
                 width: dropdownPos.width
               },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@seekho/ui",
-  "version": "0.1.53",
+  "version": "0.1.55",
   "description": "Seekho internal UI component library",
   "keywords": [
     "seekho",