@redocly/theme 0.9.0-beta.3 → 0.9.0-beta.4

package/lib/Button/Button.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { FlattenSimpleInterpolation } from 'styled-components';
 export type ButtonSize = 'small' | 'medium' | 'large' | 'xlarge' | string;
-export type ButtonColor = 'primary' | 'secondary' | 'default' | string;
+export type ButtonColor = 'primary' | 'secondary' | 'tertiary' | 'default' | string;
 export type ButtonVariant = 'outlined' | 'contained';
 export interface ButtonProps {
     color?: ButtonColor;

package/lib/Button/Button.js

@@ -73,8 +73,8 @@ exports.baseButtonStyles = (0, styled_components_1.css) `
     box-shadow: var(--button-active-box-shadow);
   }
 `;
-const StyledButton = styled_components_1.default.button.attrs(({ color = 'default', extraClass }) => ({
-    className: `button-color-${color}${extraClass ? ` ${extraClass}` : ''}`,
+const StyledButton = styled_components_1.default.button.attrs(({ color = 'default', extraClass, variant }) => ({
+    className: `button-color-${color}${variant ? ` ${variant}` : ''}${extraClass ? ` ${extraClass}` : ''}`,
     'data-component-name': 'Button/Button',
 })) `
   text-decoration: none;
@@ -131,6 +131,18 @@ const StyledButton = styled_components_1.default.button.attrs(({ color = 'defaul
       animation: ${getBlink()} 1.2s infinite;
     `}
 
+  ${({ color }) => color === 'tertiary' &&
+    (0, styled_components_1.css) `
+      background-color: transparent;
+      border: none;
+      color: var(--text-color);
+
+      :hover {
+        border: none;
+        background: rgba(255, 255, 255, 0.65);
+      }
+    `}
+
   ${({ disabled }) => disabled &&
     (0, styled_components_1.css) `
       &,

package/lib/Cards/Card.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedNavItem } from '@theme/types/portal';
 export interface CardProps {
     title?: string;

package/lib/Catalog/Catalog.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { CatalogConfig } from '@theme/types/portal/src/shared/types/catalog';
 export default function Catalog(props: {
     pageProps: {

package/lib/Catalog/CatalogCard.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { CatalogItem } from '@theme/types/portal/src/shared/types/catalog';
 export declare function CatalogCard({ item }: {
     item: CatalogItem;

package/lib/Catalog/Filter.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedFilter } from '@theme/types/portal/src/shared/types/catalog';
 export declare function Filter({ filter }: {
     filter: ResolvedFilter;

package/lib/Catalog/Filter.js

@@ -12,9 +12,7 @@ function Filter({ filter }) {
     if (!filter.parentUsed)
         return null;
     return (react_1.default.createElement(FilterGroup, { key: filter.property + filter.title },
-        react_1.default.createElement(FilterTitle, null,
-            filter.title,
-            " filter"),
+        react_1.default.createElement(FilterTitle, null, filter.title),
         filter.type === 'select' ? (react_1.default.createElement(StyledSelect, { onChange: (e) => filter.selectOption(e.target.value), value: ((_a = filter.selectedOptions.values().next()) === null || _a === void 0 ? void 0 : _a.value) || '' },
             react_1.default.createElement("option", { key: "none", value: "" }, "All"),
             filter.filteredOptions.map((value) => (react_1.default.createElement("option", { key: value.value, value: value.value },

package/lib/Catalog/Tags.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare function Tags({ tags }: {
     tags: string[];
 }): JSX.Element;

package/lib/ColorModeSwitcher/ColorModeSwitcher.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare function ColorModeSwitcher(): JSX.Element | null;

package/lib/CopyButton/CopyButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface CopyButtonProps {
     text: string;
     dataTestId?: string;

package/lib/EditPageButton/EditPageButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface EditPageButtonProps {
     text: string;
     to: string;

package/lib/Feedback/Comment.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { CommentProps } from '../Feedback';
 export declare const Comment: ({ settings, onSubmit }: CommentProps) => JSX.Element;

package/lib/Feedback/Rating.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { RatingProps } from '../Feedback';
 export declare const Rating: ({ settings, onSubmit }: RatingProps) => JSX.Element;

package/lib/Feedback/Reasons.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { ReasonsProps } from '../Feedback';
 export declare const Reasons: ({ settings, onSubmit }: ReasonsProps) => JSX.Element;

package/lib/Feedback/ReportDialog.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { ReportDialogProps } from '../Feedback';
 export declare const ReportDialog: ({ location, settings, onSubmit, onCancel, }: ReportDialogProps) => JSX.Element;

package/lib/Feedback/Sentiment.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import type { SentimentProps } from '../Feedback';
 export declare const Sentiment: ({ settings, onSubmit }: SentimentProps) => JSX.Element;

package/lib/Feedback/Thumbs.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const ThumbUp: ({ text }: {
     text?: string | undefined;
 }) => JSX.Element;

package/lib/Footer/CustomFooter.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { NavGroupRecord } from '@theme/types/portal';
 interface FooterProps {
     data: NavGroupRecord;

package/lib/Footer/CustomFooterNavItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedNavItem } from '@theme/types/portal';
 interface CustomFooterNavItemProps {
     navItem: ResolvedNavItem;

package/lib/Footer/Footer.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { NavGroup } from '@theme/types/portal';
 interface FooterProps {
     data: {

package/lib/Footer/FooterColumn.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedNavItem } from '@theme/types/portal';
 interface FooterColumnProps {
     column: ResolvedNavItem;

package/lib/Footer/FooterColumns.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedNavItem } from '@theme/types/portal';
 interface FooterColumnsProps {
     columns: ResolvedNavItem[];

package/lib/Footer/FooterCopyright.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { NavGroup } from '@theme/types/portal';
 interface FooterCopyrightProps {
     copyrightText: NavGroup;

package/lib/LastUpdated/LastUpdated.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 declare const FORMATS: {
     timeago: (date: Date, locale: string) => string;
     iso: (date: Date) => string;

package/lib/Markdown/Admonition.d.ts

@@ -4,6 +4,9 @@ interface AdmonitionTypeProps {
 }
 export interface AdmonitionProps extends Partial<AdmonitionTypeProps> {
     name?: string;
+    className?: string;
+    'data-source'?: string;
+    'data-hash'?: string;
 }
-export declare function Admonition({ type, name, children, }: React.PropsWithChildren<AdmonitionProps>): JSX.Element;
+export declare function Admonition({ type, name, children, className, 'data-source': dataSource, 'data-hash': dataHash, }: React.PropsWithChildren<AdmonitionProps>): JSX.Element;
 export {};

package/lib/Markdown/Admonition.js

@@ -7,8 +7,8 @@ exports.Admonition = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
 const AlertIcon_1 = require("../icons/AlertIcon/AlertIcon");
-function Admonition({ type = 'info', name, children, }) {
-    return (react_1.default.createElement(Wrapper, { type: type, "data-component-name": "Markdown/Admonition" },
+function Admonition({ type = 'info', name, children, className, 'data-source': dataSource, 'data-hash': dataHash, }) {
+    return (react_1.default.createElement(Wrapper, { type: type, className: className, "data-component-name": "Markdown/Admonition", "data-source": dataSource, "data-hash": dataHash },
         react_1.default.createElement(AlertIcon_1.AlertIcon, { type: type }),
         name ? react_1.default.createElement(Heading, { type: type }, name) : null,
         react_1.default.createElement(Content, null, children)));

package/lib/Markdown/CodeSample/CodeSample.d.ts

@@ -1,6 +1,9 @@
+/// <reference types="react" />
 export type CodeSampleProps = {
     language: string;
     highlighted: string;
     rawContent: string;
+    'data-source'?: string;
+    'data-hash'?: string;
 };
-export declare function CodeSample({ rawContent, highlighted, language }: CodeSampleProps): JSX.Element;
+export declare function CodeSample({ rawContent, highlighted, language, 'data-source': dataSource, 'data-hash': dataHash, }: CodeSampleProps): JSX.Element;

package/lib/Markdown/CodeSample/CodeSample.js

@@ -29,7 +29,7 @@ const styled_components_1 = __importStar(require("styled-components"));
 const ClipboardService_1 = require("../../utils/ClipboardService");
 const useThemeConfig_1 = require("../../hooks/useThemeConfig");
 const Feedback_1 = require("../../Feedback");
-function CodeSample({ rawContent, highlighted, language }) {
+function CodeSample({ rawContent, highlighted, language, 'data-source': dataSource, 'data-hash': dataHash, }) {
     const langClassName = language ? `language-${language}` : '';
     const { codeSnippet: { copy = {}, report = {} } = {} } = (0, useThemeConfig_1.useThemeConfig)();
     const [isCopied, setIsCopied] = (0, react_1.useState)(false);
@@ -39,7 +39,7 @@ function CodeSample({ rawContent, highlighted, language }) {
         setIsCopied(true);
         setTimeout(() => setIsCopied(false), copy.toasterDuration || 1500);
     };
-    return (react_1.default.createElement(Wrapper, { className: "code-sample", "data-component-name": "Markdown/CodeSample/CodeSample" },
+    return (react_1.default.createElement(Wrapper, { className: "code-sample", "data-component-name": "Markdown/CodeSample/CodeSample", "data-source": dataSource, "data-hash": dataHash },
         react_1.default.createElement(CodeSampleButtonContainer, null,
             !copy.hide && (react_1.default.createElement(react_1.default.Fragment, null,
                 !isCopied && (react_1.default.createElement(Button, { onClick: () => copyCode(rawContent), title: copy.tooltipText || 'Copy to clipboard' }, copy.buttonText || 'Copy')),

package/lib/Markdown/Heading.d.ts

@@ -1,5 +1,7 @@
 import type { PropsWithChildren } from 'react';
-export declare function Heading({ level, id, children, }: PropsWithChildren<{
+export declare function Heading({ level, id, children, 'data-source': dataSource, 'data-hash': dataHash, }: PropsWithChildren<{
     level: number;
     id: string;
+    'data-source'?: string;
+    'data-hash'?: string;
 }>): JSX.Element;

package/lib/Markdown/Heading.js

@@ -26,18 +26,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Heading = void 0;
 const react_1 = __importStar(require("react"));
 const utils_1 = require("../utils");
+const icons_1 = require("../icons");
 /**
  * Class name for all MD tags
  */
 const mdClassName = 'md';
-const SvgIcon = (react_1.default.createElement("svg", { "aria-hidden": "true", focusable: "false", height: "16", version: "1.1", viewBox: "0 0 16 16", width: "16" },
-    react_1.default.createElement("path", { fillRule: "evenodd", d: "M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z" })));
-function Heading({ level, id, children, }) {
-    const linkEl = (react_1.default.createElement("a", { href: `#${id}`, className: (0, utils_1.concatClassNames)('anchor', 'before') }, SvgIcon));
+function Heading({ level, id, children, 'data-source': dataSource, 'data-hash': dataHash, }) {
+    const linkEl = (react_1.default.createElement("a", { href: `#${id}`, className: (0, utils_1.concatClassNames)('anchor', 'before') },
+        react_1.default.createElement(icons_1.AnchorIcon, null)));
     return (0, react_1.createElement)(`h${level}`, {
         id,
         className: (0, utils_1.concatClassNames)('heading-anchor', mdClassName),
         'data-component-name': 'Markdown/Heading',
+        'data-source': dataSource,
+        'data-hash': dataHash,
     }, react_1.default.createElement(react_1.default.Fragment, null,
         linkEl,
         children));

package/lib/Markdown/Mermaid.d.ts

@@ -1,5 +1,8 @@
+/// <reference types="react" />
 type MermaidProps = {
     diagramHtml: string;
+    'data-source'?: string;
+    'data-hash'?: string;
 };
-export declare function Mermaid({ diagramHtml }: MermaidProps): JSX.Element;
+export declare function Mermaid({ diagramHtml, 'data-source': dataSource, 'data-hash': dataHash, }: MermaidProps): JSX.Element;
 export {};

package/lib/Markdown/Mermaid.js

@@ -6,8 +6,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Mermaid = void 0;
 const react_1 = __importDefault(require("react"));
 const styled_components_1 = __importDefault(require("styled-components"));
-function Mermaid({ diagramHtml }) {
-    return (react_1.default.createElement(Wrapper, { className: "mermaid-wrapper", dangerouslySetInnerHTML: { __html: diagramHtml }, "data-component-name": "Markdown/Mermaid" }));
+function Mermaid({ diagramHtml, 'data-source': dataSource, 'data-hash': dataHash, }) {
+    return (react_1.default.createElement(Wrapper, { className: "mermaid-wrapper", dangerouslySetInnerHTML: { __html: diagramHtml }, "data-component-name": "Markdown/Mermaid", "data-source": dataSource, "data-hash": dataHash }));
 }
 exports.Mermaid = Mermaid;
 const Wrapper = styled_components_1.default.div `

package/lib/Markdown/Tabs/Tab.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 type TabProps = {
     activeTab: string;
     label: string;

package/lib/Navbar/MobileNavbarDropdown.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedNavLinkItem } from '@theme/types/portal';
 interface NavbarDropdownProps {
     items: ResolvedNavLinkItem[];

package/lib/Navbar/MobileNavbarItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Link } from '../mocks/Link';
 import type { ResolvedNavItem } from '@theme/types/portal';
 export interface NavbarItemProps {

package/lib/Navbar/MobileNavbarMenuButton.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare const MobileNavbarMenuButton: import("styled-components").StyledComponent<({ onClick, className }: import("../ui/Burger").BurgerProps) => JSX.Element, any, {
     'data-component-name': string;
 }, "data-component-name">;

package/lib/Navbar/NavbarDropdown.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedNavLinkItem } from '@theme/types/portal';
 interface NavbarDropdownProps {
     items: ResolvedNavLinkItem[];

package/lib/Navbar/NavbarItem.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { Link } from '../mocks/Link';
 import type { ResolvedNavItem } from '@theme/types/portal';
 export interface NavbarItemProps {

package/lib/Navbar/NavbarMenu.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { ResolvedConfigLinks } from '@theme/types/portal';
 export declare function NavbarMenu({ menuItems }: {
     menuItems: ResolvedConfigLinks;

package/lib/NavbarLogo/NavbarLogo.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import type { LogoConfig } from '@theme/types/portal';
 export type NavbarLogoProps = {
     logo: Pick<LogoConfig, 'image' | 'link' | 'altText'>;

package/lib/PageNavigation/NextButton.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare function NextButton(): JSX.Element;

package/lib/PageNavigation/PageNavigation.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare function PageNavigation(): JSX.Element | null;

package/lib/PageNavigation/PreviousButton.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare function PreviousButton(): JSX.Element;

package/lib/Pages/Forbidden.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare function Forbidden(): JSX.Element;

package/lib/Pages/NotFound.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare function NotFound(): JSX.Element;

package/lib/Profile/LoginLink.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface LoginLinkProps {
     href: string;
 }

package/lib/Profile/Profile.js

@@ -27,7 +27,7 @@ exports.Profile = void 0;
 const react_1 = __importStar(require("react"));
 const styled_components_1 = __importStar(require("styled-components"));
 const utils_1 = require("../utils");
-function ProfileComponent({ name, imageUrl, onClick, color }) {
+function ProfileComponent({ name = 'User', imageUrl, onClick, color }) {
     var _a;
     if (imageUrl) {
         return (react_1.default.createElement(ProfileWrapper, { onClick: onClick },

package/lib/Profile/UserProfile.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export interface UserProfileProps {
     userInfo: {
         isAuthenticated: boolean;

package/lib/ReferenceDocs/ClearButton.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface ClearButtonProps {
+    className?: string;
+    style?: React.CSSProperties;
+    handleClear?: () => void;
+}
+export declare const ClearButton: import("styled-components").StyledComponent<React.NamedExoticComponent<ClearButtonProps>, any, {}, never>;
+export {};

package/lib/ReferenceDocs/ClearButton.js

@@ -0,0 +1,48 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.ClearButton = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const ClearButtonComponent = ({ className, style, handleClear }) => (react_1.default.createElement("button", { className: className, style: style, onClick: handleClear }, "\u2715"));
+exports.ClearButton = (0, styled_components_1.default)((0, react_1.memo)(ClearButtonComponent)) `
+  z-index: 1;
+  position: absolute;
+  right: 24px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #89949f;
+  background: none;
+  border: none;
+  cursor: pointer;
+
+  &:hover {
+    color: #fff;
+  }
+`;
+//# sourceMappingURL=ClearButton.js.map

package/lib/ReferenceDocs/DevOnboardingTryItSecurity.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { TryItSecurityProps } from './TryItSecurity';
+export declare function DevOnboardingTryItSecurity(props: TryItSecurityProps): JSX.Element | null;

package/lib/ReferenceDocs/DevOnboardingTryItSecurity.js

@@ -0,0 +1,158 @@
+"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 (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __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.DevOnboardingTryItSecurity = void 0;
+const React = __importStar(require("react"));
+const _theme_1 = require("../index.js");
+const styled_components_1 = __importDefault(require("styled-components"));
+const usePageData_1 = require("../mocks/hooks/usePageData");
+const Dropdown_1 = require("./Dropdown");
+function DevOnboardingTryItSecurity(props) {
+    const apiId = props.apiId;
+    // @ts-ignore
+    const { userData } = (0, usePageData_1.usePageData)('userData') || {};
+    // TODO: handle error
+    const [_error, setError] = React.useState();
+    const [apps, setApps] = React.useState();
+    const [appId, setAppId] = React.useState('');
+    const [loading, setLoading] = React.useState(true);
+    const [appLoading, setAppLoading] = React.useState(false);
+    const [selectedAppSecret, setSelectedAppSecret] = React.useState();
+    const [acceptValueUpdate, setAcceptValueUpdate] = React.useState(true);
+    const initialRender = React.useRef(true);
+    React.useEffect(() => {
+        if (!props.value && initialRender.current)
+            return;
+        if (acceptValueUpdate) {
+            setAcceptValueUpdate(false);
+        }
+        else {
+            setAppId('');
+        }
+    }, [props.value]);
+    React.useEffect(() => {
+        initialRender.current = false;
+        const prevAppId = sessionStorage.getItem('redocly_onboarding:prevAppId');
+        if (prevAppId) {
+            setAppId(prevAppId);
+        }
+        if (userData === null || userData === void 0 ? void 0 : userData.isAuthenticated) {
+            fetch(`/api/api-keys/api-products/${apiId}/access?expand=1`).then((res) => {
+                return res
+                    .json()
+                    .then((data) => {
+                    if (res.ok) {
+                        setApps(data.apps);
+                    }
+                    else {
+                        setError(data.message);
+                    }
+                })
+                    .catch(() => setError('Something went wrong'))
+                    .finally(() => setLoading(false));
+            });
+        }
+    }, []);
+    React.useEffect(() => {
+        sessionStorage.setItem('redocly_onboarding:prevAppId', appId || '');
+    }, [appId]);
+    if (!apiId) {
+        return null;
+    }
+    const loadAppCredentials = (appId) => {
+        setAppLoading(true);
+        fetch(`/api/api-keys/apps/${appId}`).then((res) => {
+            return res
+                .json()
+                .then((data) => {
+                if (res.ok) {
+                    const cred = data.credentials.find((cred) => cred.status === 'approved');
+                    setAcceptValueUpdate(true);
+                    setSelectedAppSecret(cred.clientSecret);
+                }
+                else {
+                    setError(data.message);
+                }
+            })
+                .catch(() => setError('Something went wrong'))
+                .finally(() => setAppLoading(false));
+        });
+    };
+    const placeholder = loading ? 'Loading your apps...' : undefined;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(FormLabel, { htmlFor: "server" }, "Select app: "),
+        React.createElement(FormControl, null,
+            React.createElement(TryItDropdown, { placeholder: placeholder, value: appId || placeholder, options: (apps === null || apps === void 0 ? void 0 : apps.map((app) => ({ title: app.title, value: app.id }))) || [], fullWidth: true, onChange: ({ value }) => {
+                    setAppId(value);
+                    loadAppCredentials(value);
+                } }),
+            React.createElement(UseKeyButton, { disabled: !selectedAppSecret || appLoading, color: "secondary", blinking: appLoading, onClick: () => selectedAppSecret && props.onChange(selectedAppSecret) }, "Use key"))));
+}
+exports.DevOnboardingTryItSecurity = DevOnboardingTryItSecurity;
+const TryItDropdown = (0, styled_components_1.default)(Dropdown_1.Dropdown) `
+  .dropdown-select,
+  label {
+    background-color: var(--panel-try-it-dropdown-background-color);
+    border: var(--panel-try-it-dropdown-border);
+    color: var(--panel-try-it-dropdown-color);
+  }
+`;
+const FormControl = styled_components_1.default.div `
+  width: 100%;
+  /* font-family: var(--code-font-family); */
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0;
+  }
+`;
+const FormLabel = styled_components_1.default.label `
+  padding-bottom: 6px;
+  display: block;
+  white-space: nowrap;
+  line-height: 1em;
+
+  ${({ required }) => required &&
+    `
+      &:after {
+        display: inline-block;
+        content: '*';
+        margin-left: 4px;
+        color: var(--color-error-500);
+      }
+    `}
+`;
+const UseKeyButton = (0, styled_components_1.default)(_theme_1.Button) `
+  width: 100px;
+  align-self: flex-end;
+  margin-top: 16px;
+  margin-right: 0;
+`;
+//# sourceMappingURL=DevOnboardingTryItSecurity.js.map