@redocly/openapi-docs 3.0.0 → 3.0.1

package/lib/components/common/SchemaSelection/SchemaSelection.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SchemaSelection=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),jotai_1=require("jotai"),theme_1=require("@redocly/theme"),Dropdown_1=require("../Dropdown"),operation_1=require("../../../jotai/operation"),LIMIT_FOR_SEGMENTED=5;function SchemaSelectionComponent({options:e,onChange:t,pointer:o,schema:n,defaultOneOfIdx:i}){var a,r;const[s,c]=(0,jotai_1.useAtom)((0,operation_1.operationStore)(o)),l=null===(r=e[null!==(a=s.activeOneOf[n.pointer])&&void 0!==a?a:i])||void 0===r?void 0:r.value,u=(0,react_1.useCallback)((({value:e})=>{void 0!==e&&(t?t(e):c((t=>{var o,i;return Object.assign(Object.assign({},t),{activeExampleName:(null===(i=null===(o=n.oneOf)||void 0===o?void 0:o[e])||void 0===i?void 0:i.title)||t.activeExampleName,activeOneOf:Object.assign(Object.assign({},t.activeOneOf),{[n.pointer]:e})})})))}),[t,n.oneOf,n.pointer,c]);return(0,theme_1.isUndefined)(l)?null:e.length>LIMIT_FOR_SEGMENTED?(0,jsx_runtime_1.jsx)(Dropdown_1.Dropdown,{options:e,value:l,onChange:u}):(0,jsx_runtime_1.jsx)(theme_1.Segmented,{value:l,onChange:u,options:e,size:"small","data-testid":"segmented-schema"})}exports.SchemaSelection=SchemaSelectionComponent;
+//# sourceMappingURL=SchemaSelection.js.map

package/lib/components/common/SchemaSelection/index.d.ts

@@ -0,0 +1 @@
+export { SchemaSelection } from './SchemaSelection';

package/lib/components/common/SchemaSelection/index.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.SchemaSelection=void 0;var SchemaSelection_1=require("./SchemaSelection");Object.defineProperty(exports,"SchemaSelection",{enumerable:!0,get:function(){return SchemaSelection_1.SchemaSelection}});
+//# sourceMappingURL=index.js.map

package/lib/components/common/Select/Select.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { SelectProps } from './types';
+export declare const Select: import("react").NamedExoticComponent<SelectProps>;

package/lib/components/common/Select/Select.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.Select=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),ClearButton_1=require("../ClearButton"),utils_1=require("../../../utils"),styled_1=require("./styled");function SelectComponent({options:e,onChange:t,handleClear:r,clearable:l,placeholder:n,value:s="",className:o}){var i;const a=(0,react_1.useMemo)((()=>e.map((({idx:e,value:t,title:r},l)=>{const n=(0,utils_1.normalizeText)(t);return(0,jsx_runtime_1.jsx)("option",{value:n,className:"dropdown-option",children:r||n},e||n+l)}))),[e]),u=(0,utils_1.normalizeText)(s),d=(null===(i=e.find((e=>e.value===s)))||void 0===i?void 0:i.title)||u;return(0,jsx_runtime_1.jsxs)("div",{className:o+" dropdown-wrapper",children:[(0,jsx_runtime_1.jsx)(styled_1.Arrow,{}),l&&(null==u?void 0:u.length)>0&&(0,jsx_runtime_1.jsx)(ClearButton_1.ClearButton,{handleClear:r}),(0,jsx_runtime_1.jsxs)("select",{onChange:r=>{const{selectedIndex:l}=r.target;t(e[n||!s?l-1:l])},value:u,className:"dropdown-select","aria-label":"dropdown select",children:[n&&(0,jsx_runtime_1.jsx)("option",{disabled:!0,hidden:!0,value:n,children:n}),!u&&!n&&(0,jsx_runtime_1.jsx)("option",{disabled:!0}),a]}),(0,jsx_runtime_1.jsx)("label",{children:d})]})}exports.Select=(0,react_1.memo)(SelectComponent);
+//# sourceMappingURL=Select.js.map

package/lib/components/common/Select/index.d.ts

@@ -0,0 +1,2 @@
+export * from './styled';
+export * from './types';

package/lib/components/common/Select/index.js

@@ -0,0 +1,2 @@
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,i){void 0===i&&(i=r);var o=Object.getOwnPropertyDescriptor(t,r);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,i,o)}:function(e,t,r,i){void 0===i&&(i=r),e[i]=t[r]}),__exportStar=this&&this.__exportStar||function(e,t){for(var r in e)"default"===r||Object.prototype.hasOwnProperty.call(t,r)||__createBinding(t,e,r)};Object.defineProperty(exports,"__esModule",{value:!0}),__exportStar(require("./styled"),exports),__exportStar(require("./types"),exports);
+//# sourceMappingURL=index.js.map

