@retailmenot/anchor/commonjs/anchor-chunk-eb8ede83.js

A React UI Library by RetailMeNot

'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var __chunk_1 = require('./anchor-chunk-24f232e7.js');
var React = require('react');
var classNames = _interopDefault(require('classnames'));
var styled = require('@xstyled/styled-components');
var styled__default = _interopDefault(styled);
var system = require('@xstyled/system');

var positionVariants = function positionVariants(position, height, width, overlayHeight, overlayWidth) {
  var spacing = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : 0;

  switch (position) {
    case 'topStart':
      return styled.css({
        left: 0,
        top: 0,
        transform: "translate3d(0, -".concat(overlayHeight + spacing, "px, 0)")
      });

    case 'top':
      return styled.css({
        left: 0,
        top: 0,
        transform: "translate3d(".concat(width / 2 - overlayWidth / 2, "px, -").concat(overlayHeight + spacing, "px, 0)")
      });

    case 'rightStart':
      return styled.css({
        left: 0,
        top: 0,
        transform: "translate3d(".concat(width + spacing, "px, 0, 0)")
      });

    case 'right':
      return styled.css({
        left: 0,
        top: 0,
        transform: "translate3d(".concat(width + spacing, "px, ").concat(height / 2 - overlayHeight / 2, "px, 0)")
      });

    case 'rightEnd':
      return styled.css({
        left: 0,
        bottom: 0,
        transform: "translate3d(".concat(width + spacing, "px, 0, 0)")
      });

    case 'bottomEnd':
      return styled.css({
        right: 0,
        top: 0,
        transform: "translate3d(0, ".concat(height + spacing, "px, 0)")
      });

    case 'bottom':
      return styled.css({
        left: 0,
        top: 0,
        transform: "translate3d(".concat(width / 2 - overlayWidth / 2, "px, ").concat(height + spacing, "px, 0)")
      });

    case 'bottomStart':
      return styled.css({
        left: 0,
        top: 0,
        transform: "translate3d(0, ".concat(height + spacing, "px, 0)")
      });

    case 'leftEnd':
      return styled.css({
        left: 0,
        bottom: 0,
        transform: "translate3d(-".concat(overlayWidth + spacing, "px, 0, 0)")
      });

    case 'left':
      return styled.css({
        left: 0,
        top: 0,
        transform: "translate3d(-".concat(overlayWidth + spacing, "px, ").concat(height / 2 - overlayHeight / 2, "px, 0)")
      });

    case 'leftStart':
      return styled.css({
        left: 0,
        top: 0,
        transform: "translate3d(-".concat(overlayWidth + spacing, "px, 0, 0)")
      });

    case 'topEnd':
    default:
      return styled.css({
        right: 0,
        top: 0,
        transform: "translate3d(0, -".concat(overlayHeight + spacing, "px, 0)")
      });
  }
};

function _templateObject() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    position: absolute;\n    box-sizing: border-box;\n    ", "\n    z-index: -1;\n    transform: rotate(45deg);\n\n    ", "\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}
var DefaultSize = '0.625rem';
var Arrow = styled__default('div')(_templateObject(), function (_ref) {
  var background = _ref.background,
      shadow = _ref.shadow,
      border = _ref.border,
      _ref$size = _ref.size,
      size = _ref$size === void 0 ? DefaultSize : _ref$size;
  return styled.css({
    width: size,
    height: size,
    border: border,
    background: system.th.color(background),
    boxShadow: shadow
  });
}, function (_ref2) {
  var position = _ref2.position,
      indent = _ref2.indent,
      _ref2$size = _ref2.size,
      size = _ref2$size === void 0 ? DefaultSize : _ref2$size;

  switch (position) {
    case 'bottom':
      return styled.css({
        top: "calc(-".concat(size, " / 2)"),
        left: "calc(50% - ".concat(size, " / 2)")
      });

    case 'bottomEnd':
      return styled.css({
        top: "calc(-".concat(size, " / 2)"),
        right: indent
      });

    case 'bottomStart':
      return styled.css({
        top: "calc(-".concat(size, " / 2)"),
        left: indent
      });

    case 'top':
      return styled.css({
        bottom: "calc(-".concat(size, " / 2)"),
        right: "calc(50% - ".concat(size, " / 2)")
      });

    case 'topEnd':
      return styled.css({
        bottom: "calc(-".concat(size, " / 2)"),
        right: indent
      });

    case 'topStart':
      return styled.css({
        bottom: "calc(-".concat(size, " / 2)"),
        left: indent
      });

    case 'right':
      return styled.css({
        top: "calc(50% - ".concat(size, " / 2)"),
        left: "calc(-".concat(size, " / 2)")
      });

    case 'rightEnd':
      return styled.css({
        bottom: indent,
        left: "calc(-".concat(size, " / 2)")
      });

    case 'rightStart':
      return styled.css({
        top: indent,
        left: "calc(-".concat(size, " / 2)")
      });

    case 'left':
      return styled.css({
        top: "calc(50% - ".concat(size, " / 2)"),
        right: "calc(-".concat(size, " / 2)")
      });

    case 'leftEnd':
      return styled.css({
        bottom: indent,
        right: "calc(-".concat(size, " / 2)")
      });

    case 'leftStart':
      return styled.css({
        top: indent,
        right: "calc(-".concat(size, " / 2)")
      });
  }

  return null;
});

