@fluentui/react-northstar/dist/es/components/Popup/PopupContent.js

A themable React component library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _keys from "lodash/keys";
import _invoke from "lodash/invoke";
import { AutoFocusZone, FocusTrapZone, getElementType, useAccessibility, useFluentContext, useStyles, useTelemetry, useUnhandledProps } from '@fluentui/react-bindings';
import * as customPropTypes from '@fluentui/react-proptypes';
import cx from 'classnames';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { childrenExist, createShorthandFactory, commonPropTypes, rtlTextContainer } from '../../utils';
import { getBasePlacement, AUTOSIZES } from '../../utils/positioner';
export var popupContentClassName = 'ui-popup__content';
export var popupContentSlotClassNames = {
  content: popupContentClassName + "__content"
};

/**
 * A PopupContent displays the content of a Popup component.
 */
export var PopupContent = /*#__PURE__*/function () {
  var PopupContent = /*#__PURE__*/React.forwardRef(function (props, ref) {
    var context = useFluentContext();
    var _useTelemetry = useTelemetry(PopupContent.displayName, context.telemetry),
      setStart = _useTelemetry.setStart,
      setEnd = _useTelemetry.setEnd;
    setStart();
    var accessibility = props.accessibility,
      autoFocus = props.autoFocus,
      children = props.children,
      className = props.className,
      content = props.content,
      design = props.design,
      placement = props.placement,
      pointing = props.pointing,
      pointerRef = props.pointerRef,
      styles = props.styles,
      trapFocus = props.trapFocus,
      variables = props.variables,
      autoSize = props.autoSize;
    var getA11yProps = useAccessibility(accessibility, {
      debugName: PopupContent.displayName,
      rtl: context.rtl
    });
    var _useStyles = useStyles(PopupContent.displayName, {
        className: popupContentClassName,
        mapPropsToStyles: function mapPropsToStyles() {
          return {
            basePlacement: getBasePlacement(placement, context.rtl),
            pointing: pointing,
            autoSize: autoSize
          };
        },
        mapPropsToInlineStyles: function mapPropsToInlineStyles() {
          return {
            className: className,
            design: design,
            styles: styles,
            variables: variables
          };
        },
        rtl: context.rtl
      }),
      classes = _useStyles.classes;
    var ElementType = getElementType(props);
    var unhandledProps = useUnhandledProps(PopupContent.handledProps, props);
    var handleMouseEnter = function handleMouseEnter(e) {
      _invoke(props, 'onMouseEnter', e, props);
    };
    var handleMouseLeave = function handleMouseLeave(e) {
      _invoke(props, 'onMouseLeave', e, props);
    };
    var popupContentProps = getA11yProps('root', Object.assign({
      className: classes.root
    }, rtlTextContainer.getAttributes({
      forElements: [children, content]
    }), unhandledProps, {
      onMouseEnter: handleMouseEnter,
      onMouseLeave: handleMouseLeave
    }));
    var popupContent = /*#__PURE__*/React.createElement(React.Fragment, null, pointing && /*#__PURE__*/React.createElement("div", {
      className: classes.pointer,
      ref: pointerRef
    }), /*#__PURE__*/React.createElement("div", {
      className: cx(popupContentSlotClassNames.content, classes.content)
    }, childrenExist(children) ? children : content));
    var element;
    if (trapFocus) {
      var focusTrapZoneProps = Object.assign({}, popupContentProps, _keys(trapFocus).length && trapFocus, {
        as: ElementType
      });
      element = /*#__PURE__*/React.createElement(FocusTrapZone, _extends({
        innerRef: ref
      }, focusTrapZoneProps), popupContent);
    } else if (autoFocus) {
      var autoFocusZoneProps = Object.assign({}, popupContentProps, _keys(autoFocus).length && autoFocus, {
        as: ElementType
      });
      element = /*#__PURE__*/React.createElement(AutoFocusZone, _extends({
        innerRef: ref
      }, autoFocusZoneProps), popupContent);
    } else {
      element = /*#__PURE__*/React.createElement(ElementType, _extends({
        ref: ref
      }, popupContentProps), popupContent);
    }
    setEnd();
    return element;
  });
  PopupContent.displayName = 'PopupContent';
  PopupContent.propTypes = Object.assign({}, commonPropTypes.createCommon(), {
    placement: PropTypes.oneOf(['auto-start', 'auto', 'auto-end', 'top-start', 'top', 'top-end', 'right-start', 'right', 'right-end', 'bottom-end', 'bottom', 'bottom-start', 'left-end', 'left', 'left-start']),
    pointing: PropTypes.bool,
    onMouseEnter: PropTypes.func,
    onMouseLeave: PropTypes.func,
    pointerRef: customPropTypes.ref,
    trapFocus: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
    autoFocus: PropTypes.oneOfType([PropTypes.bool, PropTypes.object]),
    autoSize: PropTypes.oneOf(AUTOSIZES)
  });
  PopupContent.handledProps = Object.keys(PopupContent.propTypes);
  PopupContent.create = createShorthandFactory({
    Component: PopupContent,
    mappedProp: 'content'
  });
  return PopupContent;
}();
//# sourceMappingURL=PopupContent.js.map