feat(Popup): add transition complete events

transition

src/components/Popup/Popup.scss

@@ -7,6 +7,7 @@ $arrow-offset: 9px;
 $arrow-border: 5px;
 $arrow-circle-width: 28px;
 $arrow-circle-height: 30px;
+$transition-duration: 100ms;
 $transition-distance: 10px;
 
 #{$block} {
@@ -42,7 +43,7 @@ $transition-distance: 10px;
 
     @at-root [data-floating-ui-status='open'] &,
         [data-floating-ui-status='close'] & {
-        transition-duration: 100ms;
+        transition-duration: $transition-duration;
     }
 
     @at-root [data-floating-ui-status='initial'] &,

src/components/Popup/Popup.tsx

@@ -28,6 +28,7 @@ import type {
 } from '@floating-ui/react';
 
 import {useForkRef} from '../../hooks';
+import {usePrevious} from '../../hooks/private';
 import {Portal} from '../Portal';
 import type {AriaLabelingProps, DOMProps, QAProps} from '../types';
 import {block} from '../utils/cn';
@@ -116,8 +117,12 @@ export interface PopupProps extends DOMProps, AriaLabelingProps, QAProps {
     role?: UseRoleProps['role'];
     /** HTML `id` attribute */
     id?: string;
-    // CSS property `z-index`
+    /** CSS property `z-index` */
     zIndex?: number;
+    /** Callback called when `Popup` is opened and "in" transition is completed */
+    onTransitionInComplete?: () => void;
+    /** Callback called when `Popup` is closed and "out" transition is completed */
+    onTransitionOutComplete?: () => void;
 }
 
 const b = block('popup');
@@ -155,6 +160,8 @@ export function Popup({
     id,
     role: roleProp,
     zIndex = 1000,
+    onTransitionInComplete,
+    onTransitionOutComplete,
     ...restProps
 }: PopupProps) {
     const contentRef = React.useRef<HTMLDivElement>(null);
@@ -240,6 +247,7 @@ export function Popup({
     }, [setGetAnchorProps, getReferenceProps]);
 
     const {isMounted, status} = useTransitionStatus(context, {duration: TRANSITION_DURATION});
+    const previousStatus = usePrevious(status);
 
     React.useEffect(() => {
         if (isMounted && elements.reference && elements.floating) {
@@ -255,6 +263,24 @@ export function Popup({
         initialFocusRef,
     );
 
+    const handleTransitionEnd = React.useCallback(
+        (event: React.TransitionEvent) => {
+            // There are two simultaneous transitions running at the same time
+            // Use specific name to only notify once
+            if (status === 'open' && event.propertyName === 'transform') {
+                onTransitionInComplete?.();
+            }
+        },
+        [status, onTransitionInComplete],
+    );
+
+    // Cannot use transitionend event for "out" transition due to unmounting from the DOM
+    React.useEffect(() => {
+        if (status === 'unmounted' && previousStatus === 'close') {
+            onTransitionOutComplete?.();
+        }
+    }, [status, previousStatus, onTransitionOutComplete]);
+
     return isMounted || keepMounted ? (
         <Portal disablePortal={disablePortal}>
             <FloatingFocusManager
@@ -279,7 +305,7 @@ export function Popup({
                     }}
                     data-floating-ui-placement={finalPlacement}
                     data-floating-ui-status={status}
-                    {...getFloatingProps(floatingProps)}
+                    {...getFloatingProps({...floatingProps, onTransitionEnd: handleTransitionEnd})}
                 >
                     <div
                         ref={contentRef}

src/hooks/private/index.ts

@@ -3,10 +3,11 @@ export * from './useCheckbox';
 export * from './useCloseOnTimeout';
 export * from './useConditionallyControlledState';
 export * from './useElementSize';
+export * from './useFormResetHandler';
 export * from './useHover';
+export * from './usePrevious';
 export * from './useRadio';
 export * from './useRadioGroup';
 export * from './useRestoreFocus';
-export * from './useUpdateEffect';
 export * from './useTooltipVisible';
-export * from './useFormResetHandler';
+export * from './useUpdateEffect';

src/hooks/private/usePrevious/README.md

@@ -0,0 +1,13 @@
+# usePrevious
+
+The `usePrevious` hook stores the previous value during renders
+
+## Properties
+
+| Name  | Description                      | Type  | Default |
+| :---- | :------------------------------- | :---: | :-----: |
+| value | Any value, usually from useState | `any` |         |
+
+## Result
+
+Previous value

src/hooks/private/usePrevious/index.ts

@@ -0,0 +1 @@
+export {usePrevious} from './usePrevious';

src/hooks/private/usePrevious/usePrevious.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export function usePrevious<T>(value: T): T | undefined {
+    const currentRef = React.useRef<T>(value);
+    const previousRef = React.useRef<T>();
+    if (currentRef.current !== value) {
+        previousRef.current = currentRef.current;
+        currentRef.current = value;
+    }
+    return previousRef.current;
+}