@redocly/openapi-docs 3.12.0 → 3.12.2

package/lib/components/Security/SecurityModal.js

@@ -1,4 +1,29 @@
-import{jsx as t,jsxs as n}from"react/jsx-runtime";import{Fragment as h,useState as f,useRef as u}from"react";import{useOutsideClick as v,useFocusTrap as x}from"@redocly/theme/core/openapi";import{Button as b}from"@redocly/theme/components/Button/Button";import{SecurityIcon as y}from"@redocly/theme/icons/SecurityIcon/SecurityIcon";import{Segmented as S}from"@redocly/theme/components/Segmented/Segmented";import{CloseIcon as w}from"@redocly/theme/icons/CloseIcon/CloseIcon";import{Typography as z}from"@redocly/theme/components/Typography/Typography";import{SecurityFlow as j}from"./SecurityFlow.js";import{Divider as k}from"./Divider.js";import{useTranslate as C}from"../../hooks/index.js";import{styled as e}from"../../styled-components.js";function J({securities:r,onClose:s}){const c=C(),[l,d]=f(0),i=u(null),{schemes:p}=r[l]||{};v(i,s),x(i);const m=r.map(({schemes:o},a)=>({label:o.map(({id:g})=>g).join(" and "),value:a}));return t(F,{children:n(T,{ref:i,tabIndex:0,children:[t(I,{onClick:s,"data-testid":"close",variant:"ghost",icon:t(w,{})}),n(B,{children:[t(y,{size:"24px"}),c("openapi.security","Security")]}),t(S,{value:l,onChange:({value:o})=>d(o),options:m}),p.map((o,a)=>n(h,{children:[t(j,{...o,securities:r}),a!==p.length-1&&t(k,{label:"and"})]},o.id))]})})}const T=e.div`
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment, useState, useRef } from 'react';
+import { useOutsideClick, useFocusTrap } from '@redocly/theme/core/openapi';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { SecurityIcon } from '@redocly/theme/icons/SecurityIcon/SecurityIcon';
+import { Segmented } from '@redocly/theme/components/Segmented/Segmented';
+import { CloseIcon } from '@redocly/theme/icons/CloseIcon/CloseIcon';
+import { Typography } from '@redocly/theme/components/Typography/Typography';
+import { SecurityFlow } from './SecurityFlow.js';
+import { Divider } from './Divider.js';
+import { useTranslate } from '../../hooks/index.js';
+import { styled } from '../../styled-components.js';
+export function SecurityModal({ securities, onClose }) {
+    const translate = useTranslate();
+    const [selectedSecurityScheme, setSelectedSecurityScheme] = useState(0);
+    const modalRef = useRef(null);
+    const { schemes } = securities[selectedSecurityScheme] || {};
+    useOutsideClick(modalRef, onClose);
+    useFocusTrap(modalRef);
+    const options = securities.map(({ schemes }, index) => ({
+        label: schemes.map(({ id }) => id).join(' and '),
+        value: index,
+    }));
+    return (_jsx(StyledBackground, { children: _jsxs(Wrapper, { ref: modalRef, tabIndex: 0, children: [_jsx(Close, { onClick: onClose, "data-testid": "close", variant: "ghost", icon: _jsx(CloseIcon, {}) }), _jsxs(Title, { children: [_jsx(SecurityIcon, { size: "24px" }), translate('openapi.security', 'Security')] }), _jsx(Segmented, { value: selectedSecurityScheme, onChange: ({ value }) => setSelectedSecurityScheme(value), options: options }), schemes.map((scheme, index) => (_jsxs(Fragment, { children: [_jsx(SecurityFlow, { ...scheme, securities: securities }), index !== schemes.length - 1 && _jsx(Divider, { label: "and" })] }, scheme.id)))] }) }));
+}
+const Wrapper = styled.div `
   background: var(--bg-color);
   box-shadow: var(--bg-raised-shadow);
   border-radius: var(--border-radius-lg);
@@ -19,7 +44,8 @@ import{jsx as t,jsxs as n}from"react/jsx-runtime";import{Fragment as h,useState
     font-size: var(--font-size-base);
     line-height: var(--line-height-base);
   }
-`,F=e.div`
+`;
+const StyledBackground = styled.div `
   background: var(--bg-color-modal-overlay);
   position: fixed;
   width: 100vw;
