@redocly/theme 0.4.15 → 0.5.0

package/src/PageNavigation/NextPageLink.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { ResolvedNavItemWithLink } from '@theme/types/portal';
-
 import { useSidebarSiblingsData } from '@portal/hooks';
 import { Button } from '@theme/Button/Button';
 import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
+import type { ResolvedNavItemWithLink } from '@theme/types/portal';
 
 interface NextPageType {
   nextPage?: ResolvedNavItemWithLink | null;

package/src/PageNavigation/PageNavigation.tsx

@@ -24,4 +24,8 @@ const PageNavigationWrapper = styled.div`
   display: flex;
   justify-content: space-between;
   margin: 25px 0;
+
+  @media print {
+    display: none;
+  }
 `;

package/src/PageNavigation/PreviousPageLink.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { ResolvedNavItemWithLink } from '@theme/types/portal';
-
 import { useSidebarSiblingsData } from '@portal/hooks';
 import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
 import { Button } from '@theme/Button/Button';
+import type { ResolvedNavItemWithLink } from '@theme/types/portal';
 
 interface PreviousPageType {
   prevPage?: ResolvedNavItemWithLink | null;

package/src/Panel/PanelComponent.tsx

@@ -1,13 +1,13 @@
-import type { BaseSyntheticEvent, PropsWithChildren, ReactNode } from 'react';
 import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 
-import type { PanelHeaderProps } from '@theme/Panel/PanelHeader';
+import type { BaseSyntheticEvent, PropsWithChildren, ReactNode } from 'react';
 
 import { ShelfIcon } from '@theme/icons';
 import { PanelBody } from '@theme/Panel/PanelBody';
 import { PanelHeader } from '@theme/Panel/PanelHeader';
 import { PanelHeaderTitle } from '@theme/Panel/PanelHeaderTitle';
+import type { PanelHeaderProps } from '@theme/Panel/PanelHeader';
 
 export interface PanelComponentProps {
   expanded?: boolean;

package/src/Panel/PanelHeader.ts

@@ -1,6 +1,7 @@
-import type { BaseSyntheticEvent } from 'react';
 import styled from 'styled-components';
 
+import type { BaseSyntheticEvent } from 'react';
+
 export interface PanelHeaderProps {
   expanded?: boolean;
   disabled?: boolean;

package/src/Search/Autocomplete.tsx

@@ -1,12 +1,12 @@
-import type { ChangeEvent, KeyboardEvent, ReactNode, SyntheticEvent } from 'react';
 import React, { useEffect, useState } from 'react';
 import { useLocation } from 'react-router-dom';
 import styled from 'styled-components';
 
-import type { ActiveItem } from '@portal/types';
+import type { ChangeEvent, KeyboardEvent, ReactNode, SyntheticEvent } from 'react';
 
 import { FormInput } from '@theme/Search/Input';
 import { Popover } from '@theme/Search/Popover';
+import type { ActiveItem } from '@portal/types';
 
 interface AutocompleteProps<T> {
   placeholder?: string;

package/src/Search/ClearIcon.tsx

@@ -1,7 +1,8 @@
-import type { SVGProps } from 'react';
 import React from 'react';
 import styled from 'styled-components';
 
+import type { SVGProps } from 'react';
+
 const Icon = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"

package/src/Search/Parameters.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { OperationParameter } from '@portal/types';
-
 import { highlight } from '@theme/Search/utils';
+import type { OperationParameter } from '@portal/types';
 
 interface ParametersProps {
   parameters: OperationParameter[];

package/src/Search/SearchIcon.tsx

@@ -1,7 +1,8 @@
-import type { SVGProps } from 'react';
 import React from 'react';
 import styled from 'styled-components';
 
+import type { SVGProps } from 'react';
+
 const Icon = (props: SVGProps<SVGSVGElement>) => (
   <svg
     xmlns="http://www.w3.org/2000/svg"

package/src/Search/SearchItem.tsx

@@ -1,12 +1,11 @@
 import React, { useEffect, useRef } from 'react';
 import styled from 'styled-components';
 
-import type { ActiveItem, SearchDocument } from '@portal/types';
-
 import { OperationBadge } from '@theme/OperationBadge';
 import { Link } from '@portal/Link';
 import { Parameters } from '@theme/Search/Parameters';
 import { highlight } from '@theme/Search/utils';
+import type { ActiveItem, SearchDocument } from '@portal/types';
 
 interface SearchItemProps {
   item: ActiveItem<SearchDocument>;

package/src/Sidebar/ApiCallItem.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
-
 import { OperationBadge } from '@theme/OperationBadge';
 import { MenuLinkItem } from '@theme/Sidebar/MenuLinkItem';
 import { SeparatorLine } from '@theme/Sidebar/SeparatorLine';
 import { MenuItemLabel } from '@theme/Sidebar/MenuItemLabel';
+import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
 
 export function ApiCallItem({ item }: MenuItemProps): JSX.Element {
   return (

package/src/Sidebar/Drilldown.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { DrilldownMenuProps } from '@theme/Sidebar/types/DrilldownMenuProps';
-
 import { MenuItemLabel } from '@theme/Sidebar/MenuItemLabel';
 import { SeparatorLine } from '@theme/Sidebar/SeparatorLine';
 import { DrilldownMenuItem } from '@theme/Sidebar/DrilldownMenuItem';
 import { DrilldownMenu } from '@theme/Sidebar/DrilldownMenu';
+import type { DrilldownMenuProps } from '@theme/Sidebar/types/DrilldownMenuProps';
 
 interface DrilldownProps extends DrilldownMenuProps {
   isExpanded: boolean;

package/src/Sidebar/DrilldownMenu.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import styled, { keyframes } from 'styled-components';
 
-import type { DrilldownMenuProps } from '@theme/Sidebar/types/DrilldownMenuProps';
-
 import { BackButton } from '@theme/Sidebar/BackButton';
 import { DrilldownMenuItem } from '@theme/Sidebar/DrilldownMenuItem';
+import type { DrilldownMenuProps } from '@theme/Sidebar/types/DrilldownMenuProps';
 
 export function DrilldownMenu({
   item,

package/src/Sidebar/MenuGroup.tsx

@@ -1,12 +1,11 @@
 import React, { useEffect, useRef, useState } from 'react';
 import styled from 'styled-components';
 
-import type { ItemState } from '@theme/Sidebar/types/ItemState';
-
 import { ArrowIcon } from '@theme/icons/ArrowIcon/ArrowIcon';
 import { MenuLinkItem } from '@theme/Sidebar/MenuLinkItem';
 import { MenuItemLabel } from '@theme/Sidebar/MenuItemLabel';
 import { SeparatorLine } from '@theme/Sidebar/SeparatorLine';
+import type { ItemState } from '@theme/Sidebar/types/ItemState';
 
 interface MenuGroupProps {
   item: ItemState;

package/src/Sidebar/MenuItem.tsx

@@ -1,12 +1,11 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
-
 import { MenuLinkItem } from '@theme/Sidebar/MenuLinkItem';
 import { ExternalIcon } from '@theme/Sidebar/ExternalIcon';
 import { MenuItemLabel } from '@theme/Sidebar/MenuItemLabel';
 import { SeparatorLine } from '@theme/Sidebar/SeparatorLine';
+import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
 
 export function MenuItem({ item }: MenuItemProps): JSX.Element {
   return (

package/src/Sidebar/MenuLink.tsx

@@ -1,16 +1,10 @@
 import styled from 'styled-components';
 
-import type { UniversalLinkProps } from '@theme/ui/UniversalLink';
+import { Link } from '@portal/Link';
 
-import { UniversalLink } from '@theme/ui/UniversalLink';
-
-export const MenuLink = styled(UniversalLink).attrs(() => ({
+export const MenuLink = styled(Link).attrs(() => ({
   'data-component-name': 'Sidebar/MenuLink',
-}))<UniversalLinkProps>`
+}))`
   text-decoration: none;
   color: var(--sidebar-item-text-color);
-
-  &&.external-url:after {
-    content: none;
-  }
 `;

package/src/Sidebar/MenuLinkItem.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
-
 import { MenuLink } from '@theme/Sidebar/MenuLink';
+import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
 
 export function MenuLinkItem({
   item,

package/src/Sidebar/Separator.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
 import styled from 'styled-components';
 
-import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
-
 import { SeparatorLine } from '@theme/Sidebar/SeparatorLine';
 import { SeparatorItem } from '@theme/Sidebar/SeparatorItem';
+import type { MenuItemProps } from '@theme/Sidebar/types/MenuItemProps';
 
 export function Separator({ item }: MenuItemProps): JSX.Element {
   return (

package/src/TableOfContent/TableOfContent.tsx

@@ -1,13 +1,12 @@
 import React, { useRef } from 'react';
 import styled from 'styled-components';
 
-import type { MdHeading } from '@theme/types/portal';
-
-import { getDisplayedHeadingsIds, getDisplayedHeadings, getLeastDepth } from './utils';
-
 import { useFullHeight } from '@theme/hooks/useFullHeight';
 import { useActiveHeading } from '@theme/hooks/useActiveHeading';
 import { useDefaultThemeSettings } from '@theme/hooks/useDefaultThemeSettings';
+import type { MdHeading } from '@theme/types/portal';
+
+import { getDisplayedHeadingsIds, getDisplayedHeadings, getLeastDepth } from './utils';
 
 interface TableOfContentProps {
   headings?: Array<MdHeading | null> | null | undefined;

package/src/Tooltip/Tooltip.tsx

@@ -1,5 +1,6 @@
 import React, { useEffect, memo, useRef } from 'react';
 import styled, { css } from 'styled-components';
+
 import type { PropsWithChildren, ReactNode } from 'react';
 
 import { useControl, useOutsideClick } from '@theme/hooks';

package/src/globalStyle.ts

@@ -236,9 +236,7 @@ const headingsTypography = css`
   * @tokens Heading level 5
   */
 
-  --h5-font-family: var(
-    --heading-font-family
-  ); /* Token Description Example @presenter FontFamily */
+  --h5-font-family: var(--heading-font-family); /* Token Description Example @presenter FontFamily */
   --h5-font-weight: var(--heading-font-weight); // @presenter FontWeight
   --h5-font-size: 14px; // @presenter FontSize
   --h5-line-height: 14px; // @presenter LineHeight
@@ -447,7 +445,7 @@ const sidebar = css`
 
   --sidebar-item-hover-background-color: var(--border-color);
   --sidebar-item-hover-color: var(--text-color);
- 
+
   /**
     * @tokens Sidebar item spacing
     * @presenter Spacing
@@ -527,7 +525,7 @@ const sidebar = css`
   --sidebar-back-button-icon-color: var(--sidebar-item-text-color);
   --sidebar-back-button-margin: 0 0 calc(var(--sidebar-spacing-unit) * 3) 0;
   --sidebar-back-button-icon: none;
-  
+
   //--sidebar-version-dropdown-* (input settings, see below)
   // @tokens End
 `;
@@ -587,7 +585,7 @@ const admonition = css`
   * @presenter Color
   */
 
-  --admonition-attention-background-color: var(--color-accent-50); // @presenter Color 
+  --admonition-attention-background-color: var(--color-accent-50); // @presenter Color
   --admonition-attention-text-color: var(--text-color); // @presenter Color
   --admonition-attention-heading-text-color: var(--text-color); // @presenter Color
   --admonition-attention-icon-color: var(--color-accent-900); // @presenter Color
@@ -640,7 +638,8 @@ const admonition = css`
   --admonition-success-border-color: inherit; // @presenter Color
   --admonition-success-border-style: var(--admonition-border-style); // @presenter Color
   --admonition-success-border-width: var(--admonition-border-width); // @presenter Color
-  --admonition-success-border: var(--admonition-success-border-width) var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border
+  --admonition-success-border: var(--admonition-success-border-width)
+    var(--admonition-success-border-style) var(--admonition-success-border-color); // @presenter Border
   --admonition-success-icon: none;
 
   // @tokens End
@@ -656,7 +655,7 @@ const responsePanelColors = css`
   --panel-response-heading-line-height: 20px;
   --panel-response-heading-font-weight: var(--font-weight-bold);
   --panel-response-heading-text-color: var(--text-color);
- 
+
   --panel-response-body-text-color: var(--text-color);
 
   /**
@@ -783,7 +782,8 @@ const apiReferencePanels = css`
   --panel-schemas-body-font-family: var(--panel-body-font-family); // @presenter FontFamily
   --panel-schemas-body-font-size: var(--panel-body-font-size); // @presenter FontSize
   --panel-schemas-body-font-weight: var(--panel-body-font-weight); // @presenter FontWeight
-  --panel-schemas-body-padding: 0 var(--panel-body-padding) var(--panel-body-padding) var(--panel-body-padding);
+  --panel-schemas-body-padding: 0 var(--panel-body-padding) var(--panel-body-padding)
+    var(--panel-body-padding);
   --panel-schemas-body-background-color: var(--background-color); // @presenter Color
   --panel-schemas-body-border: unset; // @presenter Border
 
@@ -904,7 +904,7 @@ const apiReferencePanels = css`
     --panel-body-border-local: var(--panel-samples-body-border);
 
     --panel-heading-text-color: var(--panel-samples-heading-text-color); // @presenter Color
-    --panel-heading-background-color: var(--panel-samples-heading-background-color); // @presenter Color
+    --panel-heading-background-color: var(  --panel-samples-heading-background-color); // @presenter Color
 
     --panel-heading-font-family-local: var(--panel-samples-heading-font-family);
     --panel-heading-font-size-local: var(--panel-samples-heading-font-size);
@@ -952,7 +952,7 @@ const apiReferencePanels = css`
     --panel-heading-background-color: var(--panel-response-success-heading-background-color);
     --panel-heading-text-color: var(--panel-response-success-heading-text-color);
 
-    --panel-response-schema-nested-background-color: var(--panel-response-success-schema-nested-background-color);
+    --panel-response-schema-nested-background-color: var(  --panel-response-success-schema-nested-background-color);
   }
 
   /**
@@ -969,7 +969,7 @@ const apiReferencePanels = css`
     --panel-heading-background-color: var(--panel-response-info-heading-background-color);
     --panel-heading-text-color: var(--panel-response-info-heading-text-color);
 
-    --panel-response-schema-nested-background-color: var(--panel-response-info-schema-nested-background-color);
+    --panel-response-schema-nested-background-color: var(  --panel-response-info-schema-nested-background-color);
   }
 
   /**
@@ -986,7 +986,7 @@ const apiReferencePanels = css`
     --panel-heading-background-color: var(--panel-response-error-heading-background-color);
     --panel-heading-text-color: var(--panel-response-error-heading-text-color);
 
-    --panel-response-schema-nested-background-color: var(--panel-response-error-schema-nested-background-color);
+    --panel-response-schema-nested-background-color: var(  --panel-response-error-schema-nested-background-color);
   }
 
   /**
@@ -1002,7 +1002,7 @@ const apiReferencePanels = css`
     --panel-heading-background-color: var(--panel-response-redirect-heading-background-color);
     --panel-heading-text-color: var(--panel-response-redirect-heading-text-color);
 
-    --panel-response-schema-nested-background-color: var(--panel-response-redirect-schema-nested-background-color);
+    --panel-response-schema-nested-background-color: var(  --panel-response-redirect-schema-nested-background-color);
   }
 
   /**
@@ -1019,7 +1019,7 @@ const apiReferencePanels = css`
     --panel-heading-background-color: var(--panel-response-callback-heading-background-color);
     --panel-heading-text-color: var(--panel-response-callback-heading-text-color);
 
-    --panel-response-schema-nested-background-color: var(--panel-response-callback-schema-nested-background-color);
+    --panel-response-schema-nested-background-color: var(  --panel-response-callback-schema-nested-background-color);
   }
 
   /**
@@ -1073,7 +1073,7 @@ const apiReferencePanels = css`
   --panel-samples-tabs-hover-border-color: var(--panel-samples-heading-background-color); // @presenter Color
   --panel-samples-tabs-active-border-color: var(--color-accent-500); // @presenter Color
 
-  --panel-samples-code-block-background-color: var( --code-block-background-color); // @presenter Color
+  --panel-samples-code-block-background-color: var(--code-block-background-color); // @presenter Color
 
   /**
   * @tokens Panel try-it tabs
@@ -1648,17 +1648,17 @@ const toc = css`
 `;
 
 const loadProgressBar = css`
-
   /**
     * @tokens Load progress bar
     */
 
   --load-progress-bar-color: var(--color-secondary-500); // @presenter Color
-  --load-progress-bar-shadow: 0 0 10px var(--load-progress-bar-color), 0 0 5px var(--load-progress-bar-color); // @presenter BoxShadow
+  --load-progress-bar-shadow: 0 0 10px var(--load-progress-bar-color),
+    0 0 5px var(--load-progress-bar-color); // @presenter BoxShadow
   --load-progress-bar-height: 2px; // @presenter Height
 
   // @tokens End
- 
+
   /* Make clicks pass-through */
   #nprogress {
     pointer-events: none;
@@ -1683,11 +1683,11 @@ const loadProgressBar = css`
     width: 100px;
     height: 100%;
     box-shadow: var(--load-progress-bar-shadow);
-    opacity: 1.0;
+    opacity: 1;
 
     -webkit-transform: rotate(3deg) translate(0px, -4px);
-        -ms-transform: rotate(3deg) translate(0px, -4px);
-            transform: rotate(3deg) translate(0px, -4px);
+    -ms-transform: rotate(3deg) translate(0px, -4px);
+    transform: rotate(3deg) translate(0px, -4px);
   }
 
   .nprogress-custom-parent {
@@ -1698,7 +1698,7 @@ const loadProgressBar = css`
   .nprogress-custom-parent #nprogress .bar {
     position: absolute;
   }
-`
+`;
 
 const inputs = css`
   /**
@@ -1744,7 +1744,7 @@ const markdown = css`
   --md-blockquote-text-color: var(--text-color); // @presenter Color
   --md-blockquote-box-shadow: none; // @presenter Shadow
 
-  /** 
+  /**
   * @tokens Markdown Paragraph
   */
 
@@ -1781,7 +1781,7 @@ const markdown = css`
   --md-hr-height: unset;
   --md-hr-margin-vertical: 20px; // @presenter Spacing
 
-  /** 
+  /**
   * @tokens Markdown List
   */
 
@@ -1790,7 +1790,7 @@ const markdown = css`
   --md-list-item-margin: 0.25rem; // @presenter Spacing
   --md-list-item-style: inherit;
 
-  /** 
+  /**
   * @tokens Markdown Numbered List
   */
 
@@ -1903,7 +1903,7 @@ const lastUpdated = css`
 const tile = css`
   --wide-tile-background-color: var(--color-secondary-50);
   --thin-tile-background-color: var(--color-secondary-50);
-`
+`;
 
 export const styles = css`
   :root {
@@ -1940,7 +1940,7 @@ export const styles = css`
   }
 
   :root.notransition * {
-    transition: none !important; 
+    transition: none !important;
   }
 `;
 

package/src/hooks/__tests__/mocks/MockIntersectionObserver.ts

@@ -0,0 +1,48 @@
+export class MockIntersectionObserver {
+  public readonly root: Element | Document | null;
+  public readonly rootMargin: string;
+  public readonly thresholds: ReadonlyArray<number>;
+
+  private viewPort: any;
+  private entries: any[];
+  private readonly callback: IntersectionObserverCallback;
+
+  constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) {
+    this.viewPort = options?.root ? options.root : window;
+    this.entries = [];
+    this.root = null;
+    this.rootMargin = '0px';
+    this.thresholds = [1];
+    this.callback = callback;
+
+    this.viewPort.addEventListener('scroll', this.intersect);
+  }
+
+  private intersect = () => {
+    this.entries.map((entry) => {
+      entry.isIntersecting = this.isInViewPort(entry.target);
+    });
+    this.callback(this.entries, this);
+  };
+
+  isInViewPort(target: HTMLElement): boolean {
+    return target.id !== 'toc-0';
+  }
+
+  observe(target: HTMLElement): void {
+    this.entries.push({ isIntersecting: false, target });
+  }
+
+  unobserve(target: HTMLElement): void {
+    this.entries = this.entries.filter((ob) => ob.target !== target);
+  }
+
+  disconnect(): void {
+    this.viewPort.removeEventListener('scroll', this.intersect);
+    this.entries = [];
+  }
+
+  takeRecords(): any[] {
+    return this.entries;
+  }
+}

package/src/hooks/useActiveSectionId.ts

@@ -1,5 +1,6 @@
 import { useEffect, useState, useMemo } from 'react';
 import throttle from 'lodash.throttle';
+
 import type { Location } from 'history';
 
 import { useNavbarHeight } from '@theme/hooks/useNavbarHeight';

package/src/hooks/useDefaultThemeSettings.ts

@@ -1,7 +1,6 @@
-import type { RawTheme } from '@portal/types';
-
 import { useThemeSettings } from '@portal/hooks';
 import { DEFAULT_THEME_NAME } from '@portal/constants';
+import type { RawTheme } from '@portal/types';
 
 export function useDefaultThemeSettings(): RawTheme['settings'] {
   return useThemeSettings(DEFAULT_THEME_NAME);

package/src/hooks/useFullHeight.ts

@@ -1,7 +1,8 @@
-import type { MutableRefObject } from 'react';
 import { useCallback, useEffect, useMemo } from 'react';
 import throttle from 'lodash.throttle';
 
+import type { MutableRefObject } from 'react';
+
 export function useFullHeight(element: MutableRefObject<HTMLElement | null>): void {
   const handler = useCallback(() => {
     if (!element.current) {

package/src/hooks/useMobileMenu.ts

@@ -1,7 +1,8 @@
-import type { Dispatch, SetStateAction } from 'react';
 import { useEffect, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 
+import type { Dispatch, SetStateAction } from 'react';
+
 export function useMobileMenu(initialState = false): [boolean, Dispatch<SetStateAction<boolean>>] {
   const { location } = useHistory();
   const [isOpen, setIsOpen] = useState(initialState);

package/src/hooks/useNavbarHeight.ts

@@ -1,4 +1,5 @@
 import { useEffect, useState } from 'react';
+
 import type { Location } from 'history';
 
 import { getNavbarElement } from '@theme/utils/getNavbarElement';

package/src/hooks/useOutsideClick.ts

@@ -1,6 +1,7 @@
-import type { MutableRefObject } from 'react';
 import { useEffect } from 'react';
 
+import type { MutableRefObject } from 'react';
+
 export function useOutsideClick(
   ref: MutableRefObject<HTMLElement | null>,
   handler: (event: MouseEvent | TouchEvent) => void,

package/src/mocks/Link.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import { omit } from 'lodash';
 
 // TODO: use real typings here
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export function Link(props: any): JSX.Element {
+  const { active: _, httpVerb: _1, hasActiveSubItem: _2, ...filteredProps } = props;
   // We omit "active" property to avoid "Warning: Received `false` for a non-boolean attribute `active`."
-  const filteredProps = omit(props, ['active', 'httpVerb', 'hasActiveSubItem']);
   return <a href={filteredProps.to} {...filteredProps} />;
 }

package/src/mocks/hooks/index.ts

@@ -11,7 +11,7 @@ interface PageLink {
 
 export function useThemeSettings(_: string): RawTheme['settings'] {
   return {
-    toc: { header: 'header', hide: false },
+    toc: { header: { label: 'header' }, hide: false },
     navigation: {
       nextPageLink: { label: 'next page theme settings label' },
       prevPageLink: { label: 'prev page theme settings label' },

package/src/mocks/types.ts

@@ -3,5 +3,12 @@ export type SearchDocument = any;
 export type OperationParameter = any;
 export interface RawTheme {
   name: string;
-  settings: any;
+  settings: {
+    lastUpdatedBlock?: {
+      hide?: boolean;
+      format?: 'timeago' | 'iso' | 'short' | 'long';
+      locale?: string;
+    };
+    [k: string]: any; // TODO: add missing settings
+  };
 }

package/src/settings.yaml

@@ -2,8 +2,8 @@ search:
   hide: false
   placement: navbar
 toc:
+  hide: false
   header:
-    hide: false
     label: On this page
 navigation:
   hide: false