@canonical/react-components 2.9.0 → 2.11.0

package/dist/components/CustomLayout/CustomLayout.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import type { HTMLProps, ReactNode } from "react";
+export type Props = {
+    /**
+     * This prop can be used to replace the header area of the panel when the default implementation is not sufficient.
+     */
+    header?: ReactNode;
+    /**
+     * The main content.
+     */
+    children: ReactNode;
+    /**
+     * Classes to apply to the main content.
+     */
+    mainClassName?: string;
+    /**
+     * Classes to apply to the main area.
+     */
+    contentClassName?: string;
+} & HTMLProps<HTMLDivElement>;
+declare const CustomLayout: ({ header, children, mainClassName, contentClassName, }: Props) => React.JSX.Element;
+export default CustomLayout;

package/dist/components/CustomLayout/CustomLayout.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ApplicationLayout = require("../ApplicationLayout");
+var _Panel = _interopRequireDefault(require("../Panel"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const CustomLayout = _ref => {
+  let {
+    header,
+    children,
+    mainClassName,
+    contentClassName
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_ApplicationLayout.AppMain, {
+    className: mainClassName,
+    id: "main-content"
+  }, /*#__PURE__*/_react.default.createElement(_Panel.default, {
+    contentClassName: contentClassName,
+    header: header
+  }, children));
+};
+var _default = exports.default = CustomLayout;

package/dist/components/CustomLayout/CustomLayout.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import CustomLayout from "./CustomLayout";
+declare const meta: Meta<typeof CustomLayout>;
+export default meta;
+type Story = StoryObj<typeof CustomLayout>;
+export declare const Default: Story;
+export declare const Content: Story;

package/dist/components/CustomLayout/CustomLayout.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Default = exports.Content = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Panel = _interopRequireDefault(require("../Panel"));
+var _CustomLayout = _interopRequireDefault(require("./CustomLayout"));
+var _AppMain = _interopRequireDefault(require("../ApplicationLayout/AppMain"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+const meta = {
+  component: _CustomLayout.default,
+  tags: ["autodocs"]
+};
+var _default = exports.default = meta;
+const Default = exports.Default = {
+  args: {
+    children: "CustomLayout"
+  }
+};
+const Content = exports.Content = {
+  render: () => {
+    return /*#__PURE__*/_react.default.createElement(_AppMain.default, {
+      id: "main-content"
+    }, /*#__PURE__*/_react.default.createElement(_Panel.default, null, "test"));
+  }
+};

package/dist/components/CustomLayout/CustomLayout.test.d.ts

@@ -0,0 +1 @@
+export {};

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

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

package/dist/components/CustomLayout/index.js

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

package/dist/components/Notifications/ToastNotification/ToastNotification.stories.js

@@ -34,6 +34,7 @@ const PreloadedList = () => {
     toastNotify.success("Settings saved successfully");
     toastNotify.info("Your changes are syncing in the background");
     toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.");
+    toastNotify.caution("You have unsaved changes.");
     toastNotify.toggleListView();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

package/dist/components/Notifications/ToastNotification/ToastNotificationProvider.d.ts

@@ -8,9 +8,10 @@ export type ToastNotificationType = NotificationType & {
 };
 interface ToastNotificationHelper {
     notifications: ToastNotificationType[];
-    success: (message: ReactNode, actions?: NotificationAction[]) => ToastNotificationType;
-    info: (message: ReactNode, title?: string) => ToastNotificationType;
+    success: (message: ReactNode, actions?: NotificationAction[], title?: string) => ToastNotificationType;
+    info: (message: ReactNode, title?: string, actions?: NotificationAction[]) => ToastNotificationType;
     failure: (title: string, error: unknown, message?: ReactNode, actions?: NotificationAction[]) => ToastNotificationType;
+    caution: (message: ReactNode, actions?: NotificationAction[], title?: string) => ToastNotificationType;
     clear: (notification?: ToastNotificationType[]) => void;
     toggleListView: () => void;
     isListView: boolean;
@@ -25,11 +26,12 @@ export type GroupedNotificationCount = {
 Wrap your application with this provider, and in any child component you can get the helper with `const toastNotify = useToastNotification()` to trigger notifications.
 Notifications automatically dismiss after a delay unless manually dismissed or expanded.
 
-| **Values**                        | **Description**                                                                 |
-|----------------------------------|---------------------------------------------------------------------------------|
-| `toastNotify.success()`          | Displays a success toast. Optionally accepts actions.                          |
+| **Values**                       | **Description**                                                                |
+|----------------------------------|--------------------------------------------------------------------------------|
+| `toastNotify.success()`          | Displays a success toast. Optionally accepts actions and a title.              |
 | `toastNotify.info()`             | Displays an info toast. Optionally accepts a custom title.                     |
 | `toastNotify.failure()`          | Displays a failure toast with an error and optional message or actions.        |
+| `toastNotify.caution()`          | Displays a caution toast. Optionally accepts actions and a title.              |
 | `toastNotify.clear()`            | Clears specific toasts, or all toasts if none are specified.                   |
 | `toastNotify.toggleListView()`   | Toggles the notification list view open or closed.                             |
 | `toastNotify.countBySeverity`    | Returns the count of notifications grouped by severity (e.g., success, info).  |
@@ -41,6 +43,7 @@ Some example usages:
 toastNotify.success("Your changes have been saved.");
 toastNotify.success("Your changes have been saved.", [{label: "Undo", onClick: () => console.log("Undo clicked")}]);
 ```
+
 2. **Show an info toast:**
 ```
 toastNotify.info("Your changes are syncing in the background.");
@@ -52,16 +55,25 @@ toastNotify.info("Your changes are syncing in the background.", "Syncing");
 toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.");
 toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.", [{label: "Retry", onClick: () => console.log("Retry clicked")}]);
 ```
-4. **Clear notifications:**
+
+4. **Show a caution toast:**
+```
+toastNotify.caution("Your changes have not been saved.");
+toastNotify.caution("Your changes have not been saved.", [{label: "Undo", onClick: () => console.log("Undo clicked")}]);
+```
+
+5. **Clear notifications:**
 ```
 toastNotify.clear(); // clears all toast notifications
 toastNotify.clear([notificationId]); // clears specific toast notifications
 ```
-5. **Toggle the notification list view:**
+
+6. **Toggle the notification list view:**
 ```
 toastNotify.toggleListView();
 ```
-6. **Get the count of notifications by severity:**
+
+7. **Get the count of notifications by severity:**
 ```
 const count = toastNotify.countBySeverity;
 console.log(count.positive);

package/dist/components/Notifications/ToastNotification/ToastNotificationProvider.js

@@ -21,12 +21,14 @@ const initialNotification = {
 const ToastNotificationContext = /*#__PURE__*/(0, _react.createContext)({
   /** List of all active toast notifications */
   notifications: [],
-  /** Show a success toast. Optionally pass actions. */
+  /** Show a success toast. Optionally pass actions and a title. */
   success: () => initialNotification,
-  /** Show an info toast. Optionally pass a custom title. */
+  /** Show an info toast. Optionally pass a custom title and actions. */
   info: () => initialNotification,
   /** Show a failure toast with an error and optional message/actions. */
   failure: () => initialNotification,
+  /** Show a caution toast. Optionally pass actions and a title. */
+  caution: () => initialNotification,
   /** Clear one or more specific toasts, or all if none provided. */
   clear: () => null,
   /** Toggle between single toast view and list view. */
@@ -43,11 +45,12 @@ const ToastNotificationContext = /*#__PURE__*/(0, _react.createContext)({
 Wrap your application with this provider, and in any child component you can get the helper with `const toastNotify = useToastNotification()` to trigger notifications.
 Notifications automatically dismiss after a delay unless manually dismissed or expanded.
 
-| **Values**                        | **Description**                                                                 |
-|----------------------------------|---------------------------------------------------------------------------------|
-| `toastNotify.success()`          | Displays a success toast. Optionally accepts actions.                          |
+| **Values**                       | **Description**                                                                |
+|----------------------------------|--------------------------------------------------------------------------------|
+| `toastNotify.success()`          | Displays a success toast. Optionally accepts actions and a title.              |
 | `toastNotify.info()`             | Displays an info toast. Optionally accepts a custom title.                     |
 | `toastNotify.failure()`          | Displays a failure toast with an error and optional message or actions.        |
+| `toastNotify.caution()`          | Displays a caution toast. Optionally accepts actions and a title.              |
 | `toastNotify.clear()`            | Clears specific toasts, or all toasts if none are specified.                   |
 | `toastNotify.toggleListView()`   | Toggles the notification list view open or closed.                             |
 | `toastNotify.countBySeverity`    | Returns the count of notifications grouped by severity (e.g., success, info).  |
@@ -59,6 +62,7 @@ Some example usages:
 toastNotify.success("Your changes have been saved.");
 toastNotify.success("Your changes have been saved.", [{label: "Undo", onClick: () => console.log("Undo clicked")}]);
 ```
+
 2. **Show an info toast:**
 ```
 toastNotify.info("Your changes are syncing in the background.");
@@ -70,16 +74,25 @@ toastNotify.info("Your changes are syncing in the background.", "Syncing");
 toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.");
 toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.", [{label: "Retry", onClick: () => console.log("Retry clicked")}]);
 ```
-4. **Clear notifications:**
+
+4. **Show a caution toast:**
+```
+toastNotify.caution("Your changes have not been saved.");
+toastNotify.caution("Your changes have not been saved.", [{label: "Undo", onClick: () => console.log("Undo clicked")}]);
+```
+
+5. **Clear notifications:**
 ```
 toastNotify.clear(); // clears all toast notifications
 toastNotify.clear([notificationId]); // clears specific toast notifications
 ```
-5. **Toggle the notification list view:**
+
+6. **Toggle the notification list view:**
 ```
 toastNotify.toggleListView();
 ```
-6. **Get the count of notifications by severity:**
+
+7. **Get the count of notifications by severity:**
 ```
 const count = toastNotify.countBySeverity;
 console.log(count.positive);
@@ -174,12 +187,24 @@ const ToastNotificationProvider = _ref => {
   const helper = {
     notifications,
     failure: (title, error, message, actions) => addNotification((0, _NotificationProvider.failure)(title, error, message, actions)),
-    info: (message, title) => addNotification((0, _NotificationProvider.info)(message, title)),
-    success: (message, actions) => addNotification({
+    info: (message, title, actions) => addNotification({
       message,
       actions,
+      title,
+      type: _.NotificationSeverity.INFORMATION
+    }),
+    success: (message, actions, title) => addNotification({
+      message,
+      actions,
+      title,
       type: _.NotificationSeverity.POSITIVE
     }),
+    caution: (message, actions, title) => addNotification({
+      message,
+      actions,
+      title,
+      type: _.NotificationSeverity.CAUTION
+    }),
     clear,
     toggleListView,
     isListView: showList,

package/dist/components/Spinner/Spinner.d.ts

@@ -21,9 +21,15 @@ export type Props = {
      * The politeness setting of the spinner alert.
      */
     ariaLive?: "assertive" | "off" | "polite";
+    /**
+     * Whether the Loader is replacing the main component in the application layout.
+     * In that case, the loader has to be wrapped with a main panel of the application
+     * layout. This is important for the mobile view. This prop enables the wrapping.
+     */
+    isMainComponent?: boolean;
 } & HTMLProps<HTMLSpanElement>;
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Spin](https://docs.vanillaframework.io/settings/animation-settings/#spin) animation.
  */
-declare const Spinner: ({ className, text, isLight, ariaLive, role, ...props }: Props) => React.JSX.Element;
+declare const Spinner: ({ className, text, isLight, ariaLive, role, isMainComponent, ...props }: Props) => React.JSX.Element;
 export default Spinner;

package/dist/components/Spinner/Spinner.js

@@ -7,6 +7,7 @@ exports.default = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _CustomLayout = _interopRequireDefault(require("../CustomLayout"));
 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); }
 /**
@@ -19,9 +20,10 @@ const Spinner = _ref => {
     isLight = false,
     ariaLive = "polite",
     role = "alert",
+    isMainComponent = false,
     ...props
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement("span", _extends({}, props, {
+  const loader = /*#__PURE__*/_react.default.createElement("span", _extends({}, props, {
     className: (0, _classnames.default)(className, "p-text--default"),
     role: role,
     "aria-live": ariaLive
@@ -30,11 +32,13 @@ const Spinner = _ref => {
       "is-light": isLight
     })
   }, text ? "" : "Loading"), text && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, "\u2002", /*#__PURE__*/_react.default.createElement("span", null, text)));
+  return isMainComponent ? /*#__PURE__*/_react.default.createElement(_CustomLayout.default, null, loader) : loader;
 };
 Spinner.propTypes = {
   isLight: _propTypes.default.bool,
   text: _propTypes.default.string,
   role: _propTypes.default.string,
-  ariaLive: _propTypes.default.oneOf(["assertive", "off", "polite"])
+  ariaLive: _propTypes.default.oneOf(["assertive", "off", "polite"]),
+  isMainComponent: _propTypes.default.bool
 };
 var _default = exports.default = Spinner;

package/dist/esm/components/CustomLayout/CustomLayout.d.ts

@@ -0,0 +1,22 @@
+import React from "react";
+import type { HTMLProps, ReactNode } from "react";
+export type Props = {
+    /**
+     * This prop can be used to replace the header area of the panel when the default implementation is not sufficient.
+     */
+    header?: ReactNode;
+    /**
+     * The main content.
+     */
+    children: ReactNode;
+    /**
+     * Classes to apply to the main content.
+     */
+    mainClassName?: string;
+    /**
+     * Classes to apply to the main area.
+     */
+    contentClassName?: string;
+} & HTMLProps<HTMLDivElement>;
+declare const CustomLayout: ({ header, children, mainClassName, contentClassName, }: Props) => React.JSX.Element;
+export default CustomLayout;

package/dist/esm/components/CustomLayout/CustomLayout.js

@@ -0,0 +1,19 @@
+import React from "react";
+import { AppMain } from "../ApplicationLayout";
+import Panel from "../Panel";
+var CustomLayout = _ref => {
+  var {
+    header,
+    children,
+    mainClassName,
+    contentClassName
+  } = _ref;
+  return /*#__PURE__*/React.createElement(AppMain, {
+    className: mainClassName,
+    id: "main-content"
+  }, /*#__PURE__*/React.createElement(Panel, {
+    contentClassName: contentClassName,
+    header: header
+  }, children));
+};
+export default CustomLayout;

package/dist/esm/components/CustomLayout/CustomLayout.stories.d.ts

@@ -0,0 +1,7 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import CustomLayout from "./CustomLayout";
+declare const meta: Meta<typeof CustomLayout>;
+export default meta;
+type Story = StoryObj<typeof CustomLayout>;
+export declare const Default: Story;
+export declare const Content: Story;

package/dist/esm/components/CustomLayout/CustomLayout.stories.js

@@ -0,0 +1,21 @@
+import React from "react";
+import Panel from "../Panel";
+import CustomLayout from "./CustomLayout";
+import AppMain from "../ApplicationLayout/AppMain";
+var meta = {
+  component: CustomLayout,
+  tags: ["autodocs"]
+};
+export default meta;
+export var Default = {
+  args: {
+    children: "CustomLayout"
+  }
+};
+export var Content = {
+  render: () => {
+    return /*#__PURE__*/React.createElement(AppMain, {
+      id: "main-content"
+    }, /*#__PURE__*/React.createElement(Panel, null, "test"));
+  }
+};

package/dist/esm/components/CustomLayout/CustomLayout.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/components/CustomLayout/index.d.ts

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

package/dist/esm/components/CustomLayout/index.js

@@ -0,0 +1 @@
+export { default } from "./CustomLayout";

package/dist/esm/components/Notifications/ToastNotification/ToastNotification.stories.js

@@ -25,6 +25,7 @@ var PreloadedList = () => {
     toastNotify.success("Settings saved successfully");
     toastNotify.info("Your changes are syncing in the background");
     toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.");
+    toastNotify.caution("You have unsaved changes.");
     toastNotify.toggleListView();
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);

package/dist/esm/components/Notifications/ToastNotification/ToastNotificationProvider.d.ts

@@ -8,9 +8,10 @@ export type ToastNotificationType = NotificationType & {
 };
 interface ToastNotificationHelper {
     notifications: ToastNotificationType[];
-    success: (message: ReactNode, actions?: NotificationAction[]) => ToastNotificationType;
-    info: (message: ReactNode, title?: string) => ToastNotificationType;
+    success: (message: ReactNode, actions?: NotificationAction[], title?: string) => ToastNotificationType;
+    info: (message: ReactNode, title?: string, actions?: NotificationAction[]) => ToastNotificationType;
     failure: (title: string, error: unknown, message?: ReactNode, actions?: NotificationAction[]) => ToastNotificationType;
+    caution: (message: ReactNode, actions?: NotificationAction[], title?: string) => ToastNotificationType;
     clear: (notification?: ToastNotificationType[]) => void;
     toggleListView: () => void;
     isListView: boolean;
@@ -25,11 +26,12 @@ export type GroupedNotificationCount = {
 Wrap your application with this provider, and in any child component you can get the helper with `const toastNotify = useToastNotification()` to trigger notifications.
 Notifications automatically dismiss after a delay unless manually dismissed or expanded.
 
-| **Values**                        | **Description**                                                                 |
-|----------------------------------|---------------------------------------------------------------------------------|
-| `toastNotify.success()`          | Displays a success toast. Optionally accepts actions.                          |
+| **Values**                       | **Description**                                                                |
+|----------------------------------|--------------------------------------------------------------------------------|
+| `toastNotify.success()`          | Displays a success toast. Optionally accepts actions and a title.              |
 | `toastNotify.info()`             | Displays an info toast. Optionally accepts a custom title.                     |
 | `toastNotify.failure()`          | Displays a failure toast with an error and optional message or actions.        |
+| `toastNotify.caution()`          | Displays a caution toast. Optionally accepts actions and a title.              |
 | `toastNotify.clear()`            | Clears specific toasts, or all toasts if none are specified.                   |
 | `toastNotify.toggleListView()`   | Toggles the notification list view open or closed.                             |
 | `toastNotify.countBySeverity`    | Returns the count of notifications grouped by severity (e.g., success, info).  |
@@ -41,6 +43,7 @@ Some example usages:
 toastNotify.success("Your changes have been saved.");
 toastNotify.success("Your changes have been saved.", [{label: "Undo", onClick: () => console.log("Undo clicked")}]);
 ```
+
 2. **Show an info toast:**
 ```
 toastNotify.info("Your changes are syncing in the background.");
@@ -52,16 +55,25 @@ toastNotify.info("Your changes are syncing in the background.", "Syncing");
 toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.");
 toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.", [{label: "Retry", onClick: () => console.log("Retry clicked")}]);
 ```
-4. **Clear notifications:**
+
+4. **Show a caution toast:**
+```
+toastNotify.caution("Your changes have not been saved.");
+toastNotify.caution("Your changes have not been saved.", [{label: "Undo", onClick: () => console.log("Undo clicked")}]);
+```
+
+5. **Clear notifications:**
 ```
 toastNotify.clear(); // clears all toast notifications
 toastNotify.clear([notificationId]); // clears specific toast notifications
 ```
-5. **Toggle the notification list view:**
+
+6. **Toggle the notification list view:**
 ```
 toastNotify.toggleListView();
 ```
-6. **Get the count of notifications by severity:**
+
+7. **Get the count of notifications by severity:**
 ```
 const count = toastNotify.countBySeverity;
 console.log(count.positive);

package/dist/esm/components/Notifications/ToastNotification/ToastNotificationProvider.js

@@ -3,7 +3,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 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(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
-import { failure as _failure, info as _info } from "../../NotificationProvider";
+import { failure as _failure } from "../../NotificationProvider";
 import { NotificationSeverity } from "./..";
 import ToastNotification from "./ToastNotification";
 import ToastNotificationList from "./ToastNotificationList";
@@ -18,12 +18,14 @@ var initialNotification = {
 var ToastNotificationContext = /*#__PURE__*/createContext({
   /** List of all active toast notifications */
   notifications: [],
-  /** Show a success toast. Optionally pass actions. */
+  /** Show a success toast. Optionally pass actions and a title. */
   success: () => initialNotification,
-  /** Show an info toast. Optionally pass a custom title. */
+  /** Show an info toast. Optionally pass a custom title and actions. */
   info: () => initialNotification,
   /** Show a failure toast with an error and optional message/actions. */
   failure: () => initialNotification,
+  /** Show a caution toast. Optionally pass actions and a title. */
+  caution: () => initialNotification,
   /** Clear one or more specific toasts, or all if none provided. */
   clear: () => null,
   /** Toggle between single toast view and list view. */
@@ -40,11 +42,12 @@ var ToastNotificationContext = /*#__PURE__*/createContext({
 Wrap your application with this provider, and in any child component you can get the helper with `const toastNotify = useToastNotification()` to trigger notifications.
 Notifications automatically dismiss after a delay unless manually dismissed or expanded.
 
-| **Values**                        | **Description**                                                                 |
-|----------------------------------|---------------------------------------------------------------------------------|
-| `toastNotify.success()`          | Displays a success toast. Optionally accepts actions.                          |
+| **Values**                       | **Description**                                                                |
+|----------------------------------|--------------------------------------------------------------------------------|
+| `toastNotify.success()`          | Displays a success toast. Optionally accepts actions and a title.              |
 | `toastNotify.info()`             | Displays an info toast. Optionally accepts a custom title.                     |
 | `toastNotify.failure()`          | Displays a failure toast with an error and optional message or actions.        |
+| `toastNotify.caution()`          | Displays a caution toast. Optionally accepts actions and a title.              |
 | `toastNotify.clear()`            | Clears specific toasts, or all toasts if none are specified.                   |
 | `toastNotify.toggleListView()`   | Toggles the notification list view open or closed.                             |
 | `toastNotify.countBySeverity`    | Returns the count of notifications grouped by severity (e.g., success, info).  |
@@ -56,6 +59,7 @@ Some example usages:
 toastNotify.success("Your changes have been saved.");
 toastNotify.success("Your changes have been saved.", [{label: "Undo", onClick: () => console.log("Undo clicked")}]);
 ```
+
 2. **Show an info toast:**
 ```
 toastNotify.info("Your changes are syncing in the background.");
@@ -67,16 +71,25 @@ toastNotify.info("Your changes are syncing in the background.", "Syncing");
 toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.");
 toastNotify.failure("Save failed", new Error("500 Internal Server Error"), "Please try again.", [{label: "Retry", onClick: () => console.log("Retry clicked")}]);
 ```
-4. **Clear notifications:**
+
+4. **Show a caution toast:**
+```
+toastNotify.caution("Your changes have not been saved.");
+toastNotify.caution("Your changes have not been saved.", [{label: "Undo", onClick: () => console.log("Undo clicked")}]);
+```
+
+5. **Clear notifications:**
 ```
 toastNotify.clear(); // clears all toast notifications
 toastNotify.clear([notificationId]); // clears specific toast notifications
 ```
-5. **Toggle the notification list view:**
+
+6. **Toggle the notification list view:**
 ```
 toastNotify.toggleListView();
 ```
-6. **Get the count of notifications by severity:**
+
+7. **Get the count of notifications by severity:**
 ```
 const count = toastNotify.countBySeverity;
 console.log(count.positive);
@@ -170,12 +183,24 @@ var ToastNotificationProvider = _ref => {
   var helper = {
     notifications,
     failure: (title, error, message, actions) => addNotification(_failure(title, error, message, actions)),
-    info: (message, title) => addNotification(_info(message, title)),
-    success: (message, actions) => addNotification({
+    info: (message, title, actions) => addNotification({
       message,
       actions,
+      title,
+      type: NotificationSeverity.INFORMATION
+    }),
+    success: (message, actions, title) => addNotification({
+      message,
+      actions,
+      title,
       type: NotificationSeverity.POSITIVE
     }),
+    caution: (message, actions, title) => addNotification({
+      message,
+      actions,
+      title,
+      type: NotificationSeverity.CAUTION
+    }),
     clear,
     toggleListView,
     isListView: showList,

package/dist/esm/components/Spinner/Spinner.d.ts

@@ -21,9 +21,15 @@ export type Props = {
      * The politeness setting of the spinner alert.
      */
     ariaLive?: "assertive" | "off" | "polite";
+    /**
+     * Whether the Loader is replacing the main component in the application layout.
+     * In that case, the loader has to be wrapped with a main panel of the application
+     * layout. This is important for the mobile view. This prop enables the wrapping.
+     */
+    isMainComponent?: boolean;
 } & HTMLProps<HTMLSpanElement>;
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Spin](https://docs.vanillaframework.io/settings/animation-settings/#spin) animation.
  */
-declare const Spinner: ({ className, text, isLight, ariaLive, role, ...props }: Props) => React.JSX.Element;
+declare const Spinner: ({ className, text, isLight, ariaLive, role, isMainComponent, ...props }: Props) => React.JSX.Element;
 export default Spinner;

package/dist/esm/components/Spinner/Spinner.js

@@ -1,10 +1,11 @@
 import _pt from "prop-types";
-var _excluded = ["className", "text", "isLight", "ariaLive", "role"];
+var _excluded = ["className", "text", "isLight", "ariaLive", "role", "isMainComponent"];
 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; }
 import React from "react";
 import classNames from "classnames";
+import CustomLayout from "../CustomLayout";
 /**
  * This is a [React](https://reactjs.org/) component for the Vanilla [Spin](https://docs.vanillaframework.io/settings/animation-settings/#spin) animation.
  */
@@ -14,10 +15,11 @@ var Spinner = _ref => {
       text,
       isLight = false,
       ariaLive = "polite",
-      role = "alert"
+      role = "alert",
+      isMainComponent = false
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  return /*#__PURE__*/React.createElement("span", _extends({}, props, {
+  var loader = /*#__PURE__*/React.createElement("span", _extends({}, props, {
     className: classNames(className, "p-text--default"),
     role: role,
     "aria-live": ariaLive
@@ -26,11 +28,13 @@ var Spinner = _ref => {
       "is-light": isLight
     })
   }, text ? "" : "Loading"), text && /*#__PURE__*/React.createElement(React.Fragment, null, "\u2002", /*#__PURE__*/React.createElement("span", null, text)));
+  return isMainComponent ? /*#__PURE__*/React.createElement(CustomLayout, null, loader) : loader;
 };
 Spinner.propTypes = {
   isLight: _pt.bool,
   text: _pt.string,
   role: _pt.string,
-  ariaLive: _pt.oneOf(["assertive", "off", "polite"])
+  ariaLive: _pt.oneOf(["assertive", "off", "polite"]),
+  isMainComponent: _pt.bool
 };
 export default Spinner;

package/dist/esm/index.d.ts

@@ -71,6 +71,7 @@ export { ToastNotification, ToastNotificationList, ToastNotificationProvider, us
 export { default as Tooltip } from "./components/Tooltip";
 export { default as TablePagination } from "./components/TablePagination";
 export { default as TablePaginationControls } from "./components/TablePagination/TablePaginationControls";
+export { default as CustomLayout } from "./components/CustomLayout";
 export { default as CustomSelect } from "./components/CustomSelect";
 export type { AccordionProps } from "./components/Accordion";
 export type { ActionButtonProps } from "./components/ActionButton";

package/dist/esm/index.js

@@ -71,6 +71,7 @@ export { ToastNotification, ToastNotificationList, ToastNotificationProvider, us
 export { default as Tooltip } from "./components/Tooltip";
 export { default as TablePagination } from "./components/TablePagination";
 export { default as TablePaginationControls } from "./components/TablePagination/TablePaginationControls";
+export { default as CustomLayout } from "./components/CustomLayout";
 export { default as CustomSelect } from "./components/CustomSelect";
 export { useOnClickOutside, useClickOutside, useId, useListener, useOnEscapePressed, usePagination, usePrevious, usePrefersReducedMotion, useThrottle, useWindowFitment } from "./hooks";
 export { isNavigationAnchor, isNavigationButton } from "./utils";

package/dist/index.d.ts

@@ -71,6 +71,7 @@ export { ToastNotification, ToastNotificationList, ToastNotificationProvider, us
 export { default as Tooltip } from "./components/Tooltip";
 export { default as TablePagination } from "./components/TablePagination";
 export { default as TablePaginationControls } from "./components/TablePagination/TablePaginationControls";
+export { default as CustomLayout } from "./components/CustomLayout";
 export { default as CustomSelect } from "./components/CustomSelect";
 export type { AccordionProps } from "./components/Accordion";
 export type { ActionButtonProps } from "./components/ActionButton";

package/dist/index.js

@@ -94,6 +94,7 @@ var _exportNames = {
   Tooltip: true,
   TablePagination: true,
   TablePaginationControls: true,
+  CustomLayout: true,
   CustomSelect: true,
   useOnClickOutside: true,
   useClickOutside: true,
@@ -248,6 +249,12 @@ Object.defineProperty(exports, "ContextualMenu", {
     return _ContextualMenu.default;
   }
 });
+Object.defineProperty(exports, "CustomLayout", {
+  enumerable: true,
+  get: function () {
+    return _CustomLayout.default;
+  }
+});
 Object.defineProperty(exports, "CustomSelect", {
   enumerable: true,
   get: function () {
@@ -823,6 +830,7 @@ var _ThemeSwitcher = _interopRequireWildcard(require("./components/ThemeSwitcher
 var _Tooltip = _interopRequireDefault(require("./components/Tooltip"));
 var _TablePagination = _interopRequireDefault(require("./components/TablePagination"));
 var _TablePaginationControls = _interopRequireDefault(require("./components/TablePagination/TablePaginationControls"));
+var _CustomLayout = _interopRequireDefault(require("./components/CustomLayout"));
 var _CustomSelect = _interopRequireDefault(require("./components/CustomSelect"));
 var _hooks = require("./hooks");
 var _utils = require("./utils");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canonical/react-components",
-  "version": "2.9.0",
+  "version": "2.11.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "author": {
@@ -93,7 +93,7 @@
     "tsc-alias": "1.8.10",
     "typescript": "5.7.3",
     "typescript-eslint": "8.24.1",
-    "vanilla-framework": "4.26.0",
+    "vanilla-framework": "4.26.1",
     "wait-on": "8.0.2",
     "webpack": "5.98.0"
   },