@canonical/react-components 0.40.1 → 0.42.0

package/dist/hooks/usePagination.js

@@ -4,21 +4,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.usePagination = usePagination;
-
 var _react = require("react");
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 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 _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
 /**
  * A hook that handles pagination.
  * @param data - The data array to paginate.
@@ -27,37 +19,33 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * @param {number} [options.initialPage=1] - Initial page number. Defaults to 1.
  * @param {boolean} [options.autoResetPage=false] - Whether to reset the page number to 1 when the data changes.
  */
+
 function usePagination(data, options) {
   var _data$length;
-
   var defaultOptions = {
     initialPage: 1,
     autoResetPage: false
   };
-
   var _Object$assign = Object.assign(defaultOptions, options),
-      itemsPerPage = _Object$assign.itemsPerPage,
-      initialPage = _Object$assign.initialPage,
-      autoResetPage = _Object$assign.autoResetPage;
-
+    itemsPerPage = _Object$assign.itemsPerPage,
+    initialPage = _Object$assign.initialPage,
+    autoResetPage = _Object$assign.autoResetPage;
   var totalItems = (_data$length = data === null || data === void 0 ? void 0 : data.length) !== null && _data$length !== void 0 ? _data$length : 0;
   var initialPageIndex = initialPage > 0 ? initialPage - 1 : 0;
-
   var _useState = (0, _react.useState)(initialPageIndex),
-      _useState2 = _slicedToArray(_useState, 2),
-      pageIndex = _useState2[0],
-      setPageIndex = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    pageIndex = _useState2[0],
+    setPageIndex = _useState2[1];
   var startIndex = typeof itemsPerPage === "number" ? pageIndex * itemsPerPage : 0;
-
   var paginate = function paginate(pageNumber) {
     return setPageIndex(pageNumber - 1);
   };
-
   (0, _react.useEffect)(function () {
     if (typeof itemsPerPage === "number" && startIndex >= totalItems) {
-      !autoResetPage && Math.floor(totalItems / itemsPerPage) > 0 ? // go to the last available page if the current page is out of bounds
-      setPageIndex(Math.floor(totalItems / itemsPerPage) - 1) : // go to the initial page if autoResetPage is true
+      !autoResetPage && Math.floor(totalItems / itemsPerPage) > 0 ?
+      // go to the last available page if the current page is out of bounds
+      setPageIndex(Math.floor(totalItems / itemsPerPage) - 1) :
+      // go to the initial page if autoResetPage is true
       setPageIndex(0);
     }
   }, [pageIndex, startIndex, setPageIndex, totalItems, itemsPerPage, autoResetPage]);

package/dist/hooks/usePrevious.js

@@ -4,9 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.usePrevious = void 0;
-
 var _react = require("react");
-
 /**
  * A hook to handle storing the previous value of anything.
  * @param value - The value to watch.
@@ -21,5 +19,4 @@ var usePrevious = function usePrevious(value) {
   }, [value]);
   return ref.current;
 };
-
 exports.usePrevious = usePrevious;

package/dist/hooks/useThrottle.js

@@ -4,24 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useThrottle = exports.THROTTLE_DELAY = void 0;
-
 var _react = require("react");
-
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
 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" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
 function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var THROTTLE_DELAY = 1000 / 60;
 exports.THROTTLE_DELAY = THROTTLE_DELAY;
-
 // eslint-disable-line @typescript-eslint/no-explicit-any
 
 /**
@@ -39,22 +30,18 @@ var useThrottle = function useThrottle(callback) {
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-
     lastArgs.current = args;
-
     var callCallback = function callCallback() {
       callback.apply(void 0, _toConsumableArray(lastArgs.current));
       lastCall.current = Date.now();
       timeout.current = null;
     };
-
     var createTimeout = function createTimeout() {
       timeout.current = window.setTimeout(function () {
         callCallback();
         timeout.current = null;
       }, delay);
     };
-
     if (!lastCall.current) {
       // Initially call the callback and start a timeout for the next call.
       callCallback();
@@ -75,5 +62,4 @@ var useThrottle = function useThrottle(callback) {
   }, []);
   return throttle;
 };
-
 exports.useThrottle = useThrottle;

package/dist/hooks/useWindowFitment.d.ts

@@ -2,24 +2,36 @@ export type WindowFitment = {
     fromTop: {
         fitsAbove: boolean;
         fitsBelow: boolean;
+        spaceAbove: number;
+        spaceBelow: number;
     };
     fromBottom: {
         fitsAbove: boolean;
         fitsBelow: boolean;
+        spaceAbove: number;
+        spaceBelow: number;
     };
     fromLeft: {
         fitsLeft: boolean;
         fitsRight: boolean;
+        spaceLeft: number;
+        spaceRight: number;
     };
     fromRight: {
         fitsLeft: boolean;
         fitsRight: boolean;
+        spaceLeft: number;
+        spaceRight: number;
     };
     fromCenter: {
         fitsLeft: boolean;
         fitsRight: boolean;
         fitsAbove: boolean;
         fitsBelow: boolean;
+        spaceLeft: number;
+        spaceRight: number;
+        spaceAbove: number;
+        spaceBelow: number;
         fitsCentered: {
             fitsAbove: boolean;
             fitsBelow: boolean;

package/dist/hooks/useWindowFitment.js

@@ -4,11 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useWindowFitment = void 0;
-
 var _react = require("react");
-
 var _useListener = require("./useListener");
-
 /**
  * A hook to determine if an element fits on the window.
  * @param targetNode The element to try and fit on the window.
@@ -27,7 +24,6 @@ var useWindowFitment = function useWindowFitment(targetNode, referenceNode, call
   var htmlRef = (0, _react.useRef)(document.querySelector("html"));
   var update = (0, _react.useCallback)(function (evt) {
     var referenceCoordinates;
-
     if (fromMouse) {
       if (evt) {
         referenceCoordinates = {
@@ -41,17 +37,15 @@ var useWindowFitment = function useWindowFitment(targetNode, referenceNode, call
     } else if (referenceNode) {
       referenceCoordinates = referenceNode.getBoundingClientRect();
     }
-
     if (shouldCheck && targetNode && referenceCoordinates) {
       var _targetNode$getBoundi = targetNode.getBoundingClientRect(),
-          targetHeight = _targetNode$getBoundi.height,
-          targetWidth = _targetNode$getBoundi.width;
-
+        targetHeight = _targetNode$getBoundi.height,
+        targetWidth = _targetNode$getBoundi.width;
       var _referenceCoordinates = referenceCoordinates,
-          referenceHeight = _referenceCoordinates.height,
-          referenceLeft = _referenceCoordinates.left,
-          referenceTop = _referenceCoordinates.top,
-          referenceWidth = _referenceCoordinates.width;
+        referenceHeight = _referenceCoordinates.height,
+        referenceLeft = _referenceCoordinates.left,
+        referenceTop = _referenceCoordinates.top,
+        referenceWidth = _referenceCoordinates.width;
       var referenceBottom = referenceTop + referenceHeight;
       var referenceRight = referenceLeft + referenceWidth;
       var referenceCenterX = referenceLeft + referenceWidth / 2;
@@ -67,25 +61,37 @@ var useWindowFitment = function useWindowFitment(targetNode, referenceNode, call
       callback({
         fromTop: {
           fitsAbove: referenceTop - heightIncludingSpace > windowTop,
-          fitsBelow: referenceTop + heightIncludingSpace < windowBottom
+          fitsBelow: referenceTop + heightIncludingSpace < windowBottom,
+          spaceAbove: Math.abs(windowTop - referenceTop),
+          spaceBelow: windowBottom - referenceTop
         },
         fromBottom: {
           fitsAbove: referenceBottom - heightIncludingSpace > windowTop,
-          fitsBelow: referenceBottom + heightIncludingSpace < windowBottom
+          fitsBelow: referenceBottom + heightIncludingSpace < windowBottom,
+          spaceAbove: Math.abs(windowTop - referenceBottom),
+          spaceBelow: windowBottom - referenceBottom
         },
         fromLeft: {
           fitsLeft: referenceLeft - widthIncludingSpace > windowLeft,
-          fitsRight: referenceLeft + widthIncludingSpace < windowRight
+          fitsRight: referenceLeft + widthIncludingSpace < windowRight,
+          spaceLeft: Math.abs(windowLeft - referenceLeft),
+          spaceRight: windowRight - referenceLeft
         },
         fromRight: {
           fitsLeft: referenceRight - widthIncludingSpace > windowLeft,
-          fitsRight: referenceRight + widthIncludingSpace < windowRight
+          fitsRight: referenceRight + widthIncludingSpace < windowRight,
+          spaceLeft: Math.abs(windowLeft - referenceRight),
+          spaceRight: windowRight - referenceRight
         },
         fromCenter: {
           fitsLeft: referenceCenterX - widthIncludingSpace > windowLeft,
           fitsRight: referenceCenterX + widthIncludingSpace < windowRight,
           fitsAbove: referenceCenterY - heightIncludingSpace > windowTop,
           fitsBelow: referenceCenterY + heightIncludingSpace < windowBottom,
+          spaceAbove: Math.abs(windowTop - referenceCenterY),
+          spaceBelow: windowBottom - referenceCenterY,
+          spaceLeft: Math.abs(windowLeft - referenceCenterX),
+          spaceRight: windowRight - referenceCenterX,
           fitsCentered: {
             fitsLeft: referenceCenterX - widthFromCenter > windowLeft,
             fitsRight: referenceCenterX + widthFromCenter < windowRight,
@@ -105,5 +111,4 @@ var useWindowFitment = function useWindowFitment(targetNode, referenceNode, call
     }
   }, [fromMouse, update]);
 };
-
 exports.useWindowFitment = useWindowFitment;

package/dist/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 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
 });
@@ -371,105 +370,54 @@ Object.defineProperty(exports, "useWindowFitment", {
     return _hooks.useWindowFitment;
   }
 });
-
 var _Accordion = _interopRequireDefault(require("./components/Accordion"));
-
 var _ActionButton = _interopRequireDefault(require("./components/ActionButton"));
-
 var _ArticlePagination = _interopRequireDefault(require("./components/ArticlePagination"));
-
 var _Badge = _interopRequireDefault(require("./components/Badge"));
-
 var _Button = _interopRequireWildcard(require("./components/Button"));
-
 var _Card = _interopRequireDefault(require("./components/Card"));
-
 var _CheckboxInput = _interopRequireDefault(require("./components/CheckboxInput"));
-
 var _Chip = _interopRequireDefault(require("./components/Chip"));
-
 var _Code = _interopRequireDefault(require("./components/Code"));
-
 var _CodeSnippet = _interopRequireWildcard(require("./components/CodeSnippet"));
-
 var _Col = _interopRequireDefault(require("./components/Col"));
-
 var _ContextualMenu = _interopRequireDefault(require("./components/ContextualMenu"));
-
 var _Field = _interopRequireDefault(require("./components/Field"));
-
 var _Form = _interopRequireDefault(require("./components/Form"));
-
 var _Icon = _interopRequireWildcard(require("./components/Icon"));
-
 var _Input = _interopRequireDefault(require("./components/Input"));
-
 var _Label = _interopRequireDefault(require("./components/Label"));
-
 var _Link = _interopRequireDefault(require("./components/Link"));
-
 var _List = _interopRequireDefault(require("./components/List"));
-
 var _Loader = _interopRequireDefault(require("./components/Loader"));
-
 var _MainTable = _interopRequireDefault(require("./components/MainTable"));
-
 var _ModularTable = _interopRequireDefault(require("./components/ModularTable"));
-
 var _Navigation = _interopRequireDefault(require("./components/Navigation"));
-
 var _Modal = _interopRequireDefault(require("./components/Modal"));
-
 var _Notification = _interopRequireWildcard(require("./components/Notification"));
-
 var _Pagination = _interopRequireDefault(require("./components/Pagination"));
-
 var _PasswordToggle = _interopRequireDefault(require("./components/PasswordToggle"));
-
 var _RadioInput = _interopRequireDefault(require("./components/RadioInput"));
-
 var _Row = _interopRequireDefault(require("./components/Row"));
-
 var _SearchAndFilter = _interopRequireDefault(require("./components/SearchAndFilter"));
-
 var _SearchBox = _interopRequireDefault(require("./components/SearchBox"));
-
 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 _StatusLabel = _interopRequireWildcard(require("./components/StatusLabel"));
-
 var _Strip = _interopRequireDefault(require("./components/Strip"));
-
 var _SummaryButton = _interopRequireDefault(require("./components/SummaryButton"));
-
 var _Table = _interopRequireDefault(require("./components/Table"));
-
 var _TableCell = _interopRequireDefault(require("./components/TableCell"));
-
 var _TableHeader = _interopRequireDefault(require("./components/TableHeader"));
-
 var _TableRow = _interopRequireDefault(require("./components/TableRow"));
-
 var _Tabs = _interopRequireDefault(require("./components/Tabs"));
-
 var _Textarea = _interopRequireDefault(require("./components/Textarea"));
-
 var _Tooltip = _interopRequireDefault(require("./components/Tooltip"));
-
 var _hooks = require("./hooks");
-
 var _utils = require("./utils");
-
 var _enums = require("./enums");
-
 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, 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/dist/utils.js

@@ -5,15 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isNavigationButton = exports.isNavigationAnchor = exports.highlightSubString = exports.IS_DEV = void 0;
 var IS_DEV = process.env.NODE_ENV === "development";
+
 /**
  * Find substring and wrap in <strong /> tag
  * @param {string} str - The string to search
  * @param {string} subString - The substring to find
  * @return {Obj} newStr - Object with text and match bool
  */
-
 exports.IS_DEV = IS_DEV;
-
 var highlightSubString = function highlightSubString(str, subString) {
   if (typeof str !== "string" || typeof subString !== "string") {
     return {
@@ -21,7 +20,6 @@ var highlightSubString = function highlightSubString(str, subString) {
       match: false
     };
   }
-
   var caseInsensitiveRegex = new RegExp(subString, "gi");
   var newStr = str.replace(caseInsensitiveRegex, function (match) {
     return "<strong>".concat(match, "</strong>");
@@ -31,27 +29,22 @@ var highlightSubString = function highlightSubString(str, subString) {
     match: newStr !== str
   };
 };
+
 /**
  * Whether a navigation item is an anchor.
  * @param link - The navigation item.
  */
-
-
 exports.highlightSubString = highlightSubString;
-
 var isNavigationAnchor = function isNavigationAnchor(link) {
   return !!link.url;
 };
+
 /**
  * Whether a navigation item is a button.
  * @param link - The navigation item.
  */
-
-
 exports.isNavigationAnchor = isNavigationAnchor;
-
 var isNavigationButton = function isNavigationButton(link) {
   return !link.url;
 };
-
 exports.isNavigationButton = isNavigationButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.40.1",
+  "version": "0.42.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -22,11 +22,11 @@
   },
   "homepage": "https://canonical.github.io/react-components",
   "devDependencies": {
-    "@babel/cli": "7.20.7",
-    "@babel/eslint-parser": "7.19.1",
-    "@babel/preset-typescript": "7.18.6",
-    "@percy/cli": "1.18.0",
-    "@percy/storybook": "4.3.4",
+    "@babel/cli": "7.21.5",
+    "@babel/eslint-parser": "7.21.3",
+    "@babel/preset-typescript": "7.21.5",
+    "@percy/cli": "1.24.0",
+    "@percy/storybook": "4.3.6",
     "@storybook/addon-a11y": "6.5.16",
     "@storybook/addon-controls": "6.5.16",
     "@storybook/addon-docs": "6.5.16",
@@ -36,74 +36,75 @@
     "@storybook/react": "6.5.16",
     "@storybook/theming": "6.5.16",
     "@testing-library/cypress": "9.0.0",
-    "@testing-library/dom": "8.20.0",
+    "@testing-library/dom": "9.2.0",
     "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "12.1.5",
-    "@testing-library/react-hooks": "8.0.1",
+    "@testing-library/react": "13.4.0",
     "@testing-library/user-event": "14.4.3",
-    "@typescript-eslint/eslint-plugin": "5.51.0",
-    "@typescript-eslint/parser": "5.51.0",
+    "@typescript-eslint/eslint-plugin": "5.59.1",
+    "@typescript-eslint/parser": "5.59.1",
     "babel-jest": "27.5.1",
     "babel-loader": "9.1.2",
     "babel-plugin-module-resolver": "5.0.0",
-    "babel-plugin-typescript-to-proptypes": "2.0.0",
+    "babel-plugin-typescript-to-proptypes": "2.1.0",
     "concurrently": "7.6.0",
     "css-loader": "6.7.3",
-    "cypress": "12.7.0",
-    "deepmerge": "4.3.0",
-    "eslint": "8.33.0",
-    "eslint-config-prettier": "8.6.0",
+    "cypress": "12.11.0",
+    "deepmerge": "4.3.1",
+    "eslint": "8.39.0",
+    "eslint-config-prettier": "8.8.0",
     "eslint-config-react-app": "7.0.1",
-    "eslint-plugin-cypress": "2.12.1",
+    "eslint-plugin-cypress": "2.13.3",
     "eslint-plugin-flowtype": "8.0.3",
     "eslint-plugin-import": "2.27.5",
     "eslint-plugin-jsx-a11y": "6.7.1",
     "eslint-plugin-prettier": "4.2.1",
     "eslint-plugin-react": "7.32.2",
     "eslint-plugin-react-hooks": "4.6.0",
-    "eslint-plugin-testing-library": "5.10.0",
+    "eslint-plugin-testing-library": "5.10.3",
     "jest": "27.5.1",
     "npm-package-json-lint": "5.4.2",
-    "prettier": "2.8.4",
-    "react": "17.0.2",
+    "prettier": "2.8.8",
+    "react": "18.2.0",
     "react-docgen-typescript-loader": "3.7.2",
-    "react-dom": "17.0.2",
-    "sass": "1.58.0",
+    "react-dom": "18.2.0",
+    "sass": "1.62.1",
     "sass-loader": "10.4.1",
-    "style-loader": "3.3.1",
+    "style-loader": "3.3.2",
     "stylelint": "14.16.1",
-    "stylelint-config-prettier": "9.0.4",
+    "stylelint-config-prettier": "9.0.5",
     "stylelint-config-recommended-scss": "5.0.2",
     "stylelint-order": "5.0.0",
     "stylelint-prettier": "2.0.0",
     "ts-jest": "27.1.5",
-    "tsc-alias": "1.8.2",
+    "tsc-alias": "1.8.6",
     "typescript": "4.9.5",
-    "vanilla-framework": "3.13.0",
+    "vanilla-framework": "3.14.0",
     "wait-on": "5.3.0",
-    "webpack": "5.76.0"
+    "webpack": "5.81.0"
   },
   "dependencies": {
     "@types/jest": "27.5.2",
-    "@types/node": "18.14.2",
-    "@types/react": "18.0.28",
-    "@types/react-dom": "17.0.18",
+    "@types/node": "18.16.3",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "17.0.20",
     "@types/react-table": "7.7.14",
     "classnames": "2.3.2",
-    "nanoid": "3.3.4",
+    "nanoid": "3.3.6",
     "prop-types": "15.8.1",
     "react-table": "7.8.0",
-    "react-useportal": "1.0.17"
+    "react-useportal": "1.0.18"
   },
   "resolutions": {
-    "@types/react": "18.0.28",
-    "@types/react-dom": "17.0.18",
+    "@types/react": "18.2.0",
+    "@types/react-dom": "17.0.20",
     "postcss": "^8.3.11"
   },
   "peerDependencies": {
+    "@types/react": "^17.0.2 || ^18.0.0",
+    "@types/react-dom": "^17.0.2 || ^18.0.0",
     "react": "^17.0.2 || ^18.0.0",
     "react-dom": "^17.0.2 || ^18.0.0",
-    "vanilla-framework": "3.13.0"
+    "vanilla-framework": "3.14.0"
   },
   "scripts": {
     "build": "rm -rf dist && yarn build-local; yarn build-declaration",