text: "use strict";
  
  var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
  
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  
  exports.__esModule = true;
  exports.ItemLayout = exports.itemLayoutSlotClassNames = exports.itemLayoutClassName = void 0;
  
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  
  var _reactBindings = require("@fluentui/react-bindings");
  
  var React = _interopRequireWildcard(require("react"));
  
  var PropTypes = _interopRequireWildcard(require("prop-types"));
  
  var _classnames = _interopRequireDefault(require("classnames"));
  
  var _utils = require("../../utils");
  
  var _Layout = require("../Layout/Layout");
  
  var itemLayoutClassName = 'ui-itemlayout';
  exports.itemLayoutClassName = itemLayoutClassName;
  var itemLayoutSlotClassNames = {
    header: itemLayoutClassName + "__header",
    headerMedia: itemLayoutClassName + "__headerMedia",
    main: itemLayoutClassName + "__main",
    content: itemLayoutClassName + "__content",
    contentMedia: itemLayoutClassName + "__contentMedia",
    media: itemLayoutClassName + "__media",
    endMedia: itemLayoutClassName + "__endMedia"
  };
  exports.itemLayoutSlotClassNames = itemLayoutSlotClassNames;
  
  /**
   * (DEPRECATED) The Item Layout handles layout styles for menu items, list items and other similar item templates.
   */
  var ItemLayout = function ItemLayout(props) {
    var context = (0, _reactBindings.useFluentContext)();
  
    var _useTelemetry = (0, _reactBindings.useTelemetry)(ItemLayout.displayName, context.telemetry),
        setStart = _useTelemetry.setStart,
        setEnd = _useTelemetry.setEnd;
  
    setStart();
    var as = props.as,
        debug = props.debug,
        endMedia = props.endMedia,
        media = props.media,
        renderMainArea = props.renderMainArea,
        rootCSS = props.rootCSS,
        mediaCSS = props.mediaCSS,
        endMediaCSS = props.endMediaCSS,
        className = props.className,
        design = props.design,
        styles = props.styles,
        variables = props.variables;
    var unhandledProps = (0, _reactBindings.useUnhandledProps)(ItemLayout.handledProps, props);
  
    var _useStyles = (0, _reactBindings.useStyles)(ItemLayout.displayName, {
      className: itemLayoutClassName,
      mapPropsToInlineStyles: function mapPropsToInlineStyles() {
        return {
          className: className,
          design: design,
          styles: styles,
          variables: variables
        };
      },
      rtl: context.rtl
    }),
        classes = _useStyles.classes,
        resolvedStyles = _useStyles.styles;
  
    var startArea = media;
    var mainArea = renderMainArea(props, classes);
    var endArea = endMedia;
    var mergedMediaClasses = (0, _classnames.default)(itemLayoutSlotClassNames.media, classes.media);
    var mergedEndMediaClasses = (0, _classnames.default)(itemLayoutSlotClassNames.endMedia, classes.endMedia);
    var element = /*#__PURE__*/React.createElement(_Layout.Layout, (0, _extends2.default)({
      as: as,
      className: classes.root,
      styles: resolvedStyles.root,
      rootCSS: rootCSS,
      alignItems: "center",
      gap: (0, _utils.pxToRem)(8),
      debug: debug,
      reducing: true,
      start: startArea && /*#__PURE__*/React.createElement("span", {
        style: mediaCSS,
        className: mergedMediaClasses
      }, _utils.rtlTextContainer.createFor({
        element: startArea
      })),
      main: mainArea,
      end: endArea && /*#__PURE__*/React.createElement("span", {
        style: endMediaCSS,
        className: mergedEndMediaClasses
      }, _utils.rtlTextContainer.createFor({
        element: endArea
      }))
    }, unhandledProps));
    setEnd();
    return element;
  };
  
  exports.ItemLayout = ItemLayout;
  ItemLayout.displayName = 'ItemLayout';
  ItemLayout.propTypes = Object.assign({}, _utils.commonPropTypes.createCommon({
    accessibility: false,
    children: false,
    content: false
  }), {
    contentMedia: PropTypes.any,
    content: PropTypes.any,
    debug: PropTypes.bool,
    header: PropTypes.any,
    endMedia: PropTypes.any,
    headerMedia: PropTypes.any,
    media: PropTypes.any,
    renderContentArea: PropTypes.func,
    renderHeaderArea: PropTypes.func,
    renderMainArea: PropTypes.func,
    rootCSS: PropTypes.object,
    mediaCSS: PropTypes.object,
    headerCSS: PropTypes.object,
    headerMediaCSS: PropTypes.object,
    contentCSS: PropTypes.object,
    contentMediaCSS: PropTypes.object,
    endMediaCSS: PropTypes.object
  });
  ItemLayout.defaultProps = {
    renderMainArea: function renderMainArea(props, classes) {
      var renderHeaderArea = props.renderHeaderArea,
          renderContentArea = props.renderContentArea;
      var headerArea = renderHeaderArea(props, classes);
      var contentArea = renderContentArea(props, classes);
      return /*#__PURE__*/React.createElement("div", {
        className: itemLayoutSlotClassNames.main,
        style: {
          gridTemplateRows: '1fr 1fr'
        }
      }, headerArea, contentArea);
    },
    renderHeaderArea: function renderHeaderArea(props, classes) {
      var debug = props.debug,
          header = props.header,
          headerMedia = props.headerMedia,
          headerCSS = props.headerCSS,
          headerMediaCSS = props.headerMediaCSS;
      var mergedClasses = (0, _classnames.default)(itemLayoutSlotClassNames.header, classes.header);
      var mediaClasses = (0, _classnames.default)(itemLayoutSlotClassNames.headerMedia, classes.headerMedia);
      return !header && !headerMedia ? null : /*#__PURE__*/React.createElement(_Layout.Layout, {
        className: mergedClasses,
        alignItems: "end",
        gap: (0, _utils.pxToRem)(8),
        debug: debug,
        main: _utils.rtlTextContainer.createFor({
          element: header
        }),
        rootCSS: headerCSS,
        end: headerMedia && /*#__PURE__*/React.createElement("span", {
          style: headerMediaCSS,
          className: mediaClasses
        }, _utils.rtlTextContainer.createFor({
          element: headerMedia
        }))
      });
    },
    renderContentArea: function renderContentArea(props, classes) {
      var debug = props.debug,
          content = props.content,
          contentMedia = props.contentMedia,
          contentCSS = props.contentCSS,
          contentMediaCSS = props.contentMediaCSS;
      var mergedClasses = (0, _classnames.default)(itemLayoutSlotClassNames.content, classes.content);
      var mediaClasses = (0, _classnames.default)(itemLayoutSlotClassNames.contentMedia, classes.contentMedia);
      return !content && !contentMedia ? null : /*#__PURE__*/React.createElement(_Layout.Layout, {
        className: mergedClasses,
        alignItems: "start",
        gap: (0, _utils.pxToRem)(8),
        debug: debug,
        rootCSS: contentCSS,
        main: _utils.rtlTextContainer.createFor({
          element: content
        }),
        end: contentMedia && /*#__PURE__*/React.createElement("span", {
          style: contentMediaCSS,
          className: mediaClasses
        }, _utils.rtlTextContainer.createFor({
          element: contentMedia
        }))
      });
    }
  };
  ItemLayout.handledProps = Object.keys(ItemLayout.propTypes);
  ItemLayout.create = (0, _utils.createShorthandFactory)({
    Component: ItemLayout,
    mappedProp: 'content'
  });
  //# sourceMappingURL=ItemLayout.js.map
  