chore(deps): Upgrade @box/frontend and associated dependencies

build/webpack.config.js

@@ -27,7 +27,8 @@ const languages = isProd ? locales : ['en-US']; // Only 1 language needed for de
 
 /* eslint-disable key-spacing, require-jsdoc */
 function updateConfig(conf, language, index) {
-    const config = Object.assign(conf, {
+    const config = {
+        ...conf,
         entry: {
             annotations: ['box-annotations'],
             preview: [`${lib}/Preview.js`],
@@ -64,7 +65,7 @@ function updateConfig(conf, language, index) {
             inline: true,
             port: 8000,
         },
-    });
+    };
 
     if (index === 0) {
         config.plugins.push(new RsyncPlugin(thirdParty, staticFolder));

build/webpack.karma.config.js

@@ -10,14 +10,15 @@ const commonConfig = require('./webpack.common.config');
 
 const baseConfig = commonConfig('en-US');
 
-const config = Object.assign(baseConfig, {
+const config = {
+    ...baseConfig,
     mode: 'development',
     resolve: {
         alias: {
             sinon: 'sinon/pkg/sinon',
         },
     },
-});
+};
 
 if (isDebug) {
     config.devtool = 'inline-source-map';

package.json

@@ -14,14 +14,14 @@
         "@babel/plugin-transform-object-assign": "^7.2.0",
         "@babel/preset-env": "^7.5.5",
         "@babel/preset-react": "^7.0.0",
-        "@box/frontend": "^1.4.0",
+        "@box/frontend": "^4.0.0",
         "@box/languages": "^1.0.0",
-        "@commitlint/cli": "^7.2.1",
-        "@commitlint/config-conventional": "7.1.2",
+        "@commitlint/cli": "^8.1.0",
+        "@commitlint/config-conventional": "8.1.0",
         "@commitlint/travis-cli": "^8.1.0",
         "autoprefixer": "^9.6.1",
         "axios": "^0.19.0",
-        "babel-eslint": "^10.0.2",
+        "babel-eslint": "^10.0.3",
         "babel-loader": "^8.0.6",
         "babel-plugin-istanbul": "^5.2.0",
         "babel-plugin-react-remove-properties": "^0.3.0",
@@ -30,33 +30,33 @@
         "box-react-ui": "^22.7.0",
         "chai": "^4.2.0",
         "chai-dom": "^1.8.1",
-        "conventional-changelog-cli": "^2.0.5",
+        "conventional-changelog-cli": "^2.0.23",
         "conventional-github-releaser": "^3.1.3",
         "create-react-class": "^15.6.2",
         "css-loader": "^3.1.0",
         "cssnano-cli": "^1.0.5",
-        "cypress": "^3.1.5",
-        "eslint": "^4.19.1",
-        "eslint-config-airbnb": "^17.1.0",
-        "eslint-config-prettier": "^3.0.1",
-        "eslint-import-resolver-webpack": "^0.8.3",
+        "cypress": "^3.4.1",
+        "eslint": "^6.3.0",
+        "eslint-config-airbnb": "^18.0.1",
+        "eslint-config-prettier": "^6.2.0",
+        "eslint-import-resolver-webpack": "^0.11.1",
         "eslint-plugin-babel": "^5.2.0",
         "eslint-plugin-chai-friendly": "^0.4.1",
-        "eslint-plugin-cypress": "^2.2.1",
-        "eslint-plugin-flowtype": "^2.34.1",
-        "eslint-plugin-import": "^2.18.0",
-        "eslint-plugin-jest": "^21.21.0",
+        "eslint-plugin-cypress": "^2.6.1",
+        "eslint-plugin-flowtype": "^4.3.0",
+        "eslint-plugin-import": "^2.18.2",
+        "eslint-plugin-jest": "^22.16.0",
         "eslint-plugin-jsx-a11y": "^6.2.3",
-        "eslint-plugin-lodash": "^5.1.0",
-        "eslint-plugin-prettier": "^2.6.2",
-        "eslint-plugin-react": "^7.8.2",
-        "eslint-plugin-react-hooks": "^1.6.0",
+        "eslint-plugin-lodash": "^6.0.0",
+        "eslint-plugin-prettier": "^3.1.0",
+        "eslint-plugin-react": "^7.14.3",
+        "eslint-plugin-react-hooks": "^1.7.0",
         "file-loader": "^4.1.0",
         "fscreen": "^1.0.2",
-        "husky": "^1.3.1",
+        "husky": "^3.0.5",
         "i18n-webpack-plugin": "^1.0.0",
         "jsuri": "^1.3.1",
-        "karma": "^4.2.0",
+        "karma": "^4.3.0",
         "karma-chai": "^0.1.0",
         "karma-chai-dom": "^1.1.0",
         "karma-chrome-launcher": "^2.2.0",
@@ -71,8 +71,8 @@
         "karma-sinon-chai": "^2.0.2",
         "karma-sourcemap-loader": "^0.3.7",
         "karma-webpack": "^4.0.2",
-        "lint-staged": "^8.0.4",
-        "lodash": "^4.17.11",
+        "lint-staged": "^9.2.5",
+        "lodash": "^4.17.15",
         "mini-css-extract-plugin": "^0.8.0",
         "mocha": "^6.2.0",
         "mock-local-storage": "^1.0.2",
@@ -85,20 +85,20 @@
         "postcss-loader": "^3.0.0",
         "postcss-sass": "^0.4.1",
         "prettier": "^1.14.2",
-        "prettier-eslint-cli": "^4.4.2",
+        "prettier-eslint-cli": "^5.0.0",
         "raw-loader": "^3.1.0",
         "react": "^16.7.0",
         "react-dom": "^16.7.0",
         "react-virtualized": "^9.13.0",
         "sass-loader": "^7.1.0",
-        "sinon": "^7.3.2",
+        "sinon": "^7.4.2",
         "sinon-chai": "3.3.0",
         "string-replace-loader": "^2.2.0",
         "style-loader": "^0.23.1",
-        "stylelint": "^9.5.0",
+        "stylelint": "^10.1.0",
+        "stylelint-config-rational-order": "^0.1.2",
         "stylelint-config-standard": "^18.2.0",
-        "stylelint-order": "^1.0.0",
-        "stylelint-scss": "^2.2.0",
+        "stylelint-order": "^3.1.0",
         "uglifyjs-webpack-plugin": "^2.1.3",
         "wait-on": "^3.2.0",
         "webpack": "^4.36.1",
@@ -146,13 +146,11 @@
         "IE 11"
     ],
     "lint-staged": {
-        "linters": {
-            "*.js": ["eslint --fix", "git add"],
-            "*.md": ["prettier --write --parser=markdown", "git add"],
-            "*.json": ["prettier --write --parser=json", "git add"],
-            "*.html": ["prettier --write --parser=html", "git add"],
-            "*.scss": ["prettier --write --parser=scss", "stylelint --syntax scss --fix", "git add"]
-        }
+        "*.js": ["eslint --fix", "git add"],
+        "*.json": ["prettier --write --parser=json", "git add"],
+        "*.html": ["prettier --write --parser=html", "git add"],
+        "*.md": ["prettier --write --parser=markdown", "git add"],
+        "*.scss": ["prettier --write --parser=scss", "stylelint --syntax scss --fix", "git add"]
     },
     "husky": {
         "hooks": {

src/lib/Controls.scss

@@ -1,26 +1,26 @@
 .bp-controls-wrapper {
-    border: 0 none;
+    position: absolute;
     bottom: 25px;
     left: 50%;
     margin: 0;
     padding: 0;
-    position: absolute;
+    border: 0 none;
 }
 
 .bp-controls {
+    position: relative;
+    left: -50%;
+    display: table;
+    table-layout: fixed;
     background: fade-out($twos, .05);
     border-radius: 3px;
-    display: table;
-    left: -50%;
     opacity: 0;
-    position: relative;
-    table-layout: fixed;
     transition: opacity .5s;
 
     // Page num input CSS
     .bp-page-num {
-        min-width: 48px;
         width: auto; // Let page num expand as needed
+        min-width: 48px;
 
         span {
             display: inline;
@@ -29,10 +29,10 @@
     }
 
     .bp-page-num-wrapper {
-        background-color: #444;
-        border-radius: 3px;
         margin: 5px;
         padding: 7px 5px;
+        background-color: #444;
+        border-radius: 3px;
     }
 
     /* stylelint-disable property-no-vendor-prefix */
@@ -50,19 +50,19 @@
     /* stylelint-enable property-no-vendor-prefix */
 
     input[type='number'].bp-page-num-input {
-        font-size: 14px;
-        margin: 0 auto;
         position: absolute;
+        width: 44px; // hard-coded to solve layout issues
+        margin: 0 auto;
+        font-size: 14px;
         text-align: center;
         visibility: hidden;
-        width: 44px; // hard-coded to solve layout issues
     }
 
     &.show-page-number-input {
         .bp-page-num-wrapper {
+            padding: 0;
             background-color: transparent;
             border: none;
-            padding: 0;
         }
 
         .bp-page-num {
@@ -76,8 +76,8 @@
         }
 
         input[type='number'].bp-page-num-input {
-            display: inline-block;
             position: static;
+            display: inline-block;
             visibility: visible;
         }
     }
@@ -91,26 +91,26 @@
     display: table-cell;
     margin: 0;
     padding: 0;
-    touch-action: manipulation;
-    user-select: none;
     vertical-align: middle;
+    user-select: none;
+    touch-action: manipulation;
 }
 
 .bp-controls-btn {
-    background: transparent;
-    border: 1px solid transparent;
-    color: $white;
-    cursor: pointer;
     display: block;
+    width: 48px;
     height: 48px;
     margin: 0;
-    opacity: .7;
-    outline: 0;
     padding: 0;
+    color: $white;
+    background: transparent;
+    border: 1px solid transparent;
+    outline: 0;
+    cursor: pointer;
+    opacity: .7;
+    user-select: none;
     // disables non-standard gestures such as double-tap to zoom
     touch-action: manipulation;
-    user-select: none;
-    width: 48px;
     zoom: 1;
 
     &:hover,

src/lib/Preview.js

@@ -238,7 +238,7 @@ class Preview extends EventEmitter {
         // Token can also be null or undefined for offline use case.
         // But it cannot be a random object.
         if (token === null || typeof token !== 'object') {
-            this.previewOptions = Object.assign({}, options, { token });
+            this.previewOptions = { ...options, token };
         } else {
             throw new Error('Bad access token!');
         }
@@ -331,9 +331,7 @@ class Preview extends EventEmitter {
                 fileIds.push(fileOrId.toString());
             } else if (fileOrId && typeof fileOrId === 'object' && isValidFileId(fileOrId.id)) {
                 // Possible well-formed file object found in the collection
-                const wellFormedFileObj = Object.assign({}, fileOrId, {
-                    id: fileOrId.id.toString(),
-                });
+                const wellFormedFileObj = { ...fileOrId, id: fileOrId.id.toString() };
                 fileIds.push(wellFormedFileObj.id);
                 files.push(wellFormedFileObj);
             } else {
@@ -537,7 +535,7 @@ class Preview extends EventEmitter {
             }
 
             // This allows the browser to download representation content
-            const params = Object.assign({ response_content_disposition_type: 'attachment' }, queryParams);
+            const params = { response_content_disposition_type: 'attachment', ...queryParams };
             const downloadUrl = appendQueryParams(
                 this.viewer.createContentUrlWithAuthParams(contentUrlTemplate, this.viewer.getAssetPath()),
                 params,
@@ -869,7 +867,7 @@ class Preview extends EventEmitter {
      * @return {void}
      */
     parseOptions(previewOptions) {
-        const options = Object.assign({}, previewOptions);
+        const options = { ...previewOptions };
 
         // Reset all options
         this.options = {};
@@ -986,14 +984,14 @@ class Preview extends EventEmitter {
      * @return {Object} combined options
      */
     createViewerOptions(moreOptions) {
-        return cloneDeep(
-            Object.assign({}, this.options, moreOptions, {
-                api: this.api,
-                location: this.location,
-                cache: this.cache,
-                ui: this.ui,
-            }),
-        );
+        return cloneDeep({
+            ...this.options,
+            ...moreOptions,
+            api: this.api,
+            location: this.location,
+            cache: this.cache,
+            ui: this.ui,
+        });
     }
 
     /**
@@ -1023,12 +1021,10 @@ class Preview extends EventEmitter {
      */
     loadFromServer() {
         const { apiHost, previewWMPref, queryParams } = this.options;
-        const params = Object.assign(
-            {
-                watermark_preference: convertWatermarkPref(previewWMPref),
-            },
-            queryParams,
-        );
+        const params = {
+            watermark_preference: convertWatermarkPref(previewWMPref),
+            ...queryParams,
+        };
 
         const fileVersionId = this.getFileOption(this.file.id, FILE_OPTION_FILE_VERSION_ID) || '';
 
@@ -1639,12 +1635,10 @@ class Preview extends EventEmitter {
      */
     prefetchNextFiles() {
         const { apiHost, previewWMPref, queryParams, skipServerUpdate } = this.options;
-        const params = Object.assign(
-            {
-                watermark_preference: convertWatermarkPref(previewWMPref),
-            },
-            queryParams,
-        );
+        const params = {
+            watermark_preference: convertWatermarkPref(previewWMPref),
+            ...queryParams,
+        };
 
         // Don't bother prefetching when there aren't more files or we need to skip server update
         if (this.collection.length < 2 || skipServerUpdate) {

src/lib/ProgressBar.scss

@@ -10,11 +10,11 @@
 }
 
 .bp-progress-bar {
-    background-color: $box-blue;
+    width: 0%;
     height: 3px;
+    background-color: $box-blue;
     opacity: 0;
     transition: opacity .3s ease-in, width .2s ease-in;
-    width: 0%;
 
     &.bp-is-visible {
         opacity: 1;