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

UI components for WordPress.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _element = require("@wordpress/element");

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _lodash = require("lodash");

var _reakit = require("reakit");

var _context = require("../context");

var _context2 = require("./context");

var _utils = require("./utils");

var _content = _interopRequireDefault(require("./content"));

var _hooks = require("../../utils/hooks");

/**
 * External dependencies
 */
// eslint-disable-next-line no-restricted-imports

/**
 * WordPress dependencies
 */

/**
 * Internal dependencies
 */

/**
 *
 * @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 = _lodash.noop,
    placement,
    state,
    trigger,
    visible,
    ...otherProps
  } = (0, _context.useContextSystem)(props, 'Popover');

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

  const popover = state || _popover;
  const resizeListener = (0, _utils.usePopoverResizeUpdater)({
    onResize: popover.unstable_update
  });
  const uniqueId = `popover-${popover.baseId}`;
  const labelId = label || uniqueId;
  const contextProps = (0, _element.useMemo)(() => ({
    label: labelId,
    popover
  }), [labelId, popover]);
  const triggerContent = (0, _element.useCallback)(triggerProps => {
    return (0, _element.cloneElement)(trigger, triggerProps);
  }, [trigger]);
  (0, _hooks.useUpdateEffect)(() => {
    onVisibleChange(popover.visible);
  }, [popover.visible]);
  return (0, _element.createElement)(_context2.PopoverContext.Provider, {
    value: contextProps
  }, trigger && (0, _element.createElement)(_reakit.PopoverDisclosure, (0, _extends2.default)({}, popover, {
    ref: trigger.ref
  }, trigger.props), triggerContent), (0, _element.createElement)(_reakit.Portal, null, (0, _element.createElement)(_content.default, (0, _extends2.default)({
    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>
 * 	);
 * }
 * ```
 */


var _default = (0, _context.contextConnect)(Popover, 'Popover');

exports.default = _default;
//# sourceMappingURL=component.js.map