@redocly/theme 0.4.8 → 0.4.10

package/src/Layout/PageLayout.tsx

@@ -1,11 +1,14 @@
+import React from 'react';
 import styled from 'styled-components';
-import type { PropsWithChildren, ReactNode } from 'react';
 
 interface PageLayoutProps {
-  sidebar?: ReactNode;
+  sidebar?: React.ReactNode;
 }
 
-export function PageLayout({ sidebar, children }: PropsWithChildren<PageLayoutProps>): JSX.Element {
+export function PageLayout({
+  sidebar,
+  children,
+}: React.PropsWithChildren<PageLayoutProps>): JSX.Element {
   return (
     <Container data-component-name="Layout/PageLayout">
       {sidebar}

package/src/Layout/RootLayout.tsx

@@ -1,9 +1,9 @@
+import React from 'react';
 import styled from 'styled-components';
-import type { PropsWithChildren, ReactNode } from 'react';
 
 interface LayoutConfig {
-  navbar: ReactNode;
-  footer: ReactNode;
+  navbar: React.ReactNode;
+  footer: React.ReactNode;
 }
 
 const Wrapper = styled.div``;
@@ -12,7 +12,7 @@ export function RootLayout({
   navbar,
   footer,
   children,
-}: PropsWithChildren<LayoutConfig>): JSX.Element {
+}: React.PropsWithChildren<LayoutConfig>): JSX.Element {
   return (
     // TODO: rewrite it to avoid passing components as props
     <Wrapper data-component-name="Layout/RootLayout">

package/src/Markdown/Admonition.tsx

@@ -1,5 +1,5 @@
+import React from 'react';
 import styled from 'styled-components';
-import type { PropsWithChildren } from 'react';
 
 import { AlertIcon } from '@theme/icons/AlertIcon/AlertIcon';
 
@@ -15,7 +15,7 @@ export function Admonition({
   type = 'info',
   name,
   children,
-}: PropsWithChildren<AdmonitionProps>): JSX.Element {
+}: React.PropsWithChildren<AdmonitionProps>): JSX.Element {
   return (
     <Wrapper type={type} data-component-name="Markdown/Admonition">
       <AlertIcon type={type} />

package/src/Markdown/CodeSample/CodeSample.tsx

@@ -1,31 +1,48 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import styled, { css } from 'styled-components';
 
 import { ClipboardService } from '@theme/utils/ClipboardService';
+import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
 
-type CodeSampleProps = {
+export type CodeSampleProps = {
   language: string;
   highlighted: string;
   rawContent: string;
 };
 
+const defaultCopyCodeSnippet = {
+  hide: false,
+  buttonText: 'Copy',
+  tooltipText: 'Copy the code snippet',
+  toasterText: 'Copied',
+  toasterDuration: 1500,
+};
+
 export function CodeSample({ rawContent, highlighted, language }: CodeSampleProps): JSX.Element {
   const langClassName = language ? `language-${language}` : '';
+  const { copyCodeSnippet } = useDefaultThemeSettings();
+  const copyCodeProps = { ...copyCodeSnippet, ...defaultCopyCodeSnippet };
 
   const [isCopied, setIsCopied] = useState(false);
 
   const copyCode = (code: string) => {
     ClipboardService.copyCustom(code);
     setIsCopied(true);
-    setTimeout(() => setIsCopied(false), 1500);
+    setTimeout(() => setIsCopied(false), copyCodeProps.toasterDuration);
   };
 
   return (
     <Wrapper className="code-sample" data-component-name="Markdown/CodeSample/CodeSample">
-      <CodeSampleButtonContainer onClick={() => copyCode(rawContent)}>
-        {!isCopied && <CopyCodeButton title="Copy the code snippet">Copy</CopyCodeButton>}
-        {isCopied && <DoneIndicator>Copied</DoneIndicator>}
-      </CodeSampleButtonContainer>
+      {!copyCodeProps.hide && (
+        <CodeSampleButtonContainer onClick={() => copyCode(rawContent)}>
+          {!isCopied && (
+            <CopyCodeButton title={copyCodeProps.tooltipText}>
+              {copyCodeProps.buttonText}
+            </CopyCodeButton>
+          )}
+          {isCopied && <DoneIndicator>{copyCodeProps.toasterText}</DoneIndicator>}
+        </CodeSampleButtonContainer>
+      )}
       <pre className={langClassName}>
         <code className={langClassName} dangerouslySetInnerHTML={{ __html: highlighted }} />
       </pre>

package/src/Markdown/Details.tsx

@@ -1,11 +1,11 @@
+import React from 'react';
 import styled from 'styled-components';
-import type { PropsWithChildren } from 'react';
 
 type DetailsProps = {
   summary: string;
 };
 
-export function Details({ summary, children }: PropsWithChildren<DetailsProps>): JSX.Element {
+export function Details({ summary, children }: React.PropsWithChildren<DetailsProps>): JSX.Element {
   return (
     <StyledDetails>
       <summary>{summary}</summary>

package/src/Markdown/Heading.tsx

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from 'react';
-import { createElement } from 'react';
+import React, { createElement } from 'react';
 
 import { concatClassNames } from '@theme/utils';
 

package/src/Markdown/MarkdownLayout.tsx

@@ -1,5 +1,5 @@
+import React from 'react';
 import styled from 'styled-components';
-import type { ReactNode } from 'react';
 
 import { PageWrapper } from '@theme/Markdown/PageWrapper';
 import { ContainerWrapper } from '@theme/Markdown/ContainerWrapper';
@@ -8,8 +8,8 @@ import { EditPageButton } from '@theme/EditPageButton';
 import { LastUpdated } from '@theme/LastUpdated/LastUpdated';
 
 type MarkdownLayoutProps = {
-  tableOfContent: ReactNode;
-  markdownWrapper: ReactNode;
+  tableOfContent: React.ReactNode;
+  markdownWrapper: React.ReactNode;
   showPrevButton?: boolean;
   showNextButton?: boolean;
   editPage?: {

package/src/Markdown/Mermaid.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 type MermaidProps = {

package/src/Markdown/Sup.tsx

@@ -1,4 +1,5 @@
 import type { PropsWithChildren } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 export function Sup({ children }: PropsWithChildren<unknown>): JSX.Element {

package/src/Markdown/Tabs/Tab.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 type TabProps = {

package/src/Markdown/Tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import type { PropsWithChildren } from 'react';
-import { useState } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 
 import { Tab } from '@theme/Markdown/Tabs/Tab';
@@ -39,6 +39,7 @@ const TabList = styled.ol`
 `;
 
 const TabContent = styled.div`
+  padding: 10px 5px;
   border: 1px solid #ccc;
   border-top: none;
   padding: 1rem;

package/src/Navbar/MobileNavbarDropdown.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import type { ResolvedNavLinkItem } from '@theme/types/portal';

package/src/Navbar/MobileNavbarItem.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
 

package/src/Navbar/MobileNavbarMenu.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';

package/src/Navbar/Navbar.tsx

@@ -1,26 +1,25 @@
+import React from 'react';
 import styled from 'styled-components';
-import type { ReactNode } from 'react';
 
 import type { ResolvedConfigLinks } from '@theme/types/portal';
 
-import { useThemeSettings } from '@portal/hooks';
-import { DEFAULT_THEME_NAME } from '@portal/constants';
 import { NavbarMenu } from '@theme/Navbar';
 import { useMobileMenu } from '@theme/hooks/useMobileMenu';
 import { MobileNavbarMenuButton } from '@theme/Navbar/MobileNavbarMenuButton';
 import { MobileNavbarMenu } from '@theme/Navbar/MobileNavbarMenu';
 import { ColorModeSwitcher } from '@theme/ColorModeSwitcher/ColorModeSwitcher';
+import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
 
 interface NavbarProps {
   menu: ResolvedConfigLinks;
-  logo: ReactNode;
-  search: ReactNode;
-  profile?: ReactNode;
+  logo: React.ReactNode;
+  search: React.ReactNode;
+  profile?: React.ReactNode;
 }
 
 export function Navbar({ menu, logo, search, profile }: NavbarProps): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu(false);
-  const { search: searchSettings, navbar } = useThemeSettings(DEFAULT_THEME_NAME);
+  const { search: searchSettings, navbar } = useDefaultThemeSettings();
   const hideSearch =
     searchSettings?.hide || (searchSettings?.placement && searchSettings?.placement !== 'navbar');
 

package/src/Navbar/NavbarDropdown.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import type { ResolvedNavLinkItem } from '@theme/types/portal';

package/src/Navbar/NavbarItem.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 import { useLocation } from 'react-router-dom';
 

package/src/Navbar/NavbarMenu.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import type { ResolvedConfigLinks, ResolvedNavItem } from '@theme/types/portal';

package/src/NavbarLogo/NavbarLogo.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import type { LogoConfig } from '@theme/types/portal';

package/src/PageNavigation/NextPageLink.tsx

@@ -1,10 +1,11 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import type { ResolvedNavItemWithLink } from '@theme/types/portal';
 
-import { useThemeSettings, useSidebarSiblingsData } from '@portal/hooks';
-import { DEFAULT_THEME_NAME } from '@portal/constants';
+import { useSidebarSiblingsData } from '@portal/hooks';
 import { Button } from '@theme/Button/Button';
+import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
 
 interface NextPageType {
   nextPage?: ResolvedNavItemWithLink | null;
@@ -12,7 +13,7 @@ interface NextPageType {
 
 export function NextPageLink(): JSX.Element {
   const { nextPage }: NextPageType = useSidebarSiblingsData() || {};
-  const { navigation } = useThemeSettings(DEFAULT_THEME_NAME);
+  const { navigation } = useDefaultThemeSettings();
 
   if (!nextPage || navigation?.hide || navigation?.nextPageLink?.hide) {
     return <div>&nbsp;</div>;

package/src/PageNavigation/PageNavigation.tsx

@@ -1,9 +1,9 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import { PreviousPageLink } from '@theme/PageNavigation/PreviousPageLink';
 import { NextPageLink } from '@theme/PageNavigation/NextPageLink';
-import { useThemeSettings } from '@portal/hooks';
-import { DEFAULT_THEME_NAME } from '@portal/constants';
+import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
 
 type PageNavigationProps = {
   showPrevButton?: boolean;
@@ -14,7 +14,7 @@ export function PageNavigation({
   showPrevButton = true,
   showNextButton = true,
 }: PageNavigationProps): JSX.Element | null {
-  const { navigation } = useThemeSettings(DEFAULT_THEME_NAME);
+  const { navigation } = useDefaultThemeSettings();
 
   if (navigation?.hide) {
     return null;

package/src/PageNavigation/PreviousPageLink.tsx

@@ -1,9 +1,10 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import type { ResolvedNavItemWithLink } from '@theme/types/portal';
 
-import { useThemeSettings, useSidebarSiblingsData } from '@portal/hooks';
-import { DEFAULT_THEME_NAME } from '@portal/constants';
+import { useSidebarSiblingsData } from '@portal/hooks';
+import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
 import { Button } from '@theme/Button/Button';
 
 interface PreviousPageType {
@@ -12,7 +13,7 @@ interface PreviousPageType {
 
 export function PreviousPageLink(): JSX.Element {
   const { prevPage }: PreviousPageType = useSidebarSiblingsData() || {};
-  const { navigation } = useThemeSettings(DEFAULT_THEME_NAME);
+  const { navigation } = useDefaultThemeSettings();
 
   if (!prevPage || navigation?.hide || navigation?.previousPageLink?.hide) {
     return <div>&nbsp;</div>;

package/src/Panel/PanelComponent.tsx

@@ -1,5 +1,5 @@
 import type { BaseSyntheticEvent, PropsWithChildren, ReactNode } from 'react';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 
 import type { PanelHeaderProps } from '@theme/Panel/PanelHeader';
@@ -15,7 +15,7 @@ export interface PanelComponentProps {
   renderChildrenHidden?: boolean;
   header?: ReactNode | ((props: PanelHeaderProps) => ReactNode);
   onToggle?: (expanded: boolean) => void;
-  description?: ReactNode;
+  description?: React.ReactNode;
 }
 
 export function PanelComponent({

package/src/Profile/Profile.tsx

@@ -1,4 +1,4 @@
-import { memo } from 'react';
+import React, { memo } from 'react';
 import styled, { css } from 'styled-components';
 
 import { stringToHslColor } from '@theme/utils';

package/src/Search/Autocomplete.tsx

@@ -1,5 +1,5 @@
 import type { ChangeEvent, KeyboardEvent, ReactNode, SyntheticEvent } from 'react';
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 

package/src/Search/ClearIcon.tsx

@@ -1,4 +1,5 @@
 import type { SVGProps } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 const Icon = (props: SVGProps<SVGSVGElement>) => (

package/src/Search/Parameters.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import type { OperationParameter } from '@portal/types';

package/src/Search/Search.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import { usePreloadHistory } from '@portal/usePreloadHistory';

package/src/Search/SearchIcon.tsx

@@ -1,4 +1,5 @@
 import type { SVGProps } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 const Icon = (props: SVGProps<SVGSVGElement>) => (

package/src/Search/SearchItem.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 
 import type { ActiveItem, SearchDocument } from '@portal/types';

package/src/Search/utils.tsx

@@ -1,3 +1,4 @@
+import * as React from 'react';
 import styled from 'styled-components';
 
 export const highlight = (text: string | string[]): JSX.Element | string => {

package/src/Sidebar/ApiCallItem.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';

package/src/Sidebar/ArrowBack.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 const Arrow = ({ className }: { className?: string }): JSX.Element => (

package/src/Sidebar/BackButton.tsx

@@ -1,5 +1,5 @@
+import React from 'react';
 import styled from 'styled-components';
-import type { PropsWithChildren } from 'react';
 
 import { ArrowBack } from '@theme/Sidebar/ArrowBack';
 
@@ -7,7 +7,10 @@ interface BackButtonProps {
   back: () => void;
 }
 
-export function BackButton({ children, back }: PropsWithChildren<BackButtonProps>): JSX.Element {
+export function BackButton({
+  children,
+  back,
+}: React.PropsWithChildren<BackButtonProps>): JSX.Element {
   return (
     <Button onClick={back} data-component-name="Sidebar/BackButton">
       <ArrowBack />

package/src/Sidebar/Drilldown.tsx

@@ -1,5 +1,5 @@
+import React from 'react';
 import styled from 'styled-components';
-import type { PropsWithChildren } from 'react';
 
 import type { DrilldownMenuProps } from '@theme/Sidebar/types/DrilldownMenuProps';
 
@@ -18,7 +18,7 @@ export function Drilldown({
   item,
   expand,
   ...props
-}: PropsWithChildren<DrilldownProps>): JSX.Element {
+}: React.PropsWithChildren<DrilldownProps>): JSX.Element {
   return (
     <Wrapper data-component-name="Sidebar/Drilldown">
       <DrilldownLabel onClick={expand}>

package/src/Sidebar/DrilldownMenu.tsx

@@ -1,5 +1,5 @@
+import React from 'react';
 import styled, { keyframes } from 'styled-components';
-import type { PropsWithChildren } from 'react';
 
 import type { DrilldownMenuProps } from '@theme/Sidebar/types/DrilldownMenuProps';
 
@@ -11,7 +11,7 @@ export function DrilldownMenu({
   back,
   prevActiveItem,
   children,
-}: PropsWithChildren<DrilldownMenuProps>): JSX.Element {
+}: React.PropsWithChildren<DrilldownMenuProps>): JSX.Element {
   return (
     <MenuContainer data-component-name="Sidebar/DrilldownMenu">
       <MenuContent>

package/src/Sidebar/DrilldownMenuItem.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';

package/src/Sidebar/ExternalIcon.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 const Icon = ({ className }: { className?: string }): JSX.Element => (

package/src/Sidebar/MenuGroup.tsx

@@ -1,5 +1,5 @@
+import React from 'react';
 import styled from 'styled-components';
-import type { PropsWithChildren } from 'react';
 
 import type { ItemState } from '@theme/Sidebar/types/ItemState';
 
@@ -19,7 +19,7 @@ export function MenuGroup({
   isExpanded,
   toggleExpanded,
   children,
-}: PropsWithChildren<MenuGroupProps>): JSX.Element {
+}: React.PropsWithChildren<MenuGroupProps>): JSX.Element {
   return (
     <Wrapper data-component-name="Sidebar/MenuGroup">
       <MenuLinkItem item={item}>

package/src/Sidebar/MenuItem.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';

package/src/Sidebar/MenuLinkItem.tsx

@@ -1,11 +1,14 @@
+import React from 'react';
 import styled from 'styled-components';
-import type { PropsWithChildren } from 'react';
 
 import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
 
 import { MenuLink } from '@theme/Sidebar/MenuLink';
 
-export function MenuLinkItem({ item, children }: PropsWithChildren<MenuItemProps>): JSX.Element {
+export function MenuLinkItem({
+  item,
+  children,
+}: React.PropsWithChildren<MenuItemProps>): JSX.Element {
   return (
     <Wrapper data-component-name="Sidebar/MenuLinkItem">
       {item.link ? (

package/src/Sidebar/Separator.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';

package/src/Sidebar/SidebarLayout.tsx

@@ -1,23 +1,22 @@
+import React from 'react';
 import styled from 'styled-components';
-import type { ReactNode } from 'react';
 
 import { Sidebar } from '@theme/Sidebar/Sidebar';
 import { useMobileMenu } from '@theme/hooks/useMobileMenu';
 import { MobileSidebarButton } from '@theme/Sidebar/MobileSidebarButton';
 import { MenuContainer } from '@theme/Sidebar/MenuContainer';
-import { useThemeSettings } from '@portal/hooks';
-import { DEFAULT_THEME_NAME } from '@portal/constants';
 import { SidebarSearch } from '@theme/Search/SidebarSearch';
+import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
 
 interface SidebarLayoutProps {
-  versions: ReactNode;
-  menu: ReactNode;
+  versions: React.ReactNode;
+  menu: React.ReactNode;
 }
 
 export function SidebarLayout({ versions, menu }: SidebarLayoutProps): JSX.Element | null {
   const [isOpen, setIsOpen] = useMobileMenu();
   const toggleMenu = () => setIsOpen(!isOpen);
-  const { search, sidebar } = useThemeSettings(DEFAULT_THEME_NAME);
+  const { search, sidebar } = useDefaultThemeSettings();
 
   if (sidebar?.hide) {
     return null;

package/src/SidebarLogo/SidebarLogo.tsx

@@ -1,3 +1,4 @@
+import React from 'react';
 import styled from 'styled-components';
 
 export interface LogoProps {

package/src/SourceCode/SourceCode.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import React, { useEffect, useState } from 'react';
 
 import { highlight, addLineNumbers } from '@theme/utils';
 import {

package/src/TableOfContent/TableOfContent.tsx

@@ -1,4 +1,4 @@
-import { useRef } from 'react';
+import React, { useRef } from 'react';
 import styled from 'styled-components';
 
 import type { MdHeading } from '@theme/types/portal';
@@ -6,9 +6,8 @@ import type { MdHeading } from '@theme/types/portal';
 import { getDisplayedHeadingsIds, getDisplayedHeadings, getLeastDepth } from './utils';
 
 import { useFullHeight } from '@theme/hooks/useFullHeight';
-import { useThemeSettings } from '@portal/hooks';
 import { useActiveHeading } from '@theme/hooks/useActiveHeading';
-import { DEFAULT_THEME_NAME } from '@portal/constants';
+import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
 
 interface TableOfContentProps {
   headings?: Array<MdHeading | null> | null | undefined;
@@ -21,7 +20,7 @@ export function TableOfContent(props: TableOfContentProps): JSX.Element | null {
 
   const sidebar = useRef<HTMLDivElement | null>(null);
   useFullHeight(sidebar);
-  const { toc } = useThemeSettings(DEFAULT_THEME_NAME);
+  const { toc } = useDefaultThemeSettings();
 
   const displayedHeadings = getDisplayedHeadings(headings, tocMaxDepth);
   const leastDepth = getLeastDepth(displayedHeadings);

package/src/Tooltip/Tooltip.tsx

@@ -1,4 +1,4 @@
-import { useEffect, memo, useRef } from 'react';
+import React, { useEffect, memo, useRef } from 'react';
 import styled, { css } from 'styled-components';
 import type { PropsWithChildren, ReactNode } from 'react';