@workday/canvas-kit-react/dist/es6/popup/lib/hooks/useTransferOnFullscreenEnter.js

The parent module that contains all Workday Canvas Kit React components

import React from 'react';
import screenfull from 'screenfull';
import { PopupStack } from '@workday/canvas-kit-popup-stack';
import { createElemPropsHook } from '@workday/canvas-kit-react/common';
import { usePopupModel } from './usePopupModel';
/**
 * Makes the popup transfer to the fullscreen element when fullscreen is entered. Without this, the
 * popup would seem to disappear because the popup container element is not a child of the
 * fullscreen element.
 *
 * Don't use this in conjunction with a hook that will close the popup when entering fullscreen.
 * Doing so would open the popup when the intention was to close it.
 */
export const useTransferOnFullscreenEnter = createElemPropsHook(usePopupModel)(model => {
    const handler = React.useCallback((event) => {
        if (screenfull.isFullscreen && model.state.stackRef.current) {
            PopupStack.transferToCurrentContext({
                element: model.state.stackRef.current,
                owner: model.state.targetRef.current,
            });
        }
    }, [model.state.stackRef, model.state.targetRef]);
    const visible = model.state.visibility !== 'hidden';
    React.useEffect(() => {
        if (!visible) {
            return;
        }
        if (screenfull.isEnabled) {
            screenfull.on('change', handler);
            return () => {
                screenfull.off('change', handler);
            };
        }
        return;
    }, [handler, visible]);
    return {};
});