text: 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
  