@fluentui/react-northstar/dist/es/components/Toolbar/ToolbarCustomItem.js

A themable React component library.

import _invoke from "lodash/invoke";
import { IS_FOCUSABLE_ATTRIBUTE } from '@fluentui/accessibility';
import { compose, getElementType, mergeVariablesOverrides, useUnhandledProps, useAccessibility, useFluentContext, useStyles, useTelemetry } from '@fluentui/react-bindings';
import * as PropTypes from 'prop-types';
import * as React from 'react';
import { childrenExist, commonPropTypes } from '../../utils';
import { ToolbarVariablesContext } from './toolbarVariablesContext';
export var toolbarCustomItemClassName = 'ui-toolbar__customitem';

/**
 * A ToolbarCustomItem renders Toolbar item as a non-actionable `div` with custom content inside.
 */
export var ToolbarCustomItem = /*#__PURE__*/function () {
  var ToolbarCustomItem = compose(function (props, ref, composeOptions) {
    var _Object$assign;
    var context = useFluentContext();
    var _useTelemetry = useTelemetry(composeOptions.displayName, context.telemetry),
      setStart = _useTelemetry.setStart,
      setEnd = _useTelemetry.setEnd;
    setStart();
    var accessibility = props.accessibility,
      children = props.children,
      className = props.className,
      content = props.content,
      design = props.design,
      fitted = props.fitted,
      focusable = props.focusable,
      styles = props.styles,
      variables = props.variables;
    var parentVariables = React.useContext(ToolbarVariablesContext);
    var getA11yProps = useAccessibility(accessibility, {
      debugName: composeOptions.displayName,
      rtl: context.rtl
    });
    var _useStyles = useStyles(composeOptions.displayName, {
        className: composeOptions.className,
        composeOptions: composeOptions,
        mapPropsToStyles: function mapPropsToStyles() {
          return {
            fitted: fitted
          };
        },
        mapPropsToInlineStyles: function mapPropsToInlineStyles() {
          return {
            className: className,
            design: design,
            styles: styles,
            variables: mergeVariablesOverrides(parentVariables, variables)
          };
        },
        rtl: context.rtl,
        unstable_props: props
      }),
      classes = _useStyles.classes;
    var ElementType = getElementType(props);
    var unhandledProps = useUnhandledProps(composeOptions.handledProps, props);
    var handleBlur = function handleBlur(e) {
      if (focusable) {
        _invoke(props, 'onBlur', e, props);
      }
    };
    var handleFocus = function handleFocus(e) {
      if (focusable) {
        _invoke(props, 'onFocus', e, props);
      }
    };
    var element = /*#__PURE__*/React.createElement(ElementType, getA11yProps('root', Object.assign((_Object$assign = {}, _Object$assign[IS_FOCUSABLE_ATTRIBUTE] = focusable, _Object$assign), unhandledProps, {
      className: classes.root,
      onBlur: handleBlur,
      onFocus: handleFocus,
      ref: ref
    })), childrenExist(children) ? children : content);
    setEnd();
    return element;
  }, {
    className: toolbarCustomItemClassName,
    displayName: 'ToolbarCustomItem',
    shorthandConfig: {
      mappedProp: 'content'
    },
    handledProps: ['accessibility', 'as', 'children', 'className', 'content', 'design', 'fitted', 'focusable', 'onBlur', 'onFocus', 'styles', 'variables']
  });
  ToolbarCustomItem.propTypes = Object.assign({}, commonPropTypes.createCommon(), {
    fitted: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['horizontally', 'vertically'])]),
    focusable: PropTypes.bool,
    onFocus: PropTypes.func,
    onBlur: PropTypes.func
  });
  return ToolbarCustomItem;
}();
//# sourceMappingURL=ToolbarCustomItem.js.map