package/lib/components/common/Select/styled.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import type { SelectProps } from './types';
+export declare const Select: import("styled-components").StyledComponent<import("react").NamedExoticComponent<SelectProps>, any, SelectProps & {
+    fullWidth?: boolean | undefined;
+    variant?: "dark" | "light" | undefined;
+}, never>;
+export declare const SimpleSelect: import("styled-components").StyledComponent<import("react").NamedExoticComponent<SelectProps>, any, SelectProps & {
+    fullWidth?: boolean | undefined;
+    variant?: "dark" | "light" | undefined;
+}, never>;
+export declare const CollapsingSelect: import("styled-components").StyledComponent<import("react").NamedExoticComponent<SelectProps>, any, SelectProps & {
+    fullWidth?: boolean | undefined;
+    variant?: "dark" | "light" | undefined;
+} & {
+    active?: boolean | undefined;
+}, never>;
+export declare const Arrow: import("styled-components").StyledComponent<(props: import("@redocly/theme/lib/icons/types").IconProps) => import("react").JSX.Element, any, {
+    'data-component-name': string;
+} & {
+    color?: string | undefined;
+    size?: string | undefined;
+    className?: string | undefined;
+} & import("react").SVGProps<SVGSVGElement>, "data-component-name">;

package/lib/components/common/Select/styled.js

@@ -0,0 +1,111 @@
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,o,t,r){void 0===r&&(r=t);var n=Object.getOwnPropertyDescriptor(o,t);n&&!("get"in n?!o.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return o[t]}}),Object.defineProperty(e,r,n)}:function(e,o,t,r){void 0===r&&(r=t),e[r]=o[t]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,o){Object.defineProperty(e,"default",{enumerable:!0,value:o})}:function(e,o){e.default=o}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var o={};if(null!=e)for(var t in e)"default"!==t&&Object.prototype.hasOwnProperty.call(e,t)&&__createBinding(o,e,t);return __setModuleDefault(o,e),o};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Arrow=exports.CollapsingSelect=exports.SimpleSelect=exports.Select=void 0;const styled_components_1=__importStar(require("styled-components")),theme_1=require("@redocly/theme"),Select_1=require("./Select"),darkSelectStyle=styled_components_1.css`
+  background-color: var(--panel-samples-dropdown-bg-color);
+  border: var(--panel-samples-dropdown-border);
+  color: var(--panel-samples-dropdown-color);
+
+  &,
+  &:hover,
+  &:focus-within {
+    box-shadow: none;
+  }
+`;exports.Select=(0,styled_components_1.default)(Select_1.Select)`
+  box-sizing: border-box;
+  outline: none;
+  display: inline-block;
+  vertical-align: bottom;
+  position: relative;
+  width: ${({fullWidth:e})=>e?"100%":"auto"};
+  cursor: pointer;
+  text-transform: none;
+
+  label {
+    box-sizing: border-box;
+    min-width: 90px;
+    height: 36px;
+    outline: none;
+    display: inline-block;
+    color: var(--docs-dropdown-text-color);
+    border-radius: var(--border-radius-md);
+    padding: var(--docs-dropdown-padding);
+    vertical-align: bottom;
+    width: ${({fullWidth:e})=>e?"100%":"auto"};
+    text-transform: none;
+    line-height: inherit;
+    font-size: var(--docs-dropdown-font-size);
+    font-family: inherit;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+
+    &,
+    &:hover,
+    &:focus-within {
+      box-shadow: none;
+    }
+
+    ${({variant:e})=>"dark"===e?darkSelectStyle:""};
+  }
+
+  .dropdown-select {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    border: none;
+    appearance: none;
+    cursor: pointer;
+
+    color: var(--text-color-secondary);
+    line-height: inherit;
+    font-size: var(--font-size-base);
+    font-family: inherit;
+    padding: var(--docs-dropdown-padding);
+    ${({variant:e})=>"dark"===e?darkSelectStyle:""};
+  }
+`,exports.SimpleSelect=(0,styled_components_1.default)(exports.Select)`
+  svg {
+    top: 60%;
+    transform: translateY(-60%);
+  }
+  label {
+    padding: 0 26px 0 4px;
+    background: transparent;
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-regular);
+    appearance: none;
+    height: auto;
+
+    &:hover,
+    &:focus-within {
+      box-shadow: none;
+    }
+  }
+`,exports.CollapsingSelect=(0,styled_components_1.default)(exports.Select)`
+  svg {
+    top: 60%;
+    transform: translateY(-60%);
+  }
+  label {
+    ${darkSelectStyle};
+
+    border-radius: var(--border-radius-lg);
+    margin-left: 5px;
+    transition: none;
+    min-width: auto;
+    background-color: ${({active:e})=>e?"var(--panel-samples-tabs-bg-color-active)":"var(--bg-color-raised)"};
+    & {
+      &[open],
+      &:focus-within,
+      &:hover {
+        background-color: var(--bg-color-tonal);
+      }
+    }
+  }
+`,exports.Arrow=(0,styled_components_1.default)(theme_1.ChevronDownIcon)`
+  position: absolute;
+  right: 10px;
+  top: 10px;
+`;
+//# sourceMappingURL=styled.js.map

