npm - @patternfly/react-core - Versions diffs - 6.2.0-prerelease.33 → 6.2.0-prerelease.35 - Mend

@patternfly/react-core 6.2.0-prerelease.33 → 6.2.0-prerelease.35

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (714) hide show

package/src/deprecated/components/DragDrop/examples/DragDropMultipleLists.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Flex } from '@patternfly/react-core';
 import { DragDrop, Draggable, Droppable } from '@patternfly/react-core/deprecated';
@@ -40,7 +41,7 @@ const move = (source: ItemType[], destination: ItemType[], sourceIndex: number,
 };
 export const DragDropMultipleLists: React.FunctionComponent = () => {
-  const [items, setItems] = React.useState<MultipleListState>({
+  const [items, setItems] = useState<MultipleListState>({
     items1: getItems(10, 0),
     items2: getItems(5, 10)
   });

package/src/deprecated/components/Modal/examples/Modal.md CHANGED Viewed

@@ -7,7 +7,7 @@ ouia: true
 deprecated: true
 ---
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';

package/src/deprecated/components/Modal/examples/ModalBasic.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button } from '@patternfly/react-core';
 import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
 export const ModalBasic: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);

package/src/deprecated/components/Modal/examples/ModalCustomFocus.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button } from '@patternfly/react-core';
 import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
 export const ModalCustomFocus: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);

package/src/deprecated/components/Modal/examples/ModalCustomHeaderFooter.tsx CHANGED Viewed

@@ -1,11 +1,11 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Title, TitleSizes } from '@patternfly/react-core';
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 export const ModalCustomHeaderFooter: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);

package/src/deprecated/components/Modal/examples/ModalCustomTitleIcon.tsx CHANGED Viewed

@@ -1,10 +1,10 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button } from '@patternfly/react-core';
 import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
 import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
 export const ModalCustomTitleIcon: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);

package/src/deprecated/components/Modal/examples/ModalCustomWidth.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button } from '@patternfly/react-core';
 import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
 export const ModalCustomWidth: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);

package/src/deprecated/components/Modal/examples/ModalLarge.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button } from '@patternfly/react-core';
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 export const ModalLarge: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);

package/src/deprecated/components/Modal/examples/ModalMedium.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button } from '@patternfly/react-core';
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 export const ModalMedium: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);

package/src/deprecated/components/Modal/examples/ModalNoHeaderFooter.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button } from '@patternfly/react-core';
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 export const ModalNoHeaderFooter: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);

package/src/deprecated/components/Modal/examples/ModalSmall.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button } from '@patternfly/react-core';
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 export const ModalSmall: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);

package/src/deprecated/components/Modal/examples/ModalTitleIcon.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button } from '@patternfly/react-core';
 import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
 export const ModalTitleIcon: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);

package/src/deprecated/components/Modal/examples/ModalTopAligned.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button } from '@patternfly/react-core';
 import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
 export const ModalTopAligned: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);

package/src/deprecated/components/Modal/examples/ModalWithDescription.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button } from '@patternfly/react-core';
 import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
 export const ModalWithDescription: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);

package/src/deprecated/components/Modal/examples/ModalWithDropdown.tsx CHANGED Viewed

@@ -1,10 +1,10 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Dropdown, DropdownList, DropdownItem, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 export const ModalWithDropdown: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
-  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);

package/src/deprecated/components/Modal/examples/ModalWithForm.tsx CHANGED Viewed

@@ -1,15 +1,15 @@
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 import { Button, Form, FormGroup, FormGroupLabelHelp, Popover, TextInput } from '@patternfly/react-core';
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 export const ModalWithForm: React.FunctionComponent = () => {
-  const [isModalOpen, setModalOpen] = React.useState(false);
-  const [nameValue, setNameValue] = React.useState('');
-  const [emailValue, setEmailValue] = React.useState('');
-  const [addressValue, setAddressValue] = React.useState('');
-  const nameLabelHelpRef = React.useRef(null);
-  const emailLabelHelpRef = React.useRef(null);
-  const addressLabelHelpRef = React.useRef(null);
+  const [isModalOpen, setModalOpen] = useState(false);
+  const [nameValue, setNameValue] = useState('');
+  const [emailValue, setEmailValue] = useState('');
+  const [addressValue, setAddressValue] = useState('');
+  const nameLabelHelpRef = useRef(null);
+  const emailLabelHelpRef = useRef(null);
+  const addressLabelHelpRef = useRef(null);
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setModalOpen(!isModalOpen);

package/src/deprecated/components/Modal/examples/ModalWithHelp.tsx CHANGED Viewed

@@ -1,11 +1,11 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Popover } from '@patternfly/react-core';
 import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 export const ModalWithHelp: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen(!isModalOpen);

package/src/deprecated/components/Modal/examples/ModalWithOverflowingContent.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button } from '@patternfly/react-core';
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 export const ModalWithOverflowingContent: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen((prevIsModalOpen) => !prevIsModalOpen);

