@canonical/react-components 0.41.0 → 0.43.0

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

@@ -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
 });
@@ -83,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() {
@@ -173,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() {
@@ -311,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() {
@@ -323,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() {
@@ -341,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() {
@@ -371,105 +430,58 @@ 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 _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"));
-
 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 _NotificationProvider = require("./components/NotificationProvider");
 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.41.0",
+  "version": "0.43.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,22 +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": "12.1.5",
-    "@testing-library/react-hooks": "8.0.1",
+    "@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",
@@ -61,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": "17.0.2",
+    "react": "18.2.0",
     "react-docgen-typescript-loader": "3.7.2",
-    "react-dom": "17.0.2",
-    "sass": "1.62.1",
+    "react-dom": "18.2.0",
+    "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",
@@ -79,31 +79,34 @@
     "ts-jest": "27.1.5",
     "tsc-alias": "1.8.6",
     "typescript": "4.9.5",
-    "vanilla-framework": "3.14.0",
+    "vanilla-framework": "3.15.1",
     "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": {
+    "@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.14.0"
+    "vanilla-framework": "3.15.1"
   },
   "scripts": {
     "build": "rm -rf dist && yarn build-local; yarn build-declaration",