package/lib/components/common/Select/types.d.ts

@@ -0,0 +1,20 @@
+export interface SelectOption {
+    idx?: number;
+    value: string;
+    title?: string;
+    serverUrl?: string;
+    label?: string;
+}
+export interface SelectProps {
+    options: SelectOption[];
+    onChange: (option: SelectOption) => void;
+    handleClear?: () => void;
+    clearable?: boolean;
+    ariaLabel?: string;
+    className?: string;
+    placeholder?: string;
+    value?: string;
+    dense?: boolean;
+    fullWidth?: boolean;
+    variant?: 'dark' | 'light';
+}

package/lib/components/common/Skeleton/LanguageListSkeleton.d.ts

@@ -0,0 +1,4 @@
+import { type ReactElement } from 'react';
+declare function LanguageListSkeletonComponent(): ReactElement;
+export declare const LanguageListSkeleton: import("react").MemoExoticComponent<typeof LanguageListSkeletonComponent>;
+export {};

package/lib/components/common/Skeleton/LanguageListSkeleton.js

@@ -0,0 +1,23 @@
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.LanguageListSkeleton=void 0;const jsx_runtime_1=require("react/jsx-runtime"),react_1=require("react"),styled_components_1=__importDefault(require("styled-components")),Container=styled_components_1.default.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  gap: var(--spacing-xs);
+  padding: var(--spacing-xs) 0;
+`,Item=styled_components_1.default.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-sm);
+`,SkeletonBox=styled_components_1.default.div`
+  display: inline-block;
+  height: ${({type:e})=>"icon"===e?"var(--control-height-sm)":"calc(var(--control-height-sm) * 0.5)"};
+  position: relative;
+  overflow: hidden;
+  background-color: var(--layer-color-hover);
+  border-radius: var(--border-radius);
+  width: ${({type:e})=>"icon"===e?"var(--control-height-sm)":"64px"};
+`;function LanguageListSkeletonComponent(){return(0,jsx_runtime_1.jsxs)(Container,{children:[(0,jsx_runtime_1.jsxs)(Item,{children:[(0,jsx_runtime_1.jsx)(SkeletonBox,{type:"icon"}),(0,jsx_runtime_1.jsx)(SkeletonBox,{type:"label"})]}),(0,jsx_runtime_1.jsxs)(Item,{children:[(0,jsx_runtime_1.jsx)(SkeletonBox,{type:"icon"}),(0,jsx_runtime_1.jsx)(SkeletonBox,{type:"label"})]}),(0,jsx_runtime_1.jsxs)(Item,{children:[(0,jsx_runtime_1.jsx)(SkeletonBox,{type:"icon"}),(0,jsx_runtime_1.jsx)(SkeletonBox,{type:"label"})]}),(0,jsx_runtime_1.jsxs)(Item,{children:[(0,jsx_runtime_1.jsx)(SkeletonBox,{type:"icon"}),(0,jsx_runtime_1.jsx)(SkeletonBox,{type:"label"})]})]})}exports.LanguageListSkeleton=(0,react_1.memo)(LanguageListSkeletonComponent);
+//# sourceMappingURL=LanguageListSkeleton.js.map

package/lib/components/common/Skeleton/Skeleton.d.ts

@@ -1,2 +1,5 @@
-/// <reference types="react" />
-export declare function Skeleton(): JSX.Element;
+import type { ReactElement } from 'react';
+export declare const SkeletonBox: import("styled-components").StyledComponent<"div", any, {
+    width?: string | undefined;
+}, never>;
+export declare function Skeleton(): ReactElement;

package/lib/components/common/Skeleton/Skeleton.js

