From 1a31027cc59392dd7e2c50ab58ecffd625285434 Mon Sep 17 00:00:00 2001
From: joannasikora <jo.sikora21@gmail.com>
Date: Fri, 17 Jan 2025 11:18:25 +0100
Subject: [PATCH 1/4] feat(UserGuide): remove UserGuide component and related
 files from Tooltip; update Tooltip and UserGuide documentation; add cleanup
 function to containerRef; add overlay class to the body; remove sliding
 animation

---
 .../src/components/Tooltip/Tooltip.mdx        |  95 -------
 .../components/Tooltip/Tooltip.stories.css    |  27 --
 .../components/Tooltip/Tooltip.stories.tsx    | 269 +-----------------
 .../components/UserGuide/SpotlightOverlay.tsx | 102 -------
 .../components/UserGuide/UserGuide.tsx        | 117 --------
 .../components/UserGuide/UserGuideStep.tsx    |  91 ------
 .../Tooltip/components/UserGuide/index.ts     |   1 -
 .../UserGuide/virtualElementReference.ts      |  43 ---
 .../components/Tooltip/components/index.ts    |   1 -
 .../src/components/Tooltip/index.ts           |   1 -
 .../src/components/UserGuide/UserGuide.mdx    | 122 ++++++++
 .../UserGuide/UserGuide.module.scss           |   4 +
 .../src/components/UserGuide/UserGuide.tsx    |  28 +-
 .../src/components/UserGuide/types.ts         |   2 -
 14 files changed, 146 insertions(+), 757 deletions(-)
 delete mode 100644 packages/react-components/src/components/Tooltip/components/UserGuide/SpotlightOverlay.tsx
 delete mode 100644 packages/react-components/src/components/Tooltip/components/UserGuide/UserGuide.tsx
 delete mode 100644 packages/react-components/src/components/Tooltip/components/UserGuide/UserGuideStep.tsx
 delete mode 100644 packages/react-components/src/components/Tooltip/components/UserGuide/index.ts
 delete mode 100644 packages/react-components/src/components/Tooltip/components/UserGuide/virtualElementReference.ts
 create mode 100644 packages/react-components/src/components/UserGuide/UserGuide.mdx

