@linzjs/lui 21.35.1-0 → 21.36.0

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# [21.36.0](https://github.com/linz/lui/compare/v21.35.0...v21.36.0) (2024-07-01)
+
+
+### Features
+
+* **useToast:** merge update & add APIs ([#1128](https://github.com/linz/lui/issues/1128)) ([1cdd7b6](https://github.com/linz/lui/commit/1cdd7b6c9c412d4cbc8d76e042328d4f3242133a))
+
 # [21.35.0](https://github.com/linz/lui/compare/v21.34.0...v21.35.0) (2024-06-26)
 
 

package/dist/components/Toast/Helpers/ToastTypes.d.ts

@@ -18,11 +18,6 @@ export declare type ToastAction = {
 } | {
     type: 'remove';
     id: number;
-} | {
-    type: 'update';
-    notification: ToastNode;
-    options?: ToastOptions;
-    id: number;
 };
 export interface IToast {
     id: number;

package/dist/components/Toast/Upgrade/ToastVersion.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const ToastVersion: import("react").Context<"v1" | "v2">;
+export declare const useToastVersion: () => "v1" | "v2";

package/dist/components/Toast/Upgrade/index.d.ts

@@ -1,13 +1,38 @@
 import { ComponentProps, ReactNode } from 'react';
 import { LuiToastMessage as LuiToastMessageOld } from '../../LuiToastMessage/LuiToastMessage';
-declare type ProviderProps = {
-    children: ReactNode;
-    upgrade?: boolean;
+declare type ProviderPropsV1 = {
+    /** Use v2 explicitely to get the new designs */
+    version?: 'v1';
+    /** Default timeout is not permitted in v1 */
+    defaultTimeout?: never;
+    /** Stack is not permitted in v1 */
+    stack?: never;
+};
+declare type ProviderPropsV2 = {
+    /** Latest designs */
+    version: 'v2';
+    /** Default timeout for ephemeral toasts is 4000ms */
+    defaultTimeout?: number;
+    /** Max number of toast allowed simultaneously. Default value is 5. */
+    stack?: number;
 };
+declare type ProviderProps = {
+    children?: ReactNode;
+} & (ProviderPropsV1 | ProviderPropsV2);
 /**
- * @deprecated Use ToastProvider or LuiMessagingContextProvider with upgrade prop set to true to get the new designs
+ * Context provider to handle global logic of toast messages. It defaults to legacy version 'v1'.
+ * @description Set version property to 'v2' to get the latest designs.
  */
 export declare const LuiMessagingContextProvider: (props: ProviderProps) => JSX.Element;
+/**
+ * Hook to display pop-up messages in response to a user action or state change. Examples include: Saving, exporting, committing, deleting, etc.
+ * @description Legacy hook to trigger toasts. It requires {@linkcode LuiMessagingContextProvider}.
+ * @alias useToast. For a more flexible API when you're using v2 designs, using useToast is recommended.
+ * @returns Toaster function to trigger branded toasts (e.g. warning, error, info) in the top right of the page.
+ * @example
+ * const toaster = useShowLUIMessage();
+ * toaster({ message: 'Failed to save', messageType: 'toast', messageLevel: 'error' });
+ */
 export declare const useShowLUIMessage: () => (props: import("../../../contexts/LuiMessagingContextProvider").ShowMessageProps) => void;
 declare type LuiToastMessageProps = ComponentProps<typeof LuiToastMessageOld>;
 export declare const LuiToastMessage: (props: LuiToastMessageProps) => JSX.Element;

package/dist/components/Toast/Upgrade/useShowLUIMessageCompatibleInterface.d.ts

@@ -2,4 +2,4 @@ import { ShowMessageProps } from '../../../contexts/LuiMessagingContextProvider'
 /**
  * Provide new toast hook with old interface from original useShowLUIMessage
  */
-export declare const useShowLUIMessageCompatibleInterface: () => (props: ShowMessageProps) => void;
+export declare const useShowLUIMessageCompatibleInterface: () => (props: ShowMessageProps) => number;

package/dist/components/Toast/useToast.d.ts

@@ -1,10 +1,38 @@
 import './ToastProvider.scss';
 import { ReactNode } from 'react';
 import { ToastNode, ToastOptions } from './Helpers/ToastTypes';
-declare type BannerToast = (children: ReactNode, config?: ToastOptions) => number;
-declare type Result = {
-    toast: (notification: ToastNode, options?: ToastOptions) => number;
-    update: (toastId: number, notification: ToastNode, options?: ToastOptions) => number;
+declare type Config = ToastOptions & {
+    id?: number;
+};
+declare type BannerToast = (children: ReactNode, config?: Config) => number;
+/**
+ * Hook to display pop-up messages in response to a user action or state change. Examples include: Saving, exporting, committing, deleting, etc.
+ * It requires 'LuiMessagingContextProvider' with property version set to 'v2'.
+ * Toasts that are `warning` or `error` won't timeout automatically, unless configured otherwise.
+ * @description Hook to trigger pop-up messages (a.k.a. toasts). Each toast helper function returns a a toast id `number` that can be used for manual dismiss or updates.
+ * @example
+ * // Error message
+ * const { error } = useToast();
+ * error("Failed to save");
+ * @example
+ * // Toast error and then turn toast into success
+ * const { error, success } = useToast();
+ * const toastId = error("Failed to save");
+ * success('Toast updated to success', { id: toastId });
+ * @example
+ * // Dismiss info toast that won't dismiss automatically
+ * const { info, dismiss } = useToast();
+ * const toastId = info(<a href="#">Some useful link</a>, { timeout: Infinity });
+ * dismiss(toastId);
+ * @example
+ * // Custom toasts accept `ReactNode` or `({ close: () => void }) => ReactNode`
+ * const { toast } = useToast();
+ * toast(({ close }) => <button onClick={() => close()}>Click me to dismiss</button>, { timeout: Infinity });
+ * toast(<div>I will be dismissed in 3s.</div>, { timeout: 3000 });
+ * toast("I'm placed in the topLeft of the page", { position: 'topLeft' });
+ */
+export declare const useToast: () => {
+    toast: (notification: ToastNode, config?: Config) => number;
     dismiss: (toastId: number) => void;
     info: BannerToast;
     success: BannerToast;
@@ -12,5 +40,4 @@ declare type Result = {
     warning: BannerToast;
     plain: BannerToast;
 };
-export declare const useToast: () => Result;
 export {};

package/dist/components/common/Hooks.d.ts

@@ -4,7 +4,7 @@
  *
  * @param onEscape the handler function
  */
-export declare const useEscapeFunction: (onEscape: (e: KeyboardEvent) => void | Promise<void>, trigger?: 'keyup' | 'keydown') => void;
+export declare const useEscapeFunction: (onEscape: () => void) => void;
 /**
  * A hook which allows handling of click event anywhere on the page.
  * Provides a way of handling clicks done inside or outside the element bound to the returned react ref.

package/dist/hooks/useClickedOutsideElement.d.ts

@@ -1,4 +1,4 @@
-import { MutableRefObject, RefObject } from 'react';
+import React from 'react';
 /**
  * This hook will callback with handleClickOutside() when "mousedown" dom event occurs off the refElement
  * usage:
@@ -11,4 +11,4 @@ import { MutableRefObject, RefObject } from 'react';
   return <button ref={refElement}>Click Me!</button>;
  ```
  */
-export declare function useClickedOutsideElement(refElement: RefObject<HTMLElement> | MutableRefObject<HTMLElement>, handleClickOutside: CallableFunction): void;
+export declare function useClickedOutsideElement(refElement: React.RefObject<HTMLElement>, handleClickOutside: CallableFunction): void;

package/dist/index.d.ts

@@ -37,8 +37,6 @@ export * from './components/LuiHeaderMenu/LuiHeaderMenus';
 export * from './components/LuiHeaderMenuV2/LuiHeaderMenusV2';
 export { LuiUpdatesSplashModal } from './components/LuiUpdateSplashModal/LuiUpdatesSplashModal';
 export { LuiModal, LuiAlertModal, LuiAlertModalButtons, } from './components/LuiModal/LuiModal';
-export { LuiModalV2, type LuiModalV2Props, } from './components/LuiModal/LuiModalV2';
-export { LuiAlertModalV2, type LuiAlertModalLevel, type LuiAlertModalV2Props, } from './components/LuiModal/LuiAlertModalV2';
 export { type ISearchInputProps, LuiSearchInput, } from './components/LuiSearchInput/LuiSearchInput';
 export { type ISearchGroupedResult, type ISearchResult, } from './components/LuiSearchInput/ResultsDisplay';
 export { type ISearchMenuOption, type ILuiSearchBoxProps, LuiSearchBox, } from './components/LuiSearchBox/LuiSearchBox';
@@ -74,5 +72,5 @@ export { LuiPagination } from './components/LuiPagination/LuiPagination';
 export { Splitter } from './components/Splitter/Splitter';
 export { useSplitterRef } from './components/Splitter/useSplitterRef';
 export { LuiBannerV2 } from './components/LuiBannerV2/LuiBannerV2';
-export { useToast, ToastProvider } from './components/Toast';
+export { useToast } from './components/Toast';
 export { LuiMessagingContextProvider, useShowLUIMessage, LuiToastMessage, } from './components/Toast/Upgrade';

package/dist/index.js

@@ -39830,12 +39830,17 @@ var motif = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0id
  *
  * @param onEscape the handler function
  */
-var useEscapeFunction = function (onEscape, trigger) {
-    if (trigger === void 0) { trigger = 'keydown'; }
-    var escFunction = React.useCallback(function (event) { return event.key === 'Escape' && onEscape(event); }, [onEscape]);
+var useEscapeFunction = function (onEscape) {
+    var escFunction = React.useCallback(function (event) {
+        if (event.keyCode === 27) {
+            onEscape();
+        }
+    }, [onEscape]);
     React.useEffect(function () {
-        document.addEventListener(trigger, escFunction);
-        return function () { return document.removeEventListener(trigger, escFunction); };
+        document.addEventListener('keydown', escFunction, false);
+        return function () {
+            document.removeEventListener('keydown', escFunction, false);
+        };
     }, [escFunction]);
 };
 /**
@@ -42197,119 +42202,6 @@ var LuiModalHeader = function (props) {
                 React__default["default"].createElement(LuiIcon, { name: "ic_clear", alt: "Help", size: "lg" }))))))));
 };
 
-/**
- * This hook will callback with handleClickOutside() when "mousedown" dom event occurs off the refElement
- * usage:
- ```typescript
-  const refElement = React.useRef<HTMLButtonElement>(null);
-  const handleClickOutside = () => {
-      console.log("hello world");
-  };
-  useClickedOutsideElement(refElement, handleClickOutside);
-  return <button ref={refElement}>Click Me!</button>;
- ```
- */
-function useClickedOutsideElement(refElement, handleClickOutside) {
-    React__default["default"].useEffect(function () {
-        function onOutsideClicked(event) {
-            var element = refElement.current;
-            if (!(element === null || element === void 0 ? void 0 : element.contains(event.target))) {
-                handleClickOutside();
-            }
-        }
-        document.addEventListener('mousedown', onOutsideClicked);
-        return function () {
-            document.removeEventListener('mousedown', onOutsideClicked);
-        };
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, []);
-}
-
-var _a;
-var LuiModalV2 = function (props) {
-    var _a;
-    var modalRef = React.useRef(null);
-    var handleClickOutside = React.useCallback(function () { var _a; return props.shouldCloseOnOverlayClick && ((_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props)); }, [props.shouldCloseOnEsc, props.onClose]);
-    useClickedOutsideElement(modalRef, handleClickOutside);
-    var handleEsc = React.useCallback(function (e) {
-        var _a;
-        if (props.shouldCloseOnEsc !== false) {
-            e.stopPropagation();
-            (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
-        }
-    }, [props.shouldCloseOnEsc, props.onClose]);
-    useEscapeFunction(handleEsc, props.shouldCloseOnEsc === 'use-keyup' ? 'keyup' : 'keydown');
-    var handleAutoFocus = function (el) {
-        if (props.preventAutoFocus)
-            return;
-        if (el && !el.contains(el.ownerDocument.activeElement)) {
-            var firstFocusableElement = el.querySelector('input,button');
-            firstFocusableElement === null || firstFocusableElement === void 0 ? void 0 : firstFocusableElement.focus();
-        }
-    };
-    var showCloseButton = Boolean(props.showCloseButton && props.onClose);
-    var showHelpButton = Boolean(props.helpLink);
-    var showButtons = showCloseButton || showHelpButton;
-    var showHeadingIcon = props.headingIcon && !props.isLoading;
-    return (React__default["default"].createElement(Modal, { key: props.key, isOpen: true, 
-        // disble the `shouldClose` props as we handle them ourselves
-        shouldCloseOnOverlayClick: false, shouldCloseOnEsc: false, overlayClassName: "modal", className: props.lowContrast ? 'lui-scrim-low-contrast' : 'lui-scrim', 
-        // required to prevent warnings that are not applicable in real usage
-        ariaHideApp: !isTest, parentSelector: props.appendToElement },
-        React__default["default"].createElement("div", { ref: function (el) {
-                modalRef.current = el;
-                handleAutoFocus(el);
-            }, className: clsx('lui-modal-v2 lui-box-shadow', props.maxWidth && 'lui-max-width', props.className) },
-            React__default["default"].createElement("div", { className: "lui-modal-v2-header" },
-                props.isLoading && (React__default["default"].createElement(LuiMiniSpinner, { size: 20, divProps: { className: 'lui-modal-v2-header-spinner' } })),
-                showHeadingIcon && (React__default["default"].createElement("div", { className: "lui-modal-v2-header-icon" },
-                    React__default["default"].createElement(LuiIcon, __assign({ size: "md", name: "", alt: "Help" }, props.headingIcon, { className: clsx('', (_a = props.headingIcon) === null || _a === void 0 ? void 0 : _a.className) })))),
-                props.headingText && (React__default["default"].createElement("h2", { className: "lui-modal-v2-header-title" }, props.headingText)),
-                showButtons && (React__default["default"].createElement("div", { className: "lui-modal-v2-header-buttons" },
-                    showHelpButton && React__default["default"].createElement(HelpButton, { helpLink: props.helpLink }),
-                    showCloseButton && React__default["default"].createElement(CloseButton, { onClose: props.onClose })))),
-            React__default["default"].createElement("div", { className: "lui-modal-v2-contents" }, props.children))));
-};
-var ButtonRow = function (props) { return (React__default["default"].createElement("div", { className: clsx('lui-modal-v2-btn-row', props.className) }, props.children)); };
-LuiModalV2.Buttons = ButtonRow;
-var HelpButton = function (props) { return (React__default["default"].createElement("button", { "aria-label": "Modal Help", title: "Help", className: "lui-modal-v2-header-help-btn", onClick: typeof props.helpLink === 'string'
-        ? function () { return window.open(props.helpLink, '_blank'); }
-        : props.helpLink },
-    React__default["default"].createElement(LuiIcon, { name: "ic_help_outline", alt: "Help", size: "md" }))); };
-var CloseButton = function (props) { return (React__default["default"].createElement("button", { "aria-label": "Modal Close", title: "Close", className: "lui-modal-v2-header-close-btn", onClick: props.onClose },
-    React__default["default"].createElement(LuiIcon, { name: "ic_clear", alt: "Help", size: "md" }))); };
-/** Allows injecting the modal header text. Useful when you can't use the `headingText` prop directly, or when you need to render styled content. */
-var HeaderTitle = function (props) {
-    var _a = React.useState(), target = _a[0], setTarget = _a[1];
-    // on mount, find the parent modal and set it as the target
-    if (!target)
-        return (React__default["default"].createElement("div", { style: { display: 'none' }, ref: function (el) {
-                var modal = el === null || el === void 0 ? void 0 : el.closest(".lui-modal-v2");
-                var modalHeader = modal === null || modal === void 0 ? void 0 : modal.querySelector(':scope > .lui-modal-v2-header');
-                modalHeader && setTarget(modalHeader);
-            } }));
-    return ReactDOM.createPortal(React__default["default"].createElement("h2", { className: clsx('lui-modal-v2-header-title lui-modal-v2-header-title-portal', props.className) }, props.children), target);
-};
-LuiModalV2.HeaderTitle = HeaderTitle;
-// this is here for the tests
-var isTest = typeof process !== 'undefined' && ((_a = process === null || process === void 0 ? void 0 : process.env) === null || _a === void 0 ? void 0 : _a.NODE_ENV) === 'test';
-if (!isTest)
-    Modal.setAppElement('#root');
-
-var LuiAlertModalV2 = function (props) {
-    var level = props.level, className = props.className, children = props.children, rest = __rest(props, ["level", "className", "children"]);
-    var materialIcon = getMaterialIconForLevel(level);
-    var status = Object.keys(ICON_STATUS).includes(level)
-        ? level
-        : 'interactive';
-    return (React__default["default"].createElement(LuiModalV2, __assign({}, rest, { className: clsx("lui-modal-v2-alert lui-modal-v2-".concat(level), className), headingIcon: {
-            name: "ic_".concat(materialIcon),
-            alt: "".concat(level, " status icon"),
-            size: 'md',
-            status: status
-        } }), children));
-};
-
 var css_248z$g = "@keyframes react-loading-skeleton {\n  100% {\n    transform: translateX(100%);\n  }\n}\n\n.react-loading-skeleton {\n  --base-color: #ebebeb;\n  --highlight-color: #f5f5f5;\n  --animation-duration: 1.5s;\n  --animation-direction: normal;\n  --pseudo-element-display: block; /* Enable animation */\n\n  background-color: var(--base-color);\n\n  width: 100%;\n  border-radius: 0.25rem;\n  display: inline-flex;\n  line-height: 1;\n\n  position: relative;\n  user-select: none;\n  overflow: hidden;\n  z-index: 1; /* Necessary for overflow: hidden to work correctly in Safari */\n}\n\n.react-loading-skeleton::after {\n  content: ' ';\n  display: var(--pseudo-element-display);\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 100%;\n  background-repeat: no-repeat;\n  background-image: linear-gradient(\n    90deg,\n    var(--base-color),\n    var(--highlight-color),\n    var(--base-color)\n  );\n  transform: translateX(-100%);\n\n  animation-name: react-loading-skeleton;\n  animation-direction: var(--animation-direction);\n  animation-duration: var(--animation-duration);\n  animation-timing-function: ease-in-out;\n  animation-iteration-count: infinite;\n}\n\n@media (prefers-reduced-motion) {\n  .react-loading-skeleton {\n    --pseudo-element-display: none; /* Disable animation */\n  }\n}\n";
 styleInject(css_248z$g);
 
@@ -46908,6 +46800,34 @@ var LuiTooltip = function (props) {
     return React__default["default"].createElement(Tippy, __assign({}, tippyProps), children);
 };
 
+/**
+ * This hook will callback with handleClickOutside() when "mousedown" dom event occurs off the refElement
+ * usage:
+ ```typescript
+  const refElement = React.useRef<HTMLButtonElement>(null);
+  const handleClickOutside = () => {
+      console.log("hello world");
+  };
+  useClickedOutsideElement(refElement, handleClickOutside);
+  return <button ref={refElement}>Click Me!</button>;
+ ```
+ */
+function useClickedOutsideElement(refElement, handleClickOutside) {
+    React__default["default"].useEffect(function () {
+        function onOutsideClicked(event) {
+            var element = refElement.current;
+            if (!(element === null || element === void 0 ? void 0 : element.contains(event.target))) {
+                handleClickOutside();
+            }
+        }
+        document.addEventListener('mousedown', onOutsideClicked);
+        return function () {
+            document.removeEventListener('mousedown', onOutsideClicked);
+        };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+}
+
 var getFillClassName = function (fillVariation, backgroundFill) {
     if (backgroundFill) {
         return 'LuiBadge--fill';
@@ -59490,20 +59410,23 @@ var Toast = function (props) {
 var reducer = function (state, action) {
     var updatedAt = new Date().getTime();
     if (action.type === 'add') {
-        var createdAt = updatedAt;
-        var notification = action.notification, options = action.options, id = action.id;
-        var toast = { notification: notification, options: options, id: id, updatedAt: updatedAt, createdAt: createdAt };
-        var toasts = __spreadArray([toast], state.toasts, true);
-        return trim(__assign(__assign({}, state), { toasts: toasts }));
+        var notification = action.notification, options = action.options, id_1 = action.id;
+        var base = { notification: notification, options: options, id: id_1, updatedAt: updatedAt };
+        var found = state.toasts.find(function (t) { return t.id === id_1; });
+        if (!found) {
+            var toast = __assign(__assign({}, base), { createdAt: updatedAt });
+            var toasts = __spreadArray([toast], state.toasts, true);
+            return trim(__assign(__assign({}, state), { toasts: toasts }));
+        }
+        else {
+            var toast_1 = __assign(__assign({}, found), base);
+            var toasts = state.toasts.map(function (t) { return (t.id !== id_1 ? t : toast_1); });
+            return __assign(__assign({}, state), { toasts: toasts });
+        }
     }
     if (action.type === 'remove') {
         return __assign(__assign({}, state), { toasts: state.toasts.filter(function (t) { return t.id !== action.id; }) });
     }
-    if (action.type === 'update') {
-        var notification = action.notification, options = action.options, id_1 = action.id;
-        var updated_1 = { notification: notification, options: options, id: id_1, updatedAt: updatedAt };
-        return __assign(__assign({}, state), { toasts: state.toasts.map(function (t) { return (t.id !== id_1 ? t : __assign(__assign({}, t), updated_1)); }) });
-    }
     return state;
 };
 var useToastState = function (_a) {
@@ -59539,6 +59462,9 @@ var trim = function (state) { return (__assign(__assign({}, state), { toasts: Ob
     })
         .flat() })); };
 
+var ToastVersion = React.createContext('v1');
+var useToastVersion = function () { return React.useContext(ToastVersion); };
+
 var ToastContext = React__namespace.createContext(undefined);
 var portal = getToastProviderEl();
 var ToastProvider = function (_a) {
@@ -59548,7 +59474,7 @@ var ToastProvider = function (_a) {
     if (React.useContext(ToastContext)) {
         return React__namespace.createElement(React__namespace.Fragment, null, children);
     }
-    return (React__namespace.createElement(React__namespace.Fragment, null,
+    return (React__namespace.createElement(ToastVersion.Provider, { value: "v2" },
         ReactDOM__default["default"].createPortal(React__namespace.createElement(React__namespace.Fragment, null, Object.entries(toasts).map(function (_a) {
             var section = _a[0], list = _a[1];
             return (React__namespace.createElement(ToastSection, __assign({ key: section }, {
@@ -59561,30 +59487,35 @@ var ToastProvider = function (_a) {
         React__namespace.createElement(ToastContext.Provider, { value: dispatch }, children)));
 };
 
-var getUniqueToastId = function () { return Math.floor(Math.random() * 10000); };
+var getUniqueToastId = function () {
+    var _a;
+    var id = Number("".concat(Math.floor(Math.random() * 10000000)).slice(0, 4));
+    var selector = "[data-toastid=\"".concat(id, "\"]");
+    var duplicate = ((_a = getToastProviderEl().querySelectorAll(selector)) === null || _a === void 0 ? void 0 : _a.length) > 0;
+    if (duplicate) {
+        return getUniqueToastId();
+    }
+    return id;
+};
 var toastFunctions = function (dispatch) {
-    var toast = function (notification, options) {
-        var id = getUniqueToastId();
+    var toast = function (notification, config) {
+        if (config === void 0) { config = {}; }
+        var _a = config.id, id = _a === void 0 ? getUniqueToastId() : _a, options = __rest(config, ["id"]);
         dispatch === null || dispatch === void 0 ? void 0 : dispatch({ type: 'add', notification: notification, options: options, id: id });
         return id;
     };
-    var update = function (id, notification, options) {
-        dispatch === null || dispatch === void 0 ? void 0 : dispatch({ type: 'update', notification: notification, options: options, id: id });
-        return id;
-    };
     var banner = function (level, defaults) {
         if (defaults === void 0) { defaults = {}; }
         return function (children, options) {
             if (options === void 0) { options = defaults; }
             return toast(function (_a) {
-                var close = _a.close;
-                return (React__namespace.createElement(LuiBannerV2, __assign({}, { level: level, children: children }, { onDismiss: options.timeout === Infinity ? close : undefined })));
+                var onDismiss = _a.close;
+                return (React__namespace.createElement(LuiBannerV2, __assign({}, { level: level, children: children, onDismiss: onDismiss })));
             }, options);
         };
     };
     return {
         toast: toast,
-        update: update,
         dismiss: function (id) { return dispatch === null || dispatch === void 0 ? void 0 : dispatch({ type: 'remove', id: id }); },
         info: banner('info'),
         success: banner('success'),
@@ -59593,6 +59524,32 @@ var toastFunctions = function (dispatch) {
         plain: banner()
     };
 };
+/**
+ * Hook to display pop-up messages in response to a user action or state change. Examples include: Saving, exporting, committing, deleting, etc.
+ * It requires 'LuiMessagingContextProvider' with property version set to 'v2'.
+ * Toasts that are `warning` or `error` won't timeout automatically, unless configured otherwise.
+ * @description Hook to trigger pop-up messages (a.k.a. toasts). Each toast helper function returns a a toast id `number` that can be used for manual dismiss or updates.
+ * @example
+ * // Error message
+ * const { error } = useToast();
+ * error("Failed to save");
+ * @example
+ * // Toast error and then turn toast into success
+ * const { error, success } = useToast();
+ * const toastId = error("Failed to save");
+ * success('Toast updated to success', { id: toastId });
+ * @example
+ * // Dismiss info toast that won't dismiss automatically
+ * const { info, dismiss } = useToast();
+ * const toastId = info(<a href="#">Some useful link</a>, { timeout: Infinity });
+ * dismiss(toastId);
+ * @example
+ * // Custom toasts accept `ReactNode` or `({ close: () => void }) => ReactNode`
+ * const { toast } = useToast();
+ * toast(({ close }) => <button onClick={() => close()}>Click me to dismiss</button>, { timeout: Infinity });
+ * toast(<div>I will be dismissed in 3s.</div>, { timeout: 3000 });
+ * toast("I'm placed in the topLeft of the page", { position: 'topLeft' });
+ */
 var useToast = function () {
     var dispatch = React.useContext(ToastContext);
     return React.useMemo(function () { return toastFunctions(dispatch); }, [dispatch]);
@@ -59684,7 +59641,7 @@ var LuiToastMessageCompatibleInterface = function (props) {
     var toastIdRef = React.useRef(undefined);
     var onceDismissedRef = React.useRef(false);
     var displayRef = React.useRef(display);
-    var _c = useToast(), toast = _c.toast, dismiss = _c.dismiss, update = _c.update;
+    var _c = useToast(), toast = _c.toast, dismiss = _c.dismiss;
     displayRef.current = display;
     // Close when it's unmounted
     React.useEffect(function () {
@@ -59700,23 +59657,18 @@ var LuiToastMessageCompatibleInterface = function (props) {
         if (display && !onceDismissed) {
             var notification = function (_a) {
                 var close = _a.close;
-                var onDismiss = requireDismiss ? close : undefined;
-                return React__default["default"].createElement(LuiBannerV2, __assign({}, { level: level, onDismiss: onDismiss, children: children }));
+                return React__default["default"].createElement(LuiBannerV2, __assign({}, { level: level, onDismiss: close, children: children }));
             };
             var options = {
-                timeout: displayTimeout === 0 ? Infinity : displayTimeout,
+                timeout: requireDismiss || !displayTimeout ? Infinity : displayTimeout,
                 onLeave: function () {
                     onClose === null || onClose === void 0 ? void 0 : onClose();
                     onceDismissedRef.current = displayRef.current;
                     toastIdRef.current = undefined;
-                }
+                },
+                id: toastIdRef.current
             };
-            if (!toastIdRef.current) {
-                toastIdRef.current = toast(notification, options);
-            }
-            else {
-                update(toastIdRef.current, notification, options);
-            }
+            toastIdRef.current = toast(notification, options);
         }
         if (!display && toastIdRef.current !== undefined) {
             dismiss(toastIdRef.current);
@@ -59726,47 +59678,49 @@ var LuiToastMessageCompatibleInterface = function (props) {
     return React__default["default"].createElement(React__default["default"].Fragment, null);
 };
 
+var getTimeout = function (_a) {
+    var requireDismiss = _a.requireDismiss, messageLevel = _a.messageLevel;
+    return (requireDismiss !== null && requireDismiss !== void 0 ? requireDismiss : messageLevel === 'error') ? Infinity : undefined;
+};
 /**
  * Provide new toast hook with old interface from original useShowLUIMessage
  */
 var useShowLUIMessageCompatibleInterface = function () {
-    var toast = useToast().toast;
+    var t = useToast();
     return function (props) {
-        var message = props.message, messageLevel = props.messageLevel, requireDismiss = props.requireDismiss;
-        var toastProps = { children: message, level: messageLevel };
-        if (requireDismiss || messageLevel === 'error') {
-            toast(function (_a) {
-                var close = _a.close;
-                return React__default["default"].createElement(LuiBannerV2, __assign({}, toastProps, { onDismiss: close }));
-            });
-        }
-        else {
-            toast(React__default["default"].createElement(LuiBannerV2, __assign({}, toastProps)));
-        }
+        return t[props.messageLevel](props.message, { timeout: getTimeout(props) });
     };
 };
 
-var ToastUpgrade = React.createContext(false);
-var useToastUpgrade = function () { return React.useContext(ToastUpgrade); };
 /**
- * @deprecated Use ToastProvider or LuiMessagingContextProvider with upgrade prop set to true to get the new designs
+ * Context provider to handle global logic of toast messages. It defaults to legacy version 'v1'.
+ * @description Set version property to 'v2' to get the latest designs.
  */
 var LuiMessagingContextProvider = function (props) {
-    var _a = props.upgrade, upgrade = _a === void 0 ? false : _a, rest = __rest(props, ["upgrade"]);
     if (React.useContext(ToastContext)) {
-        return React__default["default"].createElement(React__default["default"].Fragment, null, rest.children);
+        return React__default["default"].createElement(React__default["default"].Fragment, null, props.children);
     }
-    return (React__default["default"].createElement(ToastUpgrade.Provider, { value: upgrade }, upgrade ? (React__default["default"].createElement(ToastProvider, __assign({}, rest))) : (React__default["default"].createElement(LuiMessagingContextProvider$1, __assign({}, rest)))));
+    return (React__default["default"].createElement(React__default["default"].Fragment, null, props.version === 'v2' ? (React__default["default"].createElement(ToastProvider, { stack: props.stack, defaultTimeout: props.defaultTimeout }, props.children)) : (React__default["default"].createElement(ToastVersion.Provider, { value: "v1" },
+        React__default["default"].createElement(LuiMessagingContextProvider$1, null, props.children)))));
 };
+/**
+ * Hook to display pop-up messages in response to a user action or state change. Examples include: Saving, exporting, committing, deleting, etc.
+ * @description Legacy hook to trigger toasts. It requires {@linkcode LuiMessagingContextProvider}.
+ * @alias useToast. For a more flexible API when you're using v2 designs, using useToast is recommended.
+ * @returns Toaster function to trigger branded toasts (e.g. warning, error, info) in the top right of the page.
+ * @example
+ * const toaster = useShowLUIMessage();
+ * toaster({ message: 'Failed to save', messageType: 'toast', messageLevel: 'error' });
+ */
 var useShowLUIMessage = function () {
-    var upgrade = useToastUpgrade();
+    var version = useToastVersion();
     var older = useShowLUIMessage$1();
     var newer = useShowLUIMessageCompatibleInterface();
-    return upgrade ? newer : older;
+    return version === 'v2' ? newer : older;
 };
 var LuiToastMessage = function (props) {
-    var upgrade = useToastUpgrade();
-    return upgrade ? (React__default["default"].createElement(LuiToastMessageCompatibleInterface, __assign({}, props))) : (React__default["default"].createElement(LuiToastMessage$1, __assign({}, props)));
+    var version = useToastVersion();
+    return version === 'v2' ? (React__default["default"].createElement(LuiToastMessageCompatibleInterface, __assign({}, props))) : (React__default["default"].createElement(LuiToastMessage$1, __assign({}, props)));
 };
 
 exports.CheckboxItemRenderer = CheckboxItemRenderer;
@@ -59776,7 +59730,6 @@ exports.LuiAccordicardStatic = LuiAccordicardStatic;
 exports.LuiAccordion = LuiAccordion;
 exports.LuiAlertModal = LuiAlertModal;
 exports.LuiAlertModalButtons = LuiAlertModalButtons;
-exports.LuiAlertModalV2 = LuiAlertModalV2;
 exports.LuiAppFooterSml = LuiAppFooterSml;
 exports.LuiBadge = LuiBadge;
 exports.LuiBanner = LuiBanner;
@@ -59830,7 +59783,6 @@ exports.LuiMenuCloseButtonV2 = LuiMenuCloseButtonV2;
 exports.LuiMessagingContextProvider = LuiMessagingContextProvider;
 exports.LuiMiniSpinner = LuiMiniSpinner;
 exports.LuiModal = LuiModal;
-exports.LuiModalV2 = LuiModalV2;
 exports.LuiMoneyInput = LuiMoneyInput;
 exports.LuiMultiSwitch = LuiMultiSwitch;
 exports.LuiMultiSwitchYesNo = LuiMultiSwitchYesNo;
@@ -59870,7 +59822,6 @@ exports.LuiTooltip = LuiTooltip;
 exports.LuiUpdatesSplashModal = LuiUpdatesSplashModal;
 exports.RadioItemRenderer = RadioItemRenderer;
 exports.Splitter = Splitter;
-exports.ToastProvider = ToastProvider;
 exports.ToolbarButton = ToolbarButton;
 exports.ToolbarItem = ToolbarItem;
 exports.ToolbarItemSeparator = ToolbarItemSeparator;