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

A themable React component library.

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

/**
 * A MenuItemIndicator allows a user to have a dedicated component that can be targeted from the theme.
 */
export var MenuItemIndicator = /*#__PURE__*/function () {
  var MenuItemIndicator = /*#__PURE__*/React.forwardRef(function (props, ref) {
    var context = useFluentContext();
    var _useTelemetry = useTelemetry(MenuItemIndicator.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,
      iconOnly = props.iconOnly,
      vertical = props.vertical,
      inSubmenu = props.inSubmenu,
      active = props.active,
      primary = props.primary,
      underlined = props.underlined;
    var _useStyles = useStyles(MenuItemIndicator.displayName, {
        className: menuItemIndicatorClassName,
        mapPropsToStyles: function mapPropsToStyles() {
          return {
            iconOnly: iconOnly,
            vertical: vertical,
            inSubmenu: inSubmenu,
            active: active,
            primary: primary,
            underlined: underlined
          };
        },
        mapPropsToInlineStyles: function mapPropsToInlineStyles() {
          return {
            className: className,
            design: design,
            styles: styles,
            variables: variables
          };
        },
        rtl: context.rtl
      }),
      classes = _useStyles.classes;
    var getA11Props = useAccessibility(props.accessibility, {
      debugName: MenuItemIndicator.displayName,
      rtl: context.rtl
    });
    var ElementType = getElementType(props);
    var unhandledProps = useUnhandledProps(MenuItemIndicator.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;
  });
  MenuItemIndicator.displayName = 'MenuItemIndicator';
  MenuItemIndicator.defaultProps = {
    as: 'span',
    accessibility: indicatorBehavior
  };
  MenuItemIndicator.propTypes = Object.assign({}, commonPropTypes.createCommon(), {
    iconOnly: PropTypes.bool,
    vertical: PropTypes.bool,
    inSubmenu: PropTypes.bool,
    active: PropTypes.bool,
    primary: PropTypes.bool,
    underlined: PropTypes.bool
  });
  MenuItemIndicator.handledProps = Object.keys(MenuItemIndicator.propTypes);
  MenuItemIndicator.shorthandConfig = {
    mappedProp: 'content'
  };
  return MenuItemIndicator;
}();
//# sourceMappingURL=MenuItemIndicator.js.map