Merge pull request #163 from heroku/ay/3pp-high-sev-deps

Updating packages to address high severity alerts

Author: angela-young

.babelrc

@@ -0,0 +1,24 @@
+module.exports = {
+  presets: [
+    [
+      '@babel/preset-env',
+      {
+        targets: {
+          node: 'current',
+        },
+        modules: 'commonjs',
+      },
+    ],
+    [
+      '@babel/preset-react',
+      {
+        runtime: 'automatic',
+      },
+    ],
+  ],
+  env: {
+    test: {
+      plugins: ['babel-plugin-require-context-hook'],
+    },
+  },
+}

.babelrc.js

@@ -10,68 +10,65 @@
     "node": "16.x"
   },
   "dependencies": {
+    "@babel/core": "^7.23.0",
+    "@babel/preset-env": "^7.23.0",
+    "@babel/preset-react": "^7.22.0",
     "@heroku/react-malibu": "^4.1.0",
-    "@popperjs/core": "^2.11.8",
     "@types/jest": "^27.5.2",
     "@types/lodash": "^4.17.20",
     "@types/react": "^18.0.28",
     "@types/react-dom": "^18.0.11",
     "@types/react-test-renderer": "^18.0.0",
     "@types/react-transition-group": "^4.4.5",
-    "babel-core": "^6.26.3",
-    "babel-jest": "^23.6.0",
-    "babel-loader": "7",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.1.0",
     "babel-plugin-require-context-hook": "^1.0.0",
-    "babel-preset-env": "^1.7.0",
-    "babel-preset-react": "^6.24.1",
-    "babel-preset-stage-1": "^6.24.1",
     "classnames": "^2.3.2",
-    "copy-webpack-plugin": "^4.6.0",
-    "css-loader": "^1.0.1",
-    "d3": "^5.4.0",
+    "copy-webpack-plugin": "6.4.1",
+    "css-loader": "^5.2.7",
+    "d3": "^7.9.0",
     "date-fns": "^1.30.1",
     "lodash": "^4.17.21",
-    "mini-css-extract-plugin": "^0.4.4",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-hot-loader": "^4.3.1",
+    "mini-css-extract-plugin": "^1.6.2",
     "react-inlinesvg": "^0.8.3",
     "react-measure": "^2.0.0",
     "react-outside-click-handler": "^1.2.2",
-    "react-popper": "2.3.0",
-    "react-select": "^2.1.2",
     "react-table": "^6.8.6",
     "react-transition-group": "^4.4.5",
     "regenerator-runtime": "^0.12.1",
     "simple-react-modal": "0.5.1",
-    "style-loader": "^0.23.1",
-    "ts-loader": "^8.4.0",
-    "uglifyjs-webpack-plugin": "^2.0.1"
+    "style-loader": "3.3.4",
+    "terser-webpack-plugin": "^4.2.3",
+    "ts-loader": "^8.4.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "eslint": "^4.15.0",
     "eslint-config-prettier": "^3.3.0",
     "eslint-plugin-import": "^2.8.0",
-    "eslint-plugin-node": "^5.2.1",
+    "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-prettier": "^3.0.0",
     "eslint-plugin-promise": "^3.6.0",
     "eslint-plugin-react": "^7.5.1",
-    "file-loader": "^1.1.11",
+    "file-loader": "^6.2.0",
     "husky": "^1.2.0",
     "jest": "^27.5.1",
-    "jest-css-modules-transform": "^2.1.1",
-    "lint-staged": "^8.1.0",
-    "np": "^2.19.0",
+    "jest-css-modules-transform": "4.4.2",
+    "lint-staged": "^13.3.0",
+    "np": "7.7.0",
     "prettier": "1.15.3",
     "react-test-renderer": "^18.2.0",
     "ts-jest": "^27.1.5",
     "tslint": "^5.9.1",
     "tslint-config-prettier": "^1.17.0",
     "tslint-react": "^3.4.0",
     "typescript": "^4.9.5",
-    "webpack": "^4.25.1",
-    "webpack-bundle-analyzer": "^3.0.3",
-    "webpack-cli": "^3.1.2"
+    "webpack": "4.47.0",
+    "webpack-bundle-analyzer": "4.10.2",
+    "webpack-cli": "4.9.2"
   },
   "scripts": {
     "analyze": "rm stats.json && webpack --profile --json > stats.json && webpack-bundle-analyzer stats.json",
@@ -95,6 +92,11 @@
     "transformIgnorePatterns": [
       "<rootDir>/node_modules/"
     ],
+    "moduleNameMapper": {
+      "^d3-array$": "<rootDir>/node_modules/d3-array/dist/d3-array.js",
+      "^d3-scale$": "<rootDir>/node_modules/d3-scale/dist/d3-scale.js",
+      "^d3-shape$": "<rootDir>/node_modules/d3-shape/dist/d3-shape.js"
+    },
     "setupFiles": [
       "<rootDir>/test/test-setup.ts"
     ],

package.json

@@ -1,8 +1,6 @@
-import { Modifier } from '@popperjs/core'
 import classNames from 'classnames'
 import * as React from 'react'
 import OutsideClickHandler from 'react-outside-click-handler'
-import { Manager, Popper, Reference } from 'react-popper'
 
 import { default as HKButton, Type } from './HKButton'
 import { default as HKIcon } from './HKIcon'
@@ -14,8 +12,6 @@ export enum Align {
 
 interface IDropdownProps {
   align?: Align // align dropdown component anchoring button
-  positionFixed?: boolean
-  modifiers?: Array<Modifier<any, any>>
   children?: JSX.Element | JSX.Element[] | string
   className?: string // dropdown button styling
   closeOnClick?: boolean // hide dropdown content after onClick in dropdown content
@@ -41,7 +37,6 @@ export default class HKDropdown extends React.Component<
     closeOnClick: true,
     disabled: false,
     name: 'hkdropdown',
-    positionFixed: false,
     small: false,
     type: Type.Secondary,
   }
@@ -50,6 +45,8 @@ export default class HKDropdown extends React.Component<
     showDropdown: false,
   }
 
+  private dropdownRef = React.createRef<HTMLDivElement>()
+
   public handleDropdown = () => {
     this.setState(prevState => ({ showDropdown: !prevState.showDropdown }))
   }
@@ -62,21 +59,21 @@ export default class HKDropdown extends React.Component<
   public handleContentClick = () =>
     this.props.closeOnClick && this.setState({ showDropdown: false })
 
-  public handleClickOutside = e => {
+  public handleClickOutside = (e: Event) => {
     // When closing by clicking on the menu button again,
     // both this handler and handleDropdown will fire.
     // Make sure we noop in that scenario so that the dropdown actually closes.
-    const path = e.path || (e.composedPath && e.composedPath())
+    const path = (e as any).path || (e.composedPath && e.composedPath())
     if (!path) {
       this.setState({
         showDropdown: false,
       })
       return
     }
-    const eventNodes = path.filter(node => {
+    const eventNodes = path.filter((node: any) => {
       return node.nodeType === 1
     })
-    const didClickButton = eventNodes.some(node => {
+    const didClickButton = eventNodes.some((node: any) => {
       return (
         node.hasAttribute('data-testid') &&
         node.getAttribute('data-testid') === this.testId()
@@ -96,69 +93,59 @@ export default class HKDropdown extends React.Component<
       className,
       contentClassName,
       disabled,
-      modifiers,
       name,
-      positionFixed,
       small,
       title,
       type,
     } = this.props
     const { showDropdown } = this.state
-    const popperPlacement =
-      align === Align.Right ? 'bottom-end' : 'bottom-start'
+
+    const dropdownStyle: React.CSSProperties = {
+      left: align === Align.Right ? 'auto' : '0',
+      minWidth: '200px',
+      position: 'absolute',
+      right: align === Align.Right ? '0' : 'auto',
+      top: '100%',
+      zIndex: 9999,
+    }
+
     return (
-      <Manager>
-        <Reference>
-          {({ ref }) => (
-            <div className='relative dib' ref={ref}>
-              <HKButton
-                onClick={this.handleDropdown}
-                data-testid={this.testId()}
-                className={classNames({ ph1: !title }, className)}
-                type={type}
-                small={small}
-                disabled={disabled}
-              >
-                {title}
-                <HKIcon
-                  name='caret-16'
-                  size={16}
-                  className={classNames({ pl1: title })}
-                />
-              </HKButton>
-            </div>
-          )}
-        </Reference>
+      <div className='relative dib' ref={this.dropdownRef}>
+        <HKButton
+          onClick={this.handleDropdown}
+          data-testid={this.testId()}
+          className={classNames({ ph1: !title }, className)}
+          type={type}
+          small={small}
+          disabled={disabled}
+        >
+          {title}
+          <HKIcon
+            name='caret-16'
+            size={16}
+            className={classNames({ pl1: title })}
+          />
+        </HKButton>
         {showDropdown && (
           <OutsideClickHandler onOutsideClick={this.handleClickOutside}>
-            <Popper
-              placement={popperPlacement}
-              modifiers={modifiers}
-              positionFixed={positionFixed}
+            <div
+              className='z-max'
+              onClick={this.handleContentClick}
+              data-testid={`${name}-dropdown-content`}
+              style={dropdownStyle}
             >
-              {({ ref, style, placement }) => (
-                <div
-                  className='z-max'
-                  onClick={this.handleContentClick}
-                  data-testid={`${name}-dropdown-content`}
-                  ref={ref}
-                  style={style}
-                  data-placement={placement}
-                >
-                  <ul
-                    className={classNames(
-                      contentClassName,
-                      'list br1 pl0 pv1 mv1 shadow-outer-2 bg-white'
-                    )}
-                  >
-                    {children}
-                  </ul>
-                </div>
-              )}
-            </Popper>
+              <ul
+                className={classNames(
+                  contentClassName,
+                  'list br1 pl0 pv1 mv1 shadow-outer-2 bg-white'
+                )}
+              >
+                {children}
+              </ul>
+            </div>
           </OutsideClickHandler>
         )}
-      </Manager>
+      </div>
     )
   }
 }

src/HKDropdown.tsx

@@ -6,5 +6,4 @@ declare module 'd3-shape'
 declare module 'react-measure'
 declare module 'simple-react-modal'
 declare module 'react-outside-click-handler'
-declare module 'react-popper'
 declare module 'react-table'

src/declarations.d.ts

@@ -1,6 +1,6 @@
 const path = require('path')
 const CopyWebpackPlugin = require('copy-webpack-plugin')
-const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+const TerserPlugin = require('terser-webpack-plugin')
 const MiniCssExtractPlugin = require('mini-css-extract-plugin')
 
 module.exports = {
@@ -17,22 +17,38 @@ module.exports = {
   resolve: {
     extensions: ['.ts', '.tsx', '.js'],
   },
+  externals: {
+    react: {
+      commonjs: 'react',
+      commonjs2: 'react',
+      amd: 'react',
+      root: 'React',
+    },
+    'react-dom': {
+      commonjs: 'react-dom',
+      commonjs2: 'react-dom',
+      amd: 'react-dom',
+      root: 'ReactDOM',
+    },
+  },
   optimization: {
     minimizer: [
-      new UglifyJsPlugin({
-        uglifyOptions: {
+      new TerserPlugin({
+        terserOptions: {
           keep_fnames: true,
         },
       }),
     ],
   },
   plugins: [
-    new CopyWebpackPlugin([
-      {
-        from: path.resolve(__dirname, './src/static'),
-        to: path.resolve(__dirname, './dist/static'),
-      },
-    ]),
+    new CopyWebpackPlugin({
+      patterns: [
+        {
+          from: path.resolve(__dirname, './src/static'),
+          to: path.resolve(__dirname, './dist/static'),
+        },
+      ],
+    }),
     new MiniCssExtractPlugin({
       filename: '[name].css',
       chunkFilename: '[id].css',