@redocly/asyncapi-docs/lib-esm/src/components/TagBlock.js

Async API docs for Redocly Realm

import{jsx as a,jsxs as l,Fragment as w}from"react/jsx-runtime";import c from"styled-components";import{useAtomValue as b}from"jotai";import{Row as y,SamplesMiddlePanel as _,Markdown as B,ExternalDocumentation as $,Section as D}from"@redocly/openapi-docs";import{H2 as L,LayoutVariant as j,Button as A,breakpoints as E,LinkIcon as I}from"@redocly/theme";import{useLocation as P,useNavigate as W}from"react-router-dom";import M,{useMemo as k,useCallback as F}from"react";import{layoutAtom as H,routingBasePathAtom as N}from"../jotai/app";import{ExternalDocumentationWrapper as R,ShareLink as T}from"./common";import{ItemsNavigation as V}from"./ItemsNavigation";import{ChannelSection as z}from"./ChannelSection";const rn=M.memo(({tag:n,definition:o})=>{var d,m,u,v;const p=b(H),g=b(N),h=P(),x=W(),t=!!(!((d=n.items)===null||d===void 0)&&d.length),S=p===j.STACKED,e=(u=(m=o?.components)===null||m===void 0?void 0:m.tags)===null||u===void 0?void 0:u[n.label],f=k(()=>{var i,r;return t?(r=(i=o?.channels)===null||i===void 0?void 0:i[n.items[0].id])===null||r===void 0?void 0:r.bindings:void 0},[t,o?.channels,n.items]),s=k(()=>{if(!t)return!1;const i=h.pathname;return i.endsWith(n.link||"")||n.items.some(r=>r.link&&i.toLowerCase().includes(r.link.toLowerCase()))},[t,h.pathname,n.link,n.items]),C=F(()=>{n.link&&x(n.link)},[x,n.link]);return l(w,{children:[a(K,{expanded:t&&!s,sectionId:n.dataSectionId,children:l(q,{expanded:s,children:[l(y,{layout:p,children:[l(_,{fullWidth:!t,isStacked:S,children:[l(J,{children:[n.label,a(T,{to:`/${g||""}/${n.link}`,"aria-label":`link to ${n.label}`})]}),e?.description&&a(B,{source:e.description}),e?.externalDocs&&a(R,{children:a($,{externalDocs:e.externalDocs})})]}),t&&n.items&&a(V,{items:n.items,firstChannelBinding:f})]}),t&&!s&&a(G,{type:"button",variant:"text",size:"medium",onClick:C,children:"+ Show"})]})}),s&&((v=n.items)===null||v===void 0?void 0:v.map(i=>a(z,{item:i,definition:o},i.link)))]})}),K=c(D)`
  scroll-margin-top: calc(var(--navbar-height)) !important;
`,q=c.div`
  padding-bottom: ${({expanded:n})=>n?"var(--spacing-xxl)":""};
  padding-bottom: ${({expanded:n})=>n?"var(--spacing-xxl)":""};
`,G=c(A)`
  margin: var(--spacing-md) var(--spacing-xl) var(--spacing-xxs);
  width: calc(100% - var(--spacing-xl) * 2);

  @media screen and (min-width: ${E.medium}) {
    --button-margin-md: calc(var(--spacing-xl) * 2);

    margin-left: var(--button-margin-md);
    margin-right: var(--button-margin-md);
    width: calc(100% - var(--button-margin-md) * 2);
  }
`,J=c(L)`
  :hover {
    ${I} {
      opacity: 1;
      visibility: visible;
    }
  }
`;export{rn as TagBlock};