@redocly/theme/lib/components/Dropdown/DropdownMenu.js

Shared UI components lib

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DropdownMenu = DropdownMenu;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importDefault(require("styled-components"));
const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
function DropdownMenu(props) {
    let content = null;
    if ('children' in props) {
        content = props.children;
    }
    if ('items' in props) {
        content = props.items.map((item, idx) => (react_1.default.createElement(DropdownMenuItem_1.DropdownMenuItem, Object.assign({ key: idx }, item), item.content)));
    }
    return (react_1.default.createElement(DropdownMenuWrapper, { "data-component-name": "Dropdown/DropdownMenu", "data-testid": "dropdown-menu", className: props.className, role: props.role || 'menu' },
        content,
        props.footer || null));
}
const DropdownMenuWrapper = styled_components_1.default.ul `
  font-size: var(--dropdown-menu-font-size);
  font-weight: var(--dropdown-menu-font-weight);
  line-height: var(--dropdown-menu-line-height);
  color: var(--dropdown-menu-text-color);

  margin: 0;
  min-width: var(--dropdown-menu-min-width);
  max-width: var(--dropdown-menu-max-width);
  max-height: var(--dropdown-menu-max-height);
  padding: var(--dropdown-menu-padding);
  background-color: var(--dropdown-menu-bg-color);
  border-radius: var(--dropdown-menu-border-radius);
  box-shadow: var(--dropdown-menu-box-shadow);
  border: 1px solid var(--dropdown-menu-border-color);
  list-style-type: none;
  white-space: nowrap;
  overflow-x: hidden;
  overflow-y: auto;
  z-index: var(--z-index-surface);

  display: flex;
  flex-direction: column;
  gap: var(--dropdown-menu-item-gap);
`;
//# sourceMappingURL=DropdownMenu.js.map