"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ExtensionNodeWrapper = void 0;
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _classnames = _interopRequireDefault(require("classnames"));
var _utils = require("../utils");
/** @jsx jsx */

var styles = (0, _react2.css)({
  '&.inline-extension': {
    display: 'inline-block'
  },
  '&.relative': {
    position: 'relative'
  }
});
/**
 * If inlineExtension, add zero width space to the end of the nodes and wrap with span;
 * Also if showMacroInteractionDesignUpdates is true, then add the inline-block style to account for the lozenge.
 * else wrap with a div (for multi bodied extensions)
 *
 * @param param0
 * @returns
 */
var ExtensionNodeWrapper = exports.ExtensionNodeWrapper = function ExtensionNodeWrapper(_ref) {
  var children = _ref.children,
    nodeType = _ref.nodeType,
    showMacroInteractionDesignUpdates = _ref.showMacroInteractionDesignUpdates;
  var wrapperClassNames = (0, _classnames.default)({
    'inline-extension': nodeType === 'inlineExtension' && showMacroInteractionDesignUpdates,
    relative: showMacroInteractionDesignUpdates
  });
  return (0, _react2.jsx)("span", {
    className: wrapperClassNames,
    css: styles
  }, children, nodeType === 'inlineExtension' && _utils.ZERO_WIDTH_SPACE);
};