@wordpress/components/build-module/ui/popover/component.js

UI components for WordPress.

import _extends from "@babel/runtime/helpers/esm/extends";
import { createElement } from "@wordpress/element";

/**
 * External dependencies
 */
import { noop } from 'lodash'; // eslint-disable-next-line no-restricted-imports

import { PopoverDisclosure, usePopoverState, Portal } from 'reakit';
/**
 * WordPress dependencies
 */

import { useCallback, useMemo, cloneElement } from '@wordpress/element';
/**
 * Internal dependencies
 */

import { contextConnect, useContextSystem } from '../context';
import { PopoverContext } from './context';
import { usePopoverResizeUpdater } from './utils';
import PopoverContent from './content';
import { useUpdateEffect } from '../../utils/hooks';
/**
 *
 * @param {import('../context').ViewOwnProps<import('./types').Props, 'div'>} props
 * @param {import('react').Ref<any>} forwardedRef
 */

function Popover(props, forwardedRef) {
  const {
    animated = true,
    animationDuration = 160,
    baseId,
    children,
    elevation = 5,
    id,
    label,
    maxWidth = 360,
    onVisibleChange = noop,
    placement,
    state,
    trigger,
    visible,
    ...otherProps
  } = useContextSystem(props, 'Popover');

  const _popover = usePopoverState({
    animated: animated ? animationDuration : undefined,
    baseId: baseId || id,
    placement,
    visible,
    ...otherProps
  });

  const popover = state || _popover;
  const resizeListener = usePopoverResizeUpdater({
    onResize: popover.unstable_update
  });
  const uniqueId = `popover-${popover.baseId}`;
  const labelId = label || uniqueId;
  const contextProps = useMemo(() => ({
    label: labelId,
    popover
  }), [labelId, popover]);
  const triggerContent = useCallback(triggerProps => {
    return cloneElement(trigger, triggerProps);
  }, [trigger]);
  useUpdateEffect(() => {
    onVisibleChange(popover.visible);
  }, [popover.visible]);
  return createElement(PopoverContext.Provider, {
    value: contextProps
  }, trigger && createElement(PopoverDisclosure, _extends({}, popover, {
    ref: trigger.ref
  }, trigger.props), triggerContent), createElement(Portal, null, createElement(PopoverContent, _extends({
    ref: forwardedRef
  }, otherProps, {
    elevation: elevation,
    maxWidth: maxWidth
  }), resizeListener, children)));
}
/**
 * `Popover` is a component to render a floating content modal.
 * It is similar in purpose to a tooltip, but renders content of any sort,
 * not only simple text.
 *
 * @example
 * ```jsx
 * import { Button, Popover, View, Text } from `@wordpress/components/ui`;
 
 * function Example() {
 * 	return (
 * 		<Popover trigger={ <Button>Popover</Button> }>
 * 			<View>
 * 				<Text>Code is Poetry</Text>
 * 			</View>
 * 		</Popover>
 * 	);
 * }
 * ```
 */


export default contextConnect(Popover, 'Popover');
//# sourceMappingURL=component.js.map