@retailmenot/anchor/ts/utils/PositionContainer/PositionContainer.component.js

A React UI Library by RetailMeNot

// VENDOR
import * as React from 'react';
import { forwardRef } from 'react';
import styled, { css } from '@xstyled/styled-components';
import { th } from '@xstyled/system';
import classNames from 'classnames';
// COMPONENTS
import { positionVariants } from '../position/position';
import { Arrow } from '../Arrow/Arrow.component';
const StyledPositionContainer = styled('div') `
    position: absolute;
    box-sizing: border-box;
    display: flex;
    z-index: 1;
    min-width: 10rem;
    opacity: 0;
    visibility: hidden;
    transition: visibility 250ms ease-in-out, opacity 250ms ease-in-out;
    font-family: base;

    ${({ border, borderRadius, color, delay, padding, shadow }) => css({
    border,
    color,
    padding,
    borderRadius,
    boxShadow: shadow,
    transitionDelay: delay,
})};

    ${({ containerHeight, containerWidth, height, spacing, position, width }) => positionVariants(position, height, width, containerHeight, containerWidth, spacing // This is the distance of the item from the target in px
)};

    &.active {
        opacity: 1;
        visibility: visible;
    }

    ${({ wrapContent = true }) => css({ whiteSpace: wrapContent ? 'normal' : 'nowrap' })};

    ${({ maxWidth = 'auto' }) => css({ width: maxWidth })};
`;
const Background = styled('div') `
    position: absolute;
    box-sizing: border-box;
    border-radius: inherit;
    z-index: 0;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    ${({ background }) => css({
    background: th.color(background),
})};
`;
const StyledOverlay = styled('div') `
    position: relative;
    z-index: 1;
    width: 100%;
`;
export const PositionContainer = forwardRef(({ active, arrowIndent = '0.75rem', arrowSize, background = 'black', border, borderRadius = 'base', children, className, color, containerHeight, containerWidth, delay, debug, height, spacing = 0, padding = '0.5rem', position = 'bottom', shadow, showArrow, width, }, ref) => (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: "anchor-position-bg", background: background }),
    React.createElement(StyledOverlay, { className: "anchor-position-overlay" }, children),
    showArrow && (React.createElement(Arrow, { className: "anchor-position-arrow", position: position, size: arrowSize, indent: arrowIndent, background: background, shadow: shadow, border: border })))));
//# sourceMappingURL=PositionContainer.component.js.map