popover

actifyjs · Nov 12, 2024 · 5080856 · 5080856
1 parent 33e2e10
commit 5080856
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 15 deletions.
diff --git a/packages/actify/src/components/Autocomplete/Autocomplete.tsx b/packages/actify/src/components/Autocomplete/Autocomplete.tsx
@@ -40,6 +40,7 @@ const Autocomplete = <T extends object>(props: AutocompleteProps<T>) => {
         variant={props.variant}
         inputRef={inputRef}
         inputProps={inputProps}
+        onFocus={() => state.setOpen(true)}
         trailingIcon={
           <Icon
             style={{ cursor: 'pointer' }}
@@ -59,6 +60,7 @@ const Autocomplete = <T extends object>(props: AutocompleteProps<T>) => {
 
       {state.isOpen && (
         <Popover
+          offset={16}
           state={state}
           triggerRef={inputRef}
           popoverRef={popoverRef}

diff --git a/packages/actify/src/components/Menus/Menu.tsx b/packages/actify/src/components/Menus/Menu.tsx
@@ -40,7 +40,7 @@ export function Menu<T extends object>(props: MenuButtonProps<T>) {
       )}
       {props?.activator?.(ref, menuTriggerProps)}
       {state.isOpen && (
-        <Popover state={state} triggerRef={ref} placement={props.placement}>
+        <Popover state={state} triggerRef={ref}>
           <MenuRoot
             {...props}
             {...menuProps}

diff --git a/packages/actify/src/components/Popover/Popover.tsx b/packages/actify/src/components/Popover/Popover.tsx
@@ -17,25 +17,19 @@ interface PopoverProps extends Omit<AriaPopoverProps, 'popoverRef'> {
   popoverRef?: React.RefObject<Element | null>
 }
 
-const Popover = ({
-  state,
-  children,
-  offset = 16,
-  referenceWidth,
-  popoverRef: propRef,
-  ...props
-}: PopoverProps) => {
-  const popoverRef =
-    (propRef as React.RefObject<HTMLDivElement>) || React.useRef(null)
-  const { popoverProps, underlayProps, arrowProps, placement } = usePopover(
+const Popover = ({ children, referenceWidth, ...props }: PopoverProps) => {
+  const _popoverRef = React.useRef(null)
+  const { popoverRef = _popoverRef, state } = props
+
+  const { popoverProps, underlayProps } = usePopover(
     {
       ...props,
-      offset,
       popoverRef
     },
     state
   )
 
+  // make the width of the popover the same as the reference element
   popoverProps.style = {
     ...popoverProps.style,
     '--reference-width': referenceWidth + 'px'
@@ -44,8 +38,11 @@ const Popover = ({
   return (
     <Overlay>
       <div {...underlayProps} className={styles['underlay']} />
-      <div {...popoverProps} ref={popoverRef} className={styles['popover']}>
-        <DismissButton onDismiss={state.close} />
+      <div
+        {...popoverProps}
+        className={styles['popover']}
+        ref={popoverRef as React.RefObject<HTMLDivElement>}
+      >
         {children}
         <DismissButton onDismiss={state.close} />
       </div>