@linzjs/lui 21.35.1-0 → 21.37.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,3 +1,18 @@
1
+ # [21.37.0](https://github.com/linz/lui/compare/v21.36.0...v21.37.0) (2024-07-01)
2
+
3
+
4
+ ### Features
5
+
6
+ * **LuiModalV2:** trigger release ([#1129](https://github.com/linz/lui/issues/1129)) ([a914f10](https://github.com/linz/lui/commit/a914f10d05d070d40cda00b30aecab808c27ffe2))
7
+ * **LuiModalV2:** Update modals UI ([#1127](https://github.com/linz/lui/issues/1127)) ([05d3ae5](https://github.com/linz/lui/commit/05d3ae571ff52dedabfc93ec4a056a0d0b3fe508))
8
+
9
+ # [21.36.0](https://github.com/linz/lui/compare/v21.35.0...v21.36.0) (2024-07-01)
10
+
11
+
12
+ ### Features
13
+
14
+ * **useToast:** merge update & add APIs ([#1128](https://github.com/linz/lui/issues/1128)) ([1cdd7b6](https://github.com/linz/lui/commit/1cdd7b6c9c412d4cbc8d76e042328d4f3242133a))
15
+
1
16
  # [21.35.0](https://github.com/linz/lui/compare/v21.34.0...v21.35.0) (2024-06-26)
2
17
 
3
18
 
@@ -13,10 +13,19 @@ interface ILuiModal {
13
13
  appendToElement?: () => HTMLElement;
14
14
  headerStyle?: 'light' | 'default';
15
15
  }
16
+ /**
17
+ * @deprecated this is replaced by `LuiModalV2`. [Migration notes](https://github.com/linz/Lui/pull/1127).
18
+ */
16
19
  export declare const LuiModal: React.FC<React.PropsWithChildren<ILuiModal>>;
20
+ /**
21
+ * @deprecated this is replaced by `LuiAlertModalV2`. [Migration notes](https://github.com/linz/Lui/pull/1127).
22
+ */
17
23
  export declare const LuiAlertModal: React.FC<React.PropsWithChildren<{
18
24
  level: 'success' | 'info' | 'warning' | 'error';
19
25
  } & ILuiModal>>;
26
+ /**
27
+ * @deprecated this is replaced by `LuiModalV2.Buttons`. [Migration notes](https://github.com/linz/Lui/pull/1127).
28
+ */
20
29
  export declare const LuiAlertModalButtons: React.FC<React.PropsWithChildren<unknown>>;
21
30
  interface IModalHeader {
22
31
  headingText?: string;
@@ -24,5 +33,8 @@ interface IModalHeader {
24
33
  onClose?: () => void;
25
34
  style?: 'light' | 'default';
26
35
  }
36
+ /**
37
+ * @deprecated this is deprecated alongside `LuiModal`. [Migration notes](https://github.com/linz/Lui/pull/1127).
38
+ */
27
39
  export declare const LuiModalHeader: React.FC<React.PropsWithChildren<IModalHeader>>;
28
40
  export {};
@@ -22,6 +22,7 @@ export declare type LuiModalV2Props = {
22
22
  /** By default, the modal portal will be appended to the document's body, but we might need to append it to another element. This is passed the React Modal `parentSelector` prop. */
23
23
  appendToElement?: () => HTMLElement;
24
24
  };
25
+ /** Implements the [updated modal design system](https://www.figma.com/design/E7g3n5ziI7bR8MisISayia/FigLUI?node-id=9924-54717&t=q2r6Gct1cKGP9Q5B-0), keeping the same api as `LuiModal` as much as possible. */
25
26
  export declare const LuiModalV2: {
26
27
  (props: PropsWithChildren<LuiModalV2Props>): JSX.Element;
27
28
  Buttons: React.FC<React.PropsWithChildren<{
@@ -18,11 +18,6 @@ export declare type ToastAction = {
18
18
  } | {
19
19
  type: 'remove';
20
20
  id: number;
21
- } | {
22
- type: 'update';
23
- notification: ToastNode;
24
- options?: ToastOptions;
25
- id: number;
26
21
  };
27
22
  export interface IToast {
28
23
  id: number;
@@ -0,0 +1,3 @@
1
+ /// <reference types="react" />
2
+ export declare const ToastVersion: import("react").Context<"v1" | "v2">;
3
+ export declare const useToastVersion: () => "v1" | "v2";
@@ -1,13 +1,38 @@
1
1
  import { ComponentProps, ReactNode } from 'react';
2
2
  import { LuiToastMessage as LuiToastMessageOld } from '../../LuiToastMessage/LuiToastMessage';
3
- declare type ProviderProps = {
4
- children: ReactNode;
5
- upgrade?: boolean;
3
+ declare type ProviderPropsV1 = {
4
+ /** Use v2 explicitely to get the new designs */
5
+ version?: 'v1';
6
+ /** Default timeout is not permitted in v1 */
7
+ defaultTimeout?: never;
8
+ /** Stack is not permitted in v1 */
9
+ stack?: never;
10
+ };
11
+ declare type ProviderPropsV2 = {
12
+ /** Latest designs */
13
+ version: 'v2';
14
+ /** Default timeout for ephemeral toasts is 4000ms */
15
+ defaultTimeout?: number;
16
+ /** Max number of toast allowed simultaneously. Default value is 5. */
17
+ stack?: number;
6
18
  };
19
+ declare type ProviderProps = {
20
+ children?: ReactNode;
21
+ } & (ProviderPropsV1 | ProviderPropsV2);
7
22
  /**
8
- * @deprecated Use ToastProvider or LuiMessagingContextProvider with upgrade prop set to true to get the new designs
23
+ * Context provider to handle global logic of toast messages. It defaults to legacy version 'v1'.
24
+ * @description Set version property to 'v2' to get the latest designs.
9
25
  */
10
26
  export declare const LuiMessagingContextProvider: (props: ProviderProps) => JSX.Element;
27
+ /**
28
+ * Hook to display pop-up messages in response to a user action or state change. Examples include: Saving, exporting, committing, deleting, etc.
29
+ * @description Legacy hook to trigger toasts. It requires {@linkcode LuiMessagingContextProvider}.
30
+ * @alias useToast. For a more flexible API when you're using v2 designs, using useToast is recommended.
31
+ * @returns Toaster function to trigger branded toasts (e.g. warning, error, info) in the top right of the page.
32
+ * @example
33
+ * const toaster = useShowLUIMessage();
34
+ * toaster({ message: 'Failed to save', messageType: 'toast', messageLevel: 'error' });
35
+ */
11
36
  export declare const useShowLUIMessage: () => (props: import("../../../contexts/LuiMessagingContextProvider").ShowMessageProps) => void;
12
37
  declare type LuiToastMessageProps = ComponentProps<typeof LuiToastMessageOld>;
13
38
  export declare const LuiToastMessage: (props: LuiToastMessageProps) => JSX.Element;
@@ -2,4 +2,4 @@ import { ShowMessageProps } from '../../../contexts/LuiMessagingContextProvider'
2
2
  /**
3
3
  * Provide new toast hook with old interface from original useShowLUIMessage
4
4
  */
5
- export declare const useShowLUIMessageCompatibleInterface: () => (props: ShowMessageProps) => void;
5
+ export declare const useShowLUIMessageCompatibleInterface: () => (props: ShowMessageProps) => number;
@@ -1,10 +1,38 @@
1
1
  import './ToastProvider.scss';
2
2
  import { ReactNode } from 'react';
3
3
  import { ToastNode, ToastOptions } from './Helpers/ToastTypes';
4
- declare type BannerToast = (children: ReactNode, config?: ToastOptions) => number;
5
- declare type Result = {
6
- toast: (notification: ToastNode, options?: ToastOptions) => number;
7
- update: (toastId: number, notification: ToastNode, options?: ToastOptions) => number;
4
+ declare type Config = ToastOptions & {
5
+ id?: number;
6
+ };
7
+ declare type BannerToast = (children: ReactNode, config?: Config) => number;
8
+ /**
9
+ * Hook to display pop-up messages in response to a user action or state change. Examples include: Saving, exporting, committing, deleting, etc.
10
+ * It requires 'LuiMessagingContextProvider' with property version set to 'v2'.
11
+ * Toasts that are `warning` or `error` won't timeout automatically, unless configured otherwise.
12
+ * @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.
13
+ * @example
14
+ * // Error message
15
+ * const { error } = useToast();
16
+ * error("Failed to save");
17
+ * @example
18
+ * // Toast error and then turn toast into success
19
+ * const { error, success } = useToast();
20
+ * const toastId = error("Failed to save");
21
+ * success('Toast updated to success', { id: toastId });
22
+ * @example
23
+ * // Dismiss info toast that won't dismiss automatically
24
+ * const { info, dismiss } = useToast();
25
+ * const toastId = info(<a href="#">Some useful link</a>, { timeout: Infinity });
26
+ * dismiss(toastId);
27
+ * @example
28
+ * // Custom toasts accept `ReactNode` or `({ close: () => void }) => ReactNode`
29
+ * const { toast } = useToast();
30
+ * toast(({ close }) => <button onClick={() => close()}>Click me to dismiss</button>, { timeout: Infinity });
31
+ * toast(<div>I will be dismissed in 3s.</div>, { timeout: 3000 });
32
+ * toast("I'm placed in the topLeft of the page", { position: 'topLeft' });
33
+ */
34
+ export declare const useToast: () => {
35
+ toast: (notification: ToastNode, config?: Config) => number;
8
36
  dismiss: (toastId: number) => void;
9
37
  info: BannerToast;
10
38
  success: BannerToast;
@@ -12,5 +40,4 @@ declare type Result = {
12
40
  warning: BannerToast;
13
41
  plain: BannerToast;
14
42
  };
15
- export declare const useToast: () => Result;
16
43
  export {};
package/dist/index.d.ts CHANGED
@@ -74,5 +74,5 @@ export { LuiPagination } from './components/LuiPagination/LuiPagination';
74
74
  export { Splitter } from './components/Splitter/Splitter';
75
75
  export { useSplitterRef } from './components/Splitter/useSplitterRef';
76
76
  export { LuiBannerV2 } from './components/LuiBannerV2/LuiBannerV2';
77
- export { useToast, ToastProvider } from './components/Toast';
77
+ export { useToast } from './components/Toast';
78
78
  export { LuiMessagingContextProvider, useShowLUIMessage, LuiToastMessage, } from './components/Toast/Upgrade';
package/dist/index.js CHANGED
@@ -42118,6 +42118,9 @@ var FeatureIFrame = function (_a) {
42118
42118
  React__default["default"].createElement("iframe", __assign({ width: iframeConfig.width, height: iframeConfig.height, src: iframeConfig.url, title: iframeConfig.title }, iFrameProps))));
42119
42119
  };
42120
42120
 
42121
+ /**
42122
+ * @deprecated this is replaced by `LuiModalV2`. [Migration notes](https://github.com/linz/Lui/pull/1127).
42123
+ */
42121
42124
  var LuiModal = function (props) {
42122
42125
  var _a;
42123
42126
  var node = React.useRef(null);
@@ -42173,6 +42176,9 @@ var LuiModal = function (props) {
42173
42176
  }
42174
42177
  } }, props.children))));
42175
42178
  };
42179
+ /**
42180
+ * @deprecated this is replaced by `LuiAlertModalV2`. [Migration notes](https://github.com/linz/Lui/pull/1127).
42181
+ */
42176
42182
  var LuiAlertModal = function (props) {
42177
42183
  var materialIcon = getMaterialIconForLevel(props.level);
42178
42184
  var level = props.level, className = props.className, children = props.children, rest = __rest(props, ["level", "className", "children"]);
@@ -42180,9 +42186,15 @@ var LuiAlertModal = function (props) {
42180
42186
  React__default["default"].createElement(LuiIcon, { name: "ic_".concat(materialIcon), alt: "".concat(level, " status icon"), size: "lg", className: "lui-msg-status-icon" }),
42181
42187
  children));
42182
42188
  };
42189
+ /**
42190
+ * @deprecated this is replaced by `LuiModalV2.Buttons`. [Migration notes](https://github.com/linz/Lui/pull/1127).
42191
+ */
42183
42192
  var LuiAlertModalButtons = function (props) {
42184
42193
  return React__default["default"].createElement("div", { className: "modal-btn-row" }, props.children);
42185
42194
  };
42195
+ /**
42196
+ * @deprecated this is deprecated alongside `LuiModal`. [Migration notes](https://github.com/linz/Lui/pull/1127).
42197
+ */
42186
42198
  var LuiModalHeader = function (props) {
42187
42199
  var _a;
42188
42200
  var headerStyle = (_a = props.style) !== null && _a !== void 0 ? _a : 'default';
@@ -42226,6 +42238,7 @@ function useClickedOutsideElement(refElement, handleClickOutside) {
42226
42238
  }
42227
42239
 
42228
42240
  var _a;
42241
+ /** Implements the [updated modal design system](https://www.figma.com/design/E7g3n5ziI7bR8MisISayia/FigLUI?node-id=9924-54717&t=q2r6Gct1cKGP9Q5B-0), keeping the same api as `LuiModal` as much as possible. */
42229
42242
  var LuiModalV2 = function (props) {
42230
42243
  var _a;
42231
42244
  var modalRef = React.useRef(null);
@@ -59490,20 +59503,23 @@ var Toast = function (props) {
59490
59503
  var reducer = function (state, action) {
59491
59504
  var updatedAt = new Date().getTime();
59492
59505
  if (action.type === 'add') {
59493
- var createdAt = updatedAt;
59494
- var notification = action.notification, options = action.options, id = action.id;
59495
- var toast = { notification: notification, options: options, id: id, updatedAt: updatedAt, createdAt: createdAt };
59496
- var toasts = __spreadArray([toast], state.toasts, true);
59497
- return trim(__assign(__assign({}, state), { toasts: toasts }));
59506
+ var notification = action.notification, options = action.options, id_1 = action.id;
59507
+ var base = { notification: notification, options: options, id: id_1, updatedAt: updatedAt };
59508
+ var found = state.toasts.find(function (t) { return t.id === id_1; });
59509
+ if (!found) {
59510
+ var toast = __assign(__assign({}, base), { createdAt: updatedAt });
59511
+ var toasts = __spreadArray([toast], state.toasts, true);
59512
+ return trim(__assign(__assign({}, state), { toasts: toasts }));
59513
+ }
59514
+ else {
59515
+ var toast_1 = __assign(__assign({}, found), base);
59516
+ var toasts = state.toasts.map(function (t) { return (t.id !== id_1 ? t : toast_1); });
59517
+ return __assign(__assign({}, state), { toasts: toasts });
59518
+ }
59498
59519
  }
59499
59520
  if (action.type === 'remove') {
59500
59521
  return __assign(__assign({}, state), { toasts: state.toasts.filter(function (t) { return t.id !== action.id; }) });
59501
59522
  }
59502
- if (action.type === 'update') {
59503
- var notification = action.notification, options = action.options, id_1 = action.id;
59504
- var updated_1 = { notification: notification, options: options, id: id_1, updatedAt: updatedAt };
59505
- return __assign(__assign({}, state), { toasts: state.toasts.map(function (t) { return (t.id !== id_1 ? t : __assign(__assign({}, t), updated_1)); }) });
59506
- }
59507
59523
  return state;
59508
59524
  };
59509
59525
  var useToastState = function (_a) {
@@ -59539,6 +59555,9 @@ var trim = function (state) { return (__assign(__assign({}, state), { toasts: Ob
59539
59555
  })
59540
59556
  .flat() })); };
59541
59557
 
59558
+ var ToastVersion = React.createContext('v1');
59559
+ var useToastVersion = function () { return React.useContext(ToastVersion); };
59560
+
59542
59561
  var ToastContext = React__namespace.createContext(undefined);
59543
59562
  var portal = getToastProviderEl();
59544
59563
  var ToastProvider = function (_a) {
@@ -59548,7 +59567,7 @@ var ToastProvider = function (_a) {
59548
59567
  if (React.useContext(ToastContext)) {
59549
59568
  return React__namespace.createElement(React__namespace.Fragment, null, children);
59550
59569
  }
59551
- return (React__namespace.createElement(React__namespace.Fragment, null,
59570
+ return (React__namespace.createElement(ToastVersion.Provider, { value: "v2" },
59552
59571
  ReactDOM__default["default"].createPortal(React__namespace.createElement(React__namespace.Fragment, null, Object.entries(toasts).map(function (_a) {
59553
59572
  var section = _a[0], list = _a[1];
59554
59573
  return (React__namespace.createElement(ToastSection, __assign({ key: section }, {
@@ -59561,30 +59580,35 @@ var ToastProvider = function (_a) {
59561
59580
  React__namespace.createElement(ToastContext.Provider, { value: dispatch }, children)));
59562
59581
  };
59563
59582
 
59564
- var getUniqueToastId = function () { return Math.floor(Math.random() * 10000); };
59583
+ var getUniqueToastId = function () {
59584
+ var _a;
59585
+ var id = Number("".concat(Math.floor(Math.random() * 10000000)).slice(0, 4));
59586
+ var selector = "[data-toastid=\"".concat(id, "\"]");
59587
+ var duplicate = ((_a = getToastProviderEl().querySelectorAll(selector)) === null || _a === void 0 ? void 0 : _a.length) > 0;
59588
+ if (duplicate) {
59589
+ return getUniqueToastId();
59590
+ }
59591
+ return id;
59592
+ };
59565
59593
  var toastFunctions = function (dispatch) {
59566
- var toast = function (notification, options) {
59567
- var id = getUniqueToastId();
59594
+ var toast = function (notification, config) {
59595
+ if (config === void 0) { config = {}; }
59596
+ var _a = config.id, id = _a === void 0 ? getUniqueToastId() : _a, options = __rest(config, ["id"]);
59568
59597
  dispatch === null || dispatch === void 0 ? void 0 : dispatch({ type: 'add', notification: notification, options: options, id: id });
59569
59598
  return id;
59570
59599
  };
59571
- var update = function (id, notification, options) {
59572
- dispatch === null || dispatch === void 0 ? void 0 : dispatch({ type: 'update', notification: notification, options: options, id: id });
59573
- return id;
59574
- };
59575
59600
  var banner = function (level, defaults) {
59576
59601
  if (defaults === void 0) { defaults = {}; }
59577
59602
  return function (children, options) {
59578
59603
  if (options === void 0) { options = defaults; }
59579
59604
  return toast(function (_a) {
59580
- var close = _a.close;
59581
- return (React__namespace.createElement(LuiBannerV2, __assign({}, { level: level, children: children }, { onDismiss: options.timeout === Infinity ? close : undefined })));
59605
+ var onDismiss = _a.close;
59606
+ return (React__namespace.createElement(LuiBannerV2, __assign({}, { level: level, children: children, onDismiss: onDismiss })));
59582
59607
  }, options);
59583
59608
  };
59584
59609
  };
59585
59610
  return {
59586
59611
  toast: toast,
59587
- update: update,
59588
59612
  dismiss: function (id) { return dispatch === null || dispatch === void 0 ? void 0 : dispatch({ type: 'remove', id: id }); },
59589
59613
  info: banner('info'),
59590
59614
  success: banner('success'),
@@ -59593,6 +59617,32 @@ var toastFunctions = function (dispatch) {
59593
59617
  plain: banner()
59594
59618
  };
59595
59619
  };
59620
+ /**
59621
+ * Hook to display pop-up messages in response to a user action or state change. Examples include: Saving, exporting, committing, deleting, etc.
59622
+ * It requires 'LuiMessagingContextProvider' with property version set to 'v2'.
59623
+ * Toasts that are `warning` or `error` won't timeout automatically, unless configured otherwise.
59624
+ * @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.
59625
+ * @example
59626
+ * // Error message
59627
+ * const { error } = useToast();
59628
+ * error("Failed to save");
59629
+ * @example
59630
+ * // Toast error and then turn toast into success
59631
+ * const { error, success } = useToast();
59632
+ * const toastId = error("Failed to save");
59633
+ * success('Toast updated to success', { id: toastId });
59634
+ * @example
59635
+ * // Dismiss info toast that won't dismiss automatically
59636
+ * const { info, dismiss } = useToast();
59637
+ * const toastId = info(<a href="#">Some useful link</a>, { timeout: Infinity });
59638
+ * dismiss(toastId);
59639
+ * @example
59640
+ * // Custom toasts accept `ReactNode` or `({ close: () => void }) => ReactNode`
59641
+ * const { toast } = useToast();
59642
+ * toast(({ close }) => <button onClick={() => close()}>Click me to dismiss</button>, { timeout: Infinity });
59643
+ * toast(<div>I will be dismissed in 3s.</div>, { timeout: 3000 });
59644
+ * toast("I'm placed in the topLeft of the page", { position: 'topLeft' });
59645
+ */
59596
59646
  var useToast = function () {
59597
59647
  var dispatch = React.useContext(ToastContext);
59598
59648
  return React.useMemo(function () { return toastFunctions(dispatch); }, [dispatch]);
@@ -59684,7 +59734,7 @@ var LuiToastMessageCompatibleInterface = function (props) {
59684
59734
  var toastIdRef = React.useRef(undefined);
59685
59735
  var onceDismissedRef = React.useRef(false);
59686
59736
  var displayRef = React.useRef(display);
59687
- var _c = useToast(), toast = _c.toast, dismiss = _c.dismiss, update = _c.update;
59737
+ var _c = useToast(), toast = _c.toast, dismiss = _c.dismiss;
59688
59738
  displayRef.current = display;
59689
59739
  // Close when it's unmounted
59690
59740
  React.useEffect(function () {
@@ -59700,23 +59750,18 @@ var LuiToastMessageCompatibleInterface = function (props) {
59700
59750
  if (display && !onceDismissed) {
59701
59751
  var notification = function (_a) {
59702
59752
  var close = _a.close;
59703
- var onDismiss = requireDismiss ? close : undefined;
59704
- return React__default["default"].createElement(LuiBannerV2, __assign({}, { level: level, onDismiss: onDismiss, children: children }));
59753
+ return React__default["default"].createElement(LuiBannerV2, __assign({}, { level: level, onDismiss: close, children: children }));
59705
59754
  };
59706
59755
  var options = {
59707
- timeout: displayTimeout === 0 ? Infinity : displayTimeout,
59756
+ timeout: requireDismiss || !displayTimeout ? Infinity : displayTimeout,
59708
59757
  onLeave: function () {
59709
59758
  onClose === null || onClose === void 0 ? void 0 : onClose();
59710
59759
  onceDismissedRef.current = displayRef.current;
59711
59760
  toastIdRef.current = undefined;
59712
- }
59761
+ },
59762
+ id: toastIdRef.current
59713
59763
  };
59714
- if (!toastIdRef.current) {
59715
- toastIdRef.current = toast(notification, options);
59716
- }
59717
- else {
59718
- update(toastIdRef.current, notification, options);
59719
- }
59764
+ toastIdRef.current = toast(notification, options);
59720
59765
  }
59721
59766
  if (!display && toastIdRef.current !== undefined) {
59722
59767
  dismiss(toastIdRef.current);
@@ -59726,47 +59771,49 @@ var LuiToastMessageCompatibleInterface = function (props) {
59726
59771
  return React__default["default"].createElement(React__default["default"].Fragment, null);
59727
59772
  };
59728
59773
 
59774
+ var getTimeout = function (_a) {
59775
+ var requireDismiss = _a.requireDismiss, messageLevel = _a.messageLevel;
59776
+ return (requireDismiss !== null && requireDismiss !== void 0 ? requireDismiss : messageLevel === 'error') ? Infinity : undefined;
59777
+ };
59729
59778
  /**
59730
59779
  * Provide new toast hook with old interface from original useShowLUIMessage
59731
59780
  */
59732
59781
  var useShowLUIMessageCompatibleInterface = function () {
59733
- var toast = useToast().toast;
59782
+ var t = useToast();
59734
59783
  return function (props) {
59735
- var message = props.message, messageLevel = props.messageLevel, requireDismiss = props.requireDismiss;
59736
- var toastProps = { children: message, level: messageLevel };
59737
- if (requireDismiss || messageLevel === 'error') {
59738
- toast(function (_a) {
59739
- var close = _a.close;
59740
- return React__default["default"].createElement(LuiBannerV2, __assign({}, toastProps, { onDismiss: close }));
59741
- });
59742
- }
59743
- else {
59744
- toast(React__default["default"].createElement(LuiBannerV2, __assign({}, toastProps)));
59745
- }
59784
+ return t[props.messageLevel](props.message, { timeout: getTimeout(props) });
59746
59785
  };
59747
59786
  };
59748
59787
 
59749
- var ToastUpgrade = React.createContext(false);
59750
- var useToastUpgrade = function () { return React.useContext(ToastUpgrade); };
59751
59788
  /**
59752
- * @deprecated Use ToastProvider or LuiMessagingContextProvider with upgrade prop set to true to get the new designs
59789
+ * Context provider to handle global logic of toast messages. It defaults to legacy version 'v1'.
59790
+ * @description Set version property to 'v2' to get the latest designs.
59753
59791
  */
59754
59792
  var LuiMessagingContextProvider = function (props) {
59755
- var _a = props.upgrade, upgrade = _a === void 0 ? false : _a, rest = __rest(props, ["upgrade"]);
59756
59793
  if (React.useContext(ToastContext)) {
59757
- return React__default["default"].createElement(React__default["default"].Fragment, null, rest.children);
59794
+ return React__default["default"].createElement(React__default["default"].Fragment, null, props.children);
59758
59795
  }
59759
- 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)))));
59796
+ 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" },
59797
+ React__default["default"].createElement(LuiMessagingContextProvider$1, null, props.children)))));
59760
59798
  };
59799
+ /**
59800
+ * Hook to display pop-up messages in response to a user action or state change. Examples include: Saving, exporting, committing, deleting, etc.
59801
+ * @description Legacy hook to trigger toasts. It requires {@linkcode LuiMessagingContextProvider}.
59802
+ * @alias useToast. For a more flexible API when you're using v2 designs, using useToast is recommended.
59803
+ * @returns Toaster function to trigger branded toasts (e.g. warning, error, info) in the top right of the page.
59804
+ * @example
59805
+ * const toaster = useShowLUIMessage();
59806
+ * toaster({ message: 'Failed to save', messageType: 'toast', messageLevel: 'error' });
59807
+ */
59761
59808
  var useShowLUIMessage = function () {
59762
- var upgrade = useToastUpgrade();
59809
+ var version = useToastVersion();
59763
59810
  var older = useShowLUIMessage$1();
59764
59811
  var newer = useShowLUIMessageCompatibleInterface();
59765
- return upgrade ? newer : older;
59812
+ return version === 'v2' ? newer : older;
59766
59813
  };
59767
59814
  var LuiToastMessage = function (props) {
59768
- var upgrade = useToastUpgrade();
59769
- return upgrade ? (React__default["default"].createElement(LuiToastMessageCompatibleInterface, __assign({}, props))) : (React__default["default"].createElement(LuiToastMessage$1, __assign({}, props)));
59815
+ var version = useToastVersion();
59816
+ return version === 'v2' ? (React__default["default"].createElement(LuiToastMessageCompatibleInterface, __assign({}, props))) : (React__default["default"].createElement(LuiToastMessage$1, __assign({}, props)));
59770
59817
  };
59771
59818
 
59772
59819
  exports.CheckboxItemRenderer = CheckboxItemRenderer;
@@ -59870,7 +59917,6 @@ exports.LuiTooltip = LuiTooltip;
59870
59917
  exports.LuiUpdatesSplashModal = LuiUpdatesSplashModal;
59871
59918
  exports.RadioItemRenderer = RadioItemRenderer;
59872
59919
  exports.Splitter = Splitter;
59873
- exports.ToastProvider = ToastProvider;
59874
59920
  exports.ToolbarButton = ToolbarButton;
59875
59921
  exports.ToolbarItem = ToolbarItem;
59876
59922
  exports.ToolbarItemSeparator = ToolbarItemSeparator;