patternfly · jschuler · Mar 25, 2020 · Mar 24, 2020
diff --git a/packages/react-core/package.json b/packages/react-core/package.json
@@ -43,9 +43,7 @@
     "@patternfly/react-icons": "^3.15.13",
     "@patternfly/react-styles": "^3.7.10",
     "@patternfly/react-tokens": "^2.8.10",
-    "emotion": "^9.2.9",
-    "exenv": "^1.2.2",
-    "focus-trap-react": "^4.0.1",
+    "focus-trap": "4.0.2",
     "react-dropzone": "9.0.0",
     "tippy.js": "5.1.2"
   },
@@ -59,7 +57,6 @@
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@patternfly/patternfly": "2.70.1",
-    "@types/exenv": "^1.2.0",
     "@types/jest": "^24.0.11",
     "@types/react": "^16.4.0",
     "@types/react-dom": "^16.4.0",

diff --git a/packages/react-core/src/components/AboutModal/AboutModalContainer.tsx b/packages/react-core/src/components/AboutModal/AboutModalContainer.tsx
@@ -1,10 +1,7 @@
 import * as React from 'react';
-
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const FocusTrap: any = require('focus-trap-react');
-
-import styles from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 import { css } from '@patternfly/react-styles';
+import styles from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
+import { FocusTrap } from '../../helpers';
 
 import { AboutModalBoxContent } from './AboutModalBoxContent';
 import { AboutModalBoxHeader } from './AboutModalBoxHeader';

diff --git a/packages/react-core/src/components/AboutModal/__tests__/AboutModalBoxCloseButton.test.tsx b/packages/react-core/src/components/AboutModal/__tests__/AboutModalBoxCloseButton.test.tsx
@@ -14,7 +14,7 @@ test('AboutModalBoxCloseButton Test onclose', () => {
 });
 
 test('AboutModalBoxCloseButton Test close button aria label', () => {
-  const closeButtonAriaLabel = 'Klose Daylok'
+  const closeButtonAriaLabel = 'Klose Daylok';
   const view = shallow(<AboutModalBoxCloseButton aria-label={closeButtonAriaLabel} />);
   expect(view).toMatchSnapshot();
 });
diff --git a/...-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalContainer.test.tsx.snap b/...-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalContainer.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`About Modal Container Test isOpen 1`] = `
 <Backdrop>
   <FocusTrap
-    _createFocusTrap={[Function]}
     active={true}
     className="pf-l-bullseye"
     focusTrapOptions={
@@ -12,7 +11,6 @@ exports[`About Modal Container Test isOpen 1`] = `
       }
     }
     paused={false}
-    tag="div"
   >
     <AboutModalBox
       aria-describedby="ariaDescribedById"