@@ -1,14 +1,16 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,n){void 0===n&&(n=r);var l=Object.getOwnPropertyDescriptor(t,r);l&&!("get"in l?!t.__esModule:l.writable||l.configurable)||(l={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,l)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t},__importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Skeleton=void 0;const react_1=__importDefault(require("react")),styled_components_1=__importStar(require("styled-components")),theme_1=require("@redocly/theme"),panels_1=require("../panels"),shimmer=styled_components_1.keyframes`
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,r,n){void 0===n&&(n=r);var o=Object.getOwnPropertyDescriptor(t,r);o&&!("get"in o?!t.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return t[r]}}),Object.defineProperty(e,n,o)}:function(e,t,r,n){void 0===n&&(n=r),e[n]=t[r]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var r in e)"default"!==r&&Object.prototype.hasOwnProperty.call(e,r)&&__createBinding(t,e,r);return __setModuleDefault(t,e),t};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Skeleton=exports.SkeletonBox=void 0;const jsx_runtime_1=require("react/jsx-runtime"),styled_components_1=__importStar(require("styled-components")),theme_1=require("@redocly/theme"),panels_1=require("../panels"),shimmer=styled_components_1.keyframes`
   100% {
       transform: translateX(100%);
   }
-`,SkeletonBox=styled_components_1.default.div`
+`;function Skeleton(){return(0,jsx_runtime_1.jsx)(panels_1.Section,{children:(0,jsx_runtime_1.jsxs)(panels_1.SamplesMiddlePanel,{children:[(0,jsx_runtime_1.jsx)(theme_1.H2,{children:(0,jsx_runtime_1.jsx)(exports.SkeletonBox,{width:"40%"})}),(0,jsx_runtime_1.jsx)(exports.SkeletonBox,{width:"80%"}),(0,jsx_runtime_1.jsx)(exports.SkeletonBox,{width:"90%"}),(0,jsx_runtime_1.jsx)(exports.SkeletonBox,{width:"83%"}),(0,jsx_runtime_1.jsx)(exports.SkeletonBox,{width:"80%"})]})})}exports.SkeletonBox=styled_components_1.default.div`
   display: inline-block;
   height: 1em;
   position: relative;
   overflow: hidden;
-  background-color: #eeeeee;
-  border-radius: var(--global-border-radius);
+  background-color: var(--bg-color-raised);
+  border-radius: var(--border-radius);
+  margin-top: var(--spacing-base);
+  width: ${({width:e})=>e||"100%"};
 
   &::after {
     position: absolute;
@@ -27,5 +29,5 @@
     animation: ${shimmer} 2s infinite;
     content: '';
   }
-`;function Skeleton(){return react_1.default.createElement(panels_1.Section,null,react_1.default.createElement(panels_1.SamplesMiddlePanel,null,react_1.default.createElement(theme_1.H2,null,react_1.default.createElement(SkeletonBox,{style:{width:"40%"}})),react_1.default.createElement(SkeletonBox,{style:{width:"80%"}}),react_1.default.createElement(SkeletonBox,{style:{width:"90%"}}),react_1.default.createElement(SkeletonBox,{style:{width:"83%"}}),react_1.default.createElement(SkeletonBox,{style:{width:"80%"}})))}exports.Skeleton=Skeleton;
+`,exports.Skeleton=Skeleton;
 //# sourceMappingURL=Skeleton.js.map

package/lib/components/common/headers.d.ts

@@ -1,2 +1 @@
-export declare const SamplesPanelHeader: import("styled-components").StyledComponent<"h3", any, {}, never>;
 export declare const FieldsGroupHeader: import("styled-components").StyledComponent<"h5", any, {}, never>;

package/lib/components/common/headers.js

@@ -1,9 +1,5 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.FieldsGroupHeader=exports.SamplesPanelHeader=void 0;const styled_components_1=__importDefault(require("styled-components")),utils_1=require("../../utils");exports.SamplesPanelHeader=styled_components_1.default.h3`
-  color: var(--panel-samples-text-color);
-
-  ${(0,utils_1.typography)("right-panel-header")};
-`,exports.FieldsGroupHeader=styled_components_1.default.h5`
-  color: var(--text-secondary);
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.FieldsGroupHeader=void 0;const styled_components_1=__importDefault(require("styled-components"));exports.FieldsGroupHeader=styled_components_1.default.h5`
+  color: var(--text-color-secondary);
   font-weight: bold;
   text-transform: uppercase;
   font-size: 14px;

package/lib/components/common/index.d.ts

@@ -1,14 +1,12 @@
-export { Dropdown, SchemaDiscriminatorDropdown } from './Dropdown';
-export type { DropdownProps, DropdownOption } from './Dropdown';
+export { Select } from './Select';
+export type { SelectProps, SelectOption } from './Select';
 export { ShareLinkToField } from './LinkToField';
 export { deprecatedCss } from './mixins';
-export { FormControl } from './form';
+export { Container, HttpVerb, MimeLabel } from './styled';
+export { CodeBlockPanel } from './CodeBlockPanel';
 export * from './Fields';
 export * from './panels';
-export { FieldsGroupHeader, SamplesPanelHeader } from './headers';
+export { FieldsGroupHeader } from './headers';
 export { ShareLink, Link } from './linkify';
-export * from './shelfs';
 export * from './schema';
-export * from './perfect-scrollbar';
-export { Portal } from './Portal';
 export { Skeleton } from './Skeleton';

package/lib/components/common/index.js

@@ -1,2 +1,2 @@
-"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,r,t,o){void 0===o&&(o=t);var n=Object.getOwnPropertyDescriptor(r,t);n&&!("get"in n?!r.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return r[t]}}),Object.defineProperty(e,o,n)}:function(e,r,t,o){void 0===o&&(o=t),e[o]=r[t]}),__exportStar=this&&this.__exportStar||function(e,r){for(var t in e)"default"===t||Object.prototype.hasOwnProperty.call(r,t)||__createBinding(r,e,t)};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Skeleton=exports.Portal=exports.Link=exports.ShareLink=exports.SamplesPanelHeader=exports.FieldsGroupHeader=exports.FormControl=exports.deprecatedCss=exports.ShareLinkToField=exports.SchemaDiscriminatorDropdown=exports.Dropdown=void 0;var Dropdown_1=require("./Dropdown");Object.defineProperty(exports,"Dropdown",{enumerable:!0,get:function(){return Dropdown_1.Dropdown}}),Object.defineProperty(exports,"SchemaDiscriminatorDropdown",{enumerable:!0,get:function(){return Dropdown_1.SchemaDiscriminatorDropdown}});var LinkToField_1=require("./LinkToField");Object.defineProperty(exports,"ShareLinkToField",{enumerable:!0,get:function(){return LinkToField_1.ShareLinkToField}});var mixins_1=require("./mixins");Object.defineProperty(exports,"deprecatedCss",{enumerable:!0,get:function(){return mixins_1.deprecatedCss}});var form_1=require("./form");Object.defineProperty(exports,"FormControl",{enumerable:!0,get:function(){return form_1.FormControl}}),__exportStar(require("./Fields"),exports),__exportStar(require("./panels"),exports);var headers_1=require("./headers");Object.defineProperty(exports,"FieldsGroupHeader",{enumerable:!0,get:function(){return headers_1.FieldsGroupHeader}}),Object.defineProperty(exports,"SamplesPanelHeader",{enumerable:!0,get:function(){return headers_1.SamplesPanelHeader}});var linkify_1=require("./linkify");Object.defineProperty(exports,"ShareLink",{enumerable:!0,get:function(){return linkify_1.ShareLink}}),Object.defineProperty(exports,"Link",{enumerable:!0,get:function(){return linkify_1.Link}}),__exportStar(require("./shelfs"),exports),__exportStar(require("./schema"),exports),__exportStar(require("./perfect-scrollbar"),exports);var Portal_1=require("./Portal");Object.defineProperty(exports,"Portal",{enumerable:!0,get:function(){return Portal_1.Portal}});var Skeleton_1=require("./Skeleton");Object.defineProperty(exports,"Skeleton",{enumerable:!0,get:function(){return Skeleton_1.Skeleton}});
+"use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,r,t,n){void 0===n&&(n=t);var o=Object.getOwnPropertyDescriptor(r,t);o&&!("get"in o?!r.__esModule:o.writable||o.configurable)||(o={enumerable:!0,get:function(){return r[t]}}),Object.defineProperty(e,n,o)}:function(e,r,t,n){void 0===n&&(n=t),e[n]=r[t]}),__exportStar=this&&this.__exportStar||function(e,r){for(var t in e)"default"===t||Object.prototype.hasOwnProperty.call(r,t)||__createBinding(r,e,t)};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Skeleton=exports.Link=exports.ShareLink=exports.FieldsGroupHeader=exports.CodeBlockPanel=exports.MimeLabel=exports.HttpVerb=exports.Container=exports.deprecatedCss=exports.ShareLinkToField=exports.Select=void 0;var Select_1=require("./Select");Object.defineProperty(exports,"Select",{enumerable:!0,get:function(){return Select_1.Select}});var LinkToField_1=require("./LinkToField");Object.defineProperty(exports,"ShareLinkToField",{enumerable:!0,get:function(){return LinkToField_1.ShareLinkToField}});var mixins_1=require("./mixins");Object.defineProperty(exports,"deprecatedCss",{enumerable:!0,get:function(){return mixins_1.deprecatedCss}});var styled_1=require("./styled");Object.defineProperty(exports,"Container",{enumerable:!0,get:function(){return styled_1.Container}}),Object.defineProperty(exports,"HttpVerb",{enumerable:!0,get:function(){return styled_1.HttpVerb}}),Object.defineProperty(exports,"MimeLabel",{enumerable:!0,get:function(){return styled_1.MimeLabel}});var CodeBlockPanel_1=require("./CodeBlockPanel");Object.defineProperty(exports,"CodeBlockPanel",{enumerable:!0,get:function(){return CodeBlockPanel_1.CodeBlockPanel}}),__exportStar(require("./Fields"),exports),__exportStar(require("./panels"),exports);var headers_1=require("./headers");Object.defineProperty(exports,"FieldsGroupHeader",{enumerable:!0,get:function(){return headers_1.FieldsGroupHeader}});var linkify_1=require("./linkify");Object.defineProperty(exports,"ShareLink",{enumerable:!0,get:function(){return linkify_1.ShareLink}}),Object.defineProperty(exports,"Link",{enumerable:!0,get:function(){return linkify_1.Link}}),__exportStar(require("./schema"),exports);var Skeleton_1=require("./Skeleton");Object.defineProperty(exports,"Skeleton",{enumerable:!0,get:function(){return Skeleton_1.Skeleton}});
 //# sourceMappingURL=index.js.map

package/lib/components/common/linkify.d.ts

@@ -1,9 +1,10 @@
-import type { PropsWithChildren } from 'react';
+import type { PropsWithChildren, ReactElement } from 'react';
 export declare function Link(props: PropsWithChildren<{
     to: string;
     className?: string;
     security?: boolean;
     id?: string;
-}>): JSX.Element | null;
+    'aria-label'?: string;
+}>): ReactElement | null;
 export declare const StyledShareLink: import("styled-components").StyledComponent<typeof Link, any, {}, never>;
