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

An implementation of GitHub's Primer Design System using React

import { clsx } from 'clsx';
import styled from 'styled-components';
import { get } from '../constants.js';
import sx from '../sx.js';
import { toggleStyledComponent } from '../internal/utils/toggleStyledComponent.js';
import '../FeatureFlags/FeatureFlags.js';
import { useFeatureFlag } from '../FeatureFlags/useFeatureFlag.js';
import '../FeatureFlags/DefaultFeatureFlags.js';
import classes from './Popover.module.css.js';
import React from '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.div.attrs(({
  className,
  caret = 'top'
}) => {
  return {
    className: 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);
const BaseComponent = toggleStyledComponent(CSS_MODULES_FLAG, 'div', StyledPopover);
const Popover = /*#__PURE__*/React.forwardRef(function Popover({
  className,
  caret = 'top',
  open,
  relative,
  ...props
}, forwardRef) {
  const enabled = useFeatureFlag(CSS_MODULES_FLAG);
  if (enabled) {
    return /*#__PURE__*/React.createElement(BaseComponent, _extends({}, props, {
      ref: forwardRef,
      "data-open": open ? '' : undefined,
      "data-relative": relative ? '' : undefined,
      "data-caret": caret,
      className: clsx(className, classes.Popover)
    }));
  }
  return /*#__PURE__*/React.createElement(BaseComponent, _extends({}, props, {
    className: className,
    caret: caret,
    open: open,
    relative: relative
  }));
});
Popover.displayName = 'Popover';
const StyledPopoverContent = toggleStyledComponent(CSS_MODULES_FLAG, 'div', styled.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);}}", ";"], get('colors.border.default'), get('radii.2'), get('space.4'), get('colors.canvas.overlay'), get('space.3'), get('space.2'), get('colors.border.default'), get('space.2'), get('colors.canvas.overlay'), StyledPopover, StyledPopover, StyledPopover, get('space.3'), get('colors.border.default'), get('colors.canvas.overlay'), StyledPopover, StyledPopover, StyledPopover, StyledPopover, get('space.4'), get('space.4'), StyledPopover, StyledPopover, StyledPopover, StyledPopover, StyledPopover, StyledPopover, get('space.2'), get('space.2'), StyledPopover, StyledPopover, StyledPopover, get('space.3'), get('colors.border.default'), get('colors.canvas.overlay'), StyledPopover, StyledPopover, StyledPopover, get('space.3'), get('colors.border.default'), get('colors.canvas.overlay'), StyledPopover, StyledPopover, get('space.4'), StyledPopover, StyledPopover, get('space.3'), get('space.3'), sx));
const PopoverContent = ({
  className,
  ...props
}) => {
  const enabled = useFeatureFlag(CSS_MODULES_FLAG);
  if (enabled) {
    return /*#__PURE__*/React.createElement(StyledPopoverContent, _extends({}, props, {
      className: clsx(className, classes.PopoverContent)
    }));
  }
  return /*#__PURE__*/React.createElement(StyledPopoverContent, _extends({}, props, {
    className: className
  }));
};
PopoverContent.displayName = "PopoverContent";
PopoverContent.displayName = 'Popover.Content';
var Popover$1 = Object.assign(Popover, {
  Content: PopoverContent
});

export { Popover$1 as default };