@workday/canvas-kit-react
Version:
The parent module that contains all Workday Canvas Kit React components
45 lines • 2.27 kB
TypeScript
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