function _templateObject3() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    position: relative;\n    z-index: 1;\n    width: 100%;\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    position: absolute;\n    box-sizing: border-box;\n    border-radius: inherit;\n    z-index: 0;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n\n    ", ";\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject$1() {
  var data = __chunk_1._taggedTemplateLiteral(["\n    position: absolute;\n    box-sizing: border-box;\n    display: flex;\n    z-index: 1;\n    min-width: 10rem;\n    opacity: 0;\n    visibility: hidden;\n    transition: visibility 250ms ease-in-out, opacity 250ms ease-in-out;\n    font-family: base;\n\n    ", ";\n\n    ", ";\n\n    &.active {\n        opacity: 1;\n        visibility: visible;\n    }\n\n    ", ";\n\n    ", ";\n"]);

  _templateObject$1 = function _templateObject() {
    return data;
  };

  return data;
}
var StyledPositionContainer = styled__default('div')(_templateObject$1(), function (_ref) {
  var border = _ref.border,
      borderRadius = _ref.borderRadius,
      color = _ref.color,
      delay = _ref.delay,
      padding = _ref.padding,
      shadow = _ref.shadow;
  return styled.css({
    border: border,
    color: color,
    padding: padding,
    borderRadius: borderRadius,
    boxShadow: shadow,
    transitionDelay: delay
  });
}, function (_ref2) {
  var containerHeight = _ref2.containerHeight,
      containerWidth = _ref2.containerWidth,
      height = _ref2.height,
      spacing = _ref2.spacing,
      position = _ref2.position,
      width = _ref2.width;
  return positionVariants(position, height, width, containerHeight, containerWidth, spacing // This is the distance of the item from the target in px
  );
}, function (_ref3) {
  var _ref3$wrapContent = _ref3.wrapContent,
      wrapContent = _ref3$wrapContent === void 0 ? true : _ref3$wrapContent;
  return styled.css({
    whiteSpace: wrapContent ? 'normal' : 'nowrap'
  });
}, function (_ref4) {
  var _ref4$maxWidth = _ref4.maxWidth,
      maxWidth = _ref4$maxWidth === void 0 ? 'auto' : _ref4$maxWidth;
  return styled.css({
    width: maxWidth
  });
});
var Background = styled__default('div')(_templateObject2(), function (_ref5) {
  var background = _ref5.background;
  return styled.css({
    background: system.th.color(background)
  });
});
var StyledOverlay = styled__default('div')(_templateObject3());
var PositionContainer = React.forwardRef(function (_ref6, ref) {
  var active = _ref6.active,
      _ref6$arrowIndent = _ref6.arrowIndent,
      arrowIndent = _ref6$arrowIndent === void 0 ? '0.75rem' : _ref6$arrowIndent,
      arrowSize = _ref6.arrowSize,
      _ref6$background = _ref6.background,
      background = _ref6$background === void 0 ? 'black' : _ref6$background,
      border = _ref6.border,
      _ref6$borderRadius = _ref6.borderRadius,
      borderRadius = _ref6$borderRadius === void 0 ? 'base' : _ref6$borderRadius,
      children = _ref6.children,
      className = _ref6.className,
      color = _ref6.color,
      containerHeight = _ref6.containerHeight,
      containerWidth = _ref6.containerWidth,
      delay = _ref6.delay,
      debug = _ref6.debug,
      height = _ref6.height,
      _ref6$spacing = _ref6.spacing,
      spacing = _ref6$spacing === void 0 ? 0 : _ref6$spacing,
      _ref6$padding = _ref6.padding,
      padding = _ref6$padding === void 0 ? '0.5rem' : _ref6$padding,
      _ref6$position = _ref6.position,
      position = _ref6$position === void 0 ? 'bottom' : _ref6$position,
      shadow = _ref6.shadow,
      showArrow = _ref6.showArrow,
      width = _ref6.width;
  return React.createElement(StyledPositionContainer, {
    border: border,
    borderRadius: borderRadius,
    className: classNames(className || 'anchor-position-container', (debug || active) && 'active'),
    color: color,
    containerHeight: containerHeight,
    containerWidth: containerWidth,
    delay: delay,
    height: height,
    spacing: spacing,
    padding: padding,
    position: position,
    ref: ref,
    shadow: shadow,
    width: width
  }, React.createElement(Background, {
    className: "position-bg",
    background: background
  }), React.createElement(StyledOverlay, {
    className: "position-overlay"
  }, children), showArrow && React.createElement(Arrow, {
    className: "position-arrow",
    position: position,
    size: arrowSize,
    indent: arrowIndent,
    background: background,
    shadow: shadow,
    border: border
  }));
});

exports.PositionContainer = PositionContainer;
//# sourceMappingURL=anchor-chunk-eb8ede83.js.map