81 lines
2.9 KiB
JavaScript
81 lines
2.9 KiB
JavaScript
'use client';
|
|
import * as React from 'react';
|
|
import { Dialog } from '@fluentui/react-dialog';
|
|
import { slot } from '@fluentui/react-utilities';
|
|
import { useFluent_unstable as useFluent } from '@fluentui/react-shared-contexts';
|
|
import { toMountNodeProps } from '@fluentui/react-portal';
|
|
import { OverlayDrawerMotion, OverlaySurfaceBackdropMotion } from '../../shared/drawerMotions';
|
|
import { useDrawerDefaultProps } from '../../shared/useDrawerDefaultProps';
|
|
import { OverlayDrawerSurface } from './OverlayDrawerSurface';
|
|
import { mergePresenceSlots } from '../../shared/drawerMotionUtils';
|
|
const STATIC_MOTION = {
|
|
active: true,
|
|
canRender: true,
|
|
ref: /*#__PURE__*/ React.createRef(),
|
|
type: 'idle'
|
|
};
|
|
/**
|
|
* Create the state required to render OverlayDrawer.
|
|
*
|
|
* The returned state can be modified with hooks such as useOverlayDrawerStyles_unstable,
|
|
* before being passed to renderOverlayDrawer_unstable.
|
|
*
|
|
* @param props - props from this instance of OverlayDrawer
|
|
* @param ref - reference to root HTMLElement of OverlayDrawer
|
|
*/ export const useOverlayDrawer_unstable = (props, ref)=>{
|
|
const { open, size, position, unmountOnClose } = useDrawerDefaultProps(props);
|
|
const { modalType = 'modal', inertTrapFocus, onOpenChange, backdropMotion, surfaceMotion, mountNode } = props;
|
|
const { dir, targetDocument } = useFluent();
|
|
const { element: mountNodeElement } = toMountNodeProps(mountNode);
|
|
const hasMountNodeElement = Boolean(mountNodeElement && (targetDocument === null || targetDocument === void 0 ? void 0 : targetDocument.body) !== mountNodeElement);
|
|
const backdropProps = slot.resolveShorthand(props.backdrop);
|
|
const hasCustomBackdrop = modalType !== 'non-modal' && backdropProps !== null;
|
|
const root = slot.always({
|
|
...props,
|
|
ref,
|
|
unmountOnClose,
|
|
backdrop: hasCustomBackdrop ? {
|
|
...backdropProps
|
|
} : null,
|
|
backdropMotion: mergePresenceSlots(backdropMotion, OverlaySurfaceBackdropMotion, {
|
|
size
|
|
})
|
|
}, {
|
|
elementType: OverlayDrawerSurface
|
|
});
|
|
const dialog = slot.always({
|
|
open,
|
|
onOpenChange,
|
|
inertTrapFocus,
|
|
modalType,
|
|
unmountOnClose,
|
|
surfaceMotion: mergePresenceSlots(surfaceMotion, OverlayDrawerMotion, {
|
|
position,
|
|
size,
|
|
dir
|
|
}),
|
|
/**
|
|
* children is not needed here because we construct the children in the render function,
|
|
* but it's required by DialogProps
|
|
*/ children: null
|
|
}, {
|
|
elementType: Dialog
|
|
});
|
|
return {
|
|
components: {
|
|
root: OverlayDrawerSurface,
|
|
dialog: Dialog
|
|
},
|
|
root,
|
|
dialog,
|
|
open,
|
|
size,
|
|
position,
|
|
hasMountNodeElement,
|
|
unmountOnClose,
|
|
// Deprecated props
|
|
mountNode,
|
|
motion: STATIC_MOTION
|
|
};
|
|
};
|