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

Async API docs for Redocly Realm

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

  @media screen and (min-width: ${N.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);
  }
`,rn=d(T)`
  display: flex;
  &:hover {
    ${z} {
      opacity: 1;
      visibility: visible;
    }
  }
`;export{Bn as TagBlock};