@workday/canvas-kit-react/dist/commonjs/popup/lib/hooks/usePopupStack.d.ts

The parent module that contains all Workday Canvas Kit React components

import React from 'react';
/**
 * **Note:** If you're using {@link Popper}, you do not need to use this hook directly.
 *
 * This hook will add the `stackRef` element to the {@link PopupStack} on mount and remove on unmount. If
 * you use `Popper`, the popper `stackRef` is automatically added/removed from the `PopupStack`. The
 * `PopupStack` is required for proper z-index values to ensure Popups are rendered correct. It is
 * also required for global listeners like click outside or escape key closing a popup. Without the
 * `PopupStack`, all popups will close rather than only the topmost one.
 *
 * If `ref` is provided, it will be the same as `stackRef`. If `ref` is not provided`,
 * this hook will create one and return it.
 *
 * This hook should be used by all stacked UIs unless using the `Popper` component.
 *
 * ```tsx
 * const model = usePopupModel();
 * usePopupStack(model.state.stackRef, model.state.targetRef);
 *
 * // add some popup functionality
 * useCloseOnOutsideClick(model);
 * useCloseOnEscape(model);
 *
 * return (
 *   <>
 *     <button ref={model.state.targetRef}>Open Popup</button>
 *     {model.state.visibility !== 'hidden'
 *       ? ReactDOM.createPortal(<div>Popup Contents</div>, model.state.stackRef.current)
 *       : null}
 *   </>
 * );
 * ```
 *
 * @param ref This ref will be managed by the PopupStack and should not be managed by React. Do
 * not apply this stackRef to a React element. Doing so will result in an error. Instead, use this
 * `stackRef` directly with `ReactDOM.createPortal(<YourComponent>, stackRef.current!)`. This is
 * definitely strange for React code, but is necessary for the PopupStack to remain framework
 * agnostic and flexible to integrate with existing `PopupStack` systems. If not provided, this hook
 * will create one and return that `stackRef` instead.
 * @param target Usually the trigger of a popup. This will fix `bringToTop` and should be provided
 * by all ephemeral-type popups (like Tooltips, Select menus, etc). It will also add in clickOutside
 * detection.
 */
export declare const usePopupStack: <E extends HTMLElement>(ref?: React.Ref<E> | undefined, target?: HTMLElement | React.RefObject<HTMLElement>) => React.RefObject<HTMLElement>;
//# sourceMappingURL=usePopupStack.d.ts.map