diff --git a/packages/react-components/src/components/Tooltip/Tooltip.mdx b/packages/react-components/src/components/Tooltip/Tooltip.mdx
index 55c9f872a..84af5b306 100644
--- a/packages/react-components/src/components/Tooltip/Tooltip.mdx
+++ b/packages/react-components/src/components/Tooltip/Tooltip.mdx
@@ -18,7 +18,6 @@ The Tooltip component provides contextual information when users interact with e
 - [Info Tooltip](#InfoTooltip)
 - [Interactive Tooltip](#InteractiveTooltip)
 - [Reports Tooltip](#ReportsTooltip)
-- [User Guide Tooltip](#UserGuideTooltip)
 
 
 ### Default Tooltip <a id="DefaultTooltip" />
@@ -116,100 +115,6 @@ import {
 
 <Canvas of={Stories.TooltipReports} />
 
-### User Guide Tooltip <a id="UserGuideTooltip" />
-
-A simple user guide that can be used to guide users through a series of steps.
-
-```tsx
-import {
-  UserGuide,
-  Button,
-} from '@livechat/design-system-react-components';
-
-const reducer = (
-    state: { isVisible: boolean; reference: string },
-  action: { type: string }
-) => {
-  if (action.type === 'reference1') {
-    return {
-      ...state,
-      reference: 'reference1',
-    };
-  }
-  if (action.type === 'reference2') {
-    return {
-      ...state,
-      reference: 'reference2',
-    };
-  }
-  if (action.type === 'reference3') {
-    return {
-      ...state,
-      reference: 'reference3',
-    };
-  }
-  if (action.type === 'isVisible') {
-    return {
-      reference: 'reference1',
-      isVisible: !state.isVisible,
-    };
-  }
-
-  return state;
-};
-
-const [state, dispatch] = React.useReducer(reducer, {
-  reference: 'reference1',
-  isVisible: false,
-});
-
-return (
-  <div className="simple-user-guide-container">
-    <Button onClick={() => dispatch({ type: 'isVisible' })}>
-      Start guide
-    </Button>
-    <div className="guide-container">
-      <div
-        onClick={() => dispatch({ type: 'reference1' })}
-        id="reference1"
-        className="guide-reference"
-      >
-        Example reference 1
-      </div>
-      <div
-        onClick={() => dispatch({ type: 'reference2' })}
-        id="reference2"
-        className="guide-reference"
-      >
-        Example reference 2
-      </div>
-
-      <div
-        onClick={() => dispatch({ type: 'reference3' })}
-        id="reference3"
-        className="guide-reference"
-      >
-        Example reference 3
-      </div>
-
-      <UserGuide
-        isVisible={state.isVisible}
-        parentElementName={`#${state.reference}`}
-        zIndex={1000}
-        shouldSlide
-      >
-        {state.reference === 'reference1' && <Button onClick={() => dispatch({ type: 'reference2' })}>Next</Button>}
-        {state.reference === 'reference2' && <Button onClick={() => dispatch({ type: 'reference3' })}>Next</Button>}
-        {state.reference === 'reference3' && <Button onClick={() => dispatch({ type: 'isVisible' })}>Finish</Button>}
-      </UserGuide>
-    </div>
-  </div>
-);
-
-```
-
-<Canvas of={Stories.SimpleUserGuide} />
-
 ## Component API <a id="ComponentAPI" />
 
 <ArgTypes of={Stories.Default} sort="requiredFirst" />
diff --git a/packages/react-components/src/components/Tooltip/Tooltip.stories.css b/packages/react-components/src/components/Tooltip/Tooltip.stories.css
index ae63d4bd4..2007881f8 100644
--- a/packages/react-components/src/components/Tooltip/Tooltip.stories.css
+++ b/packages/react-components/src/components/Tooltip/Tooltip.stories.css
@@ -19,33 +19,6 @@
   height: 800px;
 }
 
-.simple-user-guide-container {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
-}
-
-.guide-container {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: 20px;
-}
-
-.guide-reference {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px dashed var(--border-default);
-  border-radius: 4px;
-  background-color: var(--surface-basic-default);
-  font-size: 18px;
-  padding: 10px;
-}
-
 .tooltip-preview-reports {
   display: flex;
   align-items: center;
diff --git a/packages/react-components/src/components/Tooltip/Tooltip.stories.tsx b/packages/react-components/src/components/Tooltip/Tooltip.stories.tsx
index 25e309ba3..7c6033fcb 100644
--- a/packages/react-components/src/components/Tooltip/Tooltip.stories.tsx
+++ b/packages/react-components/src/components/Tooltip/Tooltip.stories.tsx
@@ -8,8 +8,7 @@ import noop from '../../utils/noop';
 import { Button } from '../Button';
 
 import './Tooltip.stories.css';
-import { Info, Interactive, Reports, Simple, UserGuide } from './components';
-import { UserGuideStep } from './components/UserGuide/UserGuideStep';
+import { Info, Interactive, Reports, Simple } from './components';
 import beautifulImage from './placeholder.png';
 import { Tooltip } from './Tooltip';
 import { ITooltipProps } from './types';
@@ -57,7 +56,6 @@ export default {
     Interactive,
     Reports,
     Simple,
-    UserGuide,
   },
 } as Meta<typeof Tooltip>;
 
@@ -180,268 +178,3 @@ TooltipReports.decorators = [
     </div>
   ),
 ];
-
-export const SimpleUserGuide = (): React.ReactElement => {
-  const reducer = (
-    state: { isVisible: boolean; reference: string },
-    action: { type: string }
-  ) => {
-    if (action.type === 'reference1') {
-      return {
-        ...state,
-        reference: 'reference1',
-      };
-    }
-    if (action.type === 'reference2') {
-      return {
-        ...state,
-        reference: 'reference2',
-      };
-    }
-    if (action.type === 'reference3') {
-      return {
-        ...state,
-        reference: 'reference3',
-      };
-    }
-    if (action.type === 'isVisible') {
-      return {
-        reference: 'reference1',
-        isVisible: !state.isVisible,
-      };
-    }
-
-    return state;
-  };
-
-  const [state, dispatch] = React.useReducer(reducer, {
-    reference: 'reference1',
-    isVisible: false,
-  });
-
-  return (
-    <div className="simple-user-guide-container">
-      <Button onClick={() => dispatch({ type: 'isVisible' })}>
-        Start guide
-      </Button>
-      <div className="guide-container">
-        <div
-          onClick={() => dispatch({ type: 'reference1' })}
-          id="reference1"
-          className="guide-reference"
-        >
-          Example reference 1
-        </div>
-        <div
-          onClick={() => dispatch({ type: 'reference2' })}
-          id="reference2"
-          className="guide-reference"
-        >
-          Example reference 2
-        </div>
-
-        <div
-          onClick={() => dispatch({ type: 'reference3' })}
-          id="reference3"
-          className="guide-reference"
-        >
-          Example reference 3
-        </div>
-
-        <UserGuide
-          isVisible={state.isVisible}
-          parentElementName={`#${state.reference}`}
-          zIndex={1000}
-          shouldSlide={true}
-        >
-          {state.reference === 'reference1' ? (
-            <Button onClick={() => dispatch({ type: 'reference2' })}>
-              Next
-            </Button>
-          ) : null}
-
-          {state.reference === 'reference2' ? (
-            <Button onClick={() => dispatch({ type: 'reference3' })}>
-              Next
-            </Button>
-          ) : null}
-
-          {state.reference === 'reference3' ? (
-            <Button onClick={() => dispatch({ type: 'isVisible' })}>
-              Finish
-            </Button>
-          ) : null}
-        </UserGuide>
-      </div>
-    </div>
-  );
-};
-
-export const ExtendedContentUserGuide = (
-  args: ITooltipProps
-): React.ReactElement => (
-  <div className="tooltip-preview-container">
-    <TooltipUserGuideExample {...args}></TooltipUserGuideExample>
-  </div>
-);
-
-ExtendedContentUserGuide.args = {
-  placement: 'bottom',
-  isVisible: true,
-  theme: 'default',
-  triggerOnClick: false,
-  arrowOffsetY: 0,
-  arrowOffsetX: 0,
-  offsetMainAxis: 8,
-  withFadeAnimation: true,
-  transitionDuration: 200,
-  transitionDelay: 0,
-  hoverOutDelayTimeout: 100,
-};
-
-const TooltipUserGuideExample: React.FC<ITooltipProps> = (props) => {
-  const reducer = (
-    state: { isVisible: boolean; reference: string },
-    action: { type: string }
-  ) => {
-    if (action.type === 'reference1') {
-      return {
-        ...state,
-        reference: 'reference1',
-      };
-    }
-    if (action.type === 'reference2') {
-      return {
-        ...state,
-        reference: 'reference2',
-      };
-    }
-    if (action.type === 'reference3') {
-      return {
-        ...state,
-        reference: 'reference3',
-      };
-    }
-    if (action.type === 'isVisible') {
-      return {
-        reference: 'reference1',
-        isVisible: !state.isVisible,
-      };
-    }
-
-    return state;
-  };
-
-  const [state, dispatch] = React.useReducer(reducer, {
-    reference: 'reference1',
-    isVisible: false,
-  });
-
-  return (
-    <div>
-      <Button onClick={() => dispatch({ type: 'isVisible' })}>
-        Start guide
-      </Button>
-      <div
-        style={{
-          width: '500px',
-          height: '600px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-        }}
-      >
-        <div
-          onClick={() => dispatch({ type: 'reference1' })}
-          id="reference1"
-          style={{
-            display: 'block',
-            backgroundColor: 'red',
-            height: '50px',
-            width: '100px',
-          }}
-        ></div>
-        <div
-          onClick={() => dispatch({ type: 'reference2' })}
-          id="reference2"
-          style={{
-            display: 'block',
-            backgroundColor: 'red',
-            height: '50px',
-            width: '100px',
-            alignSelf: 'flex-start',
-          }}
-        ></div>
-
-        <div
-          onClick={() => dispatch({ type: 'reference3' })}
-          id="reference3"
-          style={{
-            display: 'block',
-            backgroundColor: 'red',
-            height: '50px',
-            width: '100px',
-          }}
-        ></div>
-
-        <UserGuide
-          {...props}
-          isVisible={state.isVisible}
-          parentElementName={`#${state.reference}`}
-          zIndex={1000}
-          shouldSlide={true}
-        >
-          {state.reference === 'reference1' ? (
-            <UserGuideStep
-              header="Header - concise and clear"
-              image={{
-                src: beautifulImage,
-                alt: 'image',
-              }}
-              text="Tooltip content is used to explain the details of elements or features."
-              handleClickPrimary={() => dispatch({ type: 'reference2' })}
-              handleCloseAction={() => dispatch({ type: 'isVisible' })}
-              currentStep={1}
-              stepMax={3}
-              closeWithX
-            />
-          ) : null}
-
-          {state.reference === 'reference2' ? (
-            <UserGuideStep
-              header="Header - concise and clear"
-              image={{
-                src: beautifulImage,
-                alt: 'image',
-              }}
-              text="Tooltip content is used to explain the details of elements or features."
-              handleClickPrimary={() => dispatch({ type: 'reference3' })}
-              handleCloseAction={() => dispatch({ type: 'isVisible' })}
-              currentStep={2}
-              stepMax={3}
-              closeWithX
-            />
-          ) : null}
-
-          {state.reference === 'reference3' ? (
-            <UserGuideStep
-              header="Header - concise and clear"
-              image={{
-                src: beautifulImage,
-                alt: 'image',
-              }}
-              text="Tooltip content is used to explain the details of elements or features."
-              handleClickPrimary={() => dispatch({ type: 'isVisible' })}
-              handleCloseAction={() => {
-                dispatch({ type: 'isVisible' });
-              }}
-              currentStep={3}
-              stepMax={3}
-              closeWithX
-            />
-          ) : null}
-        </UserGuide>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/react-components/src/components/Tooltip/components/UserGuide/SpotlightOverlay.tsx b/packages/react-components/src/components/Tooltip/components/UserGuide/SpotlightOverlay.tsx
deleted file mode 100644
index 09383ffb7..000000000
--- a/packages/react-components/src/components/Tooltip/components/UserGuide/SpotlightOverlay.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import * as React from 'react';
-
-import cx from 'clsx';
-
-import styles from '../../Tooltip.module.scss';
-
-const baseClass = 'guide-tooltip';
-
-const SpotlightOverlay = ({
-  gap,
-  isVisible,
-  slide,
-  disablePointerEvents,
-}: {
-  gap: DOMRect | null;
-  isVisible: boolean;
-  slide: boolean;
-  disablePointerEvents: boolean;
-}): React.ReactElement | null => {
-  if (!gap) return null;
-  const overlayLeft = {
-    top: `${gap.top}px`,
-    left: '0',
-    width: `${gap.left}px`,
-    height: `${gap.height}px`,
-  };
-  const overlayRight = {
-    top: `${gap.top}px`,
-    left: `${gap.right}px`,
-    width: `calc(100% - ${gap.right}px)`,
-    height: `${gap.height}px`,
-  };
-  const overlayTop = {
-    top: '0',
-    left: '0',
-    width: '100%',
-    height: `${gap.top}px`,
-  };
-  const overlayBottom = {
-    top: `${gap.bottom}px`,
-    left: '0',
-    width: '100%',
-    height: `calc(100% - ${gap.bottom}px)`,
-  };
-
-  const spotlight = {
-    top: `${gap.top}px`,
-    left: `${gap.left}px`,
-    width: `${gap.width}px`,
-    height: `${gap.height}px`,
-    backgroundColor: 'transparent',
-  };
-
-  return (
-    <>
-      <div
-        className={cx({
-          [styles[`${baseClass}__overlay`]]: true,
-          [styles[`${baseClass}__overlay--visible`]]: isVisible,
-          [styles[`${baseClass}__overlay--slide`]]: slide,
-        })}
-        style={overlayLeft}
-      />
-      <div
-        className={cx({
-          [styles[`${baseClass}__overlay`]]: true,
-          [styles[`${baseClass}__overlay--visible`]]: isVisible,
-          [styles[`${baseClass}__overlay--slide`]]: slide,
-        })}
-        style={overlayTop}
-      />
-      <div
-        className={cx({
-          [styles[`${baseClass}__overlay`]]: true,
-          [styles[`${baseClass}__overlay--visible`]]: isVisible,
-          [styles[`${baseClass}__overlay--slide`]]: slide,
-        })}
-        style={overlayRight}
-      />
-      <div
-        className={cx({
-          [styles[`${baseClass}__overlay`]]: true,
-          [styles[`${baseClass}__overlay--visible`]]: isVisible,
-          [styles[`${baseClass}__overlay--slide`]]: slide,
-        })}
-        style={overlayBottom}
-      />
-      {disablePointerEvents && (
-        <div
-          className={cx({
-            [styles[`${baseClass}__overlay`]]: true,
-            [styles[`${baseClass}__overlay--visible`]]: isVisible,
-            [styles[`${baseClass}__overlay--slide`]]: slide,
-          })}
-          style={spotlight}
-        />
-      )}
-    </>
-  );
-};
-
-export default SpotlightOverlay;
diff --git a/packages/react-components/src/components/Tooltip/components/UserGuide/UserGuide.tsx b/packages/react-components/src/components/Tooltip/components/UserGuide/UserGuide.tsx
deleted file mode 100644
index 5d97623c7..000000000
--- a/packages/react-components/src/components/Tooltip/components/UserGuide/UserGuide.tsx
+++ /dev/null
@@ -1,117 +0,0 @@
-import * as React from 'react';
-
-import { FloatingPortal } from '@floating-ui/react';
-import cx from 'clsx';
-
-import { ModalPortalProps } from '../../../Modal';
-import { Tooltip } from '../../Tooltip';
-import styles from '../../Tooltip.module.scss';
-import { ITooltipProps } from '../../types';
-
-import SpotlightOverlay from './SpotlightOverlay';
-import VirtualReference from './virtualElementReference';
-
-const spotlightPadding = 8;
-const baseClass = 'guide-tooltip';
-
-const virtualReference = (element: Element, padding: number) =>
-  new VirtualReference(element, padding);
-
-interface IOwnProps {
-  shouldSlide?: boolean;
-  className?: string;
-  disableSpotlightPointerEvents?: boolean;
-}
-
-interface IUserGuide
-  extends IOwnProps,
-    Omit<ITooltipProps, 'triggerRenderer'>,
-    Omit<ModalPortalProps, 'children'> {}
-
-export const UserGuide: React.FC<React.PropsWithChildren<IUserGuide>> = (
-  props
-) => {
-  const {
-    className,
-    parentElementName,
-    isVisible = false,
-    shouldSlide = true,
-  } = props;
-
-  const [parentElement, setParentElement] = React.useState<Element | null>(
-    null
-  );
-
-  const [rect, setRect] = React.useState<DOMRect | null>(null);
-  const [isSliding, setIsSliding] = React.useState<boolean>(shouldSlide);
-
-  const handleViewportChange = () => {
-    if (parentElement) {
-      setRect(
-        virtualReference(
-          parentElement,
-          spotlightPadding
-        ).getBoundingClientRect() as DOMRect
-      );
-      setIsSliding(false);
-    }
-  };
-
-  React.useEffect(() => {
-    if (parentElement !== null) {
-      window.addEventListener('resize', handleViewportChange);
-      window.addEventListener('scroll', handleViewportChange);
-
-      return () => {
-        window.removeEventListener('resize', handleViewportChange);
-        window.removeEventListener('scroll', handleViewportChange);
-      };
-    }
-  }, [parentElement]);
-
-  React.useEffect(() => {
-    if (parentElementName) {
-      const element = document.querySelector(parentElementName);
-      setParentElement(element);
-    }
-  }, [parentElementName]);
-
-  React.useEffect(() => {
-    parentElement &&
-      setRect(
-        virtualReference(
-          parentElement,
-          spotlightPadding
-        ).getBoundingClientRect() as DOMRect
-      );
-    setIsSliding(true);
-  }, [parentElement]);
-
-  return parentElement && isVisible && rect ? (
-    <FloatingPortal>
-      <SpotlightOverlay
-        gap={rect}
-        isVisible={isVisible}
-        slide={isSliding}
-        disablePointerEvents
-      />
-      <Tooltip
-        {...props}
-        triggerRenderer={<></>}
-        referenceElement={{
-          getBoundingClientRect: () => {
-            return rect;
-          },
-          contextElement: parentElement,
-        }}
-        className={cx({
-          [styles[baseClass]]: true,
-          [styles[`${baseClass}--slide`]]: isSliding,
-          className: className,
-        })}
-      >
-        {props.children}
-      </Tooltip>
-    </FloatingPortal>
-  ) : null;
-};
diff --git a/packages/react-components/src/components/Tooltip/components/UserGuide/UserGuideStep.tsx b/packages/react-components/src/components/Tooltip/components/UserGuide/UserGuideStep.tsx
deleted file mode 100644
index 20024a6e4..000000000
--- a/packages/react-components/src/components/Tooltip/components/UserGuide/UserGuideStep.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import * as React from 'react';
-
-import { Close } from '@livechat/design-system-icons';
-import cx from 'clsx';
-
-import { Button } from '../../../Button';
-import { Icon } from '../../../Icon';
-import { Heading } from '../../../Typography';
-import { getIconType } from '../../Tooltip.helpers';
-import styles from '../../Tooltip.module.scss';
-import { TooltipTheme } from '../../types';
-
-const baseClass = 'tooltip';
-
-export const UserGuideStep: React.FC<{
-  header: string;
-  text: string;
-  image?: {
-    src: string;
-    alt: string;
-  };
-  currentStep: number;
-  stepMax: number;
-  closeWithX?: boolean;
-  theme?: TooltipTheme;
-  handleClickPrimary: () => void;
-  handleCloseAction?: (ev: KeyboardEvent | React.MouseEvent) => void;
-}> = ({
-  header,
-  text,
-  image,
-  currentStep,
-  stepMax,
-  closeWithX,
-  theme,
-  handleCloseAction,
-  handleClickPrimary,
-}) => {
-  React.useEffect(() => {
-    if (handleCloseAction) {
-      document.addEventListener('keydown', handleCloseAction);
-
-      return () => {
-        document.removeEventListener('keydown', handleCloseAction);
-      };
-    }
-  }, []);
-
-  return (
-    <div className={styles[`${baseClass}__user-guide-step`]}>
-      {closeWithX && (
-        <button
-          type="button"
-          aria-label="Close tooltip"
-          className={styles[`${baseClass}-close`]}
-          onClick={handleCloseAction}
-        >
-          <Icon source={Close} kind={theme ? getIconType(theme) : 'primary'} />
-        </button>
-      )}
-      {image && (
-        <div className={styles[`${baseClass}-image-container`]}>
-          <img
-            className={styles[`${baseClass}-image`]}
-            src={image.src}
-            alt={image.alt}
-          />
-        </div>
-      )}
-      {header && (
-        <Heading size="xs" as="div" className={styles[`${baseClass}-header`]}>
-          {header}
-        </Heading>
-      )}
-      <div className={styles[`${baseClass}-text`]}>{text}</div>
-      <div
-        className={cx(
-          styles[`${baseClass}-footer`],
-          styles[`${baseClass}-footer--user-guide-step`]
-        )}
-      >
-        <span className={styles[`${baseClass}-step`]}>
-          Step {currentStep} of {stepMax}
-        </span>
-        <Button kind="high-contrast" onClick={handleClickPrimary}>
-          {currentStep === stepMax ? 'Finish' : 'Next'}
-        </Button>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/react-components/src/components/Tooltip/components/UserGuide/index.ts b/packages/react-components/src/components/Tooltip/components/UserGuide/index.ts
deleted file mode 100644
index 1db00e622..000000000
--- a/packages/react-components/src/components/Tooltip/components/UserGuide/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { UserGuide } from './UserGuide';
diff --git a/packages/react-components/src/components/Tooltip/components/UserGuide/virtualElementReference.ts b/packages/react-components/src/components/Tooltip/components/UserGuide/virtualElementReference.ts
deleted file mode 100644
index 09f33b544..000000000
--- a/packages/react-components/src/components/Tooltip/components/UserGuide/virtualElementReference.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-export default class VirtualReference {
-  element: Element;
-  padding: number;
-
-  constructor(element: Element, padding: number) {
-    this.element = element;
-    this.padding = padding;
-  }
-
-  addPadding(rect: DOMRect): Omit<DOMRect, 'toJSON'> {
-    const x = Math.round(rect.left) - this.padding;
-    const y = Math.round(rect.top) - this.padding;
-    const width = Math.round(rect.width) + 2 * this.padding;
-    const height = Math.round(rect.height) + 2 * this.padding;
-    const top = y;
-    const left = x;
-    const bottom = top + height;
-    const right = left + width;
-
-    return {
-      x,
-      y,
-      width,
-      height,
-      top,
-      left,
-      bottom,
-      right,
-    };
-  }
-
-  getBoundingClientRect(): Omit<DOMRect, 'toJSON'> {
-    return this.addPadding(this.element.getBoundingClientRect());
-  }
-
-  get clientWidth(): number {
-    return this.getBoundingClientRect().width;
-  }
-
-  get clientHeight(): number {
-    return this.getBoundingClientRect().height;
-  }
-}
diff --git a/packages/react-components/src/components/Tooltip/components/index.ts b/packages/react-components/src/components/Tooltip/components/index.ts
index e7afcdf97..77b9b004a 100644
--- a/packages/react-components/src/components/Tooltip/components/index.ts
+++ b/packages/react-components/src/components/Tooltip/components/index.ts
@@ -1,5 +1,4 @@
 export { Simple } from './Simple';
 export { Info } from './Info';
 export { Interactive } from './Interactive';
-export { UserGuide } from './UserGuide';
 export { Reports } from './Reports';
diff --git a/packages/react-components/src/components/Tooltip/index.ts b/packages/react-components/src/components/Tooltip/index.ts
index d6937a2ad..0876c6d28 100644
--- a/packages/react-components/src/components/Tooltip/index.ts
+++ b/packages/react-components/src/components/Tooltip/index.ts
@@ -1,6 +1,5 @@
 export { Tooltip } from './Tooltip';
 export { Simple, Info, Interactive, Reports } from './components';
-export { UserGuide } from './components/UserGuide';
 export type {
   ITooltipProps,
   ITooltipInfoProps,
diff --git a/packages/react-components/src/components/UserGuide/UserGuide.mdx b/packages/react-components/src/components/UserGuide/UserGuide.mdx
new file mode 100644
index 000000000..9f377c0bb
--- /dev/null
+++ b/packages/react-components/src/components/UserGuide/UserGuide.mdx
@@ -0,0 +1,122 @@
+import { Meta, Title, Canvas, ArgTypes } from '@storybook/blocks';
+
+import * as Stories from './UserGuide.stories';
+
+<Meta of={Stories} />
+
+<Title>UserGuide</Title>
+
+[Intro](#Intro) | [Usage](#Usage) | [Component API](#ComponentAPI) | [Content Spec](#ContentSpec)
+
+## Intro <a id="Intro" />
+
+The UserGuide component provides a guided tour functionality to help users navigate through different features of your application. It enhances user experience by offering step-by-step guidance in an interactive way.
+
+## Usage <a id="Usage" />
+
+### Simple User Guide <a id="SimpleUserGuide" />
+
+A simple user guide that can be used to guide users through a series of steps.
+
+```tsx
+import {
+  UserGuide,
+  Button,
+} from '@livechat/design-system-react-components';
+
+const reducer = (
+    state: { isVisible: boolean; reference: string },
+  action: { type: string }
+) => {
+  if (action.type === 'reference1') {
+    return {
+      ...state,
+      reference: 'reference1',
+    };
+  }
+  if (action.type === 'reference2') {
+    return {
+      ...state,
+      reference: 'reference2',
+    };
+  }
+  if (action.type === 'reference3') {
+    return {
+      ...state,
+      reference: 'reference3',
+    };
+  }
+  if (action.type === 'isVisible') {
+    return {
+      reference: 'reference1',
+      isVisible: !state.isVisible,
+    };
+  }
+
+  return state;
+};
+
+const [state, dispatch] = React.useReducer(reducer, {
+  reference: 'reference1',
+  isVisible: false,
+});
+
+return (
+  <div className="simple-user-guide-container">
+    <Button onClick={() => dispatch({ type: 'isVisible' })}>
+      Start guide
+    </Button>
+    <div className="guide-container">
+      <div
+        onClick={() => dispatch({ type: 'reference1' })}
+        id="reference1"
+        className="guide-reference"
+      >
+        Example reference 1
+      </div>
+      <div
+        onClick={() => dispatch({ type: 'reference2' })}
+        id="reference2"
+        className="guide-reference"
+      >
+        Example reference 2
+      </div>
+
+      <div
+        onClick={() => dispatch({ type: 'reference3' })}
+        id="reference3"
+        className="guide-reference"
+      >
+        Example reference 3
+      </div>
+
+      <UserGuide
+        isVisible={state.isVisible}
+        parentElementName={`#${state.reference}`}
+        zIndex={1000}
+        shouldSlide
+      >
+        {state.reference === 'reference1' && <Button onClick={() => dispatch({ type: 'reference2' })}>Next</Button>}
+        {state.reference === 'reference2' && <Button onClick={() => dispatch({ type: 'reference3' })}>Next</Button>}
+        {state.reference === 'reference3' && <Button onClick={() => dispatch({ type: 'isVisible' })}>Finish</Button>}
+      </UserGuide>
+    </div>
+  </div>
+);
+```
+
+<Canvas of={Stories.Default} />
+
+## Component API <a id="ComponentAPI" />
+
+<ArgTypes of={Stories.Default} sort="requiredFirst" />
+
+## Content Spec <a id="ContentSpec" />
+
+<a
+  className="sb-unstyled"
+  href="https://www.figma.com/file/9FDwjR8lYvincseDkKypC4/Component-Documentations?type=design&node-id=97-24893&mode=dev"
+  target="_blank"
+>
+  Go to Figma documentation
+</a> 
\ No newline at end of file
diff --git a/packages/react-components/src/components/UserGuide/UserGuide.module.scss b/packages/react-components/src/components/UserGuide/UserGuide.module.scss
index 63263bf8f..2b44eebdd 100644
--- a/packages/react-components/src/components/UserGuide/UserGuide.module.scss
+++ b/packages/react-components/src/components/UserGuide/UserGuide.module.scss
@@ -95,3 +95,7 @@ $radius: var(--radius-3);
     }
   }
 }
+
+:global(.user-guide-visible) {
+  overflow: hidden !important;
+}
diff --git a/packages/react-components/src/components/UserGuide/UserGuide.tsx b/packages/react-components/src/components/UserGuide/UserGuide.tsx
index 6874bf36f..684affe79 100644
--- a/packages/react-components/src/components/UserGuide/UserGuide.tsx
+++ b/packages/react-components/src/components/UserGuide/UserGuide.tsx
@@ -10,8 +10,6 @@ import VirtualReference from './virtualElementReference';
 
 import styles from './UserGuide.module.scss';
 
-// TODO is it still needed
-// const spotlightPadding = 8;
 const baseClass = 'user-guide';
 
 const virtualReference = (element: Element, padding: number = 0) =>
@@ -22,14 +20,12 @@ export const UserGuide: FC<PropsWithChildren<IUserGuide>> = (props) => {
     className,
     parentElementName,
     isVisible = false,
-    shouldSlide = true,
     elementStyles,
   } = props;
 
   const [parentElement, setParentElement] = useState<Element | null>(null);
 
   const [rect, setRect] = useState<DOMRect | null>(null);
-  const [isSliding, setIsSliding] = useState<boolean>(shouldSlide);
   const containerRef = useRef<HTMLDivElement>(null);
 
   const handleViewportChange = () => {
@@ -37,7 +33,6 @@ export const UserGuide: FC<PropsWithChildren<IUserGuide>> = (props) => {
       setRect(
         virtualReference(parentElement).getBoundingClientRect() as DOMRect
       );
-      setIsSliding(false);
     }
   };
 
@@ -65,7 +60,6 @@ export const UserGuide: FC<PropsWithChildren<IUserGuide>> = (props) => {
       setRect(
         virtualReference(parentElement).getBoundingClientRect() as DOMRect
       );
-    setIsSliding(true);
   }, [parentElement]);
 
   useEffect(() => {
@@ -75,15 +69,32 @@ export const UserGuide: FC<PropsWithChildren<IUserGuide>> = (props) => {
       Object.assign(clonedElement.style, elementStyles);
       containerRef.current.appendChild(clonedElement);
     }
+
+    return () => {
+      if (containerRef.current) {
+        containerRef.current.innerHTML = '';
+      }
+    };
   }, [parentElement, containerRef.current, isVisible]);
 
+  useEffect(() => {
+    if (isVisible) {
+      document.body.classList.add('user-guide-visible');
+    } else {
+      document.body.classList.remove('user-guide-visible');
+    }
+
+    return () => {
+      document.body.classList.remove('user-guide-visible');
+    };
+  }, [isVisible]);
+
   const cloneReferenceElement = () => {
     if (!rect) return null;
 
     return (
       <div
         ref={containerRef}
-        className={cx({ [styles[`${baseClass}--slide`]]: isSliding })}
         style={{
           position: 'absolute',
           top: rect.top,
@@ -91,7 +102,7 @@ export const UserGuide: FC<PropsWithChildren<IUserGuide>> = (props) => {
           width: rect.width,
           height: rect.height,
         }}
-      ></div>
+      />
     );
   };
 
@@ -119,7 +130,6 @@ export const UserGuide: FC<PropsWithChildren<IUserGuide>> = (props) => {
             }}
             className={cx({
               [styles[baseClass]]: true,
-              [styles[`${baseClass}--slide`]]: isSliding,
               className: className,
             })}
           >
diff --git a/packages/react-components/src/components/UserGuide/types.ts b/packages/react-components/src/components/UserGuide/types.ts
index b8c14122e..02ef1268c 100644
--- a/packages/react-components/src/components/UserGuide/types.ts
+++ b/packages/react-components/src/components/UserGuide/types.ts
@@ -6,8 +6,6 @@ import { ITooltipProps } from '../Tooltip';
 export interface IUserGuide
   extends Omit<ITooltipProps, 'triggerRenderer'>,
     Omit<ModalPortalProps, 'children'> {
-  shouldSlide?: boolean;
   className?: string;
   elementStyles?: CSSProperties;
-  disableSpotlightPointerEvents?: boolean;
 }

From e45064f71daf3b6aae7d12b272bfa3b3c6802cf2 Mon Sep 17 00:00:00 2001
From: joannasikora <jo.sikora21@gmail.com>
Date: Fri, 17 Jan 2025 12:13:17 +0100
Subject: [PATCH 2/4] refactor(UserGuide): remove 'shouldSlide' prop from
 UserGuide stories

---
 .../src/components/UserGuide/UserGuide.stories.tsx            | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/react-components/src/components/UserGuide/UserGuide.stories.tsx b/packages/react-components/src/components/UserGuide/UserGuide.stories.tsx
index 2eda0af5d..8e3ecb0a2 100644
--- a/packages/react-components/src/components/UserGuide/UserGuide.stories.tsx
+++ b/packages/react-components/src/components/UserGuide/UserGuide.stories.tsx
@@ -98,7 +98,6 @@ export const Default = (): ReactElement => {
           isVisible={state.isVisible}
           parentElementName={`#${state.reference}`}
           zIndex={1000}
-          shouldSlide={true}
         >
           {state.reference === 'reference1' ? (
             <Button onClick={() => dispatch({ type: 'reference2' })}>
@@ -194,7 +193,6 @@ export const SlideAnimationWithColor = (): ReactElement => {
           isVisible={state.isVisible}
           parentElementName={`#${state.reference}`}
           zIndex={1000}
-          shouldSlide={true}
         >
           {state.reference === 'reference1' ? (
             <Button onClick={() => dispatch({ type: 'reference2' })}>
@@ -357,7 +355,6 @@ const UserGuideWithTooltip: FC<ITooltipProps> = (props) => {
           isVisible={state.isVisible}
           parentElementName={`#${state.reference}`}
           zIndex={1000}
-          shouldSlide={true}
         >
           {state.reference === 'reference1' ? (
             <UserGuideStep
@@ -519,7 +516,6 @@ const TooltipUserGuideExampleWithCustomStyles: FC<ITooltipProps> = (props) => {
           isVisible={state.isVisible}
           parentElementName={`#${state.reference}`}
           zIndex={1000}
-          shouldSlide={true}
           elementStyles={state.elementStyles}
         >
           {state.reference === 'reference1' ? (

From 146c0b2ac085c793ea57ed9081ac2b58ff14737a Mon Sep 17 00:00:00 2001
From: joannasikora <jo.sikora21@gmail.com>
Date: Fri, 17 Jan 2025 12:51:29 +0100
Subject: [PATCH 3/4] feat(UserGuide): add isInteractive prop and update
 stories with interactive elements

---
 .../UserGuide/UserGuide.stories.css           | 11 +--
 .../UserGuide/UserGuide.stories.tsx           | 95 ++++++++++++-------
 .../src/components/UserGuide/UserGuide.tsx    |  2 +
 .../src/components/UserGuide/types.ts         |  1 +
 4 files changed, 64 insertions(+), 45 deletions(-)

diff --git a/packages/react-components/src/components/UserGuide/UserGuide.stories.css b/packages/react-components/src/components/UserGuide/UserGuide.stories.css
index e1d5e9a80..074dfef60 100644
--- a/packages/react-components/src/components/UserGuide/UserGuide.stories.css
+++ b/packages/react-components/src/components/UserGuide/UserGuide.stories.css
@@ -31,13 +31,6 @@
   font-size: 18px;
 }
 
-.guide-reference-2 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px dashed var(--border-default);
-  border-radius: 4px;
-  background-color: #0b4d2b;
-  padding: 10px;
-  font-size: 18px;
+.gap {
+  gap: 10px;
 }
diff --git a/packages/react-components/src/components/UserGuide/UserGuide.stories.tsx b/packages/react-components/src/components/UserGuide/UserGuide.stories.tsx
index 8e3ecb0a2..5ee5935ac 100644
--- a/packages/react-components/src/components/UserGuide/UserGuide.stories.tsx
+++ b/packages/react-components/src/components/UserGuide/UserGuide.stories.tsx
@@ -3,6 +3,7 @@ import { CSSProperties, FC, ReactElement, useReducer } from 'react';
 import { Meta } from '@storybook/react';
 
 import { Button } from '../Button';
+import { Input } from '../Input';
 import './UserGuide.stories.css';
 import { ITooltipProps } from '../Tooltip';
 
@@ -122,7 +123,7 @@ export const Default = (): ReactElement => {
   );
 };
 
-export const SlideAnimationWithColor = (): ReactElement => {
+export const UserGuideWithInteractiveElements = (): ReactElement => {
   const reducer = (
     state: { isVisible: boolean; reference: string },
     action: { type: string }
@@ -133,16 +134,63 @@ export const SlideAnimationWithColor = (): ReactElement => {
         reference: 'reference1',
       };
     }
-    if (action.type === 'reference2') {
+    if (action.type === 'isVisible') {
       return {
-        ...state,
-        reference: 'reference2',
+        reference: 'reference1',
+        isVisible: !state.isVisible,
       };
     }
-    if (action.type === 'reference3') {
+
+    return state;
+  };
+
+  const [state, dispatch] = useReducer(reducer, {
+    reference: 'reference1',
+    isVisible: false,
+  });
+
+  return (
+    <div className="simple-user-guide-container">
+      <Button onClick={() => dispatch({ type: 'isVisible' })}>
+        Start guide
+      </Button>
+      <div className="guide-container">
+        <div
+          onClick={() => dispatch({ type: 'reference1' })}
+          id="reference1"
+          className="guide-reference gap"
+        >
+          <Button>Example Button</Button>
+          <Button kind="secondary">Example Button 2</Button>
+          <Input placeholder="Example Input" />
+        </div>
+
+        <UserGuide
+          isVisible={state.isVisible}
+          parentElementName={`#${state.reference}`}
+          zIndex={1000}
+          isInteractive={true}
+        >
+          {state.reference === 'reference1' ? (
+            <Button onClick={() => dispatch({ type: 'isVisible' })}>
+              Next
+            </Button>
+          ) : null}
+        </UserGuide>
+      </div>
+    </div>
+  );
+};
+
+export const UserGuideWitNonInteractiveElements = (): ReactElement => {
+  const reducer = (
+    state: { isVisible: boolean; reference: string },
+    action: { type: string }
+  ) => {
+    if (action.type === 'reference1') {
       return {
         ...state,
-        reference: 'reference3',
+        reference: 'reference1',
       };
     }
     if (action.type === 'isVisible') {
@@ -169,24 +217,11 @@ export const SlideAnimationWithColor = (): ReactElement => {
         <div
           onClick={() => dispatch({ type: 'reference1' })}
           id="reference1"
-          className="guide-reference"
-        >
-          Example reference 1
-        </div>
-        <div
-          onClick={() => dispatch({ type: 'reference2' })}
-          id="reference2"
-          className="guide-reference-2"
-        >
-          Example reference 2
-        </div>
-
-        <div
-          onClick={() => dispatch({ type: 'reference3' })}
-          id="reference3"
-          className="guide-reference"
+          className="guide-reference gap"
         >
-          Example reference 3
+          <Button>Example reference 2</Button>
+          <Button kind="secondary">Example reference</Button>
+          <Input placeholder="Example input" />
         </div>
 
         <UserGuide
@@ -195,20 +230,8 @@ export const SlideAnimationWithColor = (): ReactElement => {
           zIndex={1000}
         >
           {state.reference === 'reference1' ? (
-            <Button onClick={() => dispatch({ type: 'reference2' })}>
-              Next
-            </Button>
-          ) : null}
-
-          {state.reference === 'reference2' ? (
-            <Button onClick={() => dispatch({ type: 'reference3' })}>
-              Next
-            </Button>
-          ) : null}
-
-          {state.reference === 'reference3' ? (
             <Button onClick={() => dispatch({ type: 'isVisible' })}>
-              Finish
+              Next
             </Button>
           ) : null}
         </UserGuide>
diff --git a/packages/react-components/src/components/UserGuide/UserGuide.tsx b/packages/react-components/src/components/UserGuide/UserGuide.tsx
index 684affe79..1f9866036 100644
--- a/packages/react-components/src/components/UserGuide/UserGuide.tsx
+++ b/packages/react-components/src/components/UserGuide/UserGuide.tsx
@@ -21,6 +21,7 @@ export const UserGuide: FC<PropsWithChildren<IUserGuide>> = (props) => {
     parentElementName,
     isVisible = false,
     elementStyles,
+    isInteractive = false,
   } = props;
 
   const [parentElement, setParentElement] = useState<Element | null>(null);
@@ -101,6 +102,7 @@ export const UserGuide: FC<PropsWithChildren<IUserGuide>> = (props) => {
           left: rect.left,
           width: rect.width,
           height: rect.height,
+          pointerEvents: isInteractive ? 'auto' : 'none',
         }}
       />
     );
diff --git a/packages/react-components/src/components/UserGuide/types.ts b/packages/react-components/src/components/UserGuide/types.ts
index 02ef1268c..b5d267e1d 100644
--- a/packages/react-components/src/components/UserGuide/types.ts
+++ b/packages/react-components/src/components/UserGuide/types.ts
@@ -8,4 +8,5 @@ export interface IUserGuide
     Omit<ModalPortalProps, 'children'> {
   className?: string;
   elementStyles?: CSSProperties;
+  isInteractive?: boolean;
 }

From 42e0776fa9ad4ef9ef74ec21171f007ee18018ea Mon Sep 17 00:00:00 2001
From: joannasikora <jo.sikora21@gmail.com>
Date: Sat, 18 Jan 2025 08:49:21 +0100
Subject: [PATCH 4/4] feat(UserGuide): make components uninteractive

---
 .../UserGuide/UserGuide.stories.tsx           | 118 ------------------
 .../src/components/UserGuide/UserGuide.tsx    |   3 +-
 .../src/components/UserGuide/types.ts         |   1 -
 3 files changed, 1 insertion(+), 121 deletions(-)

diff --git a/packages/react-components/src/components/UserGuide/UserGuide.stories.tsx b/packages/react-components/src/components/UserGuide/UserGuide.stories.tsx
index 5ee5935ac..35de9cde1 100644
--- a/packages/react-components/src/components/UserGuide/UserGuide.stories.tsx
+++ b/packages/react-components/src/components/UserGuide/UserGuide.stories.tsx
@@ -3,7 +3,6 @@ import { CSSProperties, FC, ReactElement, useReducer } from 'react';
 import { Meta } from '@storybook/react';
 
 import { Button } from '../Button';
-import { Input } from '../Input';
 import './UserGuide.stories.css';
 import { ITooltipProps } from '../Tooltip';
 
@@ -123,123 +122,6 @@ export const Default = (): ReactElement => {
   );
 };
 
-export const UserGuideWithInteractiveElements = (): ReactElement => {
-  const reducer = (
-    state: { isVisible: boolean; reference: string },
-    action: { type: string }
-  ) => {
-    if (action.type === 'reference1') {
-      return {
-        ...state,
-        reference: 'reference1',
-      };
-    }
-    if (action.type === 'isVisible') {
-      return {
-        reference: 'reference1',
-        isVisible: !state.isVisible,
-      };
-    }
-
-    return state;
-  };
-
-  const [state, dispatch] = useReducer(reducer, {
-    reference: 'reference1',
-    isVisible: false,
-  });
-
-  return (
-    <div className="simple-user-guide-container">
-      <Button onClick={() => dispatch({ type: 'isVisible' })}>
-        Start guide
-      </Button>
-      <div className="guide-container">
-        <div
-          onClick={() => dispatch({ type: 'reference1' })}
-          id="reference1"
-          className="guide-reference gap"
-        >
-          <Button>Example Button</Button>
-          <Button kind="secondary">Example Button 2</Button>
-          <Input placeholder="Example Input" />
-        </div>
-
-        <UserGuide
-          isVisible={state.isVisible}
-          parentElementName={`#${state.reference}`}
-          zIndex={1000}
-          isInteractive={true}
-        >
-          {state.reference === 'reference1' ? (
-            <Button onClick={() => dispatch({ type: 'isVisible' })}>
-              Next
-            </Button>
-          ) : null}
-        </UserGuide>
-      </div>
-    </div>
-  );
-};
-
-export const UserGuideWitNonInteractiveElements = (): ReactElement => {
-  const reducer = (
-    state: { isVisible: boolean; reference: string },
-    action: { type: string }
-  ) => {
-    if (action.type === 'reference1') {
-      return {
-        ...state,
-        reference: 'reference1',
-      };
-    }
-    if (action.type === 'isVisible') {
-      return {
-        reference: 'reference1',
-        isVisible: !state.isVisible,
-      };
-    }
-
-    return state;
-  };
-
-  const [state, dispatch] = useReducer(reducer, {
-    reference: 'reference1',
-    isVisible: false,
-  });
-
-  return (
-    <div className="simple-user-guide-container">
-      <Button onClick={() => dispatch({ type: 'isVisible' })}>
-        Start guide
-      </Button>
-      <div className="guide-container">
-        <div
-          onClick={() => dispatch({ type: 'reference1' })}
-          id="reference1"
-          className="guide-reference gap"
-        >
-          <Button>Example reference 2</Button>
-          <Button kind="secondary">Example reference</Button>
-          <Input placeholder="Example input" />
-        </div>
-
-        <UserGuide
-          isVisible={state.isVisible}
-          parentElementName={`#${state.reference}`}
-          zIndex={1000}
-        >
-          {state.reference === 'reference1' ? (
-            <Button onClick={() => dispatch({ type: 'isVisible' })}>
-              Next
-            </Button>
-          ) : null}
-        </UserGuide>
-      </div>
-    </div>
-  );
-};
-
 export const ExtendedContentUserGuide = (args: ITooltipProps): ReactElement => (
   <div className="preview-container">
     <UserGuideWithTooltip {...args}></UserGuideWithTooltip>
diff --git a/packages/react-components/src/components/UserGuide/UserGuide.tsx b/packages/react-components/src/components/UserGuide/UserGuide.tsx
index 1f9866036..e496ceedf 100644
--- a/packages/react-components/src/components/UserGuide/UserGuide.tsx
+++ b/packages/react-components/src/components/UserGuide/UserGuide.tsx
@@ -21,7 +21,6 @@ export const UserGuide: FC<PropsWithChildren<IUserGuide>> = (props) => {
     parentElementName,
     isVisible = false,
     elementStyles,
-    isInteractive = false,
   } = props;
 
   const [parentElement, setParentElement] = useState<Element | null>(null);
@@ -102,7 +101,7 @@ export const UserGuide: FC<PropsWithChildren<IUserGuide>> = (props) => {
           left: rect.left,
           width: rect.width,
           height: rect.height,
-          pointerEvents: isInteractive ? 'auto' : 'none',
+          pointerEvents: 'none',
         }}
       />
     );
diff --git a/packages/react-components/src/components/UserGuide/types.ts b/packages/react-components/src/components/UserGuide/types.ts
index b5d267e1d..02ef1268c 100644
--- a/packages/react-components/src/components/UserGuide/types.ts
+++ b/packages/react-components/src/components/UserGuide/types.ts
@@ -8,5 +8,4 @@ export interface IUserGuide
     Omit<ModalPortalProps, 'children'> {
   className?: string;
   elementStyles?: CSSProperties;
-  isInteractive?: boolean;
 }