@fluentui/react-northstar/dist/es/components/Menu/MenuItemWrapper.js

A themable React component library.

import * as React from 'react';
import { useFluentContext, useTelemetry, useStyles, useAccessibility, getElementType, useUnhandledProps, childrenExist } from '@fluentui/react-bindings';
import * as customPropTypes from '@fluentui/react-proptypes';
import * as PropTypes from 'prop-types';
import { commonPropTypes } from '../../utils';
export var menuItemWrapperClassName = 'ui-menu__itemwrapper';

/**
 * A MenuItemWrapper allows a user to have a dedicated component that can be targeted from the theme.
 */
export var MenuItemWrapper = /*#__PURE__*/function () {
  var MenuItemWrapper = /*#__PURE__*/React.forwardRef(function (props, ref) {
    var context = useFluentContext();
    var _useTelemetry = useTelemetry(MenuItemWrapper.displayName, context.telemetry),
      setStart = _useTelemetry.setStart,
      setEnd = _useTelemetry.setEnd;
    setStart();
    var className = props.className,
      children = props.children,
      design = props.design,
      styles = props.styles,
      variables = props.variables,
      content = props.content,
      active = props.active,
      disabled = props.disabled,
      iconOnly = props.iconOnly,
      isFromKeyboard = props.isFromKeyboard,
      pills = props.pills,
      pointing = props.pointing,
      secondary = props.secondary,
      underlined = props.underlined,
      vertical = props.vertical,
      primary = props.primary,
      on = props.on;
    var _useStyles = useStyles(MenuItemWrapper.displayName, {
        className: menuItemWrapperClassName,
        mapPropsToStyles: function mapPropsToStyles() {
          return {
            active: active,
            disabled: disabled,
            iconOnly: iconOnly,
            isFromKeyboard: isFromKeyboard,
            pills: pills,
            pointing: pointing,
            secondary: secondary,
            underlined: underlined,
            vertical: vertical,
            primary: primary,
            on: on
          };
        },
        mapPropsToInlineStyles: function mapPropsToInlineStyles() {
          return {
            className: className,
            design: design,
            styles: styles,
            variables: variables
          };
        },
        rtl: context.rtl
      }),
      classes = _useStyles.classes;
    var getA11Props = useAccessibility(props.accessibility, {
      debugName: MenuItemWrapper.displayName,
      rtl: context.rtl
    });
    var ElementType = getElementType(props);
    var unhandledProps = useUnhandledProps(MenuItemWrapper.handledProps, props);
    var element = /*#__PURE__*/React.createElement(ElementType, getA11Props('root', Object.assign({
      className: classes.root,
      ref: ref
    }, unhandledProps)), childrenExist(children) ? children : content);
    setEnd();
    return element;
  });
  MenuItemWrapper.displayName = 'MenuItemWrapper';
  MenuItemWrapper.defaultProps = {
    as: 'li'
  };
  MenuItemWrapper.propTypes = Object.assign({}, commonPropTypes.createCommon(), {
    active: PropTypes.bool,
    disabled: PropTypes.bool,
    iconOnly: PropTypes.bool,
    isFromKeyboard: PropTypes.bool,
    pills: PropTypes.bool,
    pointing: PropTypes.oneOf(['start', 'end', true, false]),
    primary: customPropTypes.every([customPropTypes.disallow(['secondary']), PropTypes.bool]),
    secondary: customPropTypes.every([customPropTypes.disallow(['primary']), PropTypes.bool]),
    underlined: PropTypes.bool,
    vertical: PropTypes.bool,
    on: PropTypes.oneOf(['hover'])
  });
  MenuItemWrapper.handledProps = Object.keys(MenuItemWrapper.propTypes);
  MenuItemWrapper.shorthandConfig = {
    mappedProp: 'content'
  };
  return MenuItemWrapper;
}();
//# sourceMappingURL=MenuItemWrapper.js.map