refactor: update popover animation

Author: mertsincan

apps/showcase/docs/styled/components/popover/features.mdx

@@ -1,6 +1,6 @@
 ---
 title: Popover
-description: Popover is a container component that can overlay other components on page.
+description: Popover is an overlay container that displays content relative to a trigger.
 component: popover
 ---
 
@@ -14,13 +14,19 @@ import { Popover } from '@primereact/ui/popover';
 
 ```tsx
 <Popover.Root>
-    <Popover.Trigger></Popover.Trigger>
+    <Popover.Trigger />
     <Popover.Portal>
-        <Popover.Positioner sideOffset={12} side="bottom" align="start">
+        <Popover.Positioner>
             <Popover.Popup>
-                <Popover.Content></Popover.Content>
-                <Popover.Close></Popover.Close>
                 <Popover.Arrow />
+                <Popover.Header>
+                    <Popover.Title />
+                    <Popover.Close />
+                </Popover.Header>
+                <Popover.Content>
+                    <Popover.Description />
+                </Popover.Content>
+                <Popover.Footer />
             </Popover.Popup>
         </Popover.Positioner>
     </Popover.Portal>
@@ -31,30 +37,30 @@ import { Popover } from '@primereact/ui/popover';
 
 ### Controlled
 
-Use the `open` and `onOpenChange` props to control the popover state.
+Control popover state from outside with the `open` and `onOpenChange` props.
 
 <DocDemoViewer name="popover:controlled-demo" />
 
 ### Alignment
 
-Use the `side` and `align` props to align the popover. To give an offset to the popover, use the `sideOffset` and `alignOffset` props.
+Use `side` and `align` to control placement. Use `sideOffset` and `alignOffset` to fine-tune spacing.
 
 <DocDemoViewer name="popover:alignment-demo" />
 
 ## Accessibility
 
 ### Screen Reader
 
-Popover component uses dialog role and since any attribute is passed to the root element, attributes like aria-label or aria-labelledby can be defined to describe the popup contents. In addition aria-modal is added since focus is kept within the popup.
+Popover uses the `dialog` role. Since attributes are passed to the root element, you can define `aria-label` or `aria-labelledby` to describe popup content. `aria-modal` is applied because focus is kept within the popup.
 
-Popover adds aria-expanded state attribute and aria-controls to the trigger so that the relation between the trigger and the popup is defined.
+Popover adds `aria-expanded` and `aria-controls` to the trigger to define its relation with the popup.
 
 ### Popover Keyboard Support
 
 When the popup gets opened, the first focusable element receives the focus and this can be customized by adding autofocus to an element within the popup.
 
-| Key           | Function                                                            |
-| ------------- | ------------------------------------------------------------------- |
-| `tab`         | Moves focus to the next the focusable element within the popup.     |
-| `shift + tab` | Moves focus to the previous the focusable element within the popup. |
-| `escape`      | Closes the popup and moves focus to the trigger.                    |
+| Key           | Function                                                        |
+| ------------- | --------------------------------------------------------------- |
+| `tab`         | Moves focus to the next focusable element within the popup.     |
+| `shift + tab` | Moves focus to the previous focusable element within the popup. |
+| `escape`      | Closes the popup and moves focus to the trigger.                |

apps/showcase/registry.json

@@ -8,24 +8,31 @@ export const usePopover = withHeadless({
     name: 'usePopover',
     defaultProps,
     setup: ({ props }) => {
-        const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
-        const [positionerEl, setPositionerEl] = React.useState<HTMLDivElement | null>(null);
-        const [arrowEl, setArrowEl] = React.useState<HTMLDivElement | null>(null);
         const [openState, setOpenState] = useControlledState({
             value: props.open,
             defaultValue: props.defaultOpen,
             onChange: props.onOpenChange
         });
+        const [rendered, setRendered] = React.useState<boolean>(!!openState);
+
+        // elements
+        const [anchorEl, setAnchorEl] = React.useState<HTMLElement | null>(null);
+        const [positionerEl, setPositionerEl] = React.useState<HTMLDivElement | null>(null);
+        const [popupEl, setPopupEl] = React.useState<HTMLElement | null>(null);
+        const [arrowEl, setArrowEl] = React.useState<HTMLDivElement | null>(null);
 
         const state = {
             open: openState,
+            rendered,
             anchorEl,
             positionerEl,
+            popupEl,
             arrowEl
         };
 
         const anchorRef = React.useRef<HTMLElement | null>(null);
         const positionerRef = React.useRef<HTMLDivElement | null>(null);
+        const popupRef = React.useRef<HTMLElement | null>(null);
         const arrowRef = React.useRef<HTMLDivElement | null>(null);
 
         const setAnchorRef = React.useCallback((node: HTMLElement | null) => {
@@ -42,6 +49,13 @@ export const usePopover = withHeadless({
             setPositionerEl(node);
         }, []);
 
+        const setPopupRef = React.useCallback((node: HTMLElement | null) => {
+            if (node === popupRef.current) return;
+
+            popupRef.current = node;
+            setPopupEl(node);
+        }, []);
+
         const setArrowRef = React.useCallback((node: HTMLDivElement | null) => {
             if (node === arrowRef.current) return;
 
@@ -71,6 +85,13 @@ export const usePopover = withHeadless({
             }
         });
 
+        // effects
+        React.useEffect(() => {
+            if (openState) {
+                setRendered(true);
+            }
+        }, [openState]);
+
         React.useEffect(() => {
             if (openState) {
                 bindOutsideClickListener();
@@ -82,8 +103,10 @@ export const usePopover = withHeadless({
         return {
             state,
             setOpen,
+            setRendered,
             setArrowRef,
             setAnchorRef,
+            setPopupRef,
             setPositionerRef
         };
     }

packages/@primereact/headless/src/popover/usePopover.ts

@@ -2,46 +2,48 @@ import { createStyles } from '@primereact/styles/utils';
 import type { PopoverRootInstance } from '@primereact/types/shared/popover';
 
 const theme = /*css*/ `
