Merge pull request #26 from szhsin/feat/auto-height

feat: auto height

dist/cjs/index.js

@@ -90,6 +90,39 @@ const useAutocomplete = ({
   };
 };
 
+const useLayoutEffect = typeof window !== 'undefined' && window.document && window.document.createElement ? react.useLayoutEffect : react.useEffect;
+const findOverflowAncestor = element => {
+  while (element) {
+    element = element.parentElement;
+    if (!element || element === document.body) return;
+    const {
+      overflow,
+      overflowX,
+      overflowY
+    } = getComputedStyle(element);
+    if (/auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX)) return element;
+  }
+};
+const useAutoHeight = ({
+  anchorRef,
+  show,
+  margin = 0
+}) => {
+  const [height, setHeight] = react.useState();
+  const computeHeight = react.useCallback(() => {
+    const anchor = anchorRef.current;
+    if (!anchor) return;
+    const overflowAncestor = findOverflowAncestor(anchor);
+    const bottomBoundary = overflowAncestor ? overflowAncestor.getBoundingClientRect().bottom : window.innerHeight;
+    const newHeight = bottomBoundary - anchor.getBoundingClientRect().bottom - margin;
+    setHeight(Math.max(newHeight, 0));
+  }, [anchorRef, margin]);
+  useLayoutEffect(() => {
+    show && computeHeight();
+  }, [show, computeHeight]);
+  return [height, computeHeight];
+};
+
 const scrollIntoView = element => element == null ? void 0 : element.scrollIntoView({
   block: 'nearest'
 });
@@ -290,4 +323,5 @@ exports.autocomplete = autocomplete;
 exports.groupedTraversal = groupedTraversal;
 exports.linearTraversal = linearTraversal;
 exports.supercomplete = supercomplete;
+exports.useAutoHeight = useAutoHeight;
 exports.useAutocomplete = useAutocomplete;

dist/esm/hooks/useAutoHeight.js

@@ -0,0 +1,36 @@
+import { useState, useCallback, useLayoutEffect as useLayoutEffect$1, useEffect } from 'react';
+
+const useLayoutEffect = typeof window !== 'undefined' && window.document && window.document.createElement ? useLayoutEffect$1 : useEffect;
+const findOverflowAncestor = element => {
+  while (element) {
+    element = element.parentElement;
+    if (!element || element === document.body) return;
+    const {
+      overflow,
+      overflowX,
+      overflowY
+    } = getComputedStyle(element);
+    if (/auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX)) return element;
+  }
+};
+const useAutoHeight = ({
+  anchorRef,
+  show,
+  margin = 0
+}) => {
+  const [height, setHeight] = useState();
+  const computeHeight = useCallback(() => {
+    const anchor = anchorRef.current;
+    if (!anchor) return;
+    const overflowAncestor = findOverflowAncestor(anchor);
+    const bottomBoundary = overflowAncestor ? overflowAncestor.getBoundingClientRect().bottom : window.innerHeight;
+    const newHeight = bottomBoundary - anchor.getBoundingClientRect().bottom - margin;
+    setHeight(Math.max(newHeight, 0));
+  }, [anchorRef, margin]);
+  useLayoutEffect(() => {
+    show && computeHeight();
+  }, [show, computeHeight]);
+  return [height, computeHeight];
+};
+
+export { useAutoHeight };

dist/esm/index.js

@@ -1,4 +1,5 @@
 export { useAutocomplete } from './hooks/useAutocomplete.js';
+export { useAutoHeight } from './hooks/useAutoHeight.js';
 export { autocomplete } from './features/autocomplete.js';
 export { supercomplete } from './features/supercomplete.js';
 export { linearTraversal } from './traversals/linearTraversal.js';

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@szhsin/react-autocomplete",
-  "version": "0.8.4",
+  "version": "0.8.5",
   "description": "",
   "author": "Zheng Song",
   "license": "MIT",

src/common.ts

@@ -2,6 +2,10 @@ import type { HTMLAttributes, InputHTMLAttributes } from 'react';
 
 /// types
 
