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

A themable React component library.

import { menuDividerBehavior } from '@fluentui/accessibility';
import { getElementType, mergeVariablesOverrides, useFluentContext, useAccessibility, useTelemetry, useStyles, useUnhandledProps, useContextSelectors } from '@fluentui/react-bindings';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { createShorthandFactory, commonPropTypes, childrenExist, rtlTextContainer } from '../../utils';
import { MenuContext } from './menuContext';
export var menuDividerClassName = 'ui-menu__divider';

/**
 * A MenuDivider is non-actionable element that visually segments items of Menu.
 */
export var MenuDivider = /*#__PURE__*/function () {
  var MenuDivider = /*#__PURE__*/React.forwardRef(function (inputProps, ref) {
    var context = useFluentContext();
    var _useTelemetry = useTelemetry(MenuDivider.displayName, context.telemetry),
      setStart = _useTelemetry.setStart,
      setEnd = _useTelemetry.setEnd;
    setStart();
    var parentProps = useContextSelectors(MenuContext, {
      variables: function variables(v) {
        return v.variables;
      },
      slotProps: function slotProps(v) {
        return v.slotProps.divider;
      },
      accessibility: function accessibility(v) {
        return v.behaviors.divider;
      }
    }); // TODO: we should improve typings for the useContextSelectors

    var props = Object.assign({}, parentProps.slotProps, {
      accessibility: parentProps.accessibility,
      variables: parentProps.variables
    }, inputProps);
    var _props$accessibility = props.accessibility,
      accessibility = _props$accessibility === void 0 ? menuDividerBehavior : _props$accessibility,
      children = props.children,
      content = props.content,
      vertical = props.vertical,
      inSubmenu = props.inSubmenu,
      pills = props.pills,
      pointing = props.pointing,
      primary = props.primary,
      className = props.className,
      design = props.design,
      styles = props.styles,
      secondary = props.secondary,
      variables = props.variables;
    var getA11yProps = useAccessibility(accessibility, {
      debugName: MenuDivider.displayName,
      rtl: context.rtl
    });
    var _useStyles = useStyles(MenuDivider.displayName, {
        className: menuDividerClassName,
        mapPropsToStyles: function mapPropsToStyles() {
          return {
            hasContent: !!content || !!children,
            pills: pills,
            pointing: pointing,
            vertical: vertical,
            inSubmenu: inSubmenu,
            primary: primary,
            secondary: secondary
          };
        },
        mapPropsToInlineStyles: function mapPropsToInlineStyles() {
          return {
            className: className,
            design: design,
            styles: styles,
            variables: mergeVariablesOverrides(variables, parentProps.variables)
          };
        },
        rtl: context.rtl,
        unstable_props: props
      }),
      classes = _useStyles.classes;
    var ElementType = getElementType(props);
    var unhandledProps = useUnhandledProps(MenuDivider.handledProps, props);
    var element = /*#__PURE__*/React.createElement(ElementType, getA11yProps('root', Object.assign({
      className: classes.root
    }, rtlTextContainer.getAttributes({
      forElements: [children, content]
    }), unhandledProps, {
      ref: ref
    })), childrenExist(children) ? children : content);
    setEnd();
    return element;
  });
  MenuDivider.defaultProps = {
    as: 'li'
  };
  MenuDivider.displayName = 'MenuDivider';
  MenuDivider.propTypes = Object.assign({}, commonPropTypes.createCommon(), {
    primary: PropTypes.bool,
    secondary: PropTypes.bool,
    vertical: PropTypes.bool,
    inSubmenu: PropTypes.bool,
    pointing: PropTypes.oneOf(['start', 'end', true, false])
  });
  MenuDivider.handledProps = Object.keys(MenuDivider.propTypes);
  MenuDivider.shorthandConfig = {
    mappedProp: 'content'
  };
  MenuDivider.create = createShorthandFactory({
    Component: MenuDivider,
    mappedProp: 'content'
  });
  return MenuDivider;
}();
//# sourceMappingURL=MenuDivider.js.map