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

The parent module that contains all Workday Canvas Kit React components

import * as React from 'react';
import { createModelHook } from '@workday/canvas-kit-react/common';
import { useDisclosureModel } from '@workday/canvas-kit-react/disclosure';
// eslint-disable-next-line no-empty-function
const noop = () => { };
export const usePopupModel = createModelHook({
    // create enough of a model to use `Popup.Card` without a `Popup` container component.
    defaultContext: { state: {}, events: { show: noop, hide: noop } },
    defaultConfig: {
        ...useDisclosureModel.defaultConfig,
        /**
         * Optional reference to an element that should receive focus when a popup is hidden. If left
         * blank, focus will return to the `targetRef`
         */
        returnFocusRef: undefined,
        /**
         * Optional reference to an element that should receive focus when a popup is shown. If left blank,
         * focus will be moved to the first focusable element inside the popup.
         */
        initialFocusRef: undefined,
    },
    requiredConfig: useDisclosureModel.requiredConfig,
})(config => {
    const stackRef = React.useRef(null);
    const targetRef = React.useRef(null);
    const [placement, setPlacement] = React.useState('bottom');
    const disclosure = useDisclosureModel(config);
    const state = {
        ...disclosure.state,
        /**
         * Reference of the stack item used in the PopupStack. This value will be used in all
         * Popup-related behaviors.
         */
        stackRef,
        /**
         * Reference of the target element. This will point to the element that triggered the showing of a
         * Popup and is used in Popup-related behaviors.
         */
        targetRef,
        /**
         * Optional reference to an element that should receive focus when a popup is shown. If left blank,
         * focus will be moved to the first focusable element inside the popup.
         */
        initialFocusRef: config.initialFocusRef,
        /**
         * Optional reference to an element that should receive focus when a popup is hidden. If left
         * blank, focus will return to the `targetRef`
         */
        returnFocusRef: config.returnFocusRef,
        /**
         * The placement chosen by the positioning Popper. This should get set prior to showing the popup
         * content.
         * @default 'bottom'
         */
        placement,
    };
    const events = {
        ...disclosure.events,
        /**
         * Called whenever a popup placement changes around a target. This is useful for animations that
         * depend on the placement chosen.
         */
        updatePlacement(data) {
            setPlacement(data.placement);
        },
    };
    return {
        state,
        events,
    };
});
// create enough of a model to use `Popup.Card` without a `Popup` container component.
export const PopupModelContext = usePopupModel.Context;