UNPKG

@atlaskit/popup

Version:

A popup displays brief content in an overlay.

56 lines (54 loc) • 2.36 kB
import React, { useCallback, useContext } from 'react'; import { fg } from '@atlaskit/platform-feature-flags/fg'; import { Reference } from '@atlaskit/popper/reference'; import { useGetMemoizedMergedTriggerRefNew } from '../use-get-memoized-merged-trigger-ref-new'; import { IdContext } from './id-context'; import { IsOpenContext } from './is-open-context'; import { RoleContext } from './role-context'; import { SetTriggerRefContext } from './set-trigger-ref-context'; import { TriggerRefObjectContext } from './trigger-ref-object-context'; import { useEnsureIsInsidePopup } from './use-ensure-is-inside-popup'; /** * __Popup trigger__ * * Popup trigger is the component that renders the trigger for the popup. * * It must be a child of the Popup component. */ export var PopupTrigger = function PopupTrigger(_ref) { var children = _ref.children; useEnsureIsInsidePopup(); var id = useContext(IdContext); var setTriggerRef = useContext(SetTriggerRefContext); var triggerRefObject = useContext(TriggerRefObjectContext); var isOpen = useContext(IsOpenContext); var getMergedTriggerRef = useGetMemoizedMergedTriggerRefNew(); var role = useContext(RoleContext); // Stable ref callback — avoids creating a new function instance on every render, // which would cause React to detach and reattach the ref unnecessarily. // triggerRefObject is a MutableRefObject (from useRef) so its identity never changes, // meaning this callback is effectively created once per mount. var triggerRef = useCallback(function (node) { triggerRefObject.current = node; }, [triggerRefObject]); var ariaHasPopup = role === 'dialog' ? 'dialog' : true; // When the top-layer flag is on, bypass Popper's <Reference> entirely. // We only need to set triggerRefObject.current — no Popper ref merging needed. if (fg('platform-dst-top-layer')) { return /*#__PURE__*/React.createElement(React.Fragment, null, children({ ref: triggerRef, 'aria-controls': id, 'aria-expanded': isOpen, 'aria-haspopup': ariaHasPopup })); } return /*#__PURE__*/React.createElement(Reference, null, function (_ref2) { var ref = _ref2.ref; return children({ ref: getMergedTriggerRef(ref, setTriggerRef), 'aria-controls': id, 'aria-expanded': isOpen, 'aria-haspopup': ariaHasPopup }); }); };