@canonical/react-components 0.42.0 → 0.44.0

package/dist/components/ActionButton/ActionButton.js

@@ -81,6 +81,10 @@ var ActionButton = function ActionButton(_ref) {
         }
       }, LOADER_MIN_DURATION);
     }
+    if (!loading && !showLoader) {
+      setHeight(null);
+      setWidth(null);
+    }
     return function () {
       return window.clearTimeout(loaderTimeout);
     };

package/dist/components/Card/Card.js

@@ -22,7 +22,7 @@ var Card = function Card(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   var titleId = (0, _hooks.useId)();
   return /*#__PURE__*/_react.default.createElement("div", _extends({
-    "aria-labelledby": titleId,
+    "aria-labelledby": title ? titleId : undefined,
     className: (0, _classnames.default)(className, {
       "p-card": !highlighted && !overlay,
       "p-card--highlighted": highlighted,

package/dist/components/ConfirmationButton/ConfirmationButton.d.ts

@@ -0,0 +1,25 @@
+import { ReactElement } from "react";
+import { PropsWithSpread, SubComponentProps } from "../../types";
+import { ActionButtonProps } from "../ActionButton";
+import { ConfirmationModalProps } from "../ConfirmationModal";
+export type Props = PropsWithSpread<{
+    /**
+     * Additional props to pass to the confirmation modal.
+     */
+    confirmationModalProps: SubComponentProps<ConfirmationModalProps>;
+    /**
+     * An optional text to be shown when hovering over the button.<br/>
+     * Defaults to the label of the confirm button in the modal.
+     */
+    onHoverText?: string;
+    /**
+     * Whether to enable the SHIFT+Click shortcut to skip the confirmation modal and perform the action.
+     */
+    shiftClickEnabled?: boolean;
+    /**
+     * Whether to show a hint about the SHIFT+Click shortcut to skip the confirmation modal.
+     */
+    showShiftClickHint?: boolean;
+}, ActionButtonProps>;
+export declare const ConfirmationButton: ({ confirmationModalProps, onHoverText, shiftClickEnabled, showShiftClickHint, ...actionButtonProps }: Props) => ReactElement;
+export default ConfirmationButton;

package/dist/components/ConfirmationButton/ConfirmationButton.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ConfirmationButton = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ActionButton = _interopRequireDefault(require("../ActionButton"));
+var _ConfirmationModal = _interopRequireDefault(require("../ConfirmationModal"));
+var _reactUseportal = _interopRequireDefault(require("react-useportal"));
+var _excluded = ["confirmationModalProps", "onHoverText", "shiftClickEnabled", "showShiftClickHint"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var ConfirmationButton = function ConfirmationButton(_ref) {
+  var confirmationModalProps = _ref.confirmationModalProps,
+    onHoverText = _ref.onHoverText,
+    _ref$shiftClickEnable = _ref.shiftClickEnabled,
+    shiftClickEnabled = _ref$shiftClickEnable === void 0 ? false : _ref$shiftClickEnable,
+    _ref$showShiftClickHi = _ref.showShiftClickHint,
+    showShiftClickHint = _ref$showShiftClickHi === void 0 ? false : _ref$showShiftClickHi,
+    actionButtonProps = _objectWithoutProperties(_ref, _excluded);
+  var _usePortal = (0, _reactUseportal.default)(),
+    openPortal = _usePortal.openPortal,
+    closePortal = _usePortal.closePortal,
+    isOpen = _usePortal.isOpen,
+    Portal = _usePortal.Portal;
+  var handleCancelModal = function handleCancelModal() {
+    closePortal();
+    if (confirmationModalProps.close) {
+      confirmationModalProps.close();
+    }
+  };
+  var handleConfirmModal = function handleConfirmModal(e) {
+    closePortal();
+    confirmationModalProps.onConfirm(e);
+  };
+  var handleShiftClick = function handleShiftClick(e) {
+    if (e.shiftKey) {
+      confirmationModalProps.onConfirm(e);
+    } else {
+      openPortal(e);
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isOpen && /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement(_ConfirmationModal.default, _extends({}, confirmationModalProps, {
+    close: handleCancelModal,
+    confirmButtonLabel: confirmationModalProps.confirmButtonLabel,
+    onConfirm: handleConfirmModal
+  }), confirmationModalProps.children, showShiftClickHint && /*#__PURE__*/_react.default.createElement("p", {
+    className: "p-text--small u-text--muted u-hide--small"
+  }, "Next time, you can skip this confirmation by holding", " ", /*#__PURE__*/_react.default.createElement("code", null, "SHIFT"), " and clicking the action."))), /*#__PURE__*/_react.default.createElement(_ActionButton.default, _extends({}, actionButtonProps, {
+    onClick: shiftClickEnabled ? handleShiftClick : openPortal,
+    title: onHoverText !== null && onHoverText !== void 0 ? onHoverText : confirmationModalProps.confirmButtonLabel
+  }), actionButtonProps.children));
+};
+exports.ConfirmationButton = ConfirmationButton;
+var _default = ConfirmationButton;
+exports.default = _default;

package/dist/components/ConfirmationButton/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./ConfirmationButton";
+export type { Props as ConfirmationButtonProps } from "./ConfirmationButton";

package/dist/components/ConfirmationButton/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _ConfirmationButton.default;
+  }
+});
+var _ConfirmationButton = _interopRequireDefault(require("./ConfirmationButton"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/ConfirmationModal/ConfirmationModal.d.ts

@@ -0,0 +1,33 @@
+import { MouseEvent, ReactElement } from "react";
+import type { ReactNode } from "react";
+import { PropsWithSpread, ValueOf } from "../../types";
+import { ButtonAppearance } from "../Button";
+import { ModalProps } from "../Modal";
+export type Props = PropsWithSpread<{
+    /**
+     * Label for the cancel button.
+     */
+    cancelButtonLabel?: string;
+    /**
+     * The content of the modal.
+     */
+    children: ReactNode;
+    /**
+     * Appearance of the confirm button.
+     */
+    confirmButtonAppearance?: ValueOf<typeof ButtonAppearance> | string;
+    /**
+     * Label for the confirm button.
+     */
+    confirmButtonLabel: string;
+    /**
+     * Extra elements to be placed in the button row of the modal.
+     */
+    confirmExtra?: ReactNode;
+    /**
+     * Function to perform the action prompted by the modal.
+     */
+    onConfirm: (e: MouseEvent<HTMLElement>) => void;
+}, Omit<ModalProps, "buttonRow">>;
+export declare const ConfirmationModal: ({ cancelButtonLabel, children, confirmButtonAppearance, confirmButtonLabel, confirmExtra, onConfirm, ...props }: Props) => ReactElement;
+export default ConfirmationModal;

package/dist/components/ConfirmationModal/ConfirmationModal.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ConfirmationModal = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Button = _interopRequireDefault(require("../Button"));
+var _Modal = _interopRequireDefault(require("../Modal"));
+var _excluded = ["cancelButtonLabel", "children", "confirmButtonAppearance", "confirmButtonLabel", "confirmExtra", "onConfirm"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var ConfirmationModal = function ConfirmationModal(_ref) {
+  var _ref$cancelButtonLabe = _ref.cancelButtonLabel,
+    cancelButtonLabel = _ref$cancelButtonLabe === void 0 ? "Cancel" : _ref$cancelButtonLabe,
+    children = _ref.children,
+    _ref$confirmButtonApp = _ref.confirmButtonAppearance,
+    confirmButtonAppearance = _ref$confirmButtonApp === void 0 ? "negative" : _ref$confirmButtonApp,
+    confirmButtonLabel = _ref.confirmButtonLabel,
+    confirmExtra = _ref.confirmExtra,
+    onConfirm = _ref.onConfirm,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement(_Modal.default, _extends({
+    buttonRow: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, confirmExtra, /*#__PURE__*/_react.default.createElement(_Button.default, {
+      className: "u-no-margin--bottom",
+      onClick: props.close
+    }, cancelButtonLabel), /*#__PURE__*/_react.default.createElement(_Button.default, {
+      appearance: confirmButtonAppearance,
+      className: "u-no-margin--bottom",
+      onClick: onConfirm
+    }, confirmButtonLabel))
+  }, props), children);
+};
+exports.ConfirmationModal = ConfirmationModal;
+var _default = ConfirmationModal;
+exports.default = _default;

package/dist/components/ConfirmationModal/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./ConfirmationModal";
+export type { Props as ConfirmationModalProps } from "./ConfirmationModal";

package/dist/components/ConfirmationModal/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _ConfirmationModal.default;
+  }
+});
+var _ConfirmationModal = _interopRequireDefault(require("./ConfirmationModal"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/ContextualMenu/ContextualMenu.d.ts

@@ -1,5 +1,5 @@
 import React from "react";
-import type { HTMLProps, ReactNode } from "react";
+import type { HTMLProps } from "react";
 import type { ButtonProps } from "../Button";
 import type { ContextualMenuDropdownProps } from "./ContextualMenuDropdown";
 import type { MenuLink, Position } from "./ContextualMenuDropdown";
@@ -19,7 +19,7 @@ export type Props<L> = PropsWithSpread<{
     /**
      * The menu content (if the links prop is not supplied).
      */
-    children?: ReactNode;
+    children?: ContextualMenuDropdownProps["dropdownContent"];
     /**
      * An optional class to apply to the wrapping element.
      */
@@ -79,7 +79,7 @@ export type Props<L> = PropsWithSpread<{
     /**
      * The toggle button's label.
      */
-    toggleLabel?: string | React.ReactNode | null;
+    toggleLabel?: React.ReactNode | null;
     /**
      * Whether the toggle lable or icon should appear first.
      */

package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.d.ts

@@ -1,3 +1,4 @@
+import { ReactElement } from "react";
 import type { HTMLProps, ReactNode } from "react";
 import type { ButtonProps } from "../../Button";
 import type { WindowFitment } from "../../../hooks";
@@ -20,7 +21,7 @@ export type Props<L = null> = {
     closePortal?: (evt?: MouseEvent) => void;
     constrainPanelWidth?: boolean;
     dropdownClassName?: string;
-    dropdownContent?: ReactNode;
+    dropdownContent?: ReactNode | ((close: () => void) => ReactElement);
     id?: string;
     isOpen?: boolean;
     links?: MenuLink<L>[];

package/dist/components/ContextualMenu/ContextualMenuDropdown/ContextualMenuDropdown.js

@@ -184,7 +184,7 @@ var ContextualMenuDropdown = function ContextualMenuDropdown(_ref) {
       minWidth: 0,
       maxWidth: "none"
     } : null
-  }, dropdownContent ? dropdownContent : links.map(function (item, i) {
+  }, dropdownContent ? typeof dropdownContent === "function" ? dropdownContent(closePortal) : dropdownContent : links.map(function (item, i) {
     if (Array.isArray(item)) {
       return /*#__PURE__*/_react.default.createElement("span", {
         className: "p-contextual-menu__group",

package/dist/components/EmptyState/EmptyState.d.ts

@@ -0,0 +1,22 @@
+import { ReactNode, HTMLProps, ReactElement } from "react";
+import { PropsWithSpread } from "../../types";
+export type Props = PropsWithSpread<{
+    /**
+     * The content of the empty state.
+     */
+    children?: ReactNode;
+    /**
+     * Optional class(es) to add to the wrapping element.
+     */
+    className?: string;
+    /**
+     * An image representing the empty state.
+     */
+    image: ReactNode;
+    /**
+     * The title of the empty state.
+     */
+    title: string;
+}, HTMLProps<HTMLDivElement>>;
+export declare const EmptyState: ({ children, className, image, title, ...props }: Props) => ReactElement;
+export default EmptyState;

package/dist/components/EmptyState/EmptyState.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.EmptyState = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _excluded = ["children", "className", "image", "title"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+var EmptyState = function EmptyState(_ref) {
+  var children = _ref.children,
+    className = _ref.className,
+    image = _ref.image,
+    title = _ref.title,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: className
+  }, props), image, /*#__PURE__*/_react.default.createElement("h2", {
+    className: "p-heading--4"
+  }, title), children);
+};
+exports.EmptyState = EmptyState;
+var _default = EmptyState;
+exports.default = _default;

package/dist/components/EmptyState/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from "./EmptyState";
+export type { Props as EmptyStateProps } from "./EmptyState";

package/dist/components/EmptyState/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _EmptyState.default;
+  }
+});
+var _EmptyState = _interopRequireDefault(require("./EmptyState"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/components/Icon/Icon.stories.scss

@@ -5,6 +5,7 @@
 
 @include vf-b-placeholders;
 @include vf-p-icons-common;
+@include vf-p-icon-containers;
 
 .p-icon--custom {
   @extend %icon;

package/dist/components/List/List.d.ts

@@ -1,13 +1,13 @@
 import type { HTMLProps, ReactNode } from "react";
-import type { ClassName, Headings } from "../../types";
-export type ListItem = ReactNode | ({
+import { ClassName, Headings, PropsWithSpread } from "../../types";
+export type ListItem = ReactNode | PropsWithSpread<{
     content: ReactNode;
-} & HTMLProps<HTMLLIElement>);
-export type SteppedListItem = {
+}, HTMLProps<HTMLLIElement>>;
+export type SteppedListItem = PropsWithSpread<{
     content: ReactNode;
     title: ReactNode;
     titleElement?: Headings;
-} & Omit<HTMLProps<HTMLLIElement>, "title" | "content">;
+}, HTMLProps<HTMLLIElement>>;
 export type Props = {
     /**
      * Optional class(es) to pass to the wrapping element.

package/dist/components/List/List.js

@@ -14,8 +14,6 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 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); }
-// omit global attributes of HTMLProps since they can only be string or undefined
-
 var generateItems = function generateItems(_ref) {
   var items = _ref.items,
     ticked = _ref.ticked,

package/dist/components/Notification/Notification.d.ts

@@ -10,6 +10,12 @@ export declare const NotificationSeverity: {
     readonly NEGATIVE: "negative";
     readonly POSITIVE: "positive";
 };
+export declare const DefaultTitles: {
+    caution: string;
+    information: string;
+    negative: string;
+    positive: string;
+};
 type NotificationAction = {
     label: string;
     onClick: () => void;

package/dist/components/Notification/Notification.js

@@ -1,24 +1,25 @@
 "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
 });
-exports.default = exports.NotificationSeverity = exports.Label = void 0;
+exports.default = exports.NotificationSeverity = exports.Label = exports.DefaultTitles = void 0;
 var _classnames = _interopRequireDefault(require("classnames"));
 var _react = _interopRequireWildcard(require("react"));
 var _Button = _interopRequireWildcard(require("../Button"));
 var _utils = require("../../utils");
 var _excluded = ["actions", "borderless", "children", "className", "close", "inline", "onDismiss", "severity", "status", "timeout", "timestamp", "title", "titleElement", "type"];
+var _DefaultTitles;
 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 }; }
+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); }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
 function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
-function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 var Label = /*#__PURE__*/function (Label) {
   Label["Close"] = "Close notification";
   return Label;
@@ -30,11 +31,13 @@ var NotificationSeverity = {
   NEGATIVE: "negative",
   POSITIVE: "positive"
 };
+exports.NotificationSeverity = NotificationSeverity;
+var DefaultTitles = (_DefaultTitles = {}, _defineProperty(_DefaultTitles, NotificationSeverity.CAUTION, "Warning"), _defineProperty(_DefaultTitles, NotificationSeverity.INFORMATION, "Info"), _defineProperty(_DefaultTitles, NotificationSeverity.NEGATIVE, "Error"), _defineProperty(_DefaultTitles, NotificationSeverity.POSITIVE, "Success"), _DefaultTitles);
 
 /**
  * The props for the Notification component.
  */
-exports.NotificationSeverity = NotificationSeverity;
+exports.DefaultTitles = DefaultTitles;
 var Notification = function Notification(_ref) {
   var _classNames;
   var actions = _ref.actions,

package/dist/components/NotificationProvider/NotificationProvider.d.ts

@@ -0,0 +1,5 @@
+import { FC } from "react";
+import { NotificationHelper, NotifyProviderProps } from "./types";
+export declare const NotificationProvider: FC<NotifyProviderProps>;
+export declare function useNotify(): NotificationHelper;
+export declare const NotificationConsumer: FC;

package/dist/components/NotificationProvider/NotificationProvider.js

@@ -0,0 +1,119 @@
+"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
+});
+exports.NotificationProvider = exports.NotificationConsumer = void 0;
+exports.useNotify = useNotify;
+var _react = _interopRequireWildcard(require("react"));
+var _reactRouterDom = require("react-router-dom");
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+var _messageBuilder = require("./messageBuilder");
+var _Notification = _interopRequireWildcard(require("../Notification/Notification"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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 _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 = 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; }
+var NotifyContext = /*#__PURE__*/(0, _react.createContext)({
+  notification: null,
+  clear: function clear() {
+    return undefined;
+  },
+  failure: function failure() {
+    return undefined;
+  },
+  success: function success() {
+    return undefined;
+  },
+  info: function info() {
+    return undefined;
+  },
+  queue: function queue() {
+    return undefined;
+  }
+});
+var NotificationProvider = function NotificationProvider(_ref) {
+  var children = _ref.children;
+  var _useState = (0, _react.useState)(null),
+    _useState2 = _slicedToArray(_useState, 2),
+    notification = _useState2[0],
+    setNotification = _useState2[1];
+  var _ref2 = (0, _reactRouterDom.useLocation)(),
+    state = _ref2.state,
+    pathname = _ref2.pathname;
+  var clear = function clear() {
+    return notification !== null && setNotification(null);
+  };
+  var setDeduplicated = function setDeduplicated(value) {
+    if (!(0, _isEqual.default)(value, notification)) {
+      setNotification(value);
+    }
+    return value;
+  };
+  (0, _react.useEffect)(function () {
+    if (state !== null && state !== void 0 && state.queuedNotification) {
+      setDeduplicated(state.queuedNotification);
+      window.history.replaceState({}, "");
+    } else {
+      clear();
+    }
+  }, [state, pathname]);
+  var helper = {
+    notification: notification,
+    clear: clear,
+    queue: _messageBuilder.queue,
+    failure: function failure(title, error, message, actions) {
+      return setDeduplicated((0, _messageBuilder.failure)(title, error, message, actions));
+    },
+    info: function info(message, title) {
+      return setDeduplicated((0, _messageBuilder.info)(message, title));
+    },
+    success: function success(message) {
+      return setDeduplicated((0, _messageBuilder.success)(message));
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(NotifyContext.Provider, {
+    value: helper
+  }, children);
+};
+exports.NotificationProvider = NotificationProvider;
+function useNotify() {
+  return (0, _react.useContext)(NotifyContext);
+}
+var NotificationConsumer = function NotificationConsumer() {
+  var notify = useNotify();
+  var ref = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    var _ref$current;
+    if ((_ref$current = ref.current) !== null && _ref$current !== void 0 && _ref$current.hasAttribute("scrollIntoView")) {
+      ref.current.scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+        inline: "start"
+      });
+    }
+  }, [notify.notification]);
+  if (!notify.notification) {
+    return null;
+  }
+  var _notify$notification = notify.notification,
+    actions = _notify$notification.actions,
+    title = _notify$notification.title,
+    type = _notify$notification.type,
+    message = _notify$notification.message;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: ref
+  }, /*#__PURE__*/_react.default.createElement(_Notification.default, {
+    title: title !== null && title !== void 0 ? title : _Notification.DefaultTitles[type],
+    actions: actions,
+    severity: type,
+    onDismiss: notify.clear
+  }, message));
+};
+exports.NotificationConsumer = NotificationConsumer;

package/dist/components/NotificationProvider/index.d.ts

@@ -0,0 +1,3 @@
+export { NotificationConsumer, NotificationProvider, useNotify, } from "./NotificationProvider";
+export { info, success, failure, queue } from "./messageBuilder";
+export type { NotificationAction, NotificationType, QueuedNotification, NotificationHelper, } from "./types";

package/dist/components/NotificationProvider/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "NotificationConsumer", {
+  enumerable: true,
+  get: function get() {
+    return _NotificationProvider.NotificationConsumer;
+  }
+});
+Object.defineProperty(exports, "NotificationProvider", {
+  enumerable: true,
+  get: function get() {
+    return _NotificationProvider.NotificationProvider;
+  }
+});
+Object.defineProperty(exports, "failure", {
+  enumerable: true,
+  get: function get() {
+    return _messageBuilder.failure;
+  }
+});
+Object.defineProperty(exports, "info", {
+  enumerable: true,
+  get: function get() {
+    return _messageBuilder.info;
+  }
+});
+Object.defineProperty(exports, "queue", {
+  enumerable: true,
+  get: function get() {
+    return _messageBuilder.queue;
+  }
+});
+Object.defineProperty(exports, "success", {
+  enumerable: true,
+  get: function get() {
+    return _messageBuilder.success;
+  }
+});
+Object.defineProperty(exports, "useNotify", {
+  enumerable: true,
+  get: function get() {
+    return _NotificationProvider.useNotify;
+  }
+});
+var _NotificationProvider = require("./NotificationProvider");
+var _messageBuilder = require("./messageBuilder");

package/dist/components/NotificationProvider/messageBuilder.d.ts

@@ -0,0 +1,6 @@
+import { NotificationAction, NotificationType, QueuedNotification } from "./types";
+import { ReactNode } from "react";
+export declare const queue: (notification: NotificationType) => QueuedNotification;
+export declare const info: (message: ReactNode, title?: string) => NotificationType;
+export declare const success: (message: ReactNode) => NotificationType;
+export declare const failure: (title: string, error: unknown, message?: ReactNode, actions?: NotificationAction[]) => NotificationType;

package/dist/components/NotificationProvider/messageBuilder.js

@@ -0,0 +1,41 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.success = exports.queue = exports.info = exports.failure = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Notification = require("../Notification");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var queue = function queue(notification) {
+  return {
+    state: {
+      queuedNotification: notification
+    }
+  };
+};
+exports.queue = queue;
+var info = function info(message, title) {
+  return {
+    message: message,
+    title: title,
+    type: _Notification.NotificationSeverity.INFORMATION
+  };
+};
+exports.info = info;
+var success = function success(message) {
+  return {
+    message: message,
+    type: _Notification.NotificationSeverity.POSITIVE
+  };
+};
+exports.success = success;
+var failure = function failure(title, error, message, actions) {
+  return {
+    actions: actions,
+    message: error && error instanceof Error ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, message, " ", error.message) : message,
+    title: title,
+    type: _Notification.NotificationSeverity.NEGATIVE
+  };
+};
+exports.failure = failure;

package/dist/components/NotificationProvider/types.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from "react";
+import { ValueOf } from "../../types";
+import { NotificationSeverity } from "../Notification";
+export interface NotifyProviderProps {
+    children: ReactNode;
+}
+export interface NotificationAction {
+    label: string;
+    onClick: () => void;
+}
+export interface NotificationType {
+    actions?: NotificationAction[];
+    message: ReactNode;
+    title?: string;
+    type: ValueOf<typeof NotificationSeverity>;
+}
+export interface QueuedNotification {
+    state?: {
+        queuedNotification: NotificationType | null;
+    };
+    pathname?: string;
+}
+export interface NotificationHelper {
+    notification: NotificationType | null;
+    clear: () => void;
+    failure: (title: string, error: unknown, message?: ReactNode, actions?: NotificationAction[]) => NotificationType;
+    info: (message: ReactNode, title?: string) => NotificationType;
+    success: (message: ReactNode) => NotificationType;
+    queue: (notification: NotificationType) => QueuedNotification;
+}

package/dist/components/NotificationProvider/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/components/Tooltip/Tooltip.js

@@ -228,7 +228,7 @@ var Tooltip = function Tooltip(_ref) {
     }
   }, _react.default.Children.map(children, function (child) {
     return child && /*#__PURE__*/_react.default.isValidElement(child) ? /*#__PURE__*/_react.default.cloneElement(child, {
-      "aria-describedby": tooltipId
+      "aria-describedby": isOpen ? tooltipId : undefined
     }) : child;
   })), isOpen ? /*#__PURE__*/_react.default.createElement(Portal, null, /*#__PURE__*/_react.default.createElement("span", {
     className: (0, _classnames.default)("p-tooltip--".concat(adjustedPosition), "is-detached", tooltipClassName),

package/dist/index.d.ts

@@ -9,7 +9,10 @@ export { default as Chip } from "./components/Chip";
 export { default as Code } from "./components/Code";
 export { default as CodeSnippet, CodeSnippetBlockAppearance, } from "./components/CodeSnippet";
 export { default as Col } from "./components/Col";
+export { default as ConfirmationButton } from "./components/ConfirmationButton";
+export { default as ConfirmationModal } from "./components/ConfirmationModal";
 export { default as ContextualMenu } from "./components/ContextualMenu";
+export { default as EmptyState } from "./components/EmptyState";
 export { default as Field } from "./components/Field";
 export { default as Form } from "./components/Form";
 export { default as Icon, ICONS } from "./components/Icon";
@@ -23,6 +26,7 @@ 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 { NotificationConsumer, NotificationProvider, useNotify, info, success, failure, queue, } from "./components/NotificationProvider";
 export { default as Pagination } from "./components/Pagination";
 export { default as PasswordToggle } from "./components/PasswordToggle";
 export { default as RadioInput } from "./components/RadioInput";
@@ -54,7 +58,10 @@ export type { ChipProps } from "./components/Chip";
 export type { CodeProps } from "./components/Code";
 export type { CodeSnippetProps, CodeSnippetBlockProps, CodeSnippetDropdownProps, } from "./components/CodeSnippet";
 export type { ColProps, ColSize } from "./components/Col";
+export type { ConfirmationButtonProps } from "./components/ConfirmationButton";
+export type { ConfirmationModalProps } from "./components/ConfirmationModal";
 export type { ContextualMenuProps, ContextualMenuDropdownProps, MenuLink, Position, } from "./components/ContextualMenu";
+export type { EmptyStateProps } from "./components/EmptyState";
 export type { FieldProps } from "./components/Field";
 export type { FormProps } from "./components/Form";
 export type { IconProps } from "./components/Icon";
@@ -67,6 +74,7 @@ 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 { NotificationAction, NotificationType, QueuedNotification, NotificationHelper, } from "./components/NotificationProvider";
 export type { PaginationProps } from "./components/Pagination";
 export type { RadioInputProps } from "./components/RadioInput";
 export type { RowProps } from "./components/Row";

package/dist/index.js

@@ -82,12 +82,30 @@ Object.defineProperty(exports, "Col", {
     return _Col.default;
   }
 });
+Object.defineProperty(exports, "ConfirmationButton", {
+  enumerable: true,
+  get: function get() {
+    return _ConfirmationButton.default;
+  }
+});
+Object.defineProperty(exports, "ConfirmationModal", {
+  enumerable: true,
+  get: function get() {
+    return _ConfirmationModal.default;
+  }
+});
 Object.defineProperty(exports, "ContextualMenu", {
   enumerable: true,
   get: function get() {
     return _ContextualMenu.default;
   }
 });
+Object.defineProperty(exports, "EmptyState", {
+  enumerable: true,
+  get: function get() {
+    return _EmptyState.default;
+  }
+});
 Object.defineProperty(exports, "Field", {
   enumerable: true,
   get: function get() {
@@ -172,6 +190,18 @@ Object.defineProperty(exports, "Notification", {
     return _Notification.default;
   }
 });
+Object.defineProperty(exports, "NotificationConsumer", {
+  enumerable: true,
+  get: function get() {
+    return _NotificationProvider.NotificationConsumer;
+  }
+});
+Object.defineProperty(exports, "NotificationProvider", {
+  enumerable: true,
+  get: function get() {
+    return _NotificationProvider.NotificationProvider;
+  }
+});
 Object.defineProperty(exports, "NotificationSeverity", {
   enumerable: true,
   get: function get() {
@@ -310,6 +340,18 @@ Object.defineProperty(exports, "Tooltip", {
     return _Tooltip.default;
   }
 });
+Object.defineProperty(exports, "failure", {
+  enumerable: true,
+  get: function get() {
+    return _NotificationProvider.failure;
+  }
+});
+Object.defineProperty(exports, "info", {
+  enumerable: true,
+  get: function get() {
+    return _NotificationProvider.info;
+  }
+});
 Object.defineProperty(exports, "isNavigationAnchor", {
   enumerable: true,
   get: function get() {
@@ -322,6 +364,18 @@ Object.defineProperty(exports, "isNavigationButton", {
     return _utils.isNavigationButton;
   }
 });
+Object.defineProperty(exports, "queue", {
+  enumerable: true,
+  get: function get() {
+    return _NotificationProvider.queue;
+  }
+});
+Object.defineProperty(exports, "success", {
+  enumerable: true,
+  get: function get() {
+    return _NotificationProvider.success;
+  }
+});
 Object.defineProperty(exports, "useClickOutside", {
   enumerable: true,
   get: function get() {
@@ -340,6 +394,12 @@ Object.defineProperty(exports, "useListener", {
     return _hooks.useListener;
   }
 });
+Object.defineProperty(exports, "useNotify", {
+  enumerable: true,
+  get: function get() {
+    return _NotificationProvider.useNotify;
+  }
+});
 Object.defineProperty(exports, "useOnEscapePressed", {
   enumerable: true,
   get: function get() {
@@ -381,7 +441,10 @@ 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 _ConfirmationButton = _interopRequireDefault(require("./components/ConfirmationButton"));
+var _ConfirmationModal = _interopRequireDefault(require("./components/ConfirmationModal"));
 var _ContextualMenu = _interopRequireDefault(require("./components/ContextualMenu"));
+var _EmptyState = _interopRequireDefault(require("./components/EmptyState"));
 var _Field = _interopRequireDefault(require("./components/Field"));
 var _Form = _interopRequireDefault(require("./components/Form"));
 var _Icon = _interopRequireWildcard(require("./components/Icon"));
@@ -395,6 +458,7 @@ 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 _NotificationProvider = require("./components/NotificationProvider");
 var _Pagination = _interopRequireDefault(require("./components/Pagination"));
 var _PasswordToggle = _interopRequireDefault(require("./components/PasswordToggle"));
 var _RadioInput = _interopRequireDefault(require("./components/RadioInput"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "0.42.0",
+  "version": "0.44.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": "Huw Wilkins <huw.wilkins@canonical.com>",
@@ -22,10 +22,10 @@
   },
   "homepage": "https://canonical.github.io/react-components",
   "devDependencies": {
-    "@babel/cli": "7.21.5",
-    "@babel/eslint-parser": "7.21.3",
-    "@babel/preset-typescript": "7.21.5",
-    "@percy/cli": "1.24.0",
+    "@babel/cli": "7.22.5",
+    "@babel/eslint-parser": "7.22.5",
+    "@babel/preset-typescript": "7.22.5",
+    "@percy/cli": "1.26.1",
     "@percy/storybook": "4.3.6",
     "@storybook/addon-a11y": "6.5.16",
     "@storybook/addon-controls": "6.5.16",
@@ -36,21 +36,22 @@
     "@storybook/react": "6.5.16",
     "@storybook/theming": "6.5.16",
     "@testing-library/cypress": "9.0.0",
-    "@testing-library/dom": "9.2.0",
+    "@testing-library/dom": "9.3.1",
     "@testing-library/jest-dom": "5.16.5",
-    "@testing-library/react": "13.4.0",
+    "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "14.4.3",
-    "@typescript-eslint/eslint-plugin": "5.59.1",
-    "@typescript-eslint/parser": "5.59.1",
+    "@types/react-router-dom": "5.3.3",
+    "@typescript-eslint/eslint-plugin": "5.60.1",
+    "@typescript-eslint/parser": "5.60.1",
     "babel-jest": "27.5.1",
     "babel-loader": "9.1.2",
     "babel-plugin-module-resolver": "5.0.0",
     "babel-plugin-typescript-to-proptypes": "2.1.0",
-    "concurrently": "7.6.0",
-    "css-loader": "6.7.3",
-    "cypress": "12.11.0",
+    "concurrently": "8.2.0",
+    "css-loader": "6.8.1",
+    "cypress": "12.16.0",
     "deepmerge": "4.3.1",
-    "eslint": "8.39.0",
+    "eslint": "8.43.0",
     "eslint-config-prettier": "8.8.0",
     "eslint-config-react-app": "7.0.1",
     "eslint-plugin-cypress": "2.13.3",
@@ -60,17 +61,17 @@
     "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.3",
+    "eslint-plugin-testing-library": "5.11.0",
     "jest": "27.5.1",
     "npm-package-json-lint": "5.4.2",
     "prettier": "2.8.8",
     "react": "18.2.0",
     "react-docgen-typescript-loader": "3.7.2",
     "react-dom": "18.2.0",
-    "sass": "1.62.1",
+    "sass": "1.63.6",
     "sass-loader": "10.4.1",
-    "style-loader": "3.3.2",
-    "stylelint": "14.16.1",
+    "style-loader": "3.3.3",
+    "stylelint": "15.10.1",
     "stylelint-config-prettier": "9.0.5",
     "stylelint-config-recommended-scss": "5.0.2",
     "stylelint-order": "5.0.0",
@@ -78,25 +79,26 @@
     "ts-jest": "27.1.5",
     "tsc-alias": "1.8.6",
     "typescript": "4.9.5",
-    "vanilla-framework": "3.14.0",
+    "vanilla-framework": "4.0.0",
     "wait-on": "5.3.0",
-    "webpack": "5.81.0"
+    "webpack": "5.88.0"
   },
   "dependencies": {
     "@types/jest": "27.5.2",
-    "@types/node": "18.16.3",
-    "@types/react": "18.2.0",
-    "@types/react-dom": "17.0.20",
+    "@types/node": "18.16.18",
+    "@types/react": "18.2.14",
+    "@types/react-dom": "18.2.6",
     "@types/react-table": "7.7.14",
     "classnames": "2.3.2",
     "nanoid": "3.3.6",
     "prop-types": "15.8.1",
+    "react-router-dom": "6.6.1",
     "react-table": "7.8.0",
     "react-useportal": "1.0.18"
   },
   "resolutions": {
-    "@types/react": "18.2.0",
-    "@types/react-dom": "17.0.20",
+    "@types/react": "18.2.14",
+    "@types/react-dom": "18.2.6",
     "postcss": "^8.3.11"
   },
   "peerDependencies": {
@@ -104,7 +106,7 @@
     "@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.14.0"
+    "vanilla-framework": "^3.15.1 || ^4.0.0"
   },
   "scripts": {
     "build": "rm -rf dist && yarn build-local; yarn build-declaration",