@navikt/ds-react
Version:
React components from the Norwegian Labour and Welfare Administration.
39 lines (38 loc) • 2.15 kB
TypeScript
type TransitionStatus = "entering" | "exiting" | "idle" | undefined;
/**
* Transition status state machine for components that animate between an
* `open` boolean and actual mount/unmount. Keeps the element mounted while
* exit animations run and introduces an optional stable `idle` phase.
*
* Adapted from MUI Base + Floating UI examples:
* - Source: https://github.com/mui/base-ui/blob/6fd69008d83561dbe75ff89acf270f0fac3e0049/packages/react/src/utils/useTransitionStatus.ts
* - Originally based on https://github.com/floating-ui/floating-ui/blob/7c33a3d0198a9b523d54ae2c37cedb315a309452/packages/react/src/hooks/useTransition.ts
*
* States (transitionStatus):
* - "entering" : just entered (initial frame of enter) OR re-entering to reach "idle".
* - "idle" : stable open (only when `enableIdleState === true`).
* - "exiting" : exit animation is running; element still mounted.
* - undefined : closed (unmounted) OR stable open when idle state is disabled.
* When `enableIdleState` is false we clear the label after
* the first frame so styling can rely purely on `mounted`.
*
* Distinction:
* - `mounted` tells you whether to render DOM.
* - `transitionStatus` tells you which phase-specific classes to apply.
*
* Frame separation: state changes that must trigger CSS transitions are
* scheduled with `requestAnimationFrame` so the browser sees distinct style
* mutations across frames (avoids missed transitions due to batching).
*
* @param open Controls visibility lifecycle.
* @param enableIdleState Insert a persistent "idle" phase after entering.
* @param deferExitingState Delay entering the exit phase by one frame to allow
* measurement / layout work before applying exit styles.
*/
declare function useTransitionStatus(open: boolean, enableIdleState?: boolean, deferExitingState?: boolean): {
mounted: boolean;
setMounted: import("react").Dispatch<import("react").SetStateAction<boolean>>;
transitionStatus: TransitionStatus;
};
export { useTransitionStatus };
export type { TransitionStatus };