-export declare function ShareLink(props: any): JSX.Element;
+export declare function ShareLink(props: any): ReactElement;

package/lib/components/common/linkify.js

@@ -1,10 +1,19 @@
-"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ShareLink=exports.StyledShareLink=exports.Link=void 0;const react_1=__importDefault(require("react")),styled_components_1=__importDefault(require("styled-components")),recoil_1=require("@redocly/recoil"),theme_1=require("@redocly/theme"),react_router_dom_1=require("react-router-dom"),store_1=require("../../recoil/store");function Link(e){var t;const{routingBasePath:r,hooks:i,onDeepLinkClick:o}=(0,recoil_1.useRecoilValue)(store_1.globalOptionsSelector),n=e.security?null===(t=null==i?void 0:i.replaceSecurityLink)||void 0===t?void 0:t.call(i,{securityRequirementId:e.to}):e.to,l=o&&{onClick:e=>{e.preventDefault(),o(r+n)}};return n?react_1.default.createElement(react_router_dom_1.Link,Object.assign({id:e.id,className:e.className||"",to:(null==n?void 0:n.startsWith("#"))?n:r+n},l),e.children):e.children?react_1.default.createElement("span",{className:e.className}," ",e.children," "):null}function ShareLink(e){return react_1.default.createElement(exports.StyledShareLink,Object.assign({},e),react_1.default.createElement(theme_1.AnchorIcon,null))}exports.Link=Link,exports.StyledShareLink=(0,styled_components_1.default)(Link)`
+"use strict";var __importDefault=this&&this.__importDefault||function(e){return e&&e.__esModule?e:{default:e}};Object.defineProperty(exports,"__esModule",{value:!0}),exports.ShareLink=exports.StyledShareLink=exports.Link=void 0;const jsx_runtime_1=require("react/jsx-runtime"),styled_components_1=__importDefault(require("styled-components")),jotai_1=require("jotai"),react_router_dom_1=require("react-router-dom"),theme_1=require("@redocly/theme"),store_1=require("../../jotai/store");function Link(e){var t;const{routingBasePath:i,unstable_hooks:r,onDeepLinkClick:n}=(0,jotai_1.useAtomValue)(store_1.globalOptionsAtom),o=e.security?null===(t=null==r?void 0:r.replaceSecurityLink)||void 0===t?void 0:t.call(r,{securityRequirementId:e.to}):e.to,a=n&&{onClick:e=>{e.preventDefault(),n(i+o)}};return o?(0,jsx_runtime_1.jsx)(react_router_dom_1.Link,Object.assign({"aria-label":e["aria-label"]||`link to ${o}`,id:decodeURIComponent(e.id||""),className:e.className||"",to:(null==o?void 0:o.startsWith("#"))?o:i+o},a,{children:e.children})):e.children?(0,jsx_runtime_1.jsxs)("span",{"aria-label":e["aria-label"]||`link to ${o}`,className:e.className,children:[" ",e.children," "]}):null}function ShareLink(e){return(0,jsx_runtime_1.jsx)(exports.StyledShareLink,Object.assign({},e,{children:(0,jsx_runtime_1.jsx)(theme_1.LinkIcon,{size:"13px",color:"--heading-anchor-color"})}))}exports.Link=Link,exports.StyledShareLink=(0,styled_components_1.default)(Link)`
   position: absolute;
-  transform: translateX(-100%);
+  top: 50%;
+  left: 0;
+  transform: translate(-100%, -50%);
   padding-right: var(--heading-anchor-offset-right);
+  z-index: 1;
 
-  :hover ${theme_1.AnchorIcon} {
+  ${theme_1.LinkIcon} {
+    opacity: 0;
+    transition: visibility 0.3s linear, opacity 0.3s linear;
+  }
+
+  :hover ${theme_1.LinkIcon}, :focus ${theme_1.LinkIcon} {
     visibility: visible;
+    opacity: 1;
   }
 `,exports.ShareLink=ShareLink;
 //# sourceMappingURL=linkify.js.map

