@canonical/react-components 0.24.0 → 0.32.0

package/dist/hooks/index.js

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "useWindowFitment", {
+Object.defineProperty(exports, "useId", {
   enumerable: true,
   get: function get() {
-    return _useWindowFitment.useWindowFitment;
+    return _useId.useId;
   }
 });
 Object.defineProperty(exports, "useListener", {
@@ -27,6 +27,12 @@ Object.defineProperty(exports, "useThrottle", {
     return _useThrottle.useThrottle;
   }
 });
+Object.defineProperty(exports, "useWindowFitment", {
+  enumerable: true,
+  get: function get() {
+    return _useWindowFitment.useWindowFitment;
+  }
+});
 
 var _useWindowFitment = require("./useWindowFitment");
 
@@ -34,4 +40,6 @@ var _useListener = require("./useListener");
 
 var _usePrevious = require("./usePrevious");
 
-var _useThrottle = require("./useThrottle");
+var _useThrottle = require("./useThrottle");
+
+var _useId = require("./useId");

package/dist/hooks/useId.d.ts

@@ -0,0 +1,6 @@
+/**
+ * A hook that returns the same random ID string on every render.
+ * Can be used as a value for HTML "id" attributes.
+ * @returns random ID string
+ */
+export declare const useId: () => string;

package/dist/hooks/useId.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useId = void 0;
+
+var _react = require("react");
+
+var _nanoid = require("nanoid");
+
+/**
+ * A hook that returns the same random ID string on every render.
+ * Can be used as a value for HTML "id" attributes.
+ * @returns random ID string
+ */
+var useId = function useId() {
+  return (0, _react.useRef)((0, _nanoid.nanoid)()).current;
+};
+
+exports.useId = useId;

package/dist/hooks/useListener.js

@@ -1,22 +1,16 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useListener = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _useThrottle = require("./useThrottle");
 
 var _usePrevious = require("./usePrevious");
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /**
  * A hook that handles attaching/removing listeners and smartly reattaching if
  * any of the attributes change.

package/dist/hooks/usePrevious.js

@@ -1,17 +1,11 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.usePrevious = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _react = require("react");
 
 /**
  * A hook to handle storing the previous value of anything.

package/dist/hooks/useThrottle.js

@@ -1,17 +1,11 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useThrottle = exports.THROTTLE_DELAY = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _react = require("react");
 
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 
@@ -19,7 +13,7 @@ function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread n
 
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
 
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
 
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
 

package/dist/hooks/useWindowFitment.js

@@ -1,20 +1,14 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useWindowFitment = void 0;
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _useListener = require("./useListener");
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /**
  * A hook to determine if an element fits on the window.
  * @param targetNode The element to try and fit on the window.

package/dist/index.d.ts

@@ -29,6 +29,7 @@ export { default as SearchAndFilter } from "./components/SearchAndFilter";
 export { default as SearchBox } from "./components/SearchBox";
 export { default as Select } from "./components/Select";
 export { default as Slider } from "./components/Slider";
+export { default as Switch } from "./components/Switch";
 export { default as Spinner } from "./components/Spinner";
 export { default as Strip } from "./components/Strip";
 export { default as SummaryButton } from "./components/SummaryButton";
@@ -80,4 +81,6 @@ export type { TableRowProps } from "./components/TableRow";
 export type { TabsProps } from "./components/Tabs";
 export type { TextareaProps } from "./components/Textarea";
 export type { TooltipProps } from "./components/Tooltip";
+export { useWindowFitment, useListener, usePrevious, useThrottle, useId, } from "./hooks";
+export type { WindowFitment } from "./hooks";
 export type { ClassName, Headings, PropsWithSpread, SortDirection, SubComponentProps, TSFixMe, ValueOf, } from "./types";

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 
 Object.defineProperty(exports, "__esModule", {
   value: true
@@ -95,16 +95,16 @@ Object.defineProperty(exports, "Form", {
     return _Form.default;
   }
 });
-Object.defineProperty(exports, "Icon", {
+Object.defineProperty(exports, "ICONS", {
   enumerable: true,
   get: function get() {
-    return _Icon.default;
+    return _Icon.ICONS;
   }
 });
-Object.defineProperty(exports, "ICONS", {
+Object.defineProperty(exports, "Icon", {
   enumerable: true,
   get: function get() {
-    return _Icon.ICONS;
+    return _Icon.default;
   }
 });
 Object.defineProperty(exports, "Input", {
@@ -143,16 +143,16 @@ Object.defineProperty(exports, "MainTable", {
     return _MainTable.default;
   }
 });
-Object.defineProperty(exports, "ModularTable", {
+Object.defineProperty(exports, "Modal", {
   enumerable: true,
   get: function get() {
-    return _ModularTable.default;
+    return _Modal.default;
   }
 });
-Object.defineProperty(exports, "Modal", {
+Object.defineProperty(exports, "ModularTable", {
   enumerable: true,
   get: function get() {
-    return _Modal.default;
+    return _ModularTable.default;
   }
 });
 Object.defineProperty(exports, "Notification", {
@@ -233,6 +233,12 @@ Object.defineProperty(exports, "SummaryButton", {
     return _SummaryButton.default;
   }
 });
+Object.defineProperty(exports, "Switch", {
+  enumerable: true,
+  get: function get() {
+    return _Switch.default;
+  }
+});
 Object.defineProperty(exports, "Table", {
   enumerable: true,
   get: function get() {
@@ -275,6 +281,36 @@ Object.defineProperty(exports, "Tooltip", {
     return _Tooltip.default;
   }
 });
+Object.defineProperty(exports, "useId", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useId;
+  }
+});
+Object.defineProperty(exports, "useListener", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useListener;
+  }
+});
+Object.defineProperty(exports, "usePrevious", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.usePrevious;
+  }
+});
+Object.defineProperty(exports, "useThrottle", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useThrottle;
+  }
+});
+Object.defineProperty(exports, "useWindowFitment", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useWindowFitment;
+  }
+});
 
 var _Accordion = _interopRequireDefault(require("./components/Accordion"));
 
@@ -338,6 +374,8 @@ var _Select = _interopRequireDefault(require("./components/Select"));
 
 var _Slider = _interopRequireDefault(require("./components/Slider"));
 
+var _Switch = _interopRequireDefault(require("./components/Switch"));
+
 var _Spinner = _interopRequireDefault(require("./components/Spinner"));
 
 var _Strip = _interopRequireDefault(require("./components/Strip"));
@@ -358,8 +396,10 @@ var _Textarea = _interopRequireDefault(require("./components/Textarea"));
 
 var _Tooltip = _interopRequireDefault(require("./components/Tooltip"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+var _hooks = require("./hooks");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.24.0",
+  "version": "0.32.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -22,81 +22,87 @@
   },
   "homepage": "/react-components/",
   "devDependencies": {
-    "@babel/cli": "7.16.0",
-    "@babel/preset-typescript": "7.16.0",
-    "@percy/storybook": "3.3.1",
-    "@storybook/addon-a11y": "6.3.12",
-    "@storybook/addon-controls": "6.3.12",
-    "@storybook/addon-docs": "6.3.12",
-    "@storybook/addons": "6.3.12",
-    "@storybook/react": "6.3.12",
-    "@storybook/theming": "6.3.12",
+    "@babel/cli": "7.17.0",
+    "@babel/eslint-parser": "7.17.0",
+    "@babel/preset-typescript": "7.16.7",
+    "@percy/cli": "1.0.0-beta.74",
+    "@percy/storybook": "4.1.0",
+    "@storybook/addon-a11y": "6.4.18",
+    "@storybook/addon-controls": "6.4.18",
+    "@storybook/addon-docs": "6.4.18",
+    "@storybook/addons": "6.4.18",
+    "@storybook/react": "6.4.18",
+    "@storybook/theming": "6.4.18",
     "@testing-library/cypress": "8.0.2",
-    "@testing-library/dom": "8.11.1",
+    "@testing-library/dom": "8.11.3",
+    "@testing-library/jest-dom": "5.16.2",
+    "@testing-library/react": "12.1.2",
     "@testing-library/react-hooks": "7.0.2",
     "@testing-library/user-event": "13.5.0",
-    "@typescript-eslint/eslint-plugin": "4.33.0",
-    "@typescript-eslint/parser": "4.33.0",
-    "@wojtekmaj/enzyme-adapter-react-17": "0.6.5",
-    "babel-eslint": "10.1.0",
-    "babel-jest": "27.3.1",
+    "@typescript-eslint/eslint-plugin": "5.10.2",
+    "@typescript-eslint/parser": "5.10.2",
+    "@wojtekmaj/enzyme-adapter-react-17": "0.6.6",
+    "babel-jest": "27.4.6",
     "babel-loader": "8.2.3",
     "babel-plugin-module-resolver": "4.1.0",
-    "babel-plugin-typescript-to-proptypes": "1.4.2",
-    "concurrently": "6.4.0",
+    "babel-plugin-typescript-to-proptypes": "2.0.0",
+    "concurrently": "7.0.0",
     "css-loader": "5.2.7",
-    "cypress": "7.7.0",
+    "cypress": "9.4.1",
     "deepmerge": "4.2.2",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
-    "eslint": "7.32.0",
+    "eslint": "8.8.0",
     "eslint-config-prettier": "8.3.0",
-    "eslint-config-react-app": "6.0.0",
+    "eslint-config-react-app": "7.0.0",
     "eslint-plugin-cypress": "2.12.1",
-    "eslint-plugin-flowtype": "5.10.0",
-    "eslint-plugin-import": "2.25.3",
+    "eslint-plugin-flowtype": "8.0.3",
+    "eslint-plugin-import": "2.25.4",
     "eslint-plugin-jsx-a11y": "6.5.1",
-    "eslint-plugin-prettier": "3.4.1",
-    "eslint-plugin-react": "7.27.1",
+    "eslint-plugin-prettier": "4.0.0",
+    "eslint-plugin-react": "7.28.0",
     "eslint-plugin-react-hooks": "4.3.0",
-    "jest": "27.3.1",
-    "node-sass": "6.0.1",
+    "eslint-plugin-testing-library": "5.0.5",
+    "jest": "27.4.7",
     "npm-package-json-lint": "5.4.2",
-    "prettier": "2.4.1",
+    "prettier": "2.5.1",
     "react": "17.0.2",
     "react-docgen-typescript-loader": "3.7.2",
     "react-dom": "17.0.2",
-    "sass-loader": "10.2.0",
+    "sass": "1.49.7",
+    "sass-loader": "10.2.1",
     "style-loader": "2.0.0",
-    "stylelint": "13.13.1",
-    "stylelint-config-prettier": "8.0.2",
-    "stylelint-config-standard": "22.0.0",
-    "stylelint-order": "4.1.0",
-    "stylelint-prettier": "1.2.0",
-    "stylelint-scss": "3.21.0",
-    "ts-jest": "27.0.7",
-    "tsc-alias": "1.4.1",
-    "typescript": "4.5.2",
-    "vanilla-framework": "2.37.1",
+    "stylelint": "14.3.0",
+    "stylelint-config-prettier": "9.0.3",
+    "stylelint-config-recommended-scss": "5.0.2",
+    "stylelint-order": "5.0.0",
+    "stylelint-prettier": "2.0.0",
+    "ts-jest": "27.1.3",
+    "tsc-alias": "1.5.0",
+    "typescript": "4.5.5",
+    "vanilla-framework": "3.1.1",
     "wait-on": "5.3.0"
   },
   "dependencies": {
-    "@types/jest": "27.0.3",
-    "@types/node": "16.11.9",
-    "@types/react": "17.0.36",
+    "@types/jest": "27.4.0",
+    "@types/node": "16.11.22",
+    "@types/react": "17.0.39",
     "@types/react-dom": "17.0.11",
-    "@types/react-table": "7.7.8",
+    "@types/react-table": "7.7.9",
     "classnames": "2.3.1",
-    "nanoid": "3.1.30",
-    "prop-types": "15.7.2",
+    "nanoid": "3.2.0",
+    "prop-types": "15.8.1",
     "react-table": "7.7.0",
-    "react-useportal": "1.0.14"
+    "react-useportal": "1.0.16"
+  },
+  "resolutions": {
+    "postcss": "^8.3.11"
   },
   "peerDependencies": {
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "vanilla-framework": "2.37.1"
+    "vanilla-framework": "3.1.1"
   },
   "scripts": {
     "build": "rm -rf dist && yarn build-local; yarn build-declaration",
@@ -108,10 +114,10 @@
     "docs": "start-storybook --port ${PORT:-9009}",
     "link-packages": "yarn install && yarn build && yarn link && cd node_modules/react && yarn link && cd ../react-dom && yarn link",
     "lint-js": "eslint src",
-    "lint-style": "stylelint src",
+    "lint-style": "stylelint src/**/*.scss",
     "lint-package-json": "npmPkgJsonLint .",
     "lint": "yarn lint-package-json && yarn lint-js && yarn lint-style",
-    "percy": "yarn build-docs && percy-storybook --build_dir=docs --widths=1280",
+    "percy": "yarn build-docs && percy storybook ./docs",
     "prepublishOnly": "yarn clean && yarn install && yarn build",
     "serve": "yarn docs",
     "start": "yarn docs",
@@ -148,10 +154,10 @@
     "snapshotSerializers": [
       "enzyme-to-json/serializer"
     ],
-    "setupFiles": [
+    "setupFilesAfterEnv": [
       "<rootDir>/src/setupTests.js"
     ],
-    "testEnvironment": "jsdom",
+    "testEnvironment": "jest-environment-jsdom",
     "moduleDirectories": [
       "node_modules",
       "src"