use select and autocomplete component

packages/actify/src/components/Autocomplete/Autocomplete.tsx

@@ -6,6 +6,8 @@ import { ListBox } from '../ListBox'
 import { Popover } from '../Popover'
 import React from 'react'
 import { TextField } from '../TextFields'
+import styles from './autocomplete.module.css'
+import { useResizeObserver } from './../../hooks'
 
 interface AutocompleteProps<T>
   extends Omit<AriaComboBoxProps<T>, 'children'>,
@@ -19,10 +21,13 @@ const Autocomplete = <T extends object>(props: AutocompleteProps<T>) => {
   const state = useComboBoxState({ ...props, defaultFilter: contains })
 
   // Setup refs and get props for child elements.
+  const ref = React.useRef<HTMLDivElement>(null)
   const inputRef = React.useRef<HTMLInputElement>(null)
   const listBoxRef = React.useRef(null)
   const popoverRef = React.useRef<HTMLDivElement>(null)
 
+  const referenceWidth = useResizeObserver(ref as React.RefObject<HTMLElement>)
+
   const { inputProps, listBoxProps } = useComboBox(
     {
       ...props,
@@ -34,11 +39,11 @@ const Autocomplete = <T extends object>(props: AutocompleteProps<T>) => {
   )
 
   return (
-    <div style={{ display: 'inline-flex', flexDirection: 'column' }}>
+    <div className={styles['autocomplete']} ref={ref}>
       <TextField
         label={props.label}
-        variant={props.variant}
         inputRef={inputRef}
+        variant={props.variant}
         inputProps={inputProps}
         onFocus={() => state.setOpen(true)}
         trailingIcon={
@@ -60,11 +65,11 @@ const Autocomplete = <T extends object>(props: AutocompleteProps<T>) => {
 
       {state.isOpen && (
         <Popover
-          offset={16}
           state={state}
-          triggerRef={inputRef}
+          triggerRef={ref}
           popoverRef={popoverRef}
           placement="bottom start"
+          referenceWidth={referenceWidth}
         >
           <ListBox
             state={state}

packages/actify/src/components/Autocomplete/autocomplete.module.css

@@ -0,0 +1,6 @@
+.autocomplete {
+  width: 100%;
+  position: relative;
+  display: inline-flex;
+  flex-direction: column;
+}

packages/actify/src/components/Select/Select.tsx

@@ -10,6 +10,7 @@ import React from 'react'
 import { TrailingIcon } from './TrailingIcon'
 import clsx from 'clsx'
 import styles from './select.module.css'
+import { useResizeObserver } from '../../hooks'
 
 interface SelectProps<T> extends AriaSelectOptions<T>, SelectStateOptions<T> {
   className?: string
@@ -21,9 +22,6 @@ interface SelectProps<T> extends AriaSelectOptions<T>, SelectStateOptions<T> {
 
 const Select = <T extends object>(props: SelectProps<T>) => {
   const state = useSelectState(props)
-  const [referenceWidth, setReferenceWidth] = React.useState<
-    number | undefined
-  >(0)
   const ref = React.useRef<HTMLButtonElement>(null)
 
   const { triggerProps, valueProps, menuProps } = useSelect(props, state, ref)
@@ -38,16 +36,7 @@ const Select = <T extends object>(props: SelectProps<T>) => {
     Tag = OutlinedField
   }
 
-  React.useEffect(() => {
-    const resizeObserver = new ResizeObserver(() => {
-      const width = ref?.current?.getBoundingClientRect().width
-      setReferenceWidth(width)
-    })
-    resizeObserver.observe(ref?.current as Element)
-    return () => {
-      resizeObserver.disconnect()
-    }
-  }, [])
+  const referenceWidth = useResizeObserver(ref as React.RefObject<HTMLElement>)
 
   return (
     <div

packages/actify/src/hooks/index.ts

@@ -8,4 +8,5 @@ export { useAttachable } from './useAttachable'
 export { useControllable } from './useControllable'
 export { mergeRefs, useMergedRefs } from './mergeRefs'
 export { useOnClickOutside } from './useOnClickOutside'
+export { useResizeObserver } from './useResizeObserver'
 export { useControllableState } from './useControllableState'

packages/actify/src/hooks/useResizeObserver.tsx

@@ -0,0 +1,18 @@
+import React from 'react'
+
+const useResizeObserver = (ref: React.RefObject<HTMLElement>) => {
+  const [width, setWidth] = React.useState(0)
+  React.useEffect(() => {
+    const resizeObserver = new ResizeObserver(() => {
+      const width = ref?.current?.getBoundingClientRect().width
+      setWidth(width)
+    })
+    resizeObserver.observe(ref?.current as Element)
+    return () => {
+      resizeObserver.disconnect()
+    }
+  }, [])
+  return width
+}
+
+export { useResizeObserver }