package/lib/components/common/panels.d.ts

@@ -2,12 +2,16 @@ import { LayoutVariant } from '@redocly/theme';
 export declare const SamplesMiddlePanel: import("styled-components").StyledComponent<"div", any, {
     compact?: boolean | undefined;
     isStacked?: boolean | undefined;
+    fullWidth?: boolean | undefined;
 }, never>;
 export declare const Section: import("styled-components").StyledComponent<"div", any, {
     underlined?: boolean | undefined;
     sectionId?: string | undefined;
+    expanded?: boolean | undefined;
+}, never>;
+export declare const SamplesPanel: import("styled-components").StyledComponent<"div", any, {
+    isStacked: boolean;
 }, never>;
-export declare const SamplesPanel: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Row: import("styled-components").StyledComponent<"div", any, {
     layout?: LayoutVariant | undefined;
 }, never>;

package/lib/components/common/panels.js

@@ -1,42 +1,65 @@
 "use strict";var __createBinding=this&&this.__createBinding||(Object.create?function(e,t,a,i){void 0===i&&(i=a);var n=Object.getOwnPropertyDescriptor(t,a);n&&!("get"in n?!t.__esModule:n.writable||n.configurable)||(n={enumerable:!0,get:function(){return t[a]}}),Object.defineProperty(e,i,n)}:function(e,t,a,i){void 0===i&&(i=a),e[i]=t[a]}),__setModuleDefault=this&&this.__setModuleDefault||(Object.create?function(e,t){Object.defineProperty(e,"default",{enumerable:!0,value:t})}:function(e,t){e.default=t}),__importStar=this&&this.__importStar||function(e){if(e&&e.__esModule)return e;var t={};if(null!=e)for(var a in e)"default"!==a&&Object.prototype.hasOwnProperty.call(e,a)&&__createBinding(t,e,a);return __setModuleDefault(t,e),t};Object.defineProperty(exports,"__esModule",{value:!0}),exports.Row=exports.SamplesPanel=exports.Section=exports.SamplesMiddlePanel=void 0;const theme_1=require("@redocly/theme"),styled_components_1=__importStar(require("styled-components")),constants_1=require("../../constants");exports.SamplesMiddlePanel=styled_components_1.default.div`
-  ${({compact:e,isStacked:t,theme:a})=>{const i=e?0:"var(--spacing-vertical)";return styled_components_1.css`
+  ${({compact:e,isStacked:t,fullWidth:a})=>{const i=e?0:"var(--spacing-vertical)";return styled_components_1.css`
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      padding: ${i} var(--panel-gap-horizontal);
+
       &:empty {
         display: none;
       }
-      width: 100%;
-      padding: ${i} var(--panel-gap-horizontal);
 
-      ${a.mediaQueries[a.showAtBreakpoint.samplesPanel]} {
-        width: calc(100% - var(--panel-samples-width));
-        padding-right: var(--panel-gap-vertical, var(--panel-gap-horizontal));
+      @media screen and (min-width: ${theme_1.breakpoints.large}) {
+        width: ${a?"100%":"calc(100% - var(--panel-samples-width))"};
+        padding-left: ${t?"var(--panel-gap-horizontal)":"calc(var(--panel-gap-horizontal) * 2)"};
+        padding-right: ${t?"var(--panel-gap-vertical)":"var(--panel-gap-horizontal)"};
         padding-top: 0;
         padding-bottom: ${t?"var(--spacing-vertical)":0};
       }
 
-      ${a.mediaQueries.print} {
+      @media print {
         width: 100%;
         padding-top: ${i};
         padding-bottom: ${i};
       }
-    `}}
+    `}};
+  & & {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  &:last-child > ${theme_1.Markdown} :last-child,
+  ${theme_1.Markdown} article :last-child {
+    margin-bottom: 0;
+  }
 `,exports.Section=styled_components_1.default.div.attrs((e=>({[constants_1.SECTION_ATTR]:e.sectionId,id:e.id})))`
   z-index: 0;
   padding: 0;
   width: 100%;
 
+  ${({expanded:e})=>e&&styled_components_1.css`
+      background-color: var(--layer-color);
+      border-bottom: 1px solid var(--border-color-secondary);
+      --code-block-bg-color: var(--bg-color);
+      --code-block-controls-bg-color: var(--bg-color);
+    `}
+
   & > &:last-child {
     min-height: initial;
   }
-  ${({theme:e})=>styled_components_1.css`
-    ${e.mediaQueries[e.showAtBreakpoint.samplesPanel]} {
-      padding-top: var(--spacing-vertical);
-      padding-bottom: var(--spacing-vertical);
-    }
-
-    ${e.mediaQueries.print} {
-      padding: 0;
-    }
-  `}
+
+  @media screen and (min-width: ${theme_1.breakpoints.medium}) {
+    padding-top: var(--spacing-xs);
+
+    ${({expanded:e})=>!e&&styled_components_1.css`
+        padding-bottom: var(--spacing-xs);
+      `}
+  }
+
+  @media print {
+    padding: 0;
+  }
+
   ${({underlined:e})=>e&&styled_components_1.css`
       position: relative;
 
