@redocly/theme 0.47.0 → 0.48.0

package/src/components/Buttons/CopyButton.tsx

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
 
 import type { TooltipProps } from '@redocly/theme/components/Tooltip/Tooltip';
-import type { ControlItemType } from '@redocly/theme/components/CodeBlock/CodeBlockControls';
+import type { ButtonProps } from '@redocly/theme/components/Button/Button';
 
 import { ClipboardService } from '@redocly/theme/core/utils';
 import { useThemeHooks, useControl } from '@redocly/theme/core/hooks';
@@ -11,7 +11,7 @@ import { Tooltip } from '@redocly/theme/components/Tooltip/Tooltip';
 
 export type CopyButtonProps = {
   data: unknown;
-  type?: ControlItemType;
+  type?: 'icon' | 'text' | 'compound';
   toasterPlacement?: TooltipProps['placement'];
   toasterText?: string;
   toasterDuration?: number;
@@ -19,7 +19,14 @@ export type CopyButtonProps = {
   onCopyClick?: (e: React.MouseEvent<HTMLElement>) => void;
   dataTestId?: string;
   className?: string;
-  variant?: string;
+
+  // Generic button props
+  variant?: ButtonProps['variant'];
+  size?: ButtonProps['size'];
+  disabled?: ButtonProps['disabled'];
+  fullWidth?: ButtonProps['fullWidth'];
+  tone?: ButtonProps['tone'];
+  extraClass?: ButtonProps['extraClass'];
 };
 
 function CopyButtonComponent({
@@ -33,6 +40,11 @@ function CopyButtonComponent({
   dataTestId = 'copy-button',
   className,
   variant = 'text',
+  size = 'small',
+  disabled,
+  fullWidth,
+  tone,
+  extraClass,
 }: CopyButtonProps): JSX.Element {
   const { useTranslate } = useThemeHooks();
   const tooltip = useControl();
@@ -59,16 +71,22 @@ function CopyButtonComponent({
       tip={translate('codeSnippet.copy.buttonText', toasterText || 'Copied!')}
       isOpen={tooltip.isOpened}
       placement={toasterPlacement}
+      width="fit-content"
     >
       <Button
         data-component-name="Buttons/CopyButton"
         onClick={(e) => copy(e, toasterDuration)}
         data-testid={dataTestId}
-        icon={type === 'icon' ? <CopyIcon /> : undefined}
-        size="small"
+        icon={type === 'icon' || type === 'compound' ? <CopyIcon /> : undefined}
+        size={size}
         variant={variant}
+        disabled={disabled}
+        fullWidth={fullWidth}
+        tone={tone}
+        extraClass={extraClass}
       >
-        {type !== 'icon' && translate('codeSnippet.copy.toasterText', buttonText || 'Copy')}
+        {(type === 'text' || type === 'compound') &&
+          translate('codeSnippet.copy.toasterText', buttonText || 'Copy')}
       </Button>
     </Tooltip>
   );

package/src/components/Feedback/Mood.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useEffect } from 'react';
 import styled from 'styled-components';
 
-import type { AnonymousUserEmailSettings, ReasonsSettingsSchema } from '@redocly/config';
+import type { OptionalEmailSettings, ReasonsSettingsSchema } from '@redocly/config';
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
 
 import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
@@ -41,7 +41,7 @@ export type MoodProps = {
       neutral?: ReasonsSettingsSchema;
       dissatisfied?: ReasonsSettingsSchema;
     };
-    anonymousUserEmail?: AnonymousUserEmailSettings;
+    optionalEmail?: OptionalEmailSettings;
   };
   className?: string;
 };
@@ -52,7 +52,7 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
     submitText,
     comment: commentSettings,
     reasons: reasonsSettings,
-    anonymousUserEmail: anonymousUserEmailSettings,
+    optionalEmail: optionalEmailSettings,
   } = settings || {};
   const [score, setScore] = React.useState('');
   const [isSubmitted, setIsSubmitted] = React.useState(false);
@@ -131,8 +131,7 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
   const displayReasons = checkIfShouldDisplayReasons(score);
   const displayComment = !!(score && !commentSettings?.hide);
   const displaySubmitBnt = !!(score && (displayReasons || displayComment));
-  const displayFeedbackEmail =
-    !!score && anonymousUserEmailSettings?.enabled && !userData.isAuthenticated;
+  const displayFeedbackEmail = !!score && !optionalEmailSettings?.hide && !userData.isAuthenticated;
 
   const onSubmitMoodForm = () => {
     onSubmit({
@@ -241,18 +240,18 @@ export function Mood({ settings, onSubmit, className }: MoodProps): JSX.Element
 
         {displayFeedbackEmail && (
           <StyledFormOptionalFields>
-            <Label data-translation-key="feedback.settings.anonymousUserEmail.label">
-              {anonymousUserEmailSettings?.label ||
+            <Label data-translation-key="feedback.settings.optionalEmail.label">
+              {optionalEmailSettings?.label ||
                 translate(
-                  'feedback.settings.anonymousUserEmail.label',
+                  'feedback.settings.optionalEmail.label',
                   'Your email (optional, for follow-up)',
                 )}
             </Label>
             <EmailInput
               onChange={onEmailChange}
               placeholder={
-                anonymousUserEmailSettings?.placeholder ||
-                translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com')
+                optionalEmailSettings?.placeholder ||
+                translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com')
               }
               type="email"
               required={!!email}

package/src/components/Feedback/Rating.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useEffect } from 'react';
 import styled from 'styled-components';
 
-import type { AnonymousUserEmailSettings } from '@redocly/config';
+import type { OptionalEmailSettings } from '@redocly/config';
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
 
 import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
@@ -35,7 +35,7 @@ export type RatingProps = {
       component?: string;
       items: string[];
     };
-    anonymousUserEmail?: AnonymousUserEmailSettings;
+    optionalEmail?: OptionalEmailSettings;
   };
   className?: string;
 };
@@ -46,7 +46,7 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
     submitText,
     comment: commentSettings,
     reasons: reasonsSettings,
-    anonymousUserEmail: anonymousUserEmailSettings,
+    optionalEmail: optionalEmailSettings,
   } = settings || {};
   const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [score, setScore] = React.useState(0);
@@ -83,8 +83,7 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
   const displayReasons = !!(score && reasonsSettings && !reasonsSettings.hide);
   const displayComment = !!(score && !commentSettings?.hide);
   const displaySubmitBnt = !!(score && (displayReasons || displayComment));
-  const displayFeedbackEmail =
-    !!score && anonymousUserEmailSettings?.enabled && !userData.isAuthenticated;
+  const displayFeedbackEmail = !!score && !optionalEmailSettings?.hide && !userData.isAuthenticated;
 
   useEffect(() => {
     if (score && !displayComment && !displayReasons && !displayFeedbackEmail) {
@@ -154,18 +153,18 @@ export function Rating({ settings, onSubmit, className }: RatingProps): JSX.Elem
 
         {displayFeedbackEmail && (
           <StyledFormOptionalFields>
-            <Label data-translation-key="feedback.settings.anonymousUserEmail.label">
-              {anonymousUserEmailSettings?.label ||
+            <Label data-translation-key="feedback.settings.optionalEmail.label">
+              {optionalEmailSettings?.label ||
                 translate(
-                  'feedback.settings.anonymousUserEmail.label',
+                  'feedback.settings.optionalEmail.label',
                   'Your email (optional, for follow-up)',
                 )}
             </Label>
             <EmailInput
               onChange={onEmailChange}
               placeholder={
-                anonymousUserEmailSettings?.placeholder ||
-                translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com')
+                optionalEmailSettings?.placeholder ||
+                translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com')
               }
               type="email"
               required={!!email}

package/src/components/Feedback/Scale.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useEffect } from 'react';
 import styled from 'styled-components';
 
-import type { AnonymousUserEmailSettings } from '@redocly/config';
+import type { OptionalEmailSettings } from '@redocly/config';
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
 
 import { breakpoints } from '@redocly/theme/core/utils';
@@ -37,7 +37,7 @@ export type ScaleProps = {
       component?: string;
       items: string[];
     };
-    anonymousUserEmail?: AnonymousUserEmailSettings;
+    optionalEmail?: OptionalEmailSettings;
   };
   className?: string;
 };
@@ -50,7 +50,7 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
     rightScaleLabel,
     comment: commentSettings,
     reasons: reasonsSettings,
-    anonymousUserEmail: anonymousUserEmailSettings,
+    optionalEmail: optionalEmailSettings,
   } = settings || {};
   const [score, setScore] = React.useState(0);
   const [isSubmitted, setIsSubmitted] = React.useState(false);
@@ -85,8 +85,7 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
   const displayReasons = !!score && reasonsSettings && !reasonsSettings.hide;
   const displayComment = !!(score && !commentSettings?.hide);
   const displaySubmitBnt = !!score && (displayReasons || displayComment);
-  const displayFeedbackEmail =
-    !!score && anonymousUserEmailSettings?.enabled && !userData.isAuthenticated;
+  const displayFeedbackEmail = !!score && !optionalEmailSettings?.hide && !userData.isAuthenticated;
 
   const handleCancel = () => {
     setScore(0);
@@ -179,18 +178,18 @@ export function Scale({ settings, onSubmit, className }: ScaleProps): JSX.Elemen
 
         {displayFeedbackEmail && (
           <StyledFormOptionalFields>
-            <Label data-translation-key="feedback.settings.anonymousUserEmail.label">
-              {anonymousUserEmailSettings?.label ||
+            <Label data-translation-key="feedback.settings.optionalEmail.label">
+              {optionalEmailSettings?.label ||
                 translate(
-                  'feedback.settings.anonymousUserEmail.label',
+                  'feedback.settings.optionalEmail.label',
                   'Your email (optional, for follow-up)',
                 )}
             </Label>
             <EmailInput
               onChange={onEmailChange}
               placeholder={
-                anonymousUserEmailSettings?.placeholder ||
-                translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com')
+                optionalEmailSettings?.placeholder ||
+                translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com')
               }
               type="email"
               required={!!email}

package/src/components/Feedback/Sentiment.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useEffect } from 'react';
 import styled from 'styled-components';
 
-import type { ReasonsSettingsSchema, AnonymousUserEmailSettings } from '@redocly/config';
+import type { OptionalEmailSettings, ReasonsSettingsSchema } from '@redocly/config';
 import type { ReasonsProps } from '@redocly/theme/components/Feedback/Reasons';
 
 import { Reasons } from '@redocly/theme/components/Feedback/Reasons';
@@ -32,7 +32,7 @@ export type SentimentProps = {
       like?: ReasonsSettingsSchema;
       dislike?: ReasonsSettingsSchema;
     };
-    anonymousUserEmail?: AnonymousUserEmailSettings;
+    optionalEmail?: OptionalEmailSettings;
   };
   className?: string;
 };
@@ -43,7 +43,7 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
     submitText,
     comment: commentSettings,
     reasons: reasonsSettings,
-    anonymousUserEmail: anonymousUserEmailSettings,
+    optionalEmail: optionalEmailSettings,
   } = settings || {};
   const [isSubmitted, setIsSubmitted] = React.useState(false);
   const [score, setScore] = React.useState(0);
@@ -87,8 +87,7 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
   const displayReasons = checkIfShouldDisplayReasons(score);
   const displayComment = !!(score && !commentSettings?.hide);
   const displaySubmitBnt = !!(score && (displayReasons || displayComment));
-  const displayFeedbackEmail =
-    !!score && anonymousUserEmailSettings?.enabled && !userData.isAuthenticated;
+  const displayFeedbackEmail = !!score && !optionalEmailSettings?.hide && !userData.isAuthenticated;
 
   const commentLabel =
     score === 1
@@ -214,18 +213,18 @@ export function Sentiment({ settings, onSubmit, className }: SentimentProps): JS
 
         {displayFeedbackEmail && (
           <StyledFormOptionalFields>
-            <Label data-translation-key="feedback.settings.anonymousUserEmail.label">
-              {anonymousUserEmailSettings?.label ||
+            <Label data-translation-key="feedback.settings.optionalEmail.label">
+              {optionalEmailSettings?.label ||
                 translate(
-                  'feedback.settings.anonymousUserEmail.label',
+                  'feedback.settings.optionalEmail.label',
                   'Your email (optional, for follow-up)',
                 )}
             </Label>
             <EmailInput
               onChange={onEmailChange}
               placeholder={
-                anonymousUserEmailSettings?.placeholder ||
-                translate('feedback.settings.anonymousUserEmail.placeholder', 'username@mail.com')
+                optionalEmailSettings?.placeholder ||
+                translate('feedback.settings.optionalEmail.placeholder', 'yourname@example.com')
               }
               type="email"
               required={!!email}

package/src/components/Search/SearchDialog.tsx

@@ -44,6 +44,7 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
     setLoadMore,
     advancedSearch,
     askAi,
+    groupField,
   } = useSearch(product?.name, autoSearchDisabled);
   const {
     isFilterOpen,
@@ -51,7 +52,7 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
     onFilterChange,
     onFilterReset,
     onFacetReset,
-    onTopFacetsReset,
+    onQuickFilterReset,
   } = useSearchFilter(filter, setFilter);
   const aiSearch = useAiSearch({ filter });
 
@@ -83,10 +84,10 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
   };
 
   const showLoadMore = (groupKey: string, currentCount: number = 0) => {
-    const topFacet = facets.find((facet) => facet.isTop);
+    const groupFacet = facets.find((facet) => facet.field === groupField);
     let needLoadMore = false;
-    if (topFacet) {
-      const groupValue = topFacet.values.find((value) => {
+    if (groupFacet) {
+      const groupValue = groupFacet.values.find((value) => {
         if (typeof value === 'object') {
           return value.value === groupKey;
         } else return false;
@@ -170,14 +171,17 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
                   facets={facets}
                   searchFilter={filter}
                   onFilterChange={onFilterChange}
-                  onTopFacetsReset={onTopFacetsReset}
+                  onQuickFilterReset={onQuickFilterReset}
+                  groupField={groupField}
                 />
                 {showResults ? (
                   items && Object.keys(items).some((key) => items[key]?.length) ? (
                     Object.keys(items).map((key) =>
                       items[key]?.length ? (
                         <Fragment key={key}>
-                          <SearchGroupTitle>{key}</SearchGroupTitle>
+                          <SearchGroupTitle data-testid="search-group-title">
+                            {key}
+                          </SearchGroupTitle>
                           {items[key]?.map(mapItem)}
                           {showLoadMore(key, items[key]?.length || 0) && (
                             <SearchGroupFooter
@@ -215,6 +219,7 @@ export function SearchDialog({ onClose, className }: SearchDialogProps): JSX.Ele
                     facets={facets}
                     filter={filter}
                     query={query}
+                    quickFilterFields={[groupField]}
                     onFilterChange={onFilterChange}
                     onFilterReset={onFilterReset}
                     onFacetReset={onFacetReset}

package/src/components/Search/SearchFilter.tsx

@@ -13,7 +13,8 @@ export type SearchFilterProps = {
   facets: SearchFacet[];
   filter: SearchFilterItem[];
   query: string;
-  onFilterChange: (field: string, value: string | string[], isTop?: boolean) => void;
+  quickFilterFields: string[];
+  onFilterChange: (field: string, value: string | string[], isQuickFilter?: boolean) => void;
   onFilterReset: () => void;
   onFacetReset: (field: string) => void;
 };
@@ -23,6 +24,7 @@ export function SearchFilter({
   facets,
   filter,
   query,
+  quickFilterFields,
   onFilterChange,
   onFilterReset,
   onFacetReset,
@@ -50,10 +52,11 @@ export function SearchFilter({
           <SearchFilterField
             key={`${facet.field}-${index}`}
             facet={facet}
-            onFilterChange={onFilterChange}
-            onFacetReset={onFacetReset}
             filter={filter}
             query={query}
+            quickFilterFields={quickFilterFields}
+            onFilterChange={onFilterChange}
+            onFacetReset={onFacetReset}
           />
         ))}
       </SearchFilterFields>

package/src/components/Search/SearchFilterField.tsx

@@ -14,7 +14,8 @@ type SearchFilterFieldProps = {
   facet: SearchFacet;
   filter: SearchFilterItem[];
   query: string;
-  onFilterChange: (field: string, value: string | string[], isTop?: boolean) => void;
+  quickFilterFields: string[];
+  onFilterChange: (field: string, value: string | string[], isQuickFilter?: boolean) => void;
   onFacetReset: (filed: string) => void;
 };
 
@@ -23,6 +24,7 @@ export function SearchFilterField({
   facet,
   filter,
   query,
+  quickFilterFields,
   onFilterChange,
   onFacetReset,
 }: SearchFilterFieldProps): JSX.Element {
@@ -31,7 +33,7 @@ export function SearchFilterField({
   const selectedValues = filter.find((item) => item.field === facet.field)?.values || [];
 
   const onChange = (value: string | string[]) => {
-    onFilterChange(facet.field, value, facet.isTop);
+    onFilterChange(facet.field, value, facet.field in quickFilterFields);
   };
 
   const onReset = () => {

package/src/components/Search/SearchGroups.tsx

@@ -1,24 +1,29 @@
 import * as React from 'react';
 import styled from 'styled-components';
 
-import type { SearchFacet, SearchFacetCount, SearchFilterItem } from '@redocly/theme';
-
+import {
+  type SearchFacet,
+  type SearchFacetCount,
+  type SearchFilterItem,
+} from '@redocly/theme/core/types';
 import { Tag } from '@redocly/theme/components/Tag/Tag';
 
 type SearchGroupsProps = {
   facets: SearchFacet[];
   searchFilter: SearchFilterItem[];
-  onFilterChange: (field: string, value: string[], isTop?: boolean) => void;
-  onTopFacetsReset: () => void;
+  groupField: string;
+  onFilterChange: (field: string, value: string[], isQuickFilter?: boolean) => void;
+  onQuickFilterReset: () => void;
 };
 
 export function SearchGroups({
   facets,
   searchFilter,
+  groupField,
   onFilterChange,
-  onTopFacetsReset,
+  onQuickFilterReset,
 }: SearchGroupsProps): JSX.Element {
-  const groupFacets = facets.filter((facet) => facet.isTop);
+  const groupFacets = facets.filter((facet) => facet.field === groupField);
 
   const handleGroupTagClick = (
     value: string,
@@ -36,8 +41,8 @@ export function SearchGroups({
     <SearchGroupsWrapper>
       <GroupTag
         borderless
-        active={!searchFilter.some((item) => item.isTop)}
-        onClick={() => searchFilter.some((item) => item.isTop) && onTopFacetsReset()}
+        active={!searchFilter.some((item) => item.isQuickFilter)}
+        onClick={() => searchFilter.some((item) => item.isQuickFilter) && onQuickFilterReset()}
       >
         All
       </GroupTag>

package/src/components/StatusCode/StatusCode.ts

@@ -17,16 +17,17 @@ export const StatusCode = styled.button.attrs({ 'data-component-name': 'StatusCo
     width: var(--status-code-width);
     border: var(--status-code-border);
     background-color: ${({ status }) => {
-      if (Math.floor(Number(status) / 100) === 2) {
-        return 'var(--status-code-200-bg-color)';
-      } else if (Math.floor(Number(status) / 100) === 4) {
-        return 'var(--status-code-400-bg-color)';
-      } else if (Math.floor(Number(status) / 100) === 5) {
-        return 'var(--status-code-500-bg-color)';
-      } else if (Math.floor(Number(status) / 100) === 3) {
-        return 'var(--status-code-300-bg-color)';
-      } else {
-        return 'var(--status-code-100-bg-color)';
+      switch (true) {
+        case status.startsWith('2'):
+          return 'var(--status-code-200-bg-color)';
+        case status.startsWith('3'):
+          return 'var(--status-code-300-bg-color)';
+        case status.startsWith('4'):
+          return 'var(--status-code-400-bg-color)';
+        case status.startsWith('5'):
+          return 'var(--status-code-500-bg-color)';
+        default:
+          return 'var(--status-code-100-bg-color)';
       }
     }}
 `;

package/src/core/constants/code-walkthrough.ts

@@ -0,0 +1 @@
+export const ACTIVE_STEP_QUERY_PARAM = '__step';

package/src/core/constants/index.ts

@@ -1,2 +1,3 @@
 export * from '@redocly/theme/core/constants/common';
 export * from '@redocly/theme/core/constants/environments';
+export * from '@redocly/theme/core/constants/code-walkthrough';

package/src/core/contexts/CodeWalkthrough/CodeWalkthroughControlsContext.tsx

@@ -0,0 +1,21 @@
+import { createContext } from 'react';
+
+import type { WalkthroughControlsState } from '@redocly/theme/core/hooks';
+
+export const CodeWalkthroughControlsStateContext = createContext<WalkthroughControlsState>({
+  activeFilters: [],
+
+  getToggleState: () => null,
+  changeToggleState: () => {},
+
+  getInputState: () => null,
+  changeInputState: () => {},
+
+  getFilterState: () => null,
+  changeFilterState: () => {},
+
+  getFileText: () => '',
+  areConditionsMet: () => false,
+  handleDownloadCode: () => Promise.resolve(),
+  populateInputsWithValue: (node) => node,
+});

package/src/core/contexts/CodeWalkthrough/CodeWalkthroughStepsContext.tsx

@@ -0,0 +1,10 @@
+import { createContext } from 'react';
+
+import type { WalkthroughStepsState } from '@redocly/theme/core/hooks';
+
+export const CodeWalkthroughStepsContext = createContext<WalkthroughStepsState>({
+  activeStep: null,
+  setActiveStep: () => {},
+  register: () => {},
+  unregister: () => {},
+});

package/src/core/contexts/index.ts

@@ -1 +1,3 @@
 export * from '@redocly/theme/core/contexts/ThemeDataContext';
+export * from '@redocly/theme/core/contexts/CodeWalkthrough/CodeWalkthroughControlsContext';
+export * from '@redocly/theme/core/contexts/CodeWalkthrough/CodeWalkthroughStepsContext';

package/src/core/hooks/__mocks__/search/use-search-filter.ts

@@ -5,6 +5,6 @@ export const useSearchFilter = jest.fn(() => {
     onFilterChange: () => {},
     onFilterToggle: () => {},
     onFilterReset: () => {},
-    onTopFacetsReset: () => {},
+    onQuickFilterReset: () => {},
   };
 });

package/src/core/hooks/code-walkthrough/__mocks__/MockIntersectionObserver.ts

@@ -0,0 +1,22 @@
+export class MockIntersectionObserver {
+  public readonly root: Element | Document | null;
+  public readonly rootMargin: string;
+  public readonly thresholds: ReadonlyArray<number>;
+  observe: (target: HTMLElement) => void;
+  unobserve: (target: HTMLElement) => void;
+  disconnect: () => void;
+
+  // @ts-ignore
+  constructor(callback: IntersectionObserverCallback, options?: IntersectionObserverInit) {
+    this.root = null;
+    this.rootMargin = '0px';
+    this.thresholds = [1];
+    this.observe = jest.fn;
+    this.unobserve = jest.fn;
+    this.disconnect = jest.fn;
+  }
+
+  takeRecords(): any[] {
+    return [];
+  }
+}