+export type PropsWithObjectRef<T> = T extends HTMLAttributes<infer E>
+  ? T & { ref: React.RefObject<E> }
+  : never;
+
 export interface GetProps<T> {
   getInputProps: () => InputHTMLAttributes<HTMLInputElement>;
   getListProps: () => HTMLAttributes<HTMLElement>;

src/hooks/useAutoHeight.ts

@@ -0,0 +1,47 @@
+import { useState, useCallback, useEffect, useLayoutEffect as _useLayoutEffect } from 'react';
+
+const useLayoutEffect =
+  // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
+  typeof window !== 'undefined' && window.document && window.document.createElement!
+    ? _useLayoutEffect
+    : useEffect;
+
+const findOverflowAncestor = (element: Element | null) => {
+  while (element) {
+    element = element.parentElement;
+    if (!element || element === document.body) return;
+    const { overflow, overflowX, overflowY } = getComputedStyle(element);
+    if (/auto|scroll|overlay|hidden/.test(overflow + overflowY + overflowX)) return element;
+  }
+};
+
+const useAutoHeight = ({
+  anchorRef,
+  show,
+  margin = 0
+}: {
+  anchorRef: React.RefObject<Element>;
+  show?: boolean;
+  margin?: number;
+}) => {
+  const [height, setHeight] = useState<React.CSSProperties['maxHeight']>();
+
+  const computeHeight = useCallback(() => {
+    const anchor = anchorRef.current;
+    if (!anchor) return;
+    const overflowAncestor = findOverflowAncestor(anchor);
+    const bottomBoundary = overflowAncestor
+      ? overflowAncestor.getBoundingClientRect().bottom
+      : window.innerHeight;
+    const newHeight = bottomBoundary - anchor.getBoundingClientRect().bottom - margin;
+    setHeight(Math.max(newHeight, 0));
+  }, [anchorRef, margin]);
+
+  useLayoutEffect(() => {
+    show && computeHeight();
+  }, [show, computeHeight]);
+
+  return [height, computeHeight] as const;
+};
+
+export { useAutoHeight };

src/hooks/useAutocomplete.ts

@@ -1,10 +1,12 @@
 import { useState, useRef, useCallback } from 'react';
+import type { InputHTMLAttributes } from 'react';
 import type {
   GetProps,
   AutocompleteProps,
   AutocompleteState,
   Instance,
-  Contextual
+  Contextual,
+  PropsWithObjectRef
 } from '../common';
 import { mergeEvents } from '../utils/mergeEvents';
 
@@ -53,7 +55,7 @@ const useAutocomplete = <T, FeatureActions>({
     ...restFeature
   } = useFeature({ ...contextual, ...useTraversal(contextual) });
 
-  const getInputProps: GetProps<T>['getInputProps'] = () => {
+  const getInputProps: () => PropsWithObjectRef<InputHTMLAttributes<HTMLInputElement>> = () => {
     const { onBlur, ...rest } = _getInputProps();
     return {
       ...rest,

src/index.ts

@@ -1,4 +1,5 @@
 export { useAutocomplete } from './hooks/useAutocomplete';
+export { useAutoHeight } from './hooks/useAutoHeight';
 export { autocomplete } from './features/autocomplete';
 export { supercomplete } from './features/supercomplete';
 export { linearTraversal } from './traversals/linearTraversal';

types/common.d.ts

@@ -1,4 +1,7 @@
 import type { HTMLAttributes, InputHTMLAttributes } from 'react';
+export type PropsWithObjectRef<T> = T extends HTMLAttributes<infer E> ? T & {
+    ref: React.RefObject<E>;
+} : never;
 export interface GetProps<T> {
     getInputProps: () => InputHTMLAttributes<HTMLInputElement>;
     getListProps: () => HTMLAttributes<HTMLElement>;

types/hooks/useAutoHeight.d.ts

@@ -0,0 +1,6 @@
+declare const useAutoHeight: ({ anchorRef, show, margin }: {
+    anchorRef: React.RefObject<Element>;
+    show?: boolean | undefined;
+    margin?: number | undefined;
+}) => readonly [import("csstype").Property.MaxHeight<string | number> | undefined, () => void];
+export { useAutoHeight };

types/hooks/useAutocomplete.d.ts

@@ -1,12 +1,12 @@
-/// <reference types="react" />
-import type { GetProps, AutocompleteProps } from '../common';
+import type { InputHTMLAttributes } from 'react';
+import type { GetProps, AutocompleteProps, PropsWithObjectRef } from '../common';
 declare const useAutocomplete: <T, FeatureActions>({ onChange, isItemDisabled, feature: useFeature, traversal: useTraversal, getItemValue: _getItemValue }: AutocompleteProps<T, FeatureActions>) => {
     setInputValue: (value: string) => void;
     focusItem: T | null | undefined;
     setFocusItem: (item?: T | null | undefined) => void;
     open: boolean;
     setOpen: (value: boolean) => void;
-    getInputProps: () => import("react").InputHTMLAttributes<HTMLInputElement>;
+    getInputProps: () => PropsWithObjectRef<InputHTMLAttributes<HTMLInputElement>>;
     getListProps: () => import("react").HTMLAttributes<HTMLElement>;
-} & Omit<GetProps<T> & FeatureActions, "getInputProps" | "getListProps">;
+} & Omit<GetProps<T> & FeatureActions, "getListProps" | "getInputProps">;
 export { useAutocomplete };

types/index.d.ts

@@ -1,4 +1,5 @@
 export { useAutocomplete } from './hooks/useAutocomplete';
+export { useAutoHeight } from './hooks/useAutoHeight';
 export { autocomplete } from './features/autocomplete';
 export { supercomplete } from './features/supercomplete';
 export { linearTraversal } from './traversals/linearTraversal';