@@ -46,7 +69,7 @@
         width: 100%;
         display: block;
         content: '';
-        border-bottom: 1px solid var(--border-primary);
+        border-bottom: 1px solid var(--border-color-primary);
       }
     `}
   ${theme_1.H2} {
@@ -62,26 +85,26 @@
   padding-right: var(--panel-gap-horizontal);
 
   position: sticky;
+  z-index: var(--panel-z-index);
   top: calc(var(--navbar-height) + var(--panel-gap-vertical));
 
   &:empty {
     display: none;
   }
 
-  ${({theme:e})=>styled_components_1.css`
-    ${e.mediaQueries[e.showAtBreakpoint.samplesPanel]} {
-      width: var(--panel-samples-width);
-      padding-top: 0;
-      padding-bottom: 0;
-      padding-left: var(--panel-gap-vertical, var(--panel-gap-horizontal));
-    }
+  @media screen and (min-width: ${theme_1.breakpoints.large}) {
+    width: var(--panel-samples-width);
+    padding-top: 0;
+    padding-bottom: 0;
+    padding-left: ${({isStacked:e})=>e?"var(--panel-gap-vertical)":"var(--panel-gap-horizontal)"};
+    padding-right: ${({isStacked:e})=>e?"var(--panel-gap-horizontal)":"calc(var(--panel-gap-horizontal) * 2)"};
+  }
 
