@primer/react/lib/Popover/Popover.js

An implementation of GitHub's Primer Design System using React

'use strict';

var clsx = require('clsx');
var styled = require('styled-components');
var constants = require('../constants.js');
var sx = require('../sx.js');
var toggleStyledComponent = require('../internal/utils/toggleStyledComponent.js');
require('../FeatureFlags/FeatureFlags.js');
var useFeatureFlag = require('../FeatureFlags/useFeatureFlag.js');
require('../FeatureFlags/DefaultFeatureFlags.js');
var Popover_module = require('./Popover.module.css.js');
var React = require('react');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var styled__default = /*#__PURE__*/_interopDefault(styled);
var React__default = /*#__PURE__*/_interopDefault(React);

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const CSS_MODULES_FLAG = 'primer_react_css_modules_ga';
const StyledPopover = styled__default.default.div.attrs(({
  className,
  caret = 'top'
}) => {
  return {
    className: clsx.clsx(className, `caret-pos--${caret}`)
  };
}).withConfig({
  displayName: "Popover__StyledPopover",
  componentId: "sc-q9r75g-0"
})(["position:", ";z-index:100;display:", ";", ";"], props => props.relative ? 'relative' : 'absolute', props => props.open ? 'block' : 'none', sx.default);
const BaseComponent = toggleStyledComponent.toggleStyledComponent(CSS_MODULES_FLAG, 'div', StyledPopover);
const Popover = /*#__PURE__*/React__default.default.forwardRef(function Popover({
  className,
  caret = 'top',
  open,
  relative,
  ...props
}, forwardRef) {
  const enabled = useFeatureFlag.useFeatureFlag(CSS_MODULES_FLAG);
  if (enabled) {
    return /*#__PURE__*/React__default.default.createElement(BaseComponent, _extends({}, props, {
      ref: forwardRef,
      "data-open": open ? '' : undefined,
      "data-relative": relative ? '' : undefined,
      "data-caret": caret,
      className: clsx.clsx(className, Popover_module.Popover)
    }));
  }
  return /*#__PURE__*/React__default.default.createElement(BaseComponent, _extends({}, props, {
    className: className,
    caret: caret,
    open: open,
    relative: relative
  }));
});
Popover.displayName = 'Popover';
const StyledPopoverContent = toggleStyledComponent.toggleStyledComponent(CSS_MODULES_FLAG, 'div', styled__default.default.div.withConfig({
  displayName: "Popover__StyledPopoverContent",
  componentId: "sc-q9r75g-1"
})(["border:1px solid ", ";border-radius:", ";position:relative;width:232px;margin-right:auto;margin-left:auto;padding:", ";background-color:", ";&::before,&::after{position:absolute;left:50%;display:inline-block;content:'';}&::before{top:-", ";margin-left:-9px;border:", " solid transparent;border-bottom-color:", ";}&::after{top:-14px;margin-left:-", ";border:7px solid transparent;border-bottom-color:", ";}", ".caret-pos--bottom &,", ".caret-pos--bottom-right &,", ".caret-pos--bottom-left &{&::before,&::after{top:auto;border-bottom-color:transparent;}&::before{bottom:-", ";border-top-color:", ";}&::after{bottom:-14px;border-top-color:", ";}}", ".caret-pos--top-right &,", ".caret-pos--bottom-right &{right:-9px;margin-right:0;&::before,&::after{left:auto;margin-left:0;}&::before{right:20px;}&::after{right:21px;}}", ".caret-pos--top-left &,", ".caret-pos--bottom-left &{left:-9px;margin-left:0;&::before,&::after{left:", ";margin-left:0;}&::after{left:calc(", " + 1px);}}", ".caret-pos--right &,", ".caret-pos--right-top &,", ".caret-pos--right-bottom &,", ".caret-pos--left &,", ".caret-pos--left-top &,", ".caret-pos--left-bottom &{&::before,&::after{top:50%;left:auto;margin-left:0;border-bottom-color:transparent;}&::before{margin-top:calc((", " + 1px) * -1);}&::after{margin-top:-", ";}}", ".caret-pos--right &,", ".caret-pos--right-top &,", ".caret-pos--right-bottom &{&::before{right:-", ";border-left-color:", ";}&::after{right:-14px;border-left-color:", ";}}", ".caret-pos--left &,", ".caret-pos--left-top &,", ".caret-pos--left-bottom &{&::before{left:-", ";border-right-color:", ";}&::after{left:-14px;border-right-color:", ";}}", ".caret-pos--right-top &,", ".caret-pos--left-top &{&::before,&::after{top:", ";}}", ".caret-pos--right-bottom &,", ".caret-pos--left-bottom &{&::before,&::after{top:auto;}&::before{bottom:", ";}&::after{bottom:calc(", " + 1px);}}", ";"], constants.get('colors.border.default'), constants.get('radii.2'), constants.get('space.4'), constants.get('colors.canvas.overlay'), constants.get('space.3'), constants.get('space.2'), constants.get('colors.border.default'), constants.get('space.2'), constants.get('colors.canvas.overlay'), StyledPopover, StyledPopover, StyledPopover, constants.get('space.3'), constants.get('colors.border.default'), constants.get('colors.canvas.overlay'), StyledPopover, StyledPopover, StyledPopover, StyledPopover, constants.get('space.4'), constants.get('space.4'), StyledPopover, StyledPopover, StyledPopover, StyledPopover, StyledPopover, StyledPopover, constants.get('space.2'), constants.get('space.2'), StyledPopover, StyledPopover, StyledPopover, constants.get('space.3'), constants.get('colors.border.default'), constants.get('colors.canvas.overlay'), StyledPopover, StyledPopover, StyledPopover, constants.get('space.3'), constants.get('colors.border.default'), constants.get('colors.canvas.overlay'), StyledPopover, StyledPopover, constants.get('space.4'), StyledPopover, StyledPopover, constants.get('space.3'), constants.get('space.3'), sx.default));
const PopoverContent = ({
  className,
  ...props
}) => {
  const enabled = useFeatureFlag.useFeatureFlag(CSS_MODULES_FLAG);
  if (enabled) {
    return /*#__PURE__*/React__default.default.createElement(StyledPopoverContent, _extends({}, props, {
      className: clsx.clsx(className, Popover_module.PopoverContent)
    }));
  }
  return /*#__PURE__*/React__default.default.createElement(StyledPopoverContent, _extends({}, props, {
    className: className
  }));
};
PopoverContent.displayName = "PopoverContent";
PopoverContent.displayName = 'Popover.Content';
var Popover$1 = Object.assign(Popover, {
  Content: PopoverContent
});

module.exports = Popover$1;