@@ -28,11 +54,13 @@ import{jsx as t,jsxs as n}from"react/jsx-runtime";import{Fragment as h,useState
   left: 0;
   top: 0;
   pointer-events: auto;
-`,I=e(b)`
+`;
+const Close = styled(Button) `
   position: absolute;
   right: var(--spacing-md);
   top: var(--spacing-md);
-`,B=e(z)`
+`;
+const Title = styled(Typography) `
   display: flex;
   align-items: center;
   font-size: var(--h4-font-size);
@@ -41,4 +69,5 @@ import{jsx as t,jsxs as n}from"react/jsx-runtime";import{Fragment as h,useState
   svg {
     margin-right: var(--spacing-xs);
   }
-`;export{J as SecurityModal};
+`;
+//# sourceMappingURL=SecurityModal.js.map

package/lib/components/Security/SecuritySchemeItem.js

@@ -1,20 +1,31 @@
-import{jsx as r,jsxs as s}from"react/jsx-runtime";import{styled as e}from"../../styled-components.js";function c({label:t,value:i}){return!t||!i?null:s(n,{children:[r(o,{children:t}),r(a,{children:i})]})}const n=e.div`
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { styled } from '../../styled-components.js';
+export function SecuritySchemeItem({ label, value }) {
+    if (!label || !value) {
+        return null;
+    }
+    return (_jsxs(Row, { children: [_jsx(Label, { children: label }), _jsx(Value, { children: value })] }));
+}
+const Row = styled.div `
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-start;
   margin-bottom: var(--spacing-xs);
   font-size: var(--font-size-sm);
   color: var(--text-color-secondary);
-`,o=e.div`
+`;
+const Label = styled.div `
   display: flex;
   align-items: center;
   justify-content: flex-start;
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
   flex: 1;
-`,a=e.div`
+`;
+const Value = styled.div `
   flex: 1;
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
   word-break: break-word;
-`;export{c as SecuritySchemeItem};
+`;
+//# sourceMappingURL=SecuritySchemeItem.js.map

package/lib/components/Security/helper.js

@@ -1 +1,16 @@
-function f(r,o){const e=new Set;return o.forEach(({schemes:t})=>{t.forEach(({id:c,scopes:n})=>{c===r&&n.forEach(a=>e.add(a))})}),Array.from(e)}function i(r,o){const e=new Set(r);return o.filter(t=>!e.has(t))}export{i as getOptionalScopes,f as getRequiredScopes};
+export function getRequiredScopes(id, securities) {
+    const allScopes = new Set();
+    securities.forEach(({ schemes }) => {
+        schemes.forEach(({ id: schemeId, scopes }) => {
+            if (schemeId === id) {
+                scopes.forEach((scope) => allScopes.add(scope));
+            }
+        });
+    });
+    return Array.from(allScopes);
+}
+export function getOptionalScopes(requiredScopes, allScopes) {
+    const requiredScopesSet = new Set(requiredScopes);
+    return allScopes.filter((scope) => !requiredScopesSet.has(scope));
+}
+//# sourceMappingURL=helper.js.map

package/lib/components/Security/index.js

@@ -1 +1,11 @@
-import{Security as e}from"./Security.js";import{SecurityButton as m}from"./SecurityButton.js";import{SecurityFlow as f}from"./SecurityFlow.js";import{SecuritySchemeItem as u}from"./SecuritySchemeItem.js";import{OAuthFlow as i}from"./OAuthFlow.js";import{OAuthScopes as y}from"./OAuthScopes.js";import{SecurityModal as l}from"./SecurityModal.js";import{Divider as w}from"./Divider.js";export*from"./helper.js";export*from"./styled.js";export{w as Divider,i as OAuthFlow,y as OAuthScopes,e as Security,m as SecurityButton,f as SecurityFlow,l as SecurityModal,u as SecuritySchemeItem};
+export { Security } from './Security.js';
+export { SecurityButton } from './SecurityButton.js';
+export { SecurityFlow } from './SecurityFlow.js';
+export { SecuritySchemeItem } from './SecuritySchemeItem.js';
+export { OAuthFlow } from './OAuthFlow.js';
+export { OAuthScopes } from './OAuthScopes.js';
+export { SecurityModal } from './SecurityModal.js';
+export { Divider } from './Divider.js';
+export * from './helper.js';
+export * from './styled.js';
+//# sourceMappingURL=index.js.map

package/lib/components/Security/styled.js

@@ -1,4 +1,5 @@
-import{styled as r}from"../../styled-components.js";const a=r.div`
+import { styled } from '../../styled-components.js';
+export const Tag = styled.div `
   border-radius: var(--border-radius);
   padding: 0 var(--spacing-xxs);
   font-family: var(--font-family-monospaced);
@@ -6,8 +7,10 @@ import{styled as r}from"../../styled-components.js";const a=r.div`
   line-height: var(--line-height-sm);
   color: var(--text-color-primary);
   background-color: var(--tag-bg-color);
-`,i=r.a`
+`;
+export const StyledLink = styled.a `
   color: var(--link-color-primary);
   text-decoration: none;
   word-wrap: break-word;
-`;export{i as StyledLink,a as Tag};
+`;
+//# sourceMappingURL=styled.js.map

package/lib/components/SelectOrLabel/SelectOrLabel.js

@@ -1,7 +1,17 @@
-import{jsx as o}from"react/jsx-runtime";import{SimpleSelect as n}from"../common/Select/index.js";import{styled as i}from"../../styled-components.js";const m=i.span`
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SimpleSelect } from '../common/Select/index.js';
+import { styled } from '../../styled-components.js';
+const MimeLabel = styled.span `
   margin-left: 4px;
   font-size: 14px;
   text-transform: none;
   font-weight: 400;
   color: var(--text-color-primary);
-`;function p({Label:r=m,Select:e=n,...t}){return t.options.length===1?o(r,{children:t.options[0].value}):o(e,{...t})}export{p as SelectOrLabel};
+`;
+export function SelectOrLabel({ Label = MimeLabel, Select = SimpleSelect, ...selectProps }) {
+    if (selectProps.options.length === 1) {
+        return _jsx(Label, { children: selectProps.options[0].value });
+    }
+    return _jsx(Select, { ...selectProps });
+}
+//# sourceMappingURL=SelectOrLabel.js.map

package/lib/components/SelectOrLabel/index.js

@@ -1 +1,2 @@
-import{SelectOrLabel as l}from"./SelectOrLabel.js";export{l as SelectOrLabel};
+export { SelectOrLabel } from './SelectOrLabel.js';
+//# sourceMappingURL=index.js.map

package/lib/components/ServerList/ServerList.js

@@ -1,4 +1,21 @@
-import{jsx as i,jsxs as t}from"react/jsx-runtime";import{CopyButton as v}from"@redocly/theme/components/Buttons/CopyButton";import{PanelItemDescription as x,Title as f}from"../PanelItem/index.js";import{ViewNested as u}from"../ViewNested/index.js";import{Tag as y}from"../common/index.js";import{Markdown as w}from"../Markdown/index.js";import{styled as e}from"../../styled-components.js";const V=({servers:h,path:b,translate:r})=>i(j,{children:h.map(o=>{const a=o.url+b,d=Object.keys(o.variables||{}).length,p=d===1?"variable":"variables",l=`${d||""} ${r(`openapi.${p}`,p)}`;return t("div",{children:[i(x,{children:o.description}),t(k,{children:[i(f,{suppressHydrationWarning:!0,children:a}),i(v,{data:a},a)]}),o.variables&&i(u,{expandText:`${r("openapi.actions.show","Show")} ${l}`,hideText:`${r("openapi.actions.hide","Hide")} ${l}`,expandByDefault:!1,expandable:!0,hideDivider:!0,children:i(S,{children:Object.entries(o.variables||{}).map(([c,n])=>t(T,{children:[i(z,{children:c}),t(s,{children:[r("openapi.default","Default")," ",i(g,{children:n.default})]}),i($,{source:n.description}),n.enum&&t(s,{children:[r("openapi.enum","Enum")," ",i(D,{children:n.enum.map(m=>i(g,{children:m},m))})]})]},c))})})]},o.url)})}),j=e.div`
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
+import { PanelItemDescription, Title } from '../PanelItem/index.js';
+import { ViewNested } from '../ViewNested/index.js';
+import { Tag } from '../common/index.js';
+import { Markdown } from '../Markdown/index.js';
+import { styled } from '../../styled-components.js';
+export const ServerList = ({ servers, path, translate }) => (_jsx(ItemsList, { children: servers.map((server) => {
+        const url = server.url + path;
+        const propertyLength = Object.keys(server.variables || {}).length;
+        const keyword = propertyLength === 1 ? 'variable' : 'variables';
+        const pluralOrSingular = `${propertyLength || ''} ${translate(`openapi.${keyword}`, keyword)}`;
+        {
+            /* TODO: highlight server variables, e.g. https://{user}.test.com */
+        }
+        return (_jsxs("div", { children: [_jsx(PanelItemDescription, { children: server.description }), _jsxs(TitleWrap, { children: [_jsx(Title, { suppressHydrationWarning: true, children: url }), _jsx(CopyButton, { data: url }, url)] }), server.variables && (_jsx(ViewNested, { expandText: `${translate('openapi.actions.show', 'Show')} ${pluralOrSingular}`, hideText: `${translate('openapi.actions.hide', 'Hide')} ${pluralOrSingular}`, expandByDefault: false, expandable: true, hideDivider: true, children: _jsx(ServerVariablesContainer, { children: Object.entries(server.variables || {}).map(([varName, varValue]) => (_jsxs(ServerVariableContainer, { children: [_jsx(ServerVariableName, { children: varName }), _jsxs(Variable, { children: [translate('openapi.default', 'Default'), ' ', _jsx(StyledTag, { children: varValue.default })] }), _jsx(Description, { source: varValue.description }), varValue.enum && (_jsxs(Variable, { children: [translate('openapi.enum', 'Enum'), ' ', _jsx(TagWrapper, { children: varValue.enum.map((el) => (_jsx(StyledTag, { children: el }, el))) })] }))] }, varName))) }) }))] }, server.url));
+    }) }));
+const ItemsList = styled.div `
   & > div {
     border-bottom: 1px solid var(--border-color-secondary);
     margin-bottom: var(--spacing-xs);
@@ -10,7 +27,8 @@ import{jsx as i,jsxs as t}from"react/jsx-runtime";import{CopyButton as v}from"@r
     margin-bottom: 0;
     padding-bottom: 0;
   }
-`,S=e.div`
+`;
+const ServerVariablesContainer = styled.div `
   padding-left: var(--spacing-xxs);
   & > div {
     border-bottom: 1px solid var(--border-color-secondary);
@@ -28,32 +46,40 @@ import{jsx as i,jsxs as t}from"react/jsx-runtime";import{CopyButton as v}from"@r
     margin-bottom: 0;
     padding-bottom: 0;
   }
-`,T=e.div`
+`;
+const ServerVariableContainer = styled.div `
   display: flex;
   flex-direction: column;
   flex-wrap: wrap;
-`,$=e(w)`
+`;
+const Description = styled(Markdown) `
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
   color: var(--text-color-primary);
-`,s=e.span`
+`;
+const Variable = styled.span `
   display: flex;
   gap: var(--spacing-xxs);
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
   color: var(--text-color-primary);
-`,z=e(s)`
+`;
+const ServerVariableName = styled(Variable) `
   padding-bottom: var(--spacing-xxs);
   font-weight: var(--font-weight-semibold);
-`,D=e.span`
+`;
+const TagWrapper = styled.span `
   display: flex;
   gap: var(--spacing-xxs);
   flex-wrap: wrap;
-`,g=e(y)`
+`;
+const StyledTag = styled(Tag) `
   font-size: var(--font-size-sm);
   line-height: var(--line-height-sm);
-`,k=e.div`
+`;
+const TitleWrap = styled.div `
   display: flex;
   justify-content: space-between;
   align-items: center;
-`;export{V as ServerList};
+`;
+//# sourceMappingURL=ServerList.js.map

package/lib/components/ServerList/index.js

@@ -1 +1,2 @@
-import{ServerList as o}from"./ServerList.js";export{o as ServerList};
+export { ServerList } from './ServerList.js';
+//# sourceMappingURL=index.js.map

package/lib/components/ServerList/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/lib/components/ServerListDropdown/ServerListDropdown.js

@@ -1 +1,54 @@
-import{jsx as e,jsxs as v}from"react/jsx-runtime";import{useMemo as f,useCallback as l}from"react";import{useAtom as S,useAtomValue as w}from"jotai";import{DropdownMenu as y}from"@redocly/theme/components/Dropdown/DropdownMenu";import{Dropdown as g}from"@redocly/theme/components/Dropdown/Dropdown";import{HttpVerb as k}from"../common/index.js";import{PathWrapper as A,Path as b,StyledCopyButton as C,StyledDropdownMenuItem as P}from"./styled.js";import{PanelItem as j}from"../PanelItem/index.js";import{joinWithSeparator as x}from"../../services/index.js";import{replaceVariables as V}from"../../utils/index.js";import{environmentAtom as D}from"../../jotai/app.js";import{useActiveWithFallback as _,useTelemetry as E}from"../../hooks/index.js";import{getServerEnvName as p}from"../../utils/environments.js";import{createTargetServerSwitchEvent as M}from"../../events/index.js";import{globalStoreAtom as W}from"../../jotai/store.js";const R=({operation:r,className:h})=>{const m=E(),[[d],i]=S(D),{options:{events:n}}=w(W),s=_(r.servers.map(t=>({...t,key:t.url})),d.server),c=l(t=>{t.stopPropagation()},[]),a=l(t=>()=>{if(r.servers.length!==1&&(i({environment:p(t)}),m.send({type:"openapi_docs.switch_servers.clicked",payload:{server:p(t)}}),n?.targetServerSwitch&&t)){const o=M({operation:r,serverUrl:t.url});n.targetServerSwitch(o)}},[r,i,m,n]),u=f(()=>r.servers.map(t=>{const o=x(V(t),r.path);return e(P,{onAction:a(t),children:e(j,{header:t.description,title:o,actions:[e(C,{data:o,toasterPlacement:"left",onCopyClick:c},o)],active:t.url===s,withCheckmark:!0})},o)}),[r.servers,r.path,a,c,s]);return e(g,{className:h,trigger:v(A,{variant:"ghost",children:[e(k,{color:r.httpVerb,children:r.httpVerb}),e(b,{children:r.path})]}),withArrow:!0,children:e(y,{children:u})})};export{R as ServerListDropdown};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useCallback } from 'react';
+import { useAtom, useAtomValue } from 'jotai';
+import { DropdownMenu } from '@redocly/theme/components/Dropdown/DropdownMenu';
+import { Dropdown } from '@redocly/theme/components/Dropdown/Dropdown';
+import { HttpVerb } from '../common/index.js';
+import { PathWrapper, Path, StyledCopyButton, StyledDropdownMenuItem } from './styled.js';
+import { PanelItem } from '../PanelItem/index.js';
+import { joinWithSeparator } from '../../services/index.js';
+import { replaceVariables } from '../../utils/index.js';
+import { environmentAtom } from '../../jotai/app.js';
+import { useActiveWithFallback, useTelemetry } from '../../hooks/index.js';
+import { getServerEnvName } from '../../utils/environments.js';
+import { createTargetServerSwitchEvent } from '../../events/index.js';
+import { globalStoreAtom } from '../../jotai/store.js';
+export const ServerListDropdown = ({ operation, className, }) => {
+    const telemetry = useTelemetry();
+    const [[environment], setEnvironment] = useAtom(environmentAtom);
+    const { options: { events }, } = useAtomValue(globalStoreAtom);
+    const activeServerUrl = useActiveWithFallback(operation.servers.map((s) => ({
+        ...s,
+        key: s.url,
+    })), environment.server);
+    const onCopyClick = useCallback((e) => {
+        e.stopPropagation();
+    }, []);
+    const handleAction = useCallback((server) => () => {
+        if (operation.servers.length === 1) {
+            return; // do not override environment if there is only one server
+        }
+        setEnvironment({ environment: getServerEnvName(server) });
+        telemetry.send({
+            type: 'openapi_docs.switch_servers.clicked',
+            payload: { server: getServerEnvName(server) },
+        });
+        if (events?.targetServerSwitch && server) {
+            const eventPayload = createTargetServerSwitchEvent({
+                operation: operation,
+                serverUrl: server.url,
+            });
+            events.targetServerSwitch(eventPayload);
+        }
+    }, [operation, setEnvironment, telemetry, events]);
+    const items = useMemo(() => {
+        return operation.servers.map((server) => {
+            const url = joinWithSeparator(replaceVariables(server), operation.path);
+            return (_jsx(StyledDropdownMenuItem, { onAction: handleAction(server), children: _jsx(PanelItem, { header: server.description, title: url, actions: [
+                        _jsx(StyledCopyButton, { data: url, toasterPlacement: "left", onCopyClick: onCopyClick }, url),
+                    ], active: server.url === activeServerUrl, withCheckmark: true }) }, url));
+        });
+    }, [operation.servers, operation.path, handleAction, onCopyClick, activeServerUrl]);
+    return (_jsx(Dropdown, { className: className, trigger: _jsxs(PathWrapper, { variant: "ghost", children: [_jsx(HttpVerb, { color: operation.httpVerb, children: operation.httpVerb }), _jsx(Path, { children: operation.path })] }), withArrow: true, children: _jsx(DropdownMenu, { children: items }) }));
+};
+//# sourceMappingURL=ServerListDropdown.js.map

package/lib/components/ServerListDropdown/index.js

@@ -1 +1,2 @@
-import{ServerListDropdown as e}from"./ServerListDropdown.js";export{e as ServerListDropdown};
+export { ServerListDropdown } from './ServerListDropdown.js';
+//# sourceMappingURL=index.js.map

package/lib/components/ServerListDropdown/styled.js

@@ -1,22 +1,31 @@
-import{breakpoints as e}from"@redocly/theme/core/openapi";import{Button as t}from"@redocly/theme/components/Button/Button";import{CopyButton as r}from"@redocly/theme/components/Buttons/CopyButton";import{DropdownMenuItem as n}from"@redocly/theme/components/Dropdown/DropdownMenuItem";import{styled as o}from"../../styled-components.js";const d=o(t)`
+import { breakpoints } from '@redocly/theme/core/openapi';
+import { Button } from '@redocly/theme/components/Button/Button';
+import { CopyButton } from '@redocly/theme/components/Buttons/CopyButton';
+import { DropdownMenuItem } from '@redocly/theme/components/Dropdown/DropdownMenuItem';
+import { styled } from '../../styled-components.js';
+export const PathWrapper = styled(Button) `
   display: inline-flex;
   overflow-x: hidden;
   font-weight: var(--font-weight-regular);
-`,c=o.span`
+`;
+export const Path = styled.span `
   overflow-x: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   display: inline-block;
   line-height: var(--line-height-base);
   font-size: var(--font-size-base);
-`,m=o(n)`
+`;
+export const StyledDropdownMenuItem = styled(DropdownMenuItem) `
   padding: calc(var(--spacing-unit) * 1.5) var(--spacing-xs) calc(var(--spacing-unit) * 1.5)
     var(--spacing-lg);
-  @media screen and (max-width: ${e.large}) {
+  @media screen and (max-width: ${breakpoints.large}) {
     max-width: 280px;
   }
-`,h=o(r)`
+`;
+export const StyledCopyButton = styled(CopyButton) `
   :hover {
     background-color: var(--dropdown-menu-item-bg-color-hover);
   }
-`;export{c as Path,d as PathWrapper,h as StyledCopyButton,m as StyledDropdownMenuItem};
+`;
+//# sourceMappingURL=styled.js.map

package/lib/components/SideMenu/SideMenu.js

@@ -1,3 +1,14 @@
-import{jsx as e}from"react/jsx-runtime";import{memo as t}from"react";import{Menu as n}from"@redocly/theme/components/Menu/Menu";import{useMenuItems as s}from"./hooks/useMenuItems.js";import{styled as i}from"../../styled-components.js";const p=({items:o,className:m})=>{const r=s({items:o});return e(u,{className:m,children:e(n,{items:r})})},l=t(p),u=i.div`
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from 'react';
+import { Menu } from '@redocly/theme/components/Menu/Menu';
+import { useMenuItems } from './hooks/useMenuItems.js';
+import { styled } from '../../styled-components.js';
+const SideMenuComponent = ({ items, className }) => {
+    const menuItems = useMenuItems({ items });
+    return (_jsx(MenuWrapper, { className: className, children: _jsx(Menu, { items: menuItems }) }));
+};
+export const SideMenu = memo(SideMenuComponent);
+export const MenuWrapper = styled.div `
   overflow: auto;
-`;export{u as MenuWrapper,l as SideMenu};
+`;
+//# sourceMappingURL=SideMenu.js.map

package/lib/components/SideMenu/hooks/useMenuItems.js

@@ -1 +1,110 @@
-import{useMemo as d}from"react";import{useLocation as b}from"react-router-dom";import{useActiveSectionId as l}from"@redocly/theme/core/openapi";import{pathMatchedLink as I}from"../../../utils/index.js";import{DEFAULT_WEBHOOKS_TAG_NAME as k}from"../../../constants.js";function W({items:s}){const n=b(),t=l(n,!1,!1);return d(()=>A(s,t,n),[t,s,n])}function A(s,n="",t){const o=[];return m({contentItems:s,sidebarItems:o,activeItemId:n,location:t}),o}function f(s,n="",t){return s.href?n?s.id===n:I(t,s.href):!1}function h(s,n="",t){return(s.items||[]).some(r=>f(r,n,t)||h(r,n,t))}function m(s){const{contentItems:n,sidebarItems:t,activeItemId:o,location:r}=s;let c=!0;for(const e of n){const i=f(e,o,r),a=h(e,o,r);switch(e.type){case"group":t.push({type:"separator",label:e.name,active:i,hasActiveSubItem:a}),m({...s,contentItems:e.items,sidebarItems:t});break;case"tag":const p={type:"group",label:e.name,items:[],link:e.href,active:i,hasActiveSubItem:a,modified:!0};t.push(p),m({contentItems:e.items,sidebarItems:p.items||[],activeItemId:o,location:r});break;case"operation":case"schema":e.isWebhook&&c&&e.parent.name!==k&&(t.push({type:"separator",label:"Webhooks",variant:"secondary"}),c=!1),t.push({type:"link",label:e.name,httpVerb:e.type==="schema"?"schema":e.httpVerb,link:e.href,badges:e.badges,active:i,hasActiveSubItem:a,modified:!0,deprecated:e.deprecated});break;case"section":if(e.depth===-1)continue;const u={type:e.items.length?"group":"link",label:e.name,link:e.href,items:[],active:i,hasActiveSubItem:a,modified:!0};t.push(u),e.items.length&&m({contentItems:e.items,sidebarItems:u.items,activeItemId:o,location:r});break}}}export{W as useMenuItems};
+import { useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+import { useActiveSectionId } from '@redocly/theme/core/openapi';
+import { pathMatchedLink } from '../../../utils/index.js';
+import { DEFAULT_WEBHOOKS_TAG_NAME } from '../../../constants.js';
+export function useMenuItems({ items }) {
+    const location = useLocation();
+    const activeItemId = useActiveSectionId(location, false, false);
+    return useMemo(() => mapAndSetActiveItems(items, activeItemId, location), [activeItemId, items, location]);
+}
+function mapAndSetActiveItems(items, activeItemId = '', location) {
+    const newItems = [];
+    convertOpenAPIDocs2Sidebar({
+        contentItems: items,
+        sidebarItems: newItems,
+        activeItemId,
+        location,
+    });
+    return newItems;
+}
+function isItemActive(item, activeItemId = '', location) {
+    if (!item.href)
+        return false;
+    if (activeItemId) {
+        return item.id === activeItemId;
+    }
+    return pathMatchedLink(location, item.href);
+}
+function isSubItemActive(item, activeItemId = '', location) {
+    const items = item.items || [];
+    return items.some((i) => {
+        return isItemActive(i, activeItemId, location) || isSubItemActive(i, activeItemId, location);
+    });
+}
+function convertOpenAPIDocs2Sidebar(data) {
+    const { contentItems, sidebarItems, activeItemId, location } = data;
+    let addWebhookSeparator = true;
+    for (const item of contentItems) {
+        const active = isItemActive(item, activeItemId, location);
+        const hasActiveSubItem = isSubItemActive(item, activeItemId, location);
+        switch (item.type) {
+            case 'group':
+                sidebarItems.push({ type: 'separator', label: item.name, active, hasActiveSubItem });
+                convertOpenAPIDocs2Sidebar({ ...data, contentItems: item.items, sidebarItems });
+                break;
+            case 'tag':
+                const tagGroup = {
+                    type: 'group',
+                    label: item.name,
+                    items: [],
+                    link: item.href,
+                    active,
+                    hasActiveSubItem,
+                    modified: true,
+                };
+                sidebarItems.push(tagGroup);
+                convertOpenAPIDocs2Sidebar({
+                    contentItems: item.items,
+                    sidebarItems: tagGroup.items || [],
+                    activeItemId,
+                    location,
+                });
+                break;
+            case 'operation':
+            case 'schema':
+                if (item.isWebhook &&
+                    addWebhookSeparator &&
+                    item.parent.name !== DEFAULT_WEBHOOKS_TAG_NAME) {
+                    sidebarItems.push({ type: 'separator', label: 'Webhooks', variant: 'secondary' });
+                    addWebhookSeparator = false;
+                }
+                sidebarItems.push({
+                    type: 'link',
+                    label: item.name,
+                    httpVerb: item.type === 'schema' ? 'schema' : item.httpVerb,
+                    link: item.href,
+                    badges: item.badges,
+                    active,
+                    hasActiveSubItem,
+                    modified: true,
+                    deprecated: item.deprecated,
+                });
+                break;
+            case 'section':
+                if (item.depth === -1) {
+                    continue;
+                }
+                const sectionItem = {
+                    type: item.items.length ? 'group' : 'link',
+                    label: item.name,
+                    link: item.href,
+                    items: [],
+                    active,
+                    hasActiveSubItem,
+                    modified: true,
+                };
+                sidebarItems.push(sectionItem);
+                if (item.items.length) {
+                    convertOpenAPIDocs2Sidebar({
+                        contentItems: item.items,
+                        sidebarItems: sectionItem.items,
+                        activeItemId,
+                        location,
+                    });
+                }
+                break;
+        }
+    }
+}
+//# sourceMappingURL=useMenuItems.js.map

package/lib/components/SideMenu/index.js

@@ -1 +1,2 @@
-import{SideMenu as r}from"./SideMenu.js";export{r as SideMenu};
+export { SideMenu } from './SideMenu.js';
+//# sourceMappingURL=index.js.map

package/lib/components/SideMenu/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/lib/components/StickySidebar/SidebarActions.js

@@ -1,5 +1,17 @@
-import{jsx as o,Fragment as n}from"react/jsx-runtime";import{useAtom as i}from"jotai";import{LayoutVariant as a}from"@redocly/config";import{SidebarActions as c}from"@redocly/theme/components/SidebarActions/SidebarActions";import{collapsedSidebarAtom as m,layoutAtom as p}from"../../jotai/app.js";import{styled as d}from"../../styled-components.js";const y=()=>{const[r,e]=i(p),[t,s]=i(m);return o(n,{children:o(l,{children:o(c,{layout:r,onChangeViewClick:()=>e(r===a.STACKED?a.THREE_PANEL:a.STACKED),collapsedSidebar:t,onChangeCollapseSidebarClick:()=>s(!t),isApiDocs:!0})})})},l=d.div`
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useAtom } from 'jotai';
+import { LayoutVariant } from '@redocly/config';
+import { SidebarActions as ThemeSidebarActions } from '@redocly/theme/components/SidebarActions/SidebarActions';
+import { collapsedSidebarAtom, layoutAtom } from '../../jotai/app.js';
+import { styled } from '../../styled-components.js';
+export const SidebarActions = () => {
+    const [layout, setLayout] = useAtom(layoutAtom);
+    const [collapsedSidebar, setSidebarCollapsed] = useAtom(collapsedSidebarAtom);
+    return (_jsx(_Fragment, { children: _jsx(Wrapper, { children: _jsx(ThemeSidebarActions, { layout: layout, onChangeViewClick: () => setLayout(layout === LayoutVariant.STACKED ? LayoutVariant.THREE_PANEL : LayoutVariant.STACKED), collapsedSidebar: collapsedSidebar, onChangeCollapseSidebarClick: () => setSidebarCollapsed(!collapsedSidebar), isApiDocs: true }) }) }));
+};
+const Wrapper = styled.div `
   position: sticky;
   top: calc(100vh);
   padding: var(--spacing-sm) var(--spacing-md);
-`;export{y as SidebarActions};
+`;
+//# sourceMappingURL=SidebarActions.js.map

package/lib/components/StickySidebar/StickyResponsiveSidebar.js

@@ -1,24 +1,54 @@
-import{jsx as n,jsxs as l,Fragment as f}from"react/jsx-runtime";import{memo as b,useEffect as h,useRef as u,useState as x}from"react";import{useAtom as y}from"jotai";import{useLocation as S}from"react-router-dom";import{useMount as v,breakpoints as k}from"@redocly/theme/core/openapi";import{isSidebarOpenedAtom as $}from"../../jotai/app.js";import{SidebarActions as g}from"./SidebarActions.js";import{styled as w}from"../../styled-components.js";const j=w.div`
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useEffect, useRef, useState } from 'react';
+import { useAtom } from 'jotai';
+import { useLocation } from 'react-router-dom';
+import { useMount, breakpoints } from '@redocly/theme/core/openapi';
+import { isSidebarOpenedAtom } from '../../jotai/app.js';
+import { SidebarActions } from './SidebarActions.js';
+import { styled } from '../../styled-components.js';
+const StyledStickySidebar = styled.div `
   overflow: hidden;
   flex-direction: column;
   backface-visibility: hidden;
-  height: ${({offsetTop:e})=>`calc(100vh - ${e})`};
+  height: ${({ offsetTop }) => `calc(100vh - ${offsetTop})`};
   top: 0;
   flex: 0 0 auto;
   position: fixed;
-  display: ${({open:e})=>e?"flex":"none"};
+  display: ${({ open }) => (open ? 'flex' : 'none')};
   z-index: 2;
   width: 100%;
   background: var(--sidebar-bg-color);
-  border-right: ${({collapsedSidebar:e})=>e?"1px solid var(--sidebar-border-color)":"auto"};
+  border-right: ${({ collapsedSidebar }) => collapsedSidebar ? '1px solid var(--sidebar-border-color)' : 'auto'};
 
-  @media screen and (min-width: ${k.small}) {
+  @media screen and (min-width: ${breakpoints.small}) {
     position: sticky;
     z-index: auto;
-    width: ${({collapsedSidebar:e})=>e?"var(--sidebar-width)":"auto"};
+    width: ${({ collapsedSidebar }) => (collapsedSidebar ? 'var(--sidebar-width)' : 'auto')};
     display: flex;
   }
   @media print {
     display: none;
   }
-`;function O({scrollYOffset:e,className:a,children:d,collapsedSidebar:i}){const[t,p]=x("0px"),m=u(null),o=S(),[s,r]=y($);return h(()=>{o.hash&&r(!1)},[o.pathname,o.hash,r]),v(()=>{const c=e();p(`${c}px`)}),n(f,{children:l(j,{open:s,className:a,offsetTop:t,style:{top:t},ref:m,collapsedSidebar:i,children:[i||s?d:null,n(g,{})]})})}const I=b(O);export{I as StickyResponsiveSidebar};
+`;
+function StickyResponsiveSidebarComponent({ scrollYOffset, className, children, collapsedSidebar, }) {
+    const [offsetTop, setOffsetTop] = useState('0px');
+    const stickyElement = useRef(null);
+    const location = useLocation();
+    const [isSidebarOpened, setIsSidebarOpened] = useAtom(isSidebarOpenedAtom);
+    useEffect(() => {
+        if (location.hash) {
+            setIsSidebarOpened(false);
+        }
+    }, [location.pathname, location.hash, setIsSidebarOpened]);
+    useMount(() => {
+        const top = scrollYOffset();
+        // rerender when hydrating from SSR
+        // see https://github.com/facebook/react/issues/8017#issuecomment-256351955
+        setOffsetTop(`${top}px`);
+    });
+    return (_jsx(_Fragment, { children: _jsxs(StyledStickySidebar, { open: isSidebarOpened, className: className, offsetTop: offsetTop, style: {
+                top: offsetTop,
+            }, ref: stickyElement, collapsedSidebar: collapsedSidebar, children: [collapsedSidebar || isSidebarOpened ? children : null, _jsx(SidebarActions, {})] }) }));
+}
+export const StickyResponsiveSidebar = memo(StickyResponsiveSidebarComponent);
+//# sourceMappingURL=StickyResponsiveSidebar.js.map

package/lib/components/StickySidebar/index.js

@@ -1 +1,2 @@
-import{StickyResponsiveSidebar as o}from"./StickyResponsiveSidebar.js";export{o as StickyResponsiveSidebar};
+export { StickyResponsiveSidebar } from './StickyResponsiveSidebar.js';
+//# sourceMappingURL=index.js.map