@redocly/theme/lib/components/Breadcrumbs/BreadcrumbDropdown.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 () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.BreadcrumbDropdown = BreadcrumbDropdown;
const react_1 = __importDefault(require("react"));
const styled_components_1 = __importStar(require("styled-components"));
const hooks_1 = require("../../core/hooks");
const Dropdown_1 = require("../../components/Dropdown/Dropdown");
const DropdownMenu_1 = require("../../components/Dropdown/DropdownMenu");
const DropdownMenuItem_1 = require("../../components/Dropdown/DropdownMenuItem");
const Tooltip_1 = require("../../components/Tooltip/Tooltip");
const GenericIcon_1 = require("../../icons/GenericIcon/GenericIcon");
const constants_1 = require("../../core/constants");
const BreadcrumbIcon_1 = require("../../components/Breadcrumbs/BreadcrumbIcon");
function BreadcrumbDropdown({ children, label, items, onItemClick, className, }) {
    const { useTelemetry, useTranslate } = (0, hooks_1.useThemeHooks)();
    const telemetry = useTelemetry();
    const { translate } = useTranslate();
    if (!items || items.length === 0) {
        return null;
    }
    const isTruncated = label.length > constants_1.BREADCRUMB_MAX_LENGTH;
    const triggerContent = isTruncated ? (react_1.default.createElement(Tooltip_1.Tooltip, { tip: label, placement: "bottom" },
        react_1.default.createElement(TriggerContentWrapper, null, children))) : (children);
    const trigger = react_1.default.createElement(StyledDropdownTrigger, null, triggerContent);
    return (react_1.default.createElement(BreadcrumbDropdownWrapper, { "data-component-name": "Breadcrumbs/BreadcrumbDropdown", className: className, "data-testid": "breadcrumb-dropdown" },
        react_1.default.createElement(Dropdown_1.Dropdown, { trigger: trigger, closeOnClick: true },
            react_1.default.createElement(DropdownMenu_1.DropdownMenu, null, items.map((item, index) => {
                const isActive = Boolean(item === null || item === void 0 ? void 0 : item.isActive);
                const hasLink = Boolean(item.link);
                const translatedLabel = translate(item.labelTranslationKey, item.label);
                return (react_1.default.createElement(StyledDropdownMenuItem, { key: index, onAction: () => {
                        onItemClick === null || onItemClick === void 0 ? void 0 : onItemClick(item, index);
                        telemetry.sendBreadcrumbClickedMessage([
                            {
                                object: 'breadcrumb',
                                link: item.link,
                                position: index + 1,
                                totalBreadcrumbs: items.length,
                            },
                        ]);
                    }, "$hasLink": hasLink, to: item.link, dataAttributes: !hasLink ? { 'aria-disabled': 'true' } : {} },
                    react_1.default.createElement(DropdownContent, { "$isActive": isActive },
                        react_1.default.createElement(BreadcrumbIcon_1.BreadcrumbIcon, { icon: item.icon }),
                        react_1.default.createElement(DropdownLabel, null, translatedLabel),
                        isActive && (react_1.default.createElement(ActiveIcon, null,
                            react_1.default.createElement(GenericIcon_1.GenericIcon, { icon: "check" }))))));
            })))));
}
const BreadcrumbDropdownWrapper = styled_components_1.default.div `
  display: inline-flex;
  align-items: center;
`;
const StyledDropdownTrigger = styled_components_1.default.button `
  display: flex;
  align-items: center;
  gap: var(--breadcrumbs-gap);
  border: none;
  background: none;
  border-radius: var(--breadcrumbs-border-radius);
  color: var(--breadcrumbs-text-color);
  cursor: pointer;
  font-size: var(--breadcrumbs-font-size);

  &:hover {
    background-color: var(--breadcrumbs-background-color-hover);
  }

  &:focus {
    box-shadow: var(--breadcrumbs-box-shadow-focus);
    outline: none;
  }
`;
const StyledDropdownMenuItem = (0, styled_components_1.default)(DropdownMenuItem_1.DropdownMenuItem) `
  cursor: ${(props) => (props.$hasLink ? 'pointer' : 'default')};

  ${(props) => !props.$hasLink &&
    (0, styled_components_1.css) `
      &:focus,
      &:focus-visible {
        outline: none;
        box-shadow: none;
      }

      &:hover {
        background-color: transparent;
        color: inherit;
      }
    `}
`;
const TriggerContentWrapper = styled_components_1.default.span `
  display: flex;
  align-items: center;
  gap: var(--breadcrumbs-gap);
`;
const DropdownContent = styled_components_1.default.div `
  display: flex;
  align-items: center;
  gap: var(--breadcrumbs-gap);
  padding: var(--breadcrumb-padding);
  color: ${(props) => (props.$isActive ? 'var(--breadcrumbs-text-color-active)' : 'inherit')};
  font-weight: ${(props) => props.$isActive ? 'var(--breadcrumbs-font-weight-active)' : 'inherit'};
`;
const DropdownLabel = styled_components_1.default.span `
  color: inherit;
`;
const ActiveIcon = styled_components_1.default.span `
  position: absolute;
  left: var(--breadcrumb-dropdown-active-icon-position);
  display: inline-flex;
  align-items: center;
  color: inherit;
  width: var(--breadcrumbs-icon-size);
  height: var(--breadcrumbs-icon-size);
`;
//# sourceMappingURL=BreadcrumbDropdown.js.map