-.p-popover-popup{
+.p-popover-popup {
     position: relative;
     background: light-dark(var(--p-surface-0), var(--p-surface-900));
     border-radius: 0.5rem;
     border: 1px solid var(--p-content-border-color);
     box-shadow: 0 4px 8px 0 rgb(0 0 0 / 0.05);
+    transform-origin: var(--transform-origin);
+    will-change: transform, opacity;
 }
 
-.p-popover-content{
+.p-popover-content {
     padding: 0.5rem 1rem 1rem 1rem;
 }
 
-.p-popover-header{
+.p-popover-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 0.5rem;
     padding: 1rem 1rem 0 1rem;
 }
 
-.p-popover-footer{
+.p-popover-footer {
     display: flex;
     justify-content: space-between;
     align-items: center;
     gap: 0.5rem;
     padding: 0 1rem 1rem 1rem;
 }
 
-.p-popover-title{
+.p-popover-title {
     color: light-dark(var(--p-surface-900), var(--p-surface-0));
     font-size: 0.875rem;
     font-weight: 500;
 }
 
-.p-popover-description{
+.p-popover-description {
     color: light-dark(var(--p-surface-500), var(--p-surface-400));
     font-size: 0.875rem;
 }
 
-.p-popover-arrow{
+.p-popover-arrow {
     position: absolute;
     border: 1px solid var(--p-content-border-color);
     background: light-dark(var(--p-surface-0), var(--p-surface-900));

packages/@primereact/styles/src/popover/Popover.style.ts

@@ -10,6 +10,7 @@
  */
 import type { ComponentInstance } from '@primereact/types/core';
 import type { BaseComponentProps, PassThroughType } from '..';
+import type { useMotionProps } from '@primereact/types/shared/motion';
 import type { PopoverRootInstance } from './PopoverRoot.types';
 
 /**
@@ -36,6 +37,10 @@ export interface PopoverPopupProps extends BaseComponentProps<PopoverPopupInstan
      * @default true
      */
     autoFocus?: boolean;
+    /**
+     * Used to apply motion to the popup element. It accepts the same properties as useMotion hook.
+     */
+    motionProps?: useMotionProps | undefined;
 }
 
 /**

packages/@primereact/types/src/shared/popover/PopoverPopup.types.ts

@@ -10,7 +10,6 @@
  */
 import type { ComponentInstance } from '@primereact/types/core';
 import type { BaseComponentProps, PassThroughType } from '..';
-import type { useMotionProps } from '@primereact/types/shared/motion';
 import type { usePositionerProps } from '../positioner';
 import type { PopoverRootInstance } from './PopoverRoot.types';
 
@@ -32,12 +31,7 @@ export interface PopoverPositionerPassThrough {
 /**
  * Defines valid properties in PopoverPositioner component.
  */
-export interface PopoverPositionerProps extends BaseComponentProps<PopoverPositionerInstance, usePositionerProps, PopoverPositionerPassThrough> {
-    /**
-     * Used to apply motion to the positioner element. It accepts the same properties as useMotion hook.
-     */
-    motionProps?: useMotionProps | undefined;
-}
+export interface PopoverPositionerProps extends BaseComponentProps<PopoverPositionerInstance, usePositionerProps, PopoverPositionerPassThrough> {}
 
 /**
  * Defines valid state in PopoverPositioner component.

packages/@primereact/types/src/shared/popover/PopoverPositioner.types.ts

@@ -53,6 +53,10 @@ export interface usePopoverState {
      * Whether the popover is open.
      */
     open: boolean | undefined;
+    /**
+     * Whether the popover positioner is rendered (stays true during exit animation).
+     */
+    rendered: boolean;
     /**
      * The anchor element.
      */
@@ -61,6 +65,10 @@ export interface usePopoverState {
      * The positioner element.
      */
     positionerEl: HTMLDivElement | null;
+    /**
+     * The popup element.
+     */
+    popupEl: HTMLElement | null;
     /**
      * The arrow element.
      */
@@ -91,6 +99,14 @@ export interface usePopoverExposes {
      * Sets the positioner element.
      */
     setPositionerRef?: (node: HTMLDivElement | null) => void;
+    /**
+     * Sets the popup element.
+     */
+    setPopupRef?: (node: HTMLElement | null) => void;
+    /**
+     * Sets the rendered state of the positioner.
+     */
+    setRendered?: (rendered: boolean) => void;
 }
 
 /**

packages/@primereact/types/src/shared/popover/usePopover.types.ts

@@ -1,5 +1,6 @@
 import type { PopoverPopupProps } from '@primereact/types/shared/popover';
 
 export const defaultPopupProps: PopoverPopupProps = {
-    as: 'div'
+    as: 'div',
+    motionProps: undefined
 };

packages/primereact/src/popover/popup/PopoverPopup.props.ts

@@ -1,5 +1,7 @@
 'use client';
 import { Component, withComponent } from '@primereact/core/component';
+import { useMotion } from '@primereact/core/motion';
+import type { MotionEvent } from '@primeuix/motion';
 import { mergeProps } from '@primeuix/utils';
 import * as React from 'react';
 import { usePopoverContext } from '../Popover.context';
@@ -8,10 +10,21 @@ import { defaultPopupProps } from './PopoverPopup.props';
 export const PopoverPopup = withComponent({
     name: 'Popover.Popup',
     defaultProps: defaultPopupProps,
-    setup() {
+    setup({ props }) {
         const popover = usePopoverContext();
 
-        return { popover };
+        const motion = useMotion({
+            name: 'p-anchored-overlay',
+            ...props.motionProps,
+            elementRef: popover?.state.popupEl,
+            visible: !!popover?.state?.open,
+            onAfterLeave: (event?: MotionEvent) => {
+                props.motionProps?.onAfterLeave?.(event);
+                popover?.setRendered?.(false);
+            }
+        });
+
+        return { popover, motion };
     },
     render(instance) {
         const { props, ptmi, popover } = instance;
@@ -25,6 +38,6 @@ export const PopoverPopup = withComponent({
             ptmi('root')
         );
 
-        return <Component instance={instance} attrs={rootProps} children={props.children} />;
+        return <Component instance={instance} attrs={rootProps} children={props.children} ref={popover?.setPopupRef} />;
     }
 });

packages/primereact/src/popover/popup/PopoverPopup.tsx

@@ -3,6 +3,5 @@ import type { PopoverPositionerProps } from '@primereact/types/shared/popover';
 
 export const defaultPositionerProps: PopoverPositionerProps = {
     ...HeadlessPositioner.defaultProps,
-    as: 'div',
-    motionProps: undefined
+    as: 'div'
 };