UNPKG

@workday/canvas-kit-react

Version:

The parent module that contains all Workday Canvas Kit React components

45 lines 2.27 kB
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