-    ${e.mediaQueries.print} {
-      width: 100%;
-      padding-top: var(--spacing-vertical);
-      padding-bottom: var(--spacing-vertical);
-    }
-  `}
+  @media print {
+    width: 100%;
+    padding-top: var(--spacing-vertical);
+    padding-bottom: var(--spacing-vertical);
+  }
 `,exports.Row=styled_components_1.default.div`
   display: flex;
   flex-direction: column;
@@ -89,14 +112,12 @@
   width: 100%;
   padding: 0;
 
-  ${({theme:e,layout:t})=>styled_components_1.css`
-    ${e.mediaQueries[e.showAtBreakpoint.samplesPanel]} {
-      flex-direction: ${t!==theme_1.LayoutVariant.STACKED?"row":"column"};
-    }
+  @media screen and (min-width: ${theme_1.breakpoints.large}) {
+    flex-direction: ${({layout:e})=>e!==theme_1.LayoutVariant.STACKED?"row":"column"};
+  }
 
-    ${e.mediaQueries.print} {
-      flex-direction: column;
-    }
-  `}
+  @media print {
+    flex-direction: column;
+  }
 `;
 //# sourceMappingURL=panels.js.map

package/lib/components/common/schema.d.ts

@@ -1,11 +1,9 @@
+import { Badge } from '@redocly/theme';
 export declare const OneOfButton: import("styled-components").StyledComponent<"button", any, {
     selected: boolean;
     deprecated: boolean;
 }, never>;
 export declare const OneOfList: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Wrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const BadgeStyle: import("styled-components").StyledComponent<"span", any, {
-    deprecated?: boolean | undefined;
-}, never>;
-export declare const ArrayOpeningLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
-export declare const ArrayClosingLabel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const BadgeStyle: import("styled-components").StyledComponent<typeof Badge, any, {}, never>;
+export declare const SelectionTitle: import("styled-components").StyledComponent<"div", any, {}, never>;