@primer/components/lib/Dropdown.js

Primer react components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _react = _interopRequireDefault(require("react"));

var _styledComponents = _interopRequireDefault(require("styled-components"));

var _Button = _interopRequireDefault(require("./Button"));

var _constants = require("./constants");

var _Details = _interopRequireDefault(require("./Details"));

var _DropdownStyles = _interopRequireDefault(require("./DropdownStyles"));

var _useDetails = _interopRequireDefault(require("./hooks/useDetails"));

var _sx = _interopRequireDefault(require("./sx"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }

const StyledDetails = (0, _styledComponents.default)(_Details.default).withConfig({
  displayName: "Dropdown__StyledDetails",
  componentId: "sc-16yoecj-0"
})(["position:relative;display:inline-block;"]);

const Dropdown = ({
  children,
  className,
  ...rest
}) => {
  const {
    getDetailsProps
  } = (0, _useDetails.default)({
    closeOnOutsideClick: true
  });
  return /*#__PURE__*/_react.default.createElement(StyledDetails, _extends({
    className: className
  }, getDetailsProps(), rest), children);
};

Dropdown.displayName = "Dropdown";

const DropdownButton = ({
  children,
  ...rest
}) => {
  return /*#__PURE__*/_react.default.createElement(_Button.default, _extends({
    as: "summary",
    "aria-haspopup": "true"
  }, rest), children, /*#__PURE__*/_react.default.createElement(DropdownCaret, null));
};

DropdownButton.displayName = "DropdownButton";

const DropdownCaret = _styledComponents.default.div.withConfig({
  displayName: "Dropdown__DropdownCaret",
  componentId: "sc-16yoecj-1"
})(["border:4px solid transparent;margin-left:12px;border-top-color:currentcolor;border-bottom-width:0;content:'';display:inline-block;height:0;vertical-align:middle;width:0;", ";", ";"], _constants.COMMON, _sx.default);

const DropdownMenu = _styledComponents.default.ul.withConfig({
  displayName: "Dropdown__DropdownMenu",
  componentId: "sc-16yoecj-2"
})(["background-clip:padding-box;background-color:", ";border:1px solid ", ";border-radius:", ";box-shadow:", ";left:0;list-style:none;margin-top:2px;padding:5px 0 5px 0 !important;position:absolute;top:100%;width:160px;z-index:100;&::before{position:absolute;display:inline-block;content:'';}&::after{position:absolute;display:inline-block;content:'';}&::before{border:8px solid transparent;border-bottom-color:", ";}&::after{border:7px solid transparent;border-bottom-color:", ";}> ul{list-style:none;}", ";", ";", ";"], (0, _constants.get)('colors.canvas.overlay'), (0, _constants.get)('colors.border.default'), (0, _constants.get)('radii.2'), (0, _constants.get)('shadows.shadow.large'), (0, _constants.get)('colors.canvas.overlay'), (0, _constants.get)('colors.canvas.overlay'), props => props.direction ? (0, _DropdownStyles.default)(props.theme, props.direction) : '', _constants.COMMON, _sx.default);

const DropdownItem = _styledComponents.default.li.withConfig({
  displayName: "Dropdown__DropdownItem",
  componentId: "sc-16yoecj-3"
})(["display:block;padding:", " 10px ", " 15px;overflow:hidden;color:", ";text-overflow:ellipsis;white-space:nowrap;a{color:", ";text-decoration:none;display:block;overflow:hidden;color:", ";text-overflow:ellipsis;white-space:nowrap;}&:focus,a:focus{color:", ";text-decoration:none;background-color:", ";}&:hover,&:hover a{color:", ";text-decoration:none;background-color:", ";outline:none;}", ";", ";"], (0, _constants.get)('space.1'), (0, _constants.get)('space.1'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.default'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), (0, _constants.get)('colors.fg.onEmphasis'), (0, _constants.get)('colors.accent.emphasis'), _constants.COMMON, _sx.default);

DropdownMenu.defaultProps = {
  direction: 'sw'
};
DropdownMenu.displayName = 'Dropdown.Menu';
DropdownItem.displayName = 'Dropdown.Item';
DropdownButton.defaultProps = _Button.default.defaultProps;
DropdownButton.displayName = 'Dropdown.Button';
DropdownCaret.displayName = 'Dropdown.Caret';
Dropdown.defaultProps = _Details.default.defaultProps;

var _default = Object.assign(Dropdown, {
  Caret: DropdownCaret,
  Menu: DropdownMenu,
  Item: DropdownItem,
  Button: DropdownButton
});

exports.default = _default;