@gravity-ui/uikit
Version:
Gravity UI base styling and components
147 lines (146 loc) • 7.99 kB
JavaScript
'use client';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import * as React from 'react';
import { FloatingFocusManager, FloatingNode, FloatingTree, arrow, autoUpdate, offset as floatingOffset, limitShift, shift, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useInteractions, useRole, useTransitionStatus, } from '@floating-ui/react';
import { useForkRef } from "../../hooks/index.js";
import { usePrevious } from "../../hooks/private/index.js";
import { Portal } from "../Portal/index.js";
import { block } from "../utils/cn.js";
import { filterDOMProps } from "../utils/filterDOMProps.js";
import { useLayer } from "../utils/layer-manager/index.js";
import { PopupArrow } from "./PopupArrow.js";
import { OVERFLOW_PADDING, TRANSITION_DURATION } from "./constants.js";
import i18n from "./i18n/index.js";
import { arrowStylesMiddleware, getOffsetOptions, getPlacementOptions } from "./utils.js";
import "./Popup.css";
const b = block('popup');
function PopupComponent({ keepMounted = false, hasArrow = false, open = false, onOpenChange, strategy, placement: placementProp, offset: offsetProp = 4, anchorElement, anchorRef, floatingMiddlewares, floatingContext, floatingInteractions, floatingRef, floatingStyles: floatingStylesProp, floatingClassName, modal = false, initialFocus: initialFocusProp, returnFocus = true, focusOrder, disableVisuallyHiddenDismiss = !modal, onClose, onEscapeKeyDown, onOutsideClick, disableEscapeKeyDown = false, disableOutsideClick = false, disableFocusOut = false, style, className, children, disablePortal = false, disableLayer = false, disableTransition = false, qa, role: roleProp, zIndex = 1000, onTransitionIn, onTransitionOut, onTransitionInComplete, onTransitionOutComplete, ...restProps }) {
useLayer({ open, type: 'popup', enabled: !disableLayer });
const contentRef = React.useRef(null);
const [arrowElement, setArrowElement] = React.useState(null);
const { offset } = getOffsetOptions(offsetProp, hasArrow);
const { placement, middleware: placementMiddleware } = getPlacementOptions(placementProp, disablePortal);
const handleOpenChange = React.useCallback((isOpen, event, reason) => {
onOpenChange?.(isOpen, event, reason);
if (isOpen || !event) {
return;
}
let closeReason;
if (reason === 'escape-key') {
closeReason = 'escapeKeyDown';
}
else if (reason === 'outside-press') {
closeReason = 'outsideClick';
}
else {
closeReason = reason;
}
if (closeReason === 'escapeKeyDown' && onEscapeKeyDown) {
onEscapeKeyDown(event);
}
if (closeReason === 'outsideClick' && onOutsideClick) {
onOutsideClick(event);
}
onClose?.(event, closeReason);
}, [onOpenChange, onClose, onEscapeKeyDown, onOutsideClick]);
const floatingNodeId = useFloatingNodeId();
const { refs, elements, floatingStyles, placement: finalPlacement, middlewareData, context, update, } = useFloating({
rootContext: floatingContext,
nodeId: floatingNodeId,
strategy,
placement: placement,
open,
onOpenChange: handleOpenChange,
middleware: floatingMiddlewares ?? [
floatingOffset(offset),
shift({
padding: OVERFLOW_PADDING,
// Offset 22 is size of the arrow (18) + padding (4)
limiter: limitShift({ offset: 4 + (hasArrow ? 18 : 0) }),
altBoundary: disablePortal,
}),
placementMiddleware,
hasArrow && arrow({ element: arrowElement, padding: 4 }),
hasArrow && arrowStylesMiddleware(),
],
});
React.useEffect(() => {
const element = anchorElement === undefined ? anchorRef?.current : anchorElement;
if (element !== undefined && element !== refs.reference.current) {
refs.setReference(element);
}
}, [anchorElement, anchorRef, refs]);
const role = useRole(context, {
enabled: Boolean(roleProp || modal),
role: roleProp ?? (modal ? 'dialog' : undefined),
});
const dismiss = useDismiss(context, {
enabled: !disableOutsideClick || !disableEscapeKeyDown,
outsidePress: !disableOutsideClick,
escapeKey: !disableEscapeKeyDown,
});
const { getFloatingProps } = useInteractions(floatingInteractions ?? [role, dismiss]);
const { isMounted, status } = useTransitionStatus(context, {
duration: disableTransition ? 0 : TRANSITION_DURATION,
});
const previousStatus = usePrevious(status);
React.useEffect(() => {
if (isMounted && elements.reference && elements.floating) {
return autoUpdate(elements.reference, elements.floating, update);
}
return undefined;
}, [isMounted, elements, update]);
const handleFloatingRef = useForkRef(refs.setFloating, floatingRef);
const handleTransitionEnd = React.useCallback((event) => {
// 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 these callbacks due to unmounting from the DOM
React.useEffect(() => {
if (status === 'initial' && previousStatus === 'unmounted') {
onTransitionIn?.();
}
if (status === 'close' && previousStatus === 'open') {
onTransitionOut?.();
}
if (status === 'unmounted' && previousStatus === 'close') {
onTransitionOutComplete?.();
}
}, [status, previousStatus, onTransitionIn, onTransitionOut, onTransitionOutComplete]);
let initialFocus = initialFocusProp;
if (initialFocus === undefined) {
if (modal) {
initialFocus = refs.floating;
}
else {
initialFocus = -1;
}
}
return (_jsx(FloatingNode, { id: floatingNodeId, children: isMounted || keepMounted ? (_jsx(Portal, { disablePortal: disablePortal, children: _jsx(FloatingFocusManager, { context: context, disabled: !isMounted, modal: modal, initialFocus: initialFocus, returnFocus: returnFocus, closeOnFocusOut: !disableFocusOut, visuallyHiddenDismiss: disableVisuallyHiddenDismiss ? false : i18n('close'), guards: modal || !disablePortal, order: focusOrder, children: _jsx("div", { ref: handleFloatingRef, className: floatingClassName, style: {
position: 'absolute',
top: 0,
left: 0,
zIndex,
width: 'max-content',
pointerEvents: isMounted ? 'auto' : 'none',
outline: 'none',
...floatingStyles,
...floatingStylesProp,
}, "data-floating-ui-placement": finalPlacement, "data-floating-ui-status": status, "aria-modal": modal && isMounted ? true : undefined, ...getFloatingProps({
onTransitionEnd: handleTransitionEnd,
}), children: _jsxs("div", { ref: contentRef, className: b({
open: isMounted,
'disable-transition': disableTransition,
}, className), style: style, "data-qa": qa, ...filterDOMProps(restProps), children: [hasArrow && (_jsx(PopupArrow, { ref: setArrowElement, styles: middlewareData.arrowStyles })), children] }) }) }) })) : null }));
}
export function Popup(props) {
const parentId = useFloatingParentNodeId();
if (parentId === null) {
return (_jsx(FloatingTree, { children: _jsx(PopupComponent, { ...props }) }));
}
return _jsx(PopupComponent, { ...props });
}
//# sourceMappingURL=Popup.js.map