@linzjs/lui 21.35.1-0 → 21.36.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/dist/lui.esm.js CHANGED
@@ -39801,12 +39801,17 @@ var motif = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0id
39801
39801
  *
39802
39802
  * @param onEscape the handler function
39803
39803
  */
39804
- var useEscapeFunction = function (onEscape, trigger) {
39805
- if (trigger === void 0) { trigger = 'keydown'; }
39806
- var escFunction = useCallback(function (event) { return event.key === 'Escape' && onEscape(event); }, [onEscape]);
39804
+ var useEscapeFunction = function (onEscape) {
39805
+ var escFunction = useCallback(function (event) {
39806
+ if (event.keyCode === 27) {
39807
+ onEscape();
39808
+ }
39809
+ }, [onEscape]);
39807
39810
  useEffect(function () {
39808
- document.addEventListener(trigger, escFunction);
39809
- return function () { return document.removeEventListener(trigger, escFunction); };
39811
+ document.addEventListener('keydown', escFunction, false);
39812
+ return function () {
39813
+ document.removeEventListener('keydown', escFunction, false);
39814
+ };
39810
39815
  }, [escFunction]);
39811
39816
  };
39812
39817
  /**
@@ -42168,119 +42173,6 @@ var LuiModalHeader = function (props) {
42168
42173
  React__default.createElement(LuiIcon, { name: "ic_clear", alt: "Help", size: "lg" }))))))));
42169
42174
  };
42170
42175
 
42171
- /**
42172
- * This hook will callback with handleClickOutside() when "mousedown" dom event occurs off the refElement
42173
- * usage:
42174
- ```typescript
42175
- const refElement = React.useRef<HTMLButtonElement>(null);
42176
- const handleClickOutside = () => {
42177
- console.log("hello world");
42178
- };
42179
- useClickedOutsideElement(refElement, handleClickOutside);
42180
- return <button ref={refElement}>Click Me!</button>;
42181
- ```
42182
- */
42183
- function useClickedOutsideElement(refElement, handleClickOutside) {
42184
- React__default.useEffect(function () {
42185
- function onOutsideClicked(event) {
42186
- var element = refElement.current;
42187
- if (!(element === null || element === void 0 ? void 0 : element.contains(event.target))) {
42188
- handleClickOutside();
42189
- }
42190
- }
42191
- document.addEventListener('mousedown', onOutsideClicked);
42192
- return function () {
42193
- document.removeEventListener('mousedown', onOutsideClicked);
42194
- };
42195
- // eslint-disable-next-line react-hooks/exhaustive-deps
42196
- }, []);
42197
- }
42198
-
42199
- var _a;
42200
- var LuiModalV2 = function (props) {
42201
- var _a;
42202
- var modalRef = useRef(null);
42203
- var handleClickOutside = useCallback(function () { var _a; return props.shouldCloseOnOverlayClick && ((_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props)); }, [props.shouldCloseOnEsc, props.onClose]);
42204
- useClickedOutsideElement(modalRef, handleClickOutside);
42205
- var handleEsc = useCallback(function (e) {
42206
- var _a;
42207
- if (props.shouldCloseOnEsc !== false) {
42208
- e.stopPropagation();
42209
- (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
42210
- }
42211
- }, [props.shouldCloseOnEsc, props.onClose]);
42212
- useEscapeFunction(handleEsc, props.shouldCloseOnEsc === 'use-keyup' ? 'keyup' : 'keydown');
42213
- var handleAutoFocus = function (el) {
42214
- if (props.preventAutoFocus)
42215
- return;
42216
- if (el && !el.contains(el.ownerDocument.activeElement)) {
42217
- var firstFocusableElement = el.querySelector('input,button');
42218
- firstFocusableElement === null || firstFocusableElement === void 0 ? void 0 : firstFocusableElement.focus();
42219
- }
42220
- };
42221
- var showCloseButton = Boolean(props.showCloseButton && props.onClose);
42222
- var showHelpButton = Boolean(props.helpLink);
42223
- var showButtons = showCloseButton || showHelpButton;
42224
- var showHeadingIcon = props.headingIcon && !props.isLoading;
42225
- return (React__default.createElement(Modal, { key: props.key, isOpen: true,
42226
- // disble the `shouldClose` props as we handle them ourselves
42227
- shouldCloseOnOverlayClick: false, shouldCloseOnEsc: false, overlayClassName: "modal", className: props.lowContrast ? 'lui-scrim-low-contrast' : 'lui-scrim',
42228
- // required to prevent warnings that are not applicable in real usage
42229
- ariaHideApp: !isTest, parentSelector: props.appendToElement },
42230
- React__default.createElement("div", { ref: function (el) {
42231
- modalRef.current = el;
42232
- handleAutoFocus(el);
42233
- }, className: clsx('lui-modal-v2 lui-box-shadow', props.maxWidth && 'lui-max-width', props.className) },
42234
- React__default.createElement("div", { className: "lui-modal-v2-header" },
42235
- props.isLoading && (React__default.createElement(LuiMiniSpinner, { size: 20, divProps: { className: 'lui-modal-v2-header-spinner' } })),
42236
- showHeadingIcon && (React__default.createElement("div", { className: "lui-modal-v2-header-icon" },
42237
- React__default.createElement(LuiIcon, __assign({ size: "md", name: "", alt: "Help" }, props.headingIcon, { className: clsx('', (_a = props.headingIcon) === null || _a === void 0 ? void 0 : _a.className) })))),
42238
- props.headingText && (React__default.createElement("h2", { className: "lui-modal-v2-header-title" }, props.headingText)),
42239
- showButtons && (React__default.createElement("div", { className: "lui-modal-v2-header-buttons" },
42240
- showHelpButton && React__default.createElement(HelpButton, { helpLink: props.helpLink }),
42241
- showCloseButton && React__default.createElement(CloseButton, { onClose: props.onClose })))),
42242
- React__default.createElement("div", { className: "lui-modal-v2-contents" }, props.children))));
42243
- };
42244
- var ButtonRow = function (props) { return (React__default.createElement("div", { className: clsx('lui-modal-v2-btn-row', props.className) }, props.children)); };
42245
- LuiModalV2.Buttons = ButtonRow;
42246
- var HelpButton = function (props) { return (React__default.createElement("button", { "aria-label": "Modal Help", title: "Help", className: "lui-modal-v2-header-help-btn", onClick: typeof props.helpLink === 'string'
42247
- ? function () { return window.open(props.helpLink, '_blank'); }
42248
- : props.helpLink },
42249
- React__default.createElement(LuiIcon, { name: "ic_help_outline", alt: "Help", size: "md" }))); };
42250
- var CloseButton = function (props) { return (React__default.createElement("button", { "aria-label": "Modal Close", title: "Close", className: "lui-modal-v2-header-close-btn", onClick: props.onClose },
42251
- React__default.createElement(LuiIcon, { name: "ic_clear", alt: "Help", size: "md" }))); };
42252
- /** Allows injecting the modal header text. Useful when you can't use the `headingText` prop directly, or when you need to render styled content. */
42253
- var HeaderTitle = function (props) {
42254
- var _a = useState(), target = _a[0], setTarget = _a[1];
42255
- // on mount, find the parent modal and set it as the target
42256
- if (!target)
42257
- return (React__default.createElement("div", { style: { display: 'none' }, ref: function (el) {
42258
- var modal = el === null || el === void 0 ? void 0 : el.closest(".lui-modal-v2");
42259
- var modalHeader = modal === null || modal === void 0 ? void 0 : modal.querySelector(':scope > .lui-modal-v2-header');
42260
- modalHeader && setTarget(modalHeader);
42261
- } }));
42262
- return createPortal(React__default.createElement("h2", { className: clsx('lui-modal-v2-header-title lui-modal-v2-header-title-portal', props.className) }, props.children), target);
42263
- };
42264
- LuiModalV2.HeaderTitle = HeaderTitle;
42265
- // this is here for the tests
42266
- 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';
42267
- if (!isTest)
42268
- Modal.setAppElement('#root');
42269
-
42270
- var LuiAlertModalV2 = function (props) {
42271
- var level = props.level, className = props.className, children = props.children, rest = __rest(props, ["level", "className", "children"]);
42272
- var materialIcon = getMaterialIconForLevel(level);
42273
- var status = Object.keys(ICON_STATUS).includes(level)
42274
- ? level
42275
- : 'interactive';
42276
- return (React__default.createElement(LuiModalV2, __assign({}, rest, { className: clsx("lui-modal-v2-alert lui-modal-v2-".concat(level), className), headingIcon: {
42277
- name: "ic_".concat(materialIcon),
42278
- alt: "".concat(level, " status icon"),
42279
- size: 'md',
42280
- status: status
42281
- } }), children));
42282
- };
42283
-
42284
42176
  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";
42285
42177
  styleInject(css_248z$g);
42286
42178
 
@@ -46879,6 +46771,34 @@ var LuiTooltip = function (props) {
46879
46771
  return React__default.createElement(Tippy, __assign({}, tippyProps), children);
46880
46772
  };
46881
46773
 
46774
+ /**
46775
+ * This hook will callback with handleClickOutside() when "mousedown" dom event occurs off the refElement
46776
+ * usage:
46777
+ ```typescript
46778
+ const refElement = React.useRef<HTMLButtonElement>(null);
46779
+ const handleClickOutside = () => {
46780
+ console.log("hello world");
46781
+ };
46782
+ useClickedOutsideElement(refElement, handleClickOutside);
46783
+ return <button ref={refElement}>Click Me!</button>;
46784
+ ```
46785
+ */
46786
+ function useClickedOutsideElement(refElement, handleClickOutside) {
46787
+ React__default.useEffect(function () {
46788
+ function onOutsideClicked(event) {
46789
+ var element = refElement.current;
46790
+ if (!(element === null || element === void 0 ? void 0 : element.contains(event.target))) {
46791
+ handleClickOutside();
46792
+ }
46793
+ }
46794
+ document.addEventListener('mousedown', onOutsideClicked);
46795
+ return function () {
46796
+ document.removeEventListener('mousedown', onOutsideClicked);
46797
+ };
46798
+ // eslint-disable-next-line react-hooks/exhaustive-deps
46799
+ }, []);
46800
+ }
46801
+
46882
46802
  var getFillClassName = function (fillVariation, backgroundFill) {
46883
46803
  if (backgroundFill) {
46884
46804
  return 'LuiBadge--fill';
@@ -59461,20 +59381,23 @@ var Toast = function (props) {
59461
59381
  var reducer = function (state, action) {
59462
59382
  var updatedAt = new Date().getTime();
59463
59383
  if (action.type === 'add') {
59464
- var createdAt = updatedAt;
59465
- var notification = action.notification, options = action.options, id = action.id;
59466
- var toast = { notification: notification, options: options, id: id, updatedAt: updatedAt, createdAt: createdAt };
59467
- var toasts = __spreadArray([toast], state.toasts, true);
59468
- return trim(__assign(__assign({}, state), { toasts: toasts }));
59384
+ var notification = action.notification, options = action.options, id_1 = action.id;
59385
+ var base = { notification: notification, options: options, id: id_1, updatedAt: updatedAt };
59386
+ var found = state.toasts.find(function (t) { return t.id === id_1; });
59387
+ if (!found) {
59388
+ var toast = __assign(__assign({}, base), { createdAt: updatedAt });
59389
+ var toasts = __spreadArray([toast], state.toasts, true);
59390
+ return trim(__assign(__assign({}, state), { toasts: toasts }));
59391
+ }
59392
+ else {
59393
+ var toast_1 = __assign(__assign({}, found), base);
59394
+ var toasts = state.toasts.map(function (t) { return (t.id !== id_1 ? t : toast_1); });
59395
+ return __assign(__assign({}, state), { toasts: toasts });
59396
+ }
59469
59397
  }
59470
59398
  if (action.type === 'remove') {
59471
59399
  return __assign(__assign({}, state), { toasts: state.toasts.filter(function (t) { return t.id !== action.id; }) });
59472
59400
  }
59473
- if (action.type === 'update') {
59474
- var notification = action.notification, options = action.options, id_1 = action.id;
59475
- var updated_1 = { notification: notification, options: options, id: id_1, updatedAt: updatedAt };
59476
- return __assign(__assign({}, state), { toasts: state.toasts.map(function (t) { return (t.id !== id_1 ? t : __assign(__assign({}, t), updated_1)); }) });
59477
- }
59478
59401
  return state;
59479
59402
  };
59480
59403
  var useToastState = function (_a) {
@@ -59510,6 +59433,9 @@ var trim = function (state) { return (__assign(__assign({}, state), { toasts: Ob
59510
59433
  })
59511
59434
  .flat() })); };
59512
59435
 
59436
+ var ToastVersion = createContext('v1');
59437
+ var useToastVersion = function () { return useContext(ToastVersion); };
59438
+
59513
59439
  var ToastContext = React.createContext(undefined);
59514
59440
  var portal = getToastProviderEl();
59515
59441
  var ToastProvider = function (_a) {
@@ -59519,7 +59445,7 @@ var ToastProvider = function (_a) {
59519
59445
  if (useContext(ToastContext)) {
59520
59446
  return React.createElement(React.Fragment, null, children);
59521
59447
  }
59522
- return (React.createElement(React.Fragment, null,
59448
+ return (React.createElement(ToastVersion.Provider, { value: "v2" },
59523
59449
  ReactDOM.createPortal(React.createElement(React.Fragment, null, Object.entries(toasts).map(function (_a) {
59524
59450
  var section = _a[0], list = _a[1];
59525
59451
  return (React.createElement(ToastSection, __assign({ key: section }, {
@@ -59532,30 +59458,35 @@ var ToastProvider = function (_a) {
59532
59458
  React.createElement(ToastContext.Provider, { value: dispatch }, children)));
59533
59459
  };
59534
59460
 
59535
- var getUniqueToastId = function () { return Math.floor(Math.random() * 10000); };
59461
+ var getUniqueToastId = function () {
59462
+ var _a;
59463
+ var id = Number("".concat(Math.floor(Math.random() * 10000000)).slice(0, 4));
59464
+ var selector = "[data-toastid=\"".concat(id, "\"]");
59465
+ var duplicate = ((_a = getToastProviderEl().querySelectorAll(selector)) === null || _a === void 0 ? void 0 : _a.length) > 0;
59466
+ if (duplicate) {
59467
+ return getUniqueToastId();
59468
+ }
59469
+ return id;
59470
+ };
59536
59471
  var toastFunctions = function (dispatch) {
59537
- var toast = function (notification, options) {
59538
- var id = getUniqueToastId();
59472
+ var toast = function (notification, config) {
59473
+ if (config === void 0) { config = {}; }
59474
+ var _a = config.id, id = _a === void 0 ? getUniqueToastId() : _a, options = __rest(config, ["id"]);
59539
59475
  dispatch === null || dispatch === void 0 ? void 0 : dispatch({ type: 'add', notification: notification, options: options, id: id });
59540
59476
  return id;
59541
59477
  };
59542
- var update = function (id, notification, options) {
59543
- dispatch === null || dispatch === void 0 ? void 0 : dispatch({ type: 'update', notification: notification, options: options, id: id });
59544
- return id;
59545
- };
59546
59478
  var banner = function (level, defaults) {
59547
59479
  if (defaults === void 0) { defaults = {}; }
59548
59480
  return function (children, options) {
59549
59481
  if (options === void 0) { options = defaults; }
59550
59482
  return toast(function (_a) {
59551
- var close = _a.close;
59552
- return (React.createElement(LuiBannerV2, __assign({}, { level: level, children: children }, { onDismiss: options.timeout === Infinity ? close : undefined })));
59483
+ var onDismiss = _a.close;
59484
+ return (React.createElement(LuiBannerV2, __assign({}, { level: level, children: children, onDismiss: onDismiss })));
59553
59485
  }, options);
59554
59486
  };
59555
59487
  };
59556
59488
  return {
59557
59489
  toast: toast,
59558
- update: update,
59559
59490
  dismiss: function (id) { return dispatch === null || dispatch === void 0 ? void 0 : dispatch({ type: 'remove', id: id }); },
59560
59491
  info: banner('info'),
59561
59492
  success: banner('success'),
@@ -59564,6 +59495,32 @@ var toastFunctions = function (dispatch) {
59564
59495
  plain: banner()
59565
59496
  };
59566
59497
  };
59498
+ /**
59499
+ * Hook to display pop-up messages in response to a user action or state change. Examples include: Saving, exporting, committing, deleting, etc.
59500
+ * It requires 'LuiMessagingContextProvider' with property version set to 'v2'.
59501
+ * Toasts that are `warning` or `error` won't timeout automatically, unless configured otherwise.
59502
+ * @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.
59503
+ * @example
59504
+ * // Error message
59505
+ * const { error } = useToast();
59506
+ * error("Failed to save");
59507
+ * @example
59508
+ * // Toast error and then turn toast into success
59509
+ * const { error, success } = useToast();
59510
+ * const toastId = error("Failed to save");
59511
+ * success('Toast updated to success', { id: toastId });
59512
+ * @example
59513
+ * // Dismiss info toast that won't dismiss automatically
59514
+ * const { info, dismiss } = useToast();
59515
+ * const toastId = info(<a href="#">Some useful link</a>, { timeout: Infinity });
59516
+ * dismiss(toastId);
59517
+ * @example
59518
+ * // Custom toasts accept `ReactNode` or `({ close: () => void }) => ReactNode`
59519
+ * const { toast } = useToast();
59520
+ * toast(({ close }) => <button onClick={() => close()}>Click me to dismiss</button>, { timeout: Infinity });
59521
+ * toast(<div>I will be dismissed in 3s.</div>, { timeout: 3000 });
59522
+ * toast("I'm placed in the topLeft of the page", { position: 'topLeft' });
59523
+ */
59567
59524
  var useToast = function () {
59568
59525
  var dispatch = useContext(ToastContext);
59569
59526
  return useMemo(function () { return toastFunctions(dispatch); }, [dispatch]);
@@ -59655,7 +59612,7 @@ var LuiToastMessageCompatibleInterface = function (props) {
59655
59612
  var toastIdRef = useRef(undefined);
59656
59613
  var onceDismissedRef = useRef(false);
59657
59614
  var displayRef = useRef(display);
59658
- var _c = useToast(), toast = _c.toast, dismiss = _c.dismiss, update = _c.update;
59615
+ var _c = useToast(), toast = _c.toast, dismiss = _c.dismiss;
59659
59616
  displayRef.current = display;
59660
59617
  // Close when it's unmounted
59661
59618
  useEffect(function () {
@@ -59671,23 +59628,18 @@ var LuiToastMessageCompatibleInterface = function (props) {
59671
59628
  if (display && !onceDismissed) {
59672
59629
  var notification = function (_a) {
59673
59630
  var close = _a.close;
59674
- var onDismiss = requireDismiss ? close : undefined;
59675
- return React__default.createElement(LuiBannerV2, __assign({}, { level: level, onDismiss: onDismiss, children: children }));
59631
+ return React__default.createElement(LuiBannerV2, __assign({}, { level: level, onDismiss: close, children: children }));
59676
59632
  };
59677
59633
  var options = {
59678
- timeout: displayTimeout === 0 ? Infinity : displayTimeout,
59634
+ timeout: requireDismiss || !displayTimeout ? Infinity : displayTimeout,
59679
59635
  onLeave: function () {
59680
59636
  onClose === null || onClose === void 0 ? void 0 : onClose();
59681
59637
  onceDismissedRef.current = displayRef.current;
59682
59638
  toastIdRef.current = undefined;
59683
- }
59639
+ },
59640
+ id: toastIdRef.current
59684
59641
  };
59685
- if (!toastIdRef.current) {
59686
- toastIdRef.current = toast(notification, options);
59687
- }
59688
- else {
59689
- update(toastIdRef.current, notification, options);
59690
- }
59642
+ toastIdRef.current = toast(notification, options);
59691
59643
  }
59692
59644
  if (!display && toastIdRef.current !== undefined) {
59693
59645
  dismiss(toastIdRef.current);
@@ -59697,48 +59649,50 @@ var LuiToastMessageCompatibleInterface = function (props) {
59697
59649
  return React__default.createElement(React__default.Fragment, null);
59698
59650
  };
59699
59651
 
59652
+ var getTimeout = function (_a) {
59653
+ var requireDismiss = _a.requireDismiss, messageLevel = _a.messageLevel;
59654
+ return (requireDismiss !== null && requireDismiss !== void 0 ? requireDismiss : messageLevel === 'error') ? Infinity : undefined;
59655
+ };
59700
59656
  /**
59701
59657
  * Provide new toast hook with old interface from original useShowLUIMessage
59702
59658
  */
59703
59659
  var useShowLUIMessageCompatibleInterface = function () {
59704
- var toast = useToast().toast;
59660
+ var t = useToast();
59705
59661
  return function (props) {
59706
- var message = props.message, messageLevel = props.messageLevel, requireDismiss = props.requireDismiss;
59707
- var toastProps = { children: message, level: messageLevel };
59708
- if (requireDismiss || messageLevel === 'error') {
59709
- toast(function (_a) {
59710
- var close = _a.close;
59711
- return React__default.createElement(LuiBannerV2, __assign({}, toastProps, { onDismiss: close }));
59712
- });
59713
- }
59714
- else {
59715
- toast(React__default.createElement(LuiBannerV2, __assign({}, toastProps)));
59716
- }
59662
+ return t[props.messageLevel](props.message, { timeout: getTimeout(props) });
59717
59663
  };
59718
59664
  };
59719
59665
 
59720
- var ToastUpgrade = createContext(false);
59721
- var useToastUpgrade = function () { return useContext(ToastUpgrade); };
59722
59666
  /**
59723
- * @deprecated Use ToastProvider or LuiMessagingContextProvider with upgrade prop set to true to get the new designs
59667
+ * Context provider to handle global logic of toast messages. It defaults to legacy version 'v1'.
59668
+ * @description Set version property to 'v2' to get the latest designs.
59724
59669
  */
59725
59670
  var LuiMessagingContextProvider = function (props) {
59726
- var _a = props.upgrade, upgrade = _a === void 0 ? false : _a, rest = __rest(props, ["upgrade"]);
59727
59671
  if (useContext(ToastContext)) {
59728
- return React__default.createElement(React__default.Fragment, null, rest.children);
59672
+ return React__default.createElement(React__default.Fragment, null, props.children);
59729
59673
  }
59730
- return (React__default.createElement(ToastUpgrade.Provider, { value: upgrade }, upgrade ? (React__default.createElement(ToastProvider, __assign({}, rest))) : (React__default.createElement(LuiMessagingContextProvider$1, __assign({}, rest)))));
59674
+ return (React__default.createElement(React__default.Fragment, null, props.version === 'v2' ? (React__default.createElement(ToastProvider, { stack: props.stack, defaultTimeout: props.defaultTimeout }, props.children)) : (React__default.createElement(ToastVersion.Provider, { value: "v1" },
59675
+ React__default.createElement(LuiMessagingContextProvider$1, null, props.children)))));
59731
59676
  };
59677
+ /**
59678
+ * Hook to display pop-up messages in response to a user action or state change. Examples include: Saving, exporting, committing, deleting, etc.
59679
+ * @description Legacy hook to trigger toasts. It requires {@linkcode LuiMessagingContextProvider}.
59680
+ * @alias useToast. For a more flexible API when you're using v2 designs, using useToast is recommended.
59681
+ * @returns Toaster function to trigger branded toasts (e.g. warning, error, info) in the top right of the page.
59682
+ * @example
59683
+ * const toaster = useShowLUIMessage();
59684
+ * toaster({ message: 'Failed to save', messageType: 'toast', messageLevel: 'error' });
59685
+ */
59732
59686
  var useShowLUIMessage = function () {
59733
- var upgrade = useToastUpgrade();
59687
+ var version = useToastVersion();
59734
59688
  var older = useShowLUIMessage$1();
59735
59689
  var newer = useShowLUIMessageCompatibleInterface();
59736
- return upgrade ? newer : older;
59690
+ return version === 'v2' ? newer : older;
59737
59691
  };
59738
59692
  var LuiToastMessage = function (props) {
59739
- var upgrade = useToastUpgrade();
59740
- return upgrade ? (React__default.createElement(LuiToastMessageCompatibleInterface, __assign({}, props))) : (React__default.createElement(LuiToastMessage$1, __assign({}, props)));
59693
+ var version = useToastVersion();
59694
+ return version === 'v2' ? (React__default.createElement(LuiToastMessageCompatibleInterface, __assign({}, props))) : (React__default.createElement(LuiToastMessage$1, __assign({}, props)));
59741
59695
  };
59742
59696
 
59743
- export { CheckboxItemRenderer, LUI_WINDOW_NAME, LuiAccordicard, LuiAccordicardStatic, LuiAccordion, LuiAlertModal, LuiAlertModalButtons, LuiAlertModalV2, LuiAppFooterSml, LuiBadge, LuiBanner, LuiBannerContent, LuiBannerV2, LuiBearingInput, LuiButton, LuiButtonGroup, LuiCheckboxInput, LuiCloseableHeaderMenuContext, LuiCloseableHeaderMenuContextV2, LuiCloseableHeaderMenuItem, LuiCloseableHeaderMenuItemV2, LuiComboSelect, LuiControlledMenu, LuiCounter, LuiDateInput, LuiDrawerMenu, LuiDrawerMenuDivider, LuiDrawerMenuDividerV2, LuiDrawerMenuOption, LuiDrawerMenuOptionV2, LuiDrawerMenuOptions, LuiDrawerMenuOptionsV2, LuiDrawerMenuSection, LuiDrawerMenuSectionV2, LuiDrawerMenuV2, LuiDropdownMenu, LuiDropdownMenuV2, LuiDropdownMenuV2DropContent, LuiErrorIllustration, LuiErrorPage, LuiExpandableBanner, LuiFileInputBox, LuiFilterContainer, LuiFilterMenu, LuiFloatingWindow, $F as LuiFloatingWindowContextProvider, LuiFooter, LuiFormSectionHeader, LuiHeader, LuiHeaderMenuItem, LuiHeaderMenuItemV2, LuiHeaderV2, LuiIcon, LuiListBox, LuiLoadingSpinner, LuiMenu, LuiMenuCloseButton, LuiMenuCloseButtonV2, LuiMessagingContextProvider, LuiMiniSpinner, LuiModal, LuiModalV2, LuiMoneyInput, LuiMultiSwitch, LuiMultiSwitchYesNo, LuiPagination, LuiProgressBar, LuiRadioInput, LuiResizableLayout, LuiSearchBox, LuiSearchInput, LuiSelectDataMenu, LuiSelectInput, LuiSelectMenu, LuiSelectMenuItem, LuiSelectMenuItemSwitch, LuiSelectSubMenuItem, LuiShadow, LuiSideMenu, LuiSideMenuItem, LuiSidePanel, LuiSidePanelProvider, LuiSideToolbar, LuiSplitButton, LuiSplitButtonMenuItem, LuiSplitButtonPosition, LuiStaticMessage, LuiStatusSpinner, LuiSwitchButton, LuiTab, LuiTabs, LuiTabsContext, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch, LuiTextAreaInput, LuiTextInput, LuiToastMessage, LuiTooltip, LuiUpdatesSplashModal, RadioItemRenderer, SplitPanelState, Splitter, ToastProvider, ToolbarButton, ToolbarDirection, ToolbarItem, ToolbarItemSeparator, breakpointQuery, breakpoints, isChromatic, useClickedOutsideElement, useEscapeFunction, useLuiCloseableHeaderMenuContextV2, lR as useLuiFloatingWindow, useMediaQuery, usePageClickFunction, useShowLUIMessage, useSplitterRef, useToast };
59697
+ export { CheckboxItemRenderer, LUI_WINDOW_NAME, LuiAccordicard, LuiAccordicardStatic, LuiAccordion, LuiAlertModal, LuiAlertModalButtons, LuiAppFooterSml, LuiBadge, LuiBanner, LuiBannerContent, LuiBannerV2, LuiBearingInput, LuiButton, LuiButtonGroup, LuiCheckboxInput, LuiCloseableHeaderMenuContext, LuiCloseableHeaderMenuContextV2, LuiCloseableHeaderMenuItem, LuiCloseableHeaderMenuItemV2, LuiComboSelect, LuiControlledMenu, LuiCounter, LuiDateInput, LuiDrawerMenu, LuiDrawerMenuDivider, LuiDrawerMenuDividerV2, LuiDrawerMenuOption, LuiDrawerMenuOptionV2, LuiDrawerMenuOptions, LuiDrawerMenuOptionsV2, LuiDrawerMenuSection, LuiDrawerMenuSectionV2, LuiDrawerMenuV2, LuiDropdownMenu, LuiDropdownMenuV2, LuiDropdownMenuV2DropContent, LuiErrorIllustration, LuiErrorPage, LuiExpandableBanner, LuiFileInputBox, LuiFilterContainer, LuiFilterMenu, LuiFloatingWindow, $F as LuiFloatingWindowContextProvider, LuiFooter, LuiFormSectionHeader, LuiHeader, LuiHeaderMenuItem, LuiHeaderMenuItemV2, LuiHeaderV2, LuiIcon, LuiListBox, LuiLoadingSpinner, LuiMenu, LuiMenuCloseButton, LuiMenuCloseButtonV2, LuiMessagingContextProvider, LuiMiniSpinner, LuiModal, LuiMoneyInput, LuiMultiSwitch, LuiMultiSwitchYesNo, LuiPagination, LuiProgressBar, LuiRadioInput, LuiResizableLayout, LuiSearchBox, LuiSearchInput, LuiSelectDataMenu, LuiSelectInput, LuiSelectMenu, LuiSelectMenuItem, LuiSelectMenuItemSwitch, LuiSelectSubMenuItem, LuiShadow, LuiSideMenu, LuiSideMenuItem, LuiSidePanel, LuiSidePanelProvider, LuiSideToolbar, LuiSplitButton, LuiSplitButtonMenuItem, LuiSplitButtonPosition, LuiStaticMessage, LuiStatusSpinner, LuiSwitchButton, LuiTab, LuiTabs, LuiTabsContext, LuiTabsGroup, LuiTabsPanel, LuiTabsPanelSwitch, LuiTextAreaInput, LuiTextInput, LuiToastMessage, LuiTooltip, LuiUpdatesSplashModal, RadioItemRenderer, SplitPanelState, Splitter, ToolbarButton, ToolbarDirection, ToolbarItem, ToolbarItemSeparator, breakpointQuery, breakpoints, isChromatic, useClickedOutsideElement, useEscapeFunction, useLuiCloseableHeaderMenuContextV2, lR as useLuiFloatingWindow, useMediaQuery, usePageClickFunction, useShowLUIMessage, useSplitterRef, useToast };
59744
59698
  //# sourceMappingURL=lui.esm.js.map