@redocly/theme/lib/components/Menu/MenuItem.js

Shared UI components lib

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.MenuItem = MenuItem;
const react_1 = __importStar(require("react"));
const styled_components_1 = __importStar(require("styled-components"));
const hooks_1 = require("../../core/hooks");
const LaunchIcon_1 = require("../../icons/LaunchIcon/LaunchIcon");
const Link_1 = require("../../components/Link/Link");
const ChevronDownIcon_1 = require("../../icons/ChevronDownIcon/ChevronDownIcon");
const ChevronRightIcon_1 = require("../../icons/ChevronRightIcon/ChevronRightIcon");
const HttpTag_1 = require("../../components/Tags/HttpTag");
const constants_1 = require("../../core/constants");
const utils_1 = require("../../core/utils");
const ArrowRightIcon_1 = require("../../icons/ArrowRightIcon/ArrowRightIcon");
const Badge_1 = require("../../components/Badge/Badge");
function MenuItem(props) {
    var _a;
    const { item, depth, className, onClick } = props;
    const { useTranslate, useOtelTelemetry } = (0, hooks_1.useThemeHooks)();
    const { translate } = useTranslate();
    const type = (0, utils_1.getMenuItemType)(item);
    const nestedMenuRef = (0, react_1.useRef)(null);
    const labelRef = (0, react_1.useRef)(null);
    const { isExpanded, canUnmount, style, handleExpand } = (0, hooks_1.useNestedMenu)(Object.assign(Object.assign({}, props), { type,
        labelRef,
        nestedMenuRef }));
    const otelTelemetry = useOtelTelemetry();
    const isDrilldown = type === constants_1.MenuItemType.DrillDown;
    const isSeparator = type === constants_1.MenuItemType.Separator;
    const isNested = type === constants_1.MenuItemType.Group;
    const hasChevron = isNested && !isDrilldown;
    const hasHttpTag = !!item.httpVerb || type === constants_1.MenuItemType.Operation;
    const handleOnClick = () => {
        otelTelemetry.send({
            type: 'sidebar.item_clicked',
            payload: {
                label: item.label,
                type: item.type === 'link' || item.type === 'group' ? item.type : undefined,
            },
        });
        onClick === null || onClick === void 0 ? void 0 : onClick();
        if (isNested) {
            handleExpand();
        }
    };
    const chevron = hasChevron ? (isExpanded ? (react_1.default.createElement(ChevronDownIcon_1.ChevronDownIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" })) : (react_1.default.createElement(ChevronRightIcon_1.ChevronRightIcon, { size: "var(--menu-item-label-chevron-size)", color: "--tree-content-color-default" }))) : null;
    const httpColor = item.deprecated ? 'http-deprecated' : item.httpVerb;
    const label = item.label && (react_1.default.createElement(MenuItemLabelWrapper, { active: item.active, deprecated: item.deprecated, depth: depth, withChevron: hasChevron, isSeparator: isSeparator, onClick: handleOnClick, ref: labelRef, role: item.link ? 'none' : 'link', "data-testid": "menu-item-label" },
        hasChevron ? react_1.default.createElement(ChevronWrapper, null, chevron) : null,
        item.icon ? react_1.default.createElement(MenuItemIcon, { src: item.icon }) : null,
        react_1.default.createElement(MenuItemLabelTextWrapper, null,
            react_1.default.createElement(MenuItemLabel, null,
                react_1.default.createElement("span", null, translate(item.labelTranslationKey, item.label)), (_a = item.badges) === null || _a === void 0 ? void 0 :
                _a.map(({ name, color }) => (react_1.default.createElement(MenuItemBadge, { color: color, key: name }, name))),
                item.external ? react_1.default.createElement(LaunchIcon_1.LaunchIcon, { size: "var(--menu-item-external-icon-size)" }) : null),
            item.sublabel ? (react_1.default.createElement(MenuItemSubLabel, null, translate(item.subLabelTranslationKey, item.sublabel))) : null),
        isDrilldown ? react_1.default.createElement(ArrowRightIcon_1.ArrowRightIcon, { size: "12px" }) : null,
        hasHttpTag ? (react_1.default.createElement(HttpTag_1.HttpTag, { color: httpColor || '' }, item.httpVerb === 'hook' ? 'event' : item.httpVerb)) : null));
    return (react_1.default.createElement(MenuItemWrapper, { "data-component-name": "Menu/MenuItem", className: generateClassName({ type, item, className }) },
        item.link ? (react_1.default.createElement(MenuItemLink, { to: item.link, external: item.external, target: item.target, languageInsensitive: item.languageInsensitive }, label)) : (label),
        isNested ? (react_1.default.createElement(MenuItemNestedWrapper, { depth: depth, ref: nestedMenuRef, style: style }, isExpanded || !canUnmount ? props.children : null)) : null,
        item.separatorLine ? (react_1.default.createElement(MenuItemSeparatorLine, { depth: depth, linePosition: item.linePosition })) : null));
}
function generateClassName({ type, item, className, }) {
    const classNames = [className, `menu-item-type-${type}`];
    if (type === constants_1.MenuItemType.Separator) {
        classNames.push(`menu-item-type-${type}-${item.variant || 'primary'}`);
    }
    if (item.menuStyle === 'drilldown-header') {
        classNames.push(`menu-item-type-drilldown-header`);
        if (item.link) {
            classNames.push(`menu-item-type-drilldown-header-link`);
        }
    }
    return classNames
        .filter((className) => className)
        .join(' ')
        .trim();
}
const ChevronWrapper = styled_components_1.default.div `
  flex-shrink: 0;
`;
const MenuItemWrapper = styled_components_1.default.div `
  display: flex;
  flex-direction: column;
  background-color: var(--menu-item-bg-color);
  font-family: var(--menu-item-font-family);
  font-size: var(--menu-item-font-size);
  font-weight: var(--menu-item-font-weight);
  line-height: var(--menu-item-line-height);
  color: var(--menu-item-text-color);

  .tag-http {
    align-self: flex-start;
    margin-left: auto;
  }

  &.menu-item-type-separator {
    pointer-events: none;
  }

  > a {
    text-decoration: none;
    color: var(--menu-item-text-color);
  }
`;
const MenuItemNestedWrapper = styled_components_1.default.div `
  overflow: hidden;
  order: 1;
  position: relative;

  &:hover:has(&:hover)::before {
    display: none;
  }

  &:hover::before {
    content: '';
    position: absolute;
    bottom: var(--spacing-unit);
    top: 0;
    z-index: var(--z-index-surface);
    left: ${({ depth }) => `calc(
        var(--menu-item-label-margin-horizontal) +
        var(--menu-item-padding-horizontal) +
        (var(--menu-item-label-chevron-size) / 2 - 1px) +
        var(--menu-item-nested-offset) * ${depth})
      `};
    border: 0.5px solid var(--border-color-primary);
  }
`;
const MenuItemLabelWrapper = styled_components_1.default.li `
  display: flex;
  position: relative;
  cursor: pointer;
  order: 1;
  align-items: var(--menu-item-label-align-items);
  transition: var(--menu-item-label-transition);
  word-break: var(--menu-item-label-word-break);
  border-radius: var(--menu-item-label-border-radius);
  margin: var(--menu-item-label-margin);
  padding: var(--menu-item-label-padding);
  gap: var(--menu-item-label-gap);

  padding-left: ${({ withChevron, depth, isSeparator }) => `calc(
      var(--menu-item-padding-horizontal) +
      ${!withChevron ? 'var(--menu-item-label-chevron-offset) + ' + (isSeparator ? 'var(--menu-item-separator-offest)' : '0px') : '0px'} +
      ${depth ? 'var(--menu-item-nested-offset) * ' + depth : '0px'}
    )`};

  ${({ active, deprecated }) => active &&
    (0, styled_components_1.css) `
      color: ${deprecated ? 'var(--menu-content-color-disabled)' : 'var(--menu-item-color-active)'};
      background-color: var(--menu-item-bg-color-active);

      ${ChevronDownIcon_1.ChevronDownIcon} path {
        fill: var(--menu-item-color-active);
      }
      ${ChevronRightIcon_1.ChevronRightIcon} path {
        fill: var(--menu-item-color-active);
      }

      &:hover {
        background: var(--menu-item-bg-color-active);
      }
    `};

  ${({ deprecated }) => deprecated &&
    (0, styled_components_1.css) `
      color: var(--menu-content-color-disabled);

      &:hover {
        color: var(--menu-content-color-disabled);
      }
    `};

  &:hover {
    color: var(--menu-item-color-hover);
    background: var(--menu-item-bg-color-hover);

    ${ChevronDownIcon_1.ChevronDownIcon} path {
      fill: var(--menu-item-color-hover);
    }
    ${ChevronRightIcon_1.ChevronRightIcon} path {
      fill: var(--menu-item-color-hover);
    }
  }

  &:active {
    color: var(--menu-item-color-active);
    background: var(--menu-item-bg-color-active);

    ${ChevronDownIcon_1.ChevronDownIcon} path {
      fill: var(--menu-item-color-active);
    }
    ${ChevronRightIcon_1.ChevronRightIcon} path {
      fill: var(--menu-item-color-active);
    }
  }

  &:empty {
    padding: 0;
  }
`;
const MenuItemLabelTextWrapper = styled_components_1.default.div `
  display: flex;
  flex-direction: column;
  flex-grow: 1;
`;
const MenuItemSubLabel = styled_components_1.default.div `
  margin: var(--menu-item-sublabel-margin);
  color: var(--menu-item-sublabel-text-color);
  font-weight: var(--menu-item-sublabel-font-weight);
  font-size: var(--menu-item-sublabel-font-size);
  font-family: var(--menu-item-sublabel-font-family);
`;
const MenuItemIcon = styled_components_1.default.img `
  width: var(--menu-item-icon-size);
  height: var(--menu-item-icon-size);
  margin: var(--menu-item-icon-margin);
  border-radius: var(--menu-item-icon-border-radius);
  flex-shrink: 0;
  overflow: hidden;
`;
const MenuItemLink = (0, styled_components_1.default)(Link_1.Link) `
  order: 1;
`;
const MenuItemSeparatorLine = styled_components_1.default.div `
  height: var(--menu-item-separator-line-height);
  background-color: var(--menu-item-separator-line-bg-color);
  margin: ${({ depth }) => `
    var(--menu-item-padding-vertical)
    var(--sidebar-margin-horizontal)
    var(--menu-item-padding-vertical)
    calc(var(--sidebar-margin-horizontal) +
    ${depth ? 'var(--menu-item-nested-offset) * ' + depth : '0px'})
  `};
  order: ${({ linePosition }) => (linePosition === 'top' ? 0 : 1)};
`;
const MenuItemLabel = styled_components_1.default.span `
  & > * {
    margin-right: var(--spacing-xxs);
  }
`;
const MenuItemBadge = (0, styled_components_1.default)(Badge_1.Badge) `
  margin-left: 0;
  background-color: ${({ color }) => color || 'var(--color-info-base)'};
  font-size: var(--font-size-sm);
  line-height: var(--line-height-sm);
  padding: 0 var(--spacing-xxs);
  max-width: 80px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
`;
//# sourceMappingURL=MenuItem.js.map