@canonical/react-components 0.35.0 → 0.37.1

package/dist/hooks/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "useClickOutside", {
+  enumerable: true,
+  get: function get() {
+    return _useClickOutside.useClickOutside;
+  }
+});
 Object.defineProperty(exports, "useId", {
   enumerable: true,
   get: function get() {
@@ -15,6 +21,18 @@ Object.defineProperty(exports, "useListener", {
     return _useListener.useListener;
   }
 });
+Object.defineProperty(exports, "useOnEscapePressed", {
+  enumerable: true,
+  get: function get() {
+    return _useOnEscapePressed.useOnEscapePressed;
+  }
+});
+Object.defineProperty(exports, "usePagination", {
+  enumerable: true,
+  get: function get() {
+    return _usePagination.usePagination;
+  }
+});
 Object.defineProperty(exports, "usePrevious", {
   enumerable: true,
   get: function get() {
@@ -34,12 +52,18 @@ Object.defineProperty(exports, "useWindowFitment", {
   }
 });
 
-var _useWindowFitment = require("./useWindowFitment");
+var _useClickOutside = require("./useClickOutside");
+
+var _useId = require("./useId");
 
 var _useListener = require("./useListener");
 
+var _useOnEscapePressed = require("./useOnEscapePressed");
+
 var _usePrevious = require("./usePrevious");
 
 var _useThrottle = require("./useThrottle");
 
-var _useId = require("./useId");
+var _usePagination = require("./usePagination");
+
+var _useWindowFitment = require("./useWindowFitment");

package/dist/hooks/useClickOutside.d.ts

@@ -0,0 +1,7 @@
+import { MutableRefObject } from "react";
+/**
+ * Handle clicks outside an element.
+ * @returns An id and ref to pass to the element to handle clicks
+ * outside of.
+ */
+export declare const useClickOutside: <E extends HTMLElement>(onClickOutside: () => void) => [MutableRefObject<E>, string];

package/dist/hooks/useClickOutside.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useClickOutside = void 0;
+
+var _react = require("react");
+
+var _useId = require("./useId");
+
+/**
+ * Handle clicks outside an element.
+ * @returns An id and ref to pass to the element to handle clicks
+ * outside of.
+ */
+var useClickOutside = function useClickOutside(onClickOutside) {
+  var wrapperRef = (0, _react.useRef)(null);
+  var id = (0, _useId.useId)();
+  var handleClickOutside = (0, _react.useCallback)(function (evt) {
+    var _evt$target, _wrapperRef$current;
+
+    var target = evt.target; // The target might be something like an SVG node which doesn't provide
+    // the class name as a string.
+
+    var isValidTarget = typeof (evt === null || evt === void 0 ? void 0 : (_evt$target = evt.target) === null || _evt$target === void 0 ? void 0 : _evt$target.className) === "string";
+
+    if (!isValidTarget || wrapperRef.current && !((_wrapperRef$current = wrapperRef.current) !== null && _wrapperRef$current !== void 0 && _wrapperRef$current.contains(target)) && target.id !== id) {
+      onClickOutside();
+    }
+  }, [id, onClickOutside]);
+  (0, _react.useEffect)(function () {
+    document.addEventListener("click", handleClickOutside, false);
+    return function () {
+      return document.removeEventListener("click", handleClickOutside, false);
+    };
+  }, [handleClickOutside]);
+  return [wrapperRef, id];
+};
+
+exports.useClickOutside = useClickOutside;

package/dist/hooks/useOnEscapePressed.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Handle the escape key pressed.
+ */
+export declare const useOnEscapePressed: (onEscape: () => void) => void;

package/dist/hooks/useOnEscapePressed.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useOnEscapePressed = void 0;
+
+var _react = require("react");
+
+/**
+ * Handle the escape key pressed.
+ */
+var useOnEscapePressed = function useOnEscapePressed(onEscape) {
+  var keyDown = (0, _react.useCallback)(function (evt) {
+    if (evt.code === "Escape") {
+      onEscape();
+    }
+  }, [onEscape]);
+  (0, _react.useEffect)(function () {
+    document.addEventListener("keydown", keyDown);
+    return function () {
+      document.removeEventListener("keydown", keyDown);
+    };
+  }, [keyDown]);
+};
+
+exports.useOnEscapePressed = useOnEscapePressed;

package/dist/hooks/usePagination.d.ts

@@ -0,0 +1,19 @@
+/**
+ * A hook that handles pagination.
+ * @param data - The data array to paginate.
+ * @param {Object} options
+ * @param {number} [options.itemsPerPage] - Number of items per page. Returns all items if no value has been provided.
+ * @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.
+ */
+export declare function usePagination<D, I = number | null>(data: Array<D>, options?: {
+    itemsPerPage: I;
+    initialPage?: number;
+    autoResetPage?: boolean;
+}): {
+    pageData: Array<D>;
+    currentPage: number;
+    paginate: (pageNumber: number) => void;
+    itemsPerPage: I;
+    totalItems: number;
+};

package/dist/hooks/usePagination.js

@@ -0,0 +1,74 @@
+"use strict";
+
+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 _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/**
+ * A hook that handles pagination.
+ * @param data - The data array to paginate.
+ * @param {Object} options
+ * @param {number} [options.itemsPerPage] - Number of items per page. Returns all items if no value has been provided.
+ * @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;
+
+  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];
+
+  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
+      setPageIndex(0);
+    }
+  }, [pageIndex, startIndex, setPageIndex, totalItems, itemsPerPage, autoResetPage]);
+  var pageData = (0, _react.useMemo)(function () {
+    return typeof itemsPerPage === "number" ? data === null || data === void 0 ? void 0 : data.slice(startIndex, startIndex + itemsPerPage) : data;
+  }, [startIndex, data, itemsPerPage]);
+  return {
+    pageData: pageData,
+    currentPage: pageIndex + 1,
+    paginate: paginate,
+    itemsPerPage: itemsPerPage,
+    totalItems: totalItems
+  };
+}

package/dist/index.d.ts

@@ -19,6 +19,7 @@ export { default as List } from "./components/List";
 export { default as Loader } from "./components/Loader";
 export { default as MainTable } from "./components/MainTable";
 export { default as ModularTable } from "./components/ModularTable";
+export { default as Navigation } from "./components/Navigation";
 export { default as Modal } from "./components/Modal";
 export { default as Notification, NotificationSeverity, } from "./components/Notification";
 export { default as Pagination } from "./components/Pagination";
@@ -31,6 +32,7 @@ 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 StatusLabel, StatusLabelAppearance, } from "./components/StatusLabel";
 export { default as Strip } from "./components/Strip";
 export { default as SummaryButton } from "./components/SummaryButton";
 export { default as Table } from "./components/Table";
@@ -63,6 +65,7 @@ export type { ListProps } from "./components/List";
 export type { MainTableProps } from "./components/MainTable";
 export type { ModularTableProps } from "./components/ModularTable";
 export type { ModalProps } from "./components/Modal";
+export type { GenerateLink, LogoProps, NavigationProps, NavItem, NavLink, NavLinkAnchor, NavLinkBase, NavLinkButton, } from "./components/Navigation";
 export type { NotificationProps } from "./components/Notification";
 export type { PaginationProps } from "./components/Pagination";
 export type { RadioInputProps } from "./components/RadioInput";
@@ -72,6 +75,7 @@ export type { SearchBoxProps } from "./components/SearchBox";
 export type { SelectProps } from "./components/Select";
 export type { SliderProps } from "./components/Slider";
 export type { SpinnerProps } from "./components/Spinner";
+export type { StatusLabelProps } from "./components/StatusLabel";
 export type { StripProps } from "./components/Strip";
 export type { SummaryButtonProps } from "./components/SummaryButton";
 export type { TableProps } from "./components/Table";
@@ -81,6 +85,8 @@ 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 { useClickOutside, useId, useListener, useOnEscapePressed, usePrevious, useThrottle, useWindowFitment, } from "./hooks";
 export type { WindowFitment } from "./hooks";
+export { isNavigationAnchor, isNavigationButton } from "./utils";
 export type { ClassName, Headings, PropsWithSpread, SortDirection, SubComponentProps, TSFixMe, ValueOf, } from "./types";
+export { Theme } from "./enums";

package/dist/index.js

@@ -155,6 +155,12 @@ Object.defineProperty(exports, "ModularTable", {
     return _ModularTable.default;
   }
 });
+Object.defineProperty(exports, "Navigation", {
+  enumerable: true,
+  get: function get() {
+    return _Navigation.default;
+  }
+});
 Object.defineProperty(exports, "Notification", {
   enumerable: true,
   get: function get() {
@@ -221,6 +227,18 @@ Object.defineProperty(exports, "Spinner", {
     return _Spinner.default;
   }
 });
+Object.defineProperty(exports, "StatusLabel", {
+  enumerable: true,
+  get: function get() {
+    return _StatusLabel.default;
+  }
+});
+Object.defineProperty(exports, "StatusLabelAppearance", {
+  enumerable: true,
+  get: function get() {
+    return _StatusLabel.StatusLabelAppearance;
+  }
+});
 Object.defineProperty(exports, "Strip", {
   enumerable: true,
   get: function get() {
@@ -275,12 +293,36 @@ Object.defineProperty(exports, "Textarea", {
     return _Textarea.default;
   }
 });
+Object.defineProperty(exports, "Theme", {
+  enumerable: true,
+  get: function get() {
+    return _enums.Theme;
+  }
+});
 Object.defineProperty(exports, "Tooltip", {
   enumerable: true,
   get: function get() {
     return _Tooltip.default;
   }
 });
+Object.defineProperty(exports, "isNavigationAnchor", {
+  enumerable: true,
+  get: function get() {
+    return _utils.isNavigationAnchor;
+  }
+});
+Object.defineProperty(exports, "isNavigationButton", {
+  enumerable: true,
+  get: function get() {
+    return _utils.isNavigationButton;
+  }
+});
+Object.defineProperty(exports, "useClickOutside", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useClickOutside;
+  }
+});
 Object.defineProperty(exports, "useId", {
   enumerable: true,
   get: function get() {
@@ -293,6 +335,12 @@ Object.defineProperty(exports, "useListener", {
     return _hooks.useListener;
   }
 });
+Object.defineProperty(exports, "useOnEscapePressed", {
+  enumerable: true,
+  get: function get() {
+    return _hooks.useOnEscapePressed;
+  }
+});
 Object.defineProperty(exports, "usePrevious", {
   enumerable: true,
   get: function get() {
@@ -354,6 +402,8 @@ 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"));
@@ -378,6 +428,8 @@ 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"));
@@ -398,6 +450,10 @@ 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; }

package/dist/utils.d.ts

@@ -1,3 +1,4 @@
+import { NavLink, NavLinkAnchor, NavLinkButton } from "./components/Navigation";
 export declare const IS_DEV: boolean;
 /**
  * Find substring and wrap in <strong /> tag
@@ -9,3 +10,13 @@ export declare const highlightSubString: (str?: string, subString?: string) => {
     text: string;
     match: boolean;
 };
+/**
+ * Whether a navigation item is an anchor.
+ * @param link - The navigation item.
+ */
+export declare const isNavigationAnchor: (link: NavLink) => link is NavLinkAnchor;
+/**
+ * Whether a navigation item is a button.
+ * @param link - The navigation item.
+ */
+export declare const isNavigationButton: (link: NavLink) => link is NavLinkButton;

package/dist/utils.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.highlightSubString = exports.IS_DEV = void 0;
+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
@@ -31,5 +31,27 @@ 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.highlightSubString = highlightSubString;
+exports.isNavigationButton = isNavigationButton;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.35.0",
+  "version": "0.37.1",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -22,87 +22,89 @@
   },
   "homepage": "/react-components/",
   "devDependencies": {
-    "@babel/cli": "7.17.6",
-    "@babel/eslint-parser": "7.17.0",
-    "@babel/preset-typescript": "7.16.7",
-    "@percy/cli": "1.0.5",
-    "@percy/storybook": "4.2.0",
-    "@storybook/addon-a11y": "6.4.20",
-    "@storybook/addon-controls": "6.4.20",
-    "@storybook/addon-docs": "6.4.20",
-    "@storybook/addons": "6.4.20",
-    "@storybook/react": "6.4.20",
-    "@storybook/theming": "6.4.20",
+    "@babel/cli": "7.17.10",
+    "@babel/eslint-parser": "7.18.2",
+    "@babel/preset-typescript": "7.17.12",
+    "@percy/cli": "1.2.1",
+    "@percy/storybook": "4.2.1",
+    "@storybook/addon-a11y": "6.5.6",
+    "@storybook/addon-controls": "6.5.6",
+    "@storybook/addon-docs": "6.5.6",
+    "@storybook/addons": "6.5.6",
+    "@storybook/react": "6.5.6",
+    "@storybook/theming": "6.5.6",
     "@testing-library/cypress": "8.0.2",
-    "@testing-library/dom": "8.12.0",
-    "@testing-library/jest-dom": "5.16.3",
-    "@testing-library/react": "12.1.4",
+    "@testing-library/dom": "8.13.0",
+    "@testing-library/jest-dom": "5.16.4",
+    "@testing-library/react": "12.1.5",
     "@testing-library/react-hooks": "7.0.2",
     "@testing-library/user-event": "13.5.0",
-    "@typescript-eslint/eslint-plugin": "5.18.0",
-    "@typescript-eslint/parser": "5.18.0",
+    "@typescript-eslint/eslint-plugin": "5.27.0",
+    "@typescript-eslint/parser": "5.27.0",
     "@wojtekmaj/enzyme-adapter-react-17": "0.6.7",
     "babel-jest": "27.5.1",
-    "babel-loader": "8.2.4",
+    "babel-loader": "8.2.5",
     "babel-plugin-module-resolver": "4.1.0",
     "babel-plugin-typescript-to-proptypes": "2.0.0",
-    "concurrently": "7.1.0",
+    "concurrently": "7.2.1",
     "css-loader": "5.2.7",
-    "cypress": "9.5.3",
+    "cypress": "9.7.0",
     "deepmerge": "4.2.2",
     "enzyme": "3.11.0",
     "enzyme-adapter-react-16": "1.15.6",
     "enzyme-to-json": "3.6.2",
-    "eslint": "8.12.0",
+    "eslint": "8.16.0",
     "eslint-config-prettier": "8.5.0",
-    "eslint-config-react-app": "7.0.0",
+    "eslint-config-react-app": "7.0.1",
     "eslint-plugin-cypress": "2.12.1",
     "eslint-plugin-flowtype": "8.0.3",
-    "eslint-plugin-import": "2.25.4",
+    "eslint-plugin-import": "2.26.0",
     "eslint-plugin-jsx-a11y": "6.5.1",
     "eslint-plugin-prettier": "4.0.0",
-    "eslint-plugin-react": "7.29.4",
-    "eslint-plugin-react-hooks": "4.4.0",
-    "eslint-plugin-testing-library": "5.2.1",
+    "eslint-plugin-react": "7.30.0",
+    "eslint-plugin-react-hooks": "4.5.0",
+    "eslint-plugin-testing-library": "5.5.1",
     "jest": "27.5.1",
     "npm-package-json-lint": "5.4.2",
     "prettier": "2.6.2",
     "react": "17.0.2",
     "react-docgen-typescript-loader": "3.7.2",
     "react-dom": "17.0.2",
-    "sass": "1.49.11",
+    "sass": "1.52.2",
     "sass-loader": "10.2.1",
     "style-loader": "2.0.0",
-    "stylelint": "14.6.1",
+    "stylelint": "14.8.5",
     "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.4",
-    "tsc-alias": "1.6.5",
-    "typescript": "4.6.3",
-    "vanilla-framework": "3.2.0",
+    "ts-jest": "27.1.5",
+    "tsc-alias": "1.6.8",
+    "typescript": "4.7.2",
+    "vanilla-framework": "3.4.0",
     "wait-on": "5.3.0"
   },
   "dependencies": {
-    "@types/jest": "27.4.1",
-    "@types/node": "16.11.26",
-    "@types/react": "17.0.43",
-    "@types/react-dom": "17.0.14",
-    "@types/react-table": "7.7.10",
+    "@types/jest": "27.5.2",
+    "@types/node": "16.11.38",
+    "@types/react": "17.0.45",
+    "@types/react-dom": "17.0.17",
+    "@types/react-table": "7.7.12",
     "classnames": "2.3.1",
-    "nanoid": "3.3.2",
+    "nanoid": "3.3.4",
     "prop-types": "15.8.1",
-    "react-table": "7.7.0",
+    "react-table": "7.8.0",
     "react-useportal": "1.0.16"
   },
   "resolutions": {
+    "@types/react": "17.0.45",
+    "@types/react-dom": "17.0.17",
     "postcss": "^8.3.11"
   },
   "peerDependencies": {
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "vanilla-framework": "3.2.0"
+    "vanilla-framework": "3.4.0"
   },
   "scripts": {
     "build": "rm -rf dist && yarn build-local; yarn build-declaration",