package/src/deprecated/components/Modal/examples/ModalWithWizard.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button, Wizard, WizardHeader, WizardStep } from '@patternfly/react-core';
 import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 export const ModalWithWizard: React.FunctionComponent = () => {
-  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsModalOpen((prevIsModalOpen) => !prevIsModalOpen);

package/src/deprecated/components/Tile/examples/Tile.md CHANGED Viewed

@@ -6,6 +6,7 @@ propComponents: ['Tile']
 deprecated: true
 ---
+import { useState } from 'react';
 import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
 import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 import './Tile.css';
@@ -73,10 +74,11 @@ You can also change the type of `Flex` you can use so that the line breaks in th
 ### Tiles with single selection
 ```ts
+import { useState } from 'react';
 import { Tile } from '@patternfly/react-core/deprecated';
 const TileSingleSelect: React.FunctionComponent = () => {
-  const [selectedId, setSelectedId] = React.useState<string>('');
+  const [selectedId, setSelectedId] = useState<string>('');
   const onSelect = (event: React.MouseEvent) => {
     setSelectedId(event.currentTarget.id);
@@ -103,10 +105,11 @@ const TileSingleSelect: React.FunctionComponent = () => {
 ### Tiles with multiple selection
 ```ts
+import { useState } from 'react';
 import { Tile } from '@patternfly/react-core/deprecated';
 const TileMultiSelect: React.FunctionComponent = () => {
-  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);
+  const [selectedIds, setSelectedIds] = useState<string[]>([]);
   const onSelect = (event: React.MouseEvent | React.KeyboardEvent) => {
     const targetId = event.currentTarget.id;

package/src/deprecated/components/Wizard/examples/Wizard.md CHANGED Viewed

@@ -9,7 +9,7 @@ source: react-deprecated
 deprecated: true
 ---
-import { Fragment } from 'react';
+import { Fragment, useEffect, useRef, useState } from 'react';
 import { Button, Drawer, DrawerActions, DrawerCloseButton, DrawerColorVariant,
 DrawerContent, DrawerContentBody, DrawerHead, DrawerPanelContent, DrawerSection, ModalVariant, Alert, EmptyState, EmptyStateFooter, EmptyStateBody, EmptyStateActions, Title, Progress, Form, FormGroup, TextInput } from '@patternfly/react-core';
 import { Wizard as WizardDeprecated, WizardFooter as WizardFooterDeprecated, WizardContextConsumer as WizardContextConsumerDeprecated } from '@patternfly/react-core/deprecated';

package/src/deprecated/components/Wizard/examples/WizardEnabledOnFormValidation.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import { Form, FormGroup, TextInput } from '@patternfly/react-core';
 import { Wizard as WizardDeprecated, WizardStep } from '@patternfly/react-core/deprecated';
 interface PrevStepInfo {
@@ -12,8 +13,8 @@ interface sampleFormProps {
 }
 const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormProps) => {
-  const [value, setValue] = React.useState(props.formValue);
-  const [isValid, setIsValid] = React.useState(props.isFormValid);
+  const [value, setValue] = useState(props.formValue);
+  const [isValid, setIsValid] = useState(props.isFormValid);
   const handleTextInputChange = (_event, value: string) => {
     const valid = /^\d+$/.test(value);
@@ -47,12 +48,12 @@ const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormP
 };
 export const WizardFormValidation: React.FunctionComponent = () => {
-  const [isFormValid, setIsFormValid] = React.useState(false);
-  const [formValue, setFormValue] = React.useState('Thirty');
-  const [allStepsValid, setAllStepsValid] = React.useState(false);
-  const [stepIdReached, setStepIdReached] = React.useState(1);
+  const [isFormValid, setIsFormValid] = useState(false);
+  const [formValue, setFormValue] = useState('Thirty');
+  const [allStepsValid, setAllStepsValid] = useState(false);
+  const [stepIdReached, setStepIdReached] = useState(1);
-  React.useEffect(() => {
+  useEffect(() => {
     setAllStepsValid(isFormValid);
   }, [isFormValid, stepIdReached]);

package/src/deprecated/components/Wizard/examples/WizardFinished.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import {
   EmptyState,
   EmptyStateFooter,
@@ -16,7 +17,7 @@ interface finishedProps {
 }
 const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedProps) => {
-  const [percent, setPercent] = React.useState(0);
+  const [percent, setPercent] = useState(0);
   const tick = () => {
     setPercent((prevPercent) => {
@@ -28,7 +29,7 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
     });
   };
-  React.useEffect(() => {
+  useEffect(() => {
     const interval = setInterval(() => tick(), 1000);
     if (percent >= 100) {

package/src/deprecated/components/Wizard/examples/WizardInModal.tsx CHANGED Viewed

@@ -1,9 +1,9 @@
-import { Fragment } from 'react';
+import { Fragment, useState } from 'react';
 import { Button } from '@patternfly/react-core';
 import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 export const WizardInModal: React.FunctionComponent = () => {
-  const [isOpen, setIsOpen] = React.useState(false);
+  const [isOpen, setIsOpen] = useState(false);
   const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
     setIsOpen(!isOpen);

package/src/deprecated/components/Wizard/examples/WizardIncrementallyEnabledSteps.tsx CHANGED Viewed

@@ -1,7 +1,8 @@
+import { useState } from 'react';
 import { Wizard as WizardDeprecated, WizardStep } from '@patternfly/react-core/deprecated';
 export const WizardIncrementallyEnabledSteps: React.FunctionComponent = () => {
-  const [stepIdReached, setStepIdReached] = React.useState(1);
+  const [stepIdReached, setStepIdReached] = useState(1);
   const onNext = ({ id }: WizardStep) => {
     if (id) {

package/src/deprecated/components/Wizard/examples/WizardValidateOnButtonPress.tsx CHANGED Viewed

@@ -1,3 +1,4 @@
+import { useEffect, useState } from 'react';
 import {
   EmptyState,
   EmptyStateFooter,
@@ -25,7 +26,7 @@ interface finishedProps {
 }
 const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedProps) => {
-  const [percent, setPercent] = React.useState(0);
+  const [percent, setPercent] = useState(0);
   const tick = () => {
     setPercent((prevPercent) => {
@@ -37,7 +38,7 @@ const FinishedStep: React.FunctionComponent<finishedProps> = (props: finishedPro
     });
   };
-  React.useEffect(() => {
+  useEffect(() => {
     const interval = setInterval(() => tick(), 1000);
     if (percent >= 100) {
@@ -81,8 +82,8 @@ interface sampleFormProps {
 }
 const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormProps) => {
-  const [value, setValue] = React.useState(props.formValue);
-  const [isValid, setIsValid] = React.useState(props.isFormValid);
+  const [value, setValue] = useState(props.formValue);
+  const [isValid, setIsValid] = useState(props.isFormValid);
   const handleTextInputChange = (_event, value: string) => {
     const valid = /^\d+$/.test(value);
@@ -116,10 +117,10 @@ const SampleForm: React.FunctionComponent<sampleFormProps> = (props: sampleFormP
 };
 export const WizardValidateButtonPress: React.FunctionComponent = () => {
-  const [isFormValid, setIsFormValid] = React.useState(false);
-  const [formValue, setFormValue] = React.useState('Validating on button press');
-  const [stepsValid, setStepsValid] = React.useState(0);
-  const [errorText, setErrorText] = React.useState(false);
+  const [isFormValid, setIsFormValid] = useState(false);
+  const [formValue, setFormValue] = useState('Validating on button press');
+  const [stepsValid, setStepsValid] = useState(0);
+  const [errorText, setErrorText] = useState(false);
   const closeWizard = () => {
     // eslint-disable-next-line no-console

package/src/deprecated/components/Wizard/examples/WizardWithDrawer.tsx CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Fragment } from 'react';
+import { Fragment, useRef, useState } from 'react';
 import {
   Button,
   DrawerActions,
@@ -10,9 +10,9 @@ import {
 import { Wizard as WizardDeprecated } from '@patternfly/react-core/deprecated';
 export const WizardWithDrawer: React.FunctionComponent = () => {
-  const [isDrawerExpanded, setIsDrawerExpanded] = React.useState(false);
+  const [isDrawerExpanded, setIsDrawerExpanded] = useState(false);
-  const drawerRef = React.useRef<HTMLSpanElement>(null);
+  const drawerRef = useRef<HTMLSpanElement>(null);
   const onExpandDrawer = () => {
     drawerRef.current && drawerRef.current.focus();

package/src/helpers/resizeObserver.tsx CHANGED Viewed

@@ -6,7 +6,7 @@ import { canUseDOM, debounce } from './util';
  *
  * Example 1:
  *
- * private containerRef = React.createRef<HTMLDivElement>();
+ * private containerRef = createRef<HTMLDivElement>();
  * private observer: any = () => {};
  *
  * public componentDidMount() {
@@ -33,7 +33,7 @@ import { canUseDOM, debounce } from './util';
  *
  * Example 2:
  *
- * private inputRef = React.createRef<HTMLInputElement>();
+ * private inputRef = createRef<HTMLInputElement>();
  * private observer: any = () => {};
  *
  * public componentDidMount() {

package/src/layouts/Bullseye/__tests__/Bullseye.test.tsx CHANGED Viewed

@@ -1,4 +1,3 @@
-import { type JSX } from 'react';
 import { render, screen } from '@testing-library/react';
 import { Bullseye } from '../Bullseye';
@@ -23,7 +22,7 @@ describe('Bullseye', () => {
   test('allows passing in a React Component as the component', () => {
     const Component: React.FunctionComponent = () => <div>Some text</div>;
-    render(<Bullseye component={Component as unknown as keyof JSX.IntrinsicElements} />);
+    render(<Bullseye component={Component as unknown as keyof React.JSX.IntrinsicElements} />);
     expect(screen.getByText('Some text')).toBeInTheDocument();
   });
 });