@patternfly/quickstarts 6.3.0-prerelease.3 → 6.3.0-prerelease.4

package/dist/utils/help-topic-context.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import { HelpTopic } from './help-topic-types';
 export interface HelpTopicContextValues {
     helpTopics?: HelpTopic[];
@@ -19,5 +19,5 @@ export declare const HelpTopicContextDefaults: {
     setFilteredHelpTopics: () => void;
     loading: boolean;
 };
-export declare const HelpTopicContext: React.Context<HelpTopicContextValues>;
+export declare const HelpTopicContext: import("react").Context<HelpTopicContextValues>;
 export declare const useValuesForHelpTopicContext: (value?: HelpTopicContextValues) => HelpTopicContextValues;

package/dist/utils/quick-start-context.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+import { FC } from 'react';
 import { AllQuickStartStates, QuickStart, QuickStartState, QuickStartStatus, QuickStartTaskStatus } from './quick-start-types';
 export interface FooterProps {
     show?: boolean;
@@ -74,10 +74,10 @@ export declare const QuickStartContextDefaults: {
     alwaysShowTaskReview: boolean;
     focusOnQuickStart: boolean;
 };
-export declare const QuickStartContext: React.Context<QuickStartContextValues>;
+export declare const QuickStartContext: import("react").Context<QuickStartContextValues>;
 export declare const getResource: (resource: string, options: any, resourceBundle: any, lng: string) => any;
 export declare const useValuesForQuickStartContext: (value?: QuickStartContextValues) => QuickStartContextValues;
-export declare const QuickStartContextProvider: React.FC<{
+export declare const QuickStartContextProvider: FC<{
     children: React.ReactNode;
     value: QuickStartContextValues;
 }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/quickstarts",
-  "version": "6.3.0-prerelease.3",
+  "version": "6.3.0-prerelease.4",
   "description": "PatternFly quick starts",
   "files": [
     "src",
@@ -46,8 +46,8 @@
   },
   "peerDependencies": {
     "@patternfly/react-core": "^6.0.0",
-    "react": "^17 || ^18",
-    "react-dom": "^17 || ^18",
+    "react": "^17 || ^18 || ^19",
+    "react-dom": "^17 || ^18 || ^19",
     "marked": "^15.0.6"
   },
   "dependencies": {
@@ -88,7 +88,6 @@
     "react-axe": "^3.5.4",
     "react-docgen-typescript-loader": "^3.7.2",
     "react-dom": "^18.2.0",
-    "react-monaco-editor": "0.51.0",
     "regenerator-runtime": "^0.13.7",
     "rimraf": "^3.0.2",
     "rollup": "^2.79.2",

package/src/ConsoleInternal/components/markdown-view.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC, useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { css } from '@patternfly/react-styles';
 import { marked } from 'marked';
 import { useForceRender } from '@console/shared';
@@ -121,7 +121,7 @@ type InnerSyncMarkdownProps = Pick<SyncMarkdownProps, 'renderExtension' | 'exact
   className?: string;
 };
 
-export const SyncMarkdownView: React.FC<SyncMarkdownProps> = ({
+export const SyncMarkdownView: FC<SyncMarkdownProps> = ({
   content,
   emptyMsg,
   extensions,
@@ -130,10 +130,10 @@ export const SyncMarkdownView: React.FC<SyncMarkdownProps> = ({
   inline,
   className,
 }) => {
-  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
-  const [markup, setMarkup] = React.useState<string>('');
+  const { getResource } = useContext<QuickStartContextValues>(QuickStartContext);
+  const [markup, setMarkup] = useState<string>('');
 
-  React.useEffect(() => {
+  useEffect(() => {
     async function getMd() {
       const md = await markdownConvert(
         content || emptyMsg || getResource('Not available'),
@@ -176,8 +176,8 @@ const RenderExtension: React.FC<RenderExtensionProps> = ({
   docContext,
 }) => {
   const forceRender = useForceRender();
-  const markupRef = React.useRef<string>(null);
-  const shouldRenderExtension = React.useCallback(() => {
+  const markupRef = useRef<string>(null);
+  const shouldRenderExtension = useCallback(() => {
     if (markupRef.current === markup) {
       return true;
     }
@@ -190,7 +190,7 @@ const RenderExtension: React.FC<RenderExtensionProps> = ({
    * which causes the component rendered by renderExtension to receive old copy of document
    * use forceRender to delay the rendering of extension by one render cycle
    */
-  React.useEffect(() => {
+  useEffect(() => {
     if (renderExtension) {
       forceRender();
     }
@@ -201,13 +201,13 @@ const RenderExtension: React.FC<RenderExtensionProps> = ({
   );
 };
 
-const InlineMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
+const InlineMarkdownView: FC<InnerSyncMarkdownProps> = ({
   markup,
   isEmpty,
   renderExtension,
   className,
 }) => {
-  const id = React.useMemo(() => uniqueId('markdown'), []);
+  const id = useMemo(() => uniqueId('markdown'), []);
   return (
     <div className={css({ 'is-empty': isEmpty } as any, className)} id={id}>
       <div dangerouslySetInnerHTML={{ __html: markup }} />
@@ -218,18 +218,18 @@ const InlineMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
   );
 };
 
-const IFrameMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
+const IFrameMarkdownView: FC<InnerSyncMarkdownProps> = ({
   exactHeight,
   markup,
   isEmpty,
   renderExtension,
   className,
 }) => {
-  const [frame, setFrame] = React.useState<HTMLIFrameElement>();
-  const [loaded, setLoaded] = React.useState(false);
-  const updateTimeoutHandle = React.useRef<NodeJS.Timeout>();
+  const [frame, setFrame] = useState<HTMLIFrameElement>();
+  const [loaded, setLoaded] = useState(false);
+  const updateTimeoutHandle = useRef<NodeJS.Timeout>(null);
 
-  const updateDimensions = React.useCallback(() => {
+  const updateDimensions = useCallback(() => {
     if (!frame?.contentWindow?.document.body.firstChild) {
       return;
     }
@@ -248,14 +248,14 @@ const IFrameMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
     });
   }, [frame, exactHeight]);
 
-  React.useEffect(
+  useEffect(
     () => () => {
       clearTimeout(updateTimeoutHandle.current);
     },
     [],
   );
 
-  const onLoad = React.useCallback(() => {
+  const onLoad = useCallback(() => {
     updateDimensions();
     setLoaded(true);
   }, [updateDimensions]);
@@ -302,7 +302,9 @@ const IFrameMarkdownView: React.FC<InnerSyncMarkdownProps> = ({
         sandbox="allow-popups allow-popups-to-escape-sandbox allow-same-origin"
         srcDoc={contents}
         style={{ border: '0px', display: 'block', width: '100%', height: '0' }}
-        ref={(r) => setFrame(r)}
+        ref={(r) => {
+          setFrame(r);
+        }}
         onLoad={() => onLoad()}
         className={className}
       />

package/src/ConsoleInternal/components/utils/camel-case-wrap.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { Fragment } from 'react';
 
 const MEMO = {};
 
@@ -16,10 +16,10 @@ export const CamelCaseWrap: React.FC<CamelCaseWrapProps> = ({ value, dataTest })
   const rendered = (
     <span data-test={dataTest}>
       {words.map((word, i) => (
-        <React.Fragment key={i}>
+        <Fragment key={i}>
           {word}
           {i !== words.length - 1 && <wbr />}
-        </React.Fragment>
+        </Fragment>
       ))}
     </span>
   );

package/src/ConsoleInternal/components/utils/status-box.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC, useContext } from 'react';
 import { css } from '@patternfly/react-styles';
 import { QuickStartContext, QuickStartContextValues } from '../../../utils/quick-start-context';
 
@@ -6,7 +6,7 @@ export const Box: React.FC<BoxProps> = ({ children, className }) => (
   <div className={css('pfext-status-box', className)}>{children}</div>
 );
 
-export const Loading: React.FC<LoadingProps> = ({ className }) => (
+export const Loading: FC<LoadingProps> = ({ className }) => (
   <div className={css('pfext-m-loader', className)}>
     <div className="pfext-m-loader-dot__one" />
     <div className="pfext-m-loader-dot__two" />
@@ -15,7 +15,7 @@ export const Loading: React.FC<LoadingProps> = ({ className }) => (
 );
 Loading.displayName = 'Loading';
 
-export const LoadingBox: React.FC<LoadingBoxProps> = ({ className, message }) => (
+export const LoadingBox: FC<LoadingBoxProps> = ({ className, message }) => (
   <Box className={css('pfext-status-box--loading', className)}>
     <Loading />
     {message && <div className="pfext-status-box__loading-message">{message}</div>}
@@ -24,7 +24,7 @@ export const LoadingBox: React.FC<LoadingBoxProps> = ({ className, message }) =>
 LoadingBox.displayName = 'LoadingBox';
 
 export const EmptyBox: React.FC<EmptyBoxProps> = ({ label }) => {
-  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
+  const { getResource } = useContext<QuickStartContextValues>(QuickStartContext);
   return (
     <Box>
       <div data-test="empty-message" className="text-center">

package/src/ConsoleShared/src/components/markdown-extensions/MarkdownCopyClipboard.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC, useCallback, useContext, useMemo, useState } from 'react';
 import { Tooltip } from '@patternfly/react-core';
 import { QuickStartContext, QuickStartContextValues } from '@quickstarts/utils/quick-start-context';
 import { useEventListener } from '../../hooks';
@@ -10,14 +10,10 @@ interface CopyClipboardProps {
   docContext: Document;
 }
 
-export const CopyClipboard: React.FC<CopyClipboardProps> = ({
-  element,
-  rootSelector,
-  docContext,
-}) => {
-  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
-  const [showSuccessContent, setShowSuccessContent] = React.useState<boolean>(false);
-  const textToCopy = React.useMemo(() => {
+export const CopyClipboard: FC<CopyClipboardProps> = ({ element, rootSelector, docContext }) => {
+  const { getResource } = useContext<QuickStartContextValues>(QuickStartContext);
+  const [showSuccessContent, setShowSuccessContent] = useState<boolean>(false);
+  const textToCopy = useMemo(() => {
     const copyTextId = element.getAttribute(MARKDOWN_COPY_BUTTON_ID);
     return (
       docContext.querySelector(
@@ -29,7 +25,7 @@ export const CopyClipboard: React.FC<CopyClipboardProps> = ({
   useEventListener(
     element,
     'click',
-    React.useCallback(() => {
+    useCallback(() => {
       navigator.clipboard
         .writeText(textToCopy.trim())
         .then(() => {
@@ -42,7 +38,7 @@ export const CopyClipboard: React.FC<CopyClipboardProps> = ({
   useEventListener(
     element,
     'mouseleave',
-    React.useCallback(() => {
+    useCallback(() => {
       setShowSuccessContent(false);
     }, []),
   );
@@ -70,10 +66,7 @@ interface MarkdownCopyClipboardProps {
   rootSelector: string;
 }
 
-const MarkdownCopyClipboard: React.FC<MarkdownCopyClipboardProps> = ({
-  docContext,
-  rootSelector,
-}) => {
+const MarkdownCopyClipboard: FC<MarkdownCopyClipboardProps> = ({ docContext, rootSelector }) => {
   const elements = docContext.querySelectorAll(`${rootSelector} [${MARKDOWN_COPY_BUTTON_ID}]`);
   return elements.length > 0 ? (
     <>

package/src/ConsoleShared/src/components/markdown-extensions/__tests__/MarkdownCopyClipboard.spec.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import { shallow } from 'enzyme';
 import MarkdownCopyClipboard, { CopyClipboard } from '../MarkdownCopyClipboard';
 import { htmlDocumentForCopyClipboard } from './test-data';

package/src/ConsoleShared/src/components/markdown-extensions/accordion-extension.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useMemo } from 'react';
 import {
   Accordion,
   AccordionItem,
@@ -10,7 +10,7 @@ import { removeTemplateWhitespace } from './utils';
 import { ACCORDION_MARKDOWN_BUTTON_ID, ACCORDION_MARKDOWN_CONTENT_ID } from './const';
 
 const useAccordionShowdownExtension = () =>
-  React.useMemo(
+  useMemo(
     () => ({
       type: 'lang',
       regex: /\[(.+)]{{(accordion) ("(.*?)")}}/g,

package/src/ConsoleShared/src/components/markdown-extensions/accordion-render-extension.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC, useState } from 'react';
 import { useEventListener } from '../../hooks';
 import { ACCORDION_MARKDOWN_BUTTON_ID, ACCORDION_MARKDOWN_CONTENT_ID } from './const';
 
@@ -7,11 +7,11 @@ interface AccordionShowdownComponentProps {
   contentElement: HTMLElement;
 }
 
-const AccordionShowdownHandler: React.FC<AccordionShowdownComponentProps> = ({
+const AccordionShowdownHandler: FC<AccordionShowdownComponentProps> = ({
   buttonElement,
   contentElement,
 }) => {
-  const [expanded, setExpanded] = React.useState<boolean>(false);
+  const [expanded, setExpanded] = useState<boolean>(false);
 
   const handleClick = () => {
     const expandedModifier = 'pf-m-expanded';
@@ -33,7 +33,7 @@ interface accordionRenderExtensionProps {
   docContext: Document;
 }
 
-const AccordionRenderExtension: React.FC<accordionRenderExtensionProps> = ({ docContext }) => {
+const AccordionRenderExtension: FC<accordionRenderExtensionProps> = ({ docContext }) => {
   const buttonElements = docContext.querySelectorAll(`[id ^= ${ACCORDION_MARKDOWN_BUTTON_ID}]`);
   const contentElements = docContext.querySelectorAll(`[id ^= ${ACCORDION_MARKDOWN_CONTENT_ID}]`);
 

package/src/ConsoleShared/src/components/markdown-extensions/admonition-extension.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useMemo } from 'react';
 import { removeTemplateWhitespace } from './utils';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { Alert } from '@patternfly/react-core';
@@ -24,7 +24,7 @@ const admonitionToAlertVariantMap = {
 
 const useAdmonitionShowdownExtension = () =>
   // const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
-  React.useMemo(
+  useMemo(
     () => ({
       type: 'lang',
       regex: /\[(.+)]{{(admonition) ([\w-]+)}}/g,

package/src/ConsoleShared/src/components/markdown-extensions/code-extension.tsx

@@ -1,10 +1,10 @@
-import * as React from 'react';
+import { useMemo } from 'react';
 import { removeTemplateWhitespace } from './utils';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { CodeBlock } from '@patternfly/react-core';
 
 const useCodeShowdownExtension = () =>
-  React.useMemo(
+  useMemo(
     () => ({
       type: 'output',
       regex: /<pre><code>(.*?)\n?<\/code><\/pre>/g,

package/src/ConsoleShared/src/components/markdown-extensions/inline-clipboard-extension.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { useContext, useMemo } from 'react';
 import { QuickStartContext, QuickStartContextValues } from '@quickstarts/utils/quick-start-context';
 import { MARKDOWN_COPY_BUTTON_ID, MARKDOWN_SNIPPET_ID } from './const';
 import { removeTemplateWhitespace } from './utils';
@@ -6,8 +6,8 @@ import { renderToStaticMarkup } from 'react-dom/server';
 import CopyIcon from '@patternfly/react-icons/dist/js/icons/copy-icon';
 
 const useInlineCopyClipboardShowdownExtension = () => {
-  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
-  return React.useMemo(
+  const { getResource } = useContext<QuickStartContextValues>(QuickStartContext);
+  return useMemo(
     () => ({
       type: 'lang',
       regex: /`([^`](.*?)[^`])`{{copy}}/g,

package/src/ConsoleShared/src/components/markdown-extensions/multiline-clipboard-extension.tsx

@@ -1,13 +1,13 @@
 /* eslint-disable max-len */
-import * as React from 'react';
+import { useContext, useMemo } from 'react';
 import { QuickStartContext, QuickStartContextValues } from '@quickstarts/utils/quick-start-context';
 import { MARKDOWN_COPY_BUTTON_ID, MARKDOWN_SNIPPET_ID } from './const';
 import { renderToStaticMarkup } from 'react-dom/server';
 import CopyIcon from '@patternfly/react-icons/dist/js/icons/copy-icon';
 
 const useMultilineCopyClipboardShowdownExtension = () => {
-  const { getResource } = React.useContext<QuickStartContextValues>(QuickStartContext);
-  return React.useMemo(
+  const { getResource } = useContext<QuickStartContextValues>(QuickStartContext);
+  return useMemo(
     () => ({
       type: 'lang',
       regex: /```[\n]\s*((((?!```).)*?\n)+)\s*```{{copy}}/g,

package/src/ConsoleShared/src/components/markdown-highlight-extension/MarkdownHighlightExtension.tsx

@@ -1,16 +1,16 @@
-import * as React from 'react';
+import { FC, useEffect, useState } from 'react';
 import { Spotlight } from '../spotlight';
 
 interface MarkdownHighlightExtensionProps {
   docContext: Document;
   rootSelector: string;
 }
-const MarkdownHighlightExtension: React.FC<MarkdownHighlightExtensionProps> = ({
+const MarkdownHighlightExtension: FC<MarkdownHighlightExtensionProps> = ({
   docContext,
   rootSelector,
 }) => {
-  const [selector, setSelector] = React.useState<string>(null);
-  React.useEffect(() => {
+  const [selector, setSelector] = useState<string>(null);
+  useEffect(() => {
     const elements = docContext.querySelectorAll(`${rootSelector} [data-highlight]`);
     let timeoutId: NodeJS.Timeout;
     function startHighlight(e) {
@@ -29,7 +29,7 @@ const MarkdownHighlightExtension: React.FC<MarkdownHighlightExtensionProps> = ({
       elements && elements.forEach((elm) => elm.removeEventListener('click', startHighlight));
     };
   }, [docContext, rootSelector]);
-  React.useEffect(() => {
+  useEffect(() => {
     const elements = docContext.querySelectorAll(`${rootSelector} [class^=data-highlight__]`);
     let timeoutId: NodeJS.Timeout;
     function startHighlight(e) {

package/src/ConsoleShared/src/components/modal/Modal.tsx

@@ -1,13 +1,13 @@
-import * as React from 'react';
+import { FC, Ref } from 'react';
 import { Modal as PfModal, ModalProps as PfModalProps } from '@patternfly/react-core/deprecated';
 import { css } from '@patternfly/react-styles';
 
 type ModalProps = {
   isFullScreen?: boolean;
-  ref?: React.LegacyRef<PfModal>;
+  ref?: Ref<PfModal>;
 } & PfModalProps;
 
-const Modal: React.FC<ModalProps> = ({ isFullScreen = false, className, ...props }) => (
+const Modal: FC<ModalProps> = ({ isFullScreen = false, className, ...props }) => (
   <PfModal
     {...props}
     className={css('pfext-modal', className)}

package/src/ConsoleShared/src/components/popper/Portal.tsx

@@ -1,11 +1,11 @@
 import { useIsomorphicLayoutEffect } from '@patternfly/react-core';
-import * as React from 'react';
-import * as ReactDOM from 'react-dom';
+import { useState, ReactNode } from 'react';
+import { createPortal } from 'react-dom';
 
 type GetContainer = Element | null | undefined | (() => Element);
 
 interface PortalProps {
-  children: React.ReactNode;
+  children: ReactNode;
   container?: GetContainer;
 }
 
@@ -13,13 +13,13 @@ const getContainer = (container: GetContainer): Element | null | undefined =>
   typeof container === 'function' ? container() : container;
 
 const Portal = ({ children, container }: PortalProps) => {
-  const [containerNode, setContainerNode] = React.useState<Element>();
+  const [containerNode, setContainerNode] = useState<Element>();
 
   useIsomorphicLayoutEffect(() => {
     setContainerNode(getContainer(container) || document.body);
   }, [container]);
 
-  return containerNode ? ReactDOM.createPortal(children, containerNode) : null;
+  return containerNode ? createPortal(children, containerNode) : null;
 };
 
 export default Portal;

package/src/ConsoleShared/src/components/popper/SimplePopper.tsx

@@ -1,25 +1,25 @@
-import * as React from 'react';
+import { ReactNode, useCallback, useEffect, useRef, useState } from 'react';
 import Portal from './Portal';
 
 interface SimplePopperProps {
-  children: React.ReactNode;
+  children: ReactNode;
 }
 
 const SimplePopper = ({ children }: SimplePopperProps) => {
   const openProp = true;
-  const nodeRef = React.useRef<Element>();
-  const popperRef = React.useRef(null);
-  const [isOpen, setOpenState] = React.useState(openProp);
+  const nodeRef = useRef<Element>(null);
+  const popperRef = useRef(null);
+  const [isOpen, setOpenState] = useState(openProp);
 
-  const setOpen = React.useCallback((newOpen: boolean) => {
+  const setOpen = useCallback((newOpen: boolean) => {
     setOpenState(newOpen);
   }, []);
 
-  React.useEffect(() => {
+  useEffect(() => {
     setOpen(openProp);
   }, [openProp, setOpen]);
 
-  const onKeyDown = React.useCallback(
+  const onKeyDown = useCallback(
     (e: KeyboardEvent) => {
       if (e.keyCode === 27) {
         setOpen(false);
@@ -28,7 +28,7 @@ const SimplePopper = ({ children }: SimplePopperProps) => {
     [setOpen],
   );
 
-  const onClickOutside = React.useCallback(
+  const onClickOutside = useCallback(
     (e: MouseEvent) => {
       if (!nodeRef.current || (e.target instanceof Node && !nodeRef.current.contains(e.target))) {
         setOpen(false);
@@ -37,7 +37,7 @@ const SimplePopper = ({ children }: SimplePopperProps) => {
     [setOpen],
   );
 
-  const destroy = React.useCallback(() => {
+  const destroy = useCallback(() => {
     if (popperRef.current) {
       popperRef.current.destroy();
       document.removeEventListener('keydown', onKeyDown, true);
@@ -46,7 +46,7 @@ const SimplePopper = ({ children }: SimplePopperProps) => {
     }
   }, [onClickOutside, onKeyDown]);
 
-  const initialize = React.useCallback(() => {
+  const initialize = useCallback(() => {
     if (!nodeRef.current || !isOpen) {
       return;
     }
@@ -54,7 +54,7 @@ const SimplePopper = ({ children }: SimplePopperProps) => {
     destroy();
   }, [isOpen, destroy]);
 
-  const nodeRefCallback = React.useCallback(
+  const nodeRefCallback = useCallback(
     (node) => {
       nodeRef.current = node;
       initialize();
@@ -62,18 +62,18 @@ const SimplePopper = ({ children }: SimplePopperProps) => {
     [initialize],
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     initialize();
   }, [initialize]);
 
-  React.useEffect(
+  useEffect(
     () => () => {
       destroy();
     },
     [destroy],
   );
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!isOpen) {
       destroy();
     }

package/src/ConsoleShared/src/components/spotlight/InteractiveSpotlight.tsx

@@ -1,5 +1,5 @@
 import './spotlight.scss';
-import * as React from 'react';
+import { CSSProperties, FC, useEffect, useState } from 'react';
 import { Portal, SimplePopper } from '../popper';
 
 interface InteractiveSpotlightProps {
@@ -16,9 +16,9 @@ const isInViewport = (elementToCheck: Element) => {
   );
 };
 
-const InteractiveSpotlight: React.FC<InteractiveSpotlightProps> = ({ element }) => {
+const InteractiveSpotlight: FC<InteractiveSpotlightProps> = ({ element }) => {
   const { top, bottom, left, right, height, width } = element.getBoundingClientRect();
-  const style: React.CSSProperties = {
+  const style: CSSProperties = {
     height,
     width,
     top,
@@ -26,9 +26,9 @@ const InteractiveSpotlight: React.FC<InteractiveSpotlightProps> = ({ element })
     bottom,
     right,
   };
-  const [clicked, setClicked] = React.useState(false);
+  const [clicked, setClicked] = useState(false);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (!clicked) {
       if (!isInViewport(element)) {
         element.scrollIntoView({ behavior: 'smooth', block: 'nearest', inline: 'nearest' });

package/src/ConsoleShared/src/components/spotlight/Spotlight.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import { FC, useMemo } from 'react';
 import InteractiveSpotlight from './InteractiveSpotlight';
 import StaticSpotlight from './StaticSpotlight';
 
@@ -7,9 +7,9 @@ interface SpotlightProps {
   interactive?: boolean;
 }
 
-const Spotlight: React.FC<SpotlightProps> = ({ selector, interactive }) => {
+const Spotlight: FC<SpotlightProps> = ({ selector, interactive }) => {
   // if target element is a hidden one return null
-  const element = React.useMemo(() => {
+  const element = useMemo(() => {
     const highlightElement = document.querySelector(selector);
     let hiddenElement = highlightElement;
     while (hiddenElement) {

package/src/ConsoleShared/src/components/spotlight/StaticSpotlight.tsx

@@ -1,5 +1,5 @@
 import './spotlight.scss';
-import * as React from 'react';
+import { CSSProperties, FC } from 'react';
 import { useBoundingClientRect } from '../../hooks';
 import Portal from '../popper/Portal';
 
@@ -7,9 +7,9 @@ interface StaticSpotlightProps {
   element: Element;
 }
 
-const StaticSpotlight: React.FC<StaticSpotlightProps> = ({ element }) => {
+const StaticSpotlight: FC<StaticSpotlightProps> = ({ element }) => {
   const clientRect = useBoundingClientRect(element as HTMLElement);
-  const style: React.CSSProperties = clientRect
+  const style: CSSProperties = clientRect
     ? {
         top: clientRect.top,
         left: clientRect.left,