diff --git a/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx b/packages/react-core/src/components/Alert/__tests__/Alert.test.tsx
@@ -47,7 +47,11 @@ Object.values(AlertVariant).forEach(variant => {
     test('Action Close Button', () => {
       const onClose = jest.fn();
       const view = mount(
-        <Alert variant={variant} action={<AlertActionCloseButton aria-label="Close" onClose={onClose} />} title={`Sample ${variant} alert`}>
+        <Alert
+          variant={variant}
+          action={<AlertActionCloseButton aria-label="Close" onClose={onClose} />}
+          title={`Sample ${variant} alert`}
+        >
           Some alert
         </Alert>
       );

diff --git a/packages/react-core/src/components/ContextSelector/ContextSelector.tsx b/packages/react-core/src/components/ContextSelector/ContextSelector.tsx
@@ -9,11 +9,7 @@ import { Button, ButtonVariant } from '../Button';
 import { TextInput } from '../TextInput';
 import { InputGroup } from '../InputGroup';
 import { KEY_CODES } from '../../helpers/constants';
-
-// Can't use ES6 imports :(
-// The types for it are also wrong, we should probably ditch this dependency.
-/* eslint-disable-next-line @typescript-eslint/no-var-requires */
-const FocusTrap: any = require('focus-trap-react');
+import { FocusTrap } from '../../helpers';
 
 // seed for the aria-labelledby ID
 let currentId = 0;

diff --git a/...core/src/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap b/...core/src/components/ContextSelector/__tests__/__snapshots__/ContextSelector.test.tsx.snap
@@ -41,15 +41,13 @@ exports[`Renders ContextSelector open 1`] = `
     className="pf-c-context-selector__menu"
   >
     <FocusTrap
-      _createFocusTrap={[Function]}
       active={true}
       focusTrapOptions={
         Object {
           "clickOutsideDeactivates": true,
         }
       }
       paused={false}
-      tag="div"
     >
       <div
         className="pf-c-context-selector__menu-input"

diff --git a/packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx b/packages/react-core/src/components/Drawer/__tests__/Drawer.test.tsx
@@ -1,33 +1,44 @@
-import { Drawer, DrawerPanelContent, DrawerContent, DrawerHead,  DrawerActions, DrawerCloseButton, DrawerContentBody, DrawerPanelBody} from '../';
+import {
+  Drawer,
+  DrawerPanelContent,
+  DrawerContent,
+  DrawerHead,
+  DrawerActions,
+  DrawerCloseButton,
+  DrawerContentBody,
+  DrawerPanelBody
+} from '../';
 import React from 'react';
 import { mount } from 'enzyme';
 
 Object.values([
-  { isExpanded: true, isInline: false, isStatic:false },
-  { isExpanded: false, isInline: false, isStatic:false },
-  { isExpanded: true, isInline: true, isStatic:false },
-  { isExpanded: false, isInline: true, isStatic:false },
-  { isExpanded: true, isInline: false, isStatic:true}
+  { isExpanded: true, isInline: false, isStatic: false },
+  { isExpanded: false, isInline: false, isStatic: false },
+  { isExpanded: true, isInline: true, isStatic: false },
+  { isExpanded: false, isInline: true, isStatic: false },
+  { isExpanded: true, isInline: false, isStatic: true }
 ]).forEach(({ isExpanded, isInline, isStatic }) => {
   const panelContent = (
-    <DrawerPanelContent> 
+    <DrawerPanelContent>
       <DrawerHead>
         <span>drawer-panel</span>
         <DrawerActions>
-            <DrawerCloseButton/>
+          <DrawerCloseButton />
         </DrawerActions>
       </DrawerHead>
-      <DrawerPanelBody>drawer-panel</DrawerPanelBody> 
-    </DrawerPanelContent>);
-    const drawerContent =
+      <DrawerPanelBody>drawer-panel</DrawerPanelBody>
+    </DrawerPanelContent>
+  );
+  const drawerContent =
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus pretium est a porttitor vehicula. Quisque vel commodo urna. Morbi mattis rutrum ante, id vehicula ex accumsan ut. Morbi viverra, eros vel porttitor facilisis, eros purus aliquet erat,nec lobortis felis elit pulvinar sem. Vivamus vulputate, risus eget commodo eleifend, eros nibh porta quam, vitae lacinia leo libero at magna. Maecenas aliquam sagittis orci, et posuere nisi ultrices sit amet. Aliquam ex odio, malesuada sed posuere quis, pellentesque at mauris. Phasellus venenatis massa ex, eget pulvinar libero auctor pretium. Aliquam erat volutpat. Duis euismod justo in quam ullamcorper, in commodo massa vulputate.';
   test(`Drawer isExpanded = ${isExpanded} and isInline = ${isInline} and isStatic = ${isStatic}`, () => {
     const view = mount(
       <Drawer isExpanded={isExpanded}>
-              <DrawerContent  panelContent={panelContent}>
-                <DrawerContentBody>{drawerContent}</DrawerContentBody>
-              </DrawerContent>
-            </Drawer>);
+        <DrawerContent panelContent={panelContent}>
+          <DrawerContentBody>{drawerContent}</DrawerContentBody>
+        </DrawerContent>
+      </Drawer>
+    );
     expect(view).toMatchSnapshot();
   });
 });
diff --git a/packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx b/packages/react-core/src/components/Dropdown/__tests__/Dropdown.test.tsx
@@ -185,18 +185,20 @@ describe('API', () => {
   });
 
   test('dropdownItems and children console error ', () => {
-      const myMock = jest.fn();
-      global.console = { error: myMock } as any;
-      mount(
-        <Dropdown
-          dropdownItems={dropdownItems}
-          isOpen
-          toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
-        >
-          <div>Children items</div>
-        </Dropdown>
-      )
-     expect(myMock).toBeCalledWith('Children and dropdownItems props have been provided. Only the dropdownItems prop items will be rendered');
+    const myMock = jest.fn();
+    global.console = { error: myMock } as any;
+    mount(
+      <Dropdown
+        dropdownItems={dropdownItems}
+        isOpen
+        toggle={<DropdownToggle id="Dropdown Toggle">Dropdown</DropdownToggle>}
+      >
+        <div>Children items</div>
+      </Dropdown>
+    );
+    expect(myMock).toBeCalledWith(
+      'Children and dropdownItems props have been provided. Only the dropdownItems prop items will be rendered'
+    );
   });
 
   test('dropdownItems only, no console error ', () => {

diff --git a/packages/react-core/src/components/FileUpload/__tests__/FileUpload.test.tsx b/packages/react-core/src/components/FileUpload/__tests__/FileUpload.test.tsx
@@ -7,16 +7,17 @@ test('simple fileupload', () => {
   const readStartedHandler = jest.fn();
   const readFinishedHandler = jest.fn();
 
-  const view = shallow(<FileUpload
-    id="simple-text-file"
-    type="text"
-    value={''}
-    filename={''}
-    onChange={changeHandler}
-    onReadStarted={readStartedHandler}
-    onReadFinished={readFinishedHandler}
-    isLoading={false}
-  />);
+  const view = shallow(
+    <FileUpload
+      id="simple-text-file"
+      type="text"
+      value={''}
+      filename={''}
+      onChange={changeHandler}
+      onReadStarted={readStartedHandler}
+      onReadFinished={readFinishedHandler}
+      isLoading={false}
+    />
+  );
   expect(view).toMatchSnapshot();
 });
-
diff --git a/packages/react-core/src/components/FileUpload/__tests__/FileUploadField.test.tsx b/packages/react-core/src/components/FileUpload/__tests__/FileUploadField.test.tsx
@@ -7,21 +7,23 @@ test('simple fileuploadfield', () => {
   const browserBtnClickHandler = jest.fn();
   const clearBtnClickHandler = jest.fn();
 
-  const view = shallow(<FileUploadField
-    id="custom-file-upload"
-    type="text"
-    value={''}
-    filename={''}
-    onChange={changeHandler}
-    filenamePlaceholder="Do something custom with this!"
-    onBrowseButtonClick={browserBtnClickHandler}
-    onClearButtonClick={clearBtnClickHandler}
-    isClearButtonDisabled={false}
-    isLoading={false}
-    isDragActive={false}
-    hideDefaultPreview={false}
-  >
-    {<p>A custom preview of the uploaded file can be passed as children</p>}
-  </FileUploadField>);
+  const view = shallow(
+    <FileUploadField
+      id="custom-file-upload"
+      type="text"
+      value={''}
+      filename={''}
+      onChange={changeHandler}
+      filenamePlaceholder="Do something custom with this!"
+      onBrowseButtonClick={browserBtnClickHandler}
+      onClearButtonClick={clearBtnClickHandler}
+      isClearButtonDisabled={false}
+      isLoading={false}
+      isDragActive={false}
+      hideDefaultPreview={false}
+    >
+      {<p>A custom preview of the uploaded file can be passed as children</p>}
+    </FileUploadField>
+  );
   expect(view).toMatchSnapshot();
 });
diff --git a/packages/react-core/src/components/Modal/ModalContent.tsx b/packages/react-core/src/components/Modal/ModalContent.tsx
@@ -1,12 +1,7 @@
 import * as React from 'react';
-
-// Can't use ES6 imports :(
-// The types for it are also wrong, we should probably ditch this dependency.
-// eslint-disable-next-line @typescript-eslint/no-var-requires
-const FocusTrap: any = require('focus-trap-react');
-
-import styles from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
+import { FocusTrap } from '../../helpers';
 import titleStyles from '@patternfly/react-styles/css/components/Title/title';
+import styles from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 import { css } from '@patternfly/react-styles';
 
 import { Backdrop } from '../Backdrop/Backdrop';