@linzjs/lui 21.35.1-0 → 21.37.0

package/dist/lui.esm.js

@@ -42089,6 +42089,9 @@ var FeatureIFrame = function (_a) {
         React__default.createElement("iframe", __assign({ width: iframeConfig.width, height: iframeConfig.height, src: iframeConfig.url, title: iframeConfig.title }, iFrameProps))));
 };
 
+/**
+ * @deprecated this is replaced by `LuiModalV2`. [Migration notes](https://github.com/linz/Lui/pull/1127).
+ */
 var LuiModal = function (props) {
     var _a;
     var node = useRef(null);
@@ -42144,6 +42147,9 @@ var LuiModal = function (props) {
                     }
                 } }, props.children))));
 };
+/**
+ * @deprecated this is replaced by `LuiAlertModalV2`. [Migration notes](https://github.com/linz/Lui/pull/1127).
+ */
 var LuiAlertModal = function (props) {
     var materialIcon = getMaterialIconForLevel(props.level);
     var level = props.level, className = props.className, children = props.children, rest = __rest(props, ["level", "className", "children"]);
@@ -42151,9 +42157,15 @@ var LuiAlertModal = function (props) {
         React__default.createElement(LuiIcon, { name: "ic_".concat(materialIcon), alt: "".concat(level, " status icon"), size: "lg", className: "lui-msg-status-icon" }),
         children));
 };
+/**
+ * @deprecated this is replaced by `LuiModalV2.Buttons`. [Migration notes](https://github.com/linz/Lui/pull/1127).
+ */
 var LuiAlertModalButtons = function (props) {
     return React__default.createElement("div", { className: "modal-btn-row" }, props.children);
 };
+/**
+ * @deprecated this is deprecated alongside `LuiModal`. [Migration notes](https://github.com/linz/Lui/pull/1127).
+ */
 var LuiModalHeader = function (props) {
     var _a;
     var headerStyle = (_a = props.style) !== null && _a !== void 0 ? _a : 'default';
@@ -42197,6 +42209,7 @@ function useClickedOutsideElement(refElement, handleClickOutside) {
 }
 
 var _a;
+/** 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. */
 var LuiModalV2 = function (props) {
     var _a;
     var modalRef = useRef(null);
@@ -59461,20 +59474,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) {
@@ -59510,6 +59526,9 @@ var trim = function (state) { return (__assign(__assign({}, state), { toasts: Ob
     })
         .flat() })); };
 
+var ToastVersion = createContext('v1');
+var useToastVersion = function () { return useContext(ToastVersion); };
+
 var ToastContext = React.createContext(undefined);
 var portal = getToastProviderEl();
 var ToastProvider = function (_a) {
@@ -59519,7 +59538,7 @@ var ToastProvider = function (_a) {
     if (useContext(ToastContext)) {
         return React.createElement(React.Fragment, null, children);
     }
-    return (React.createElement(React.Fragment, null,
+    return (React.createElement(ToastVersion.Provider, { value: "v2" },
         ReactDOM.createPortal(React.createElement(React.Fragment, null, Object.entries(toasts).map(function (_a) {
             var section = _a[0], list = _a[1];
             return (React.createElement(ToastSection, __assign({ key: section }, {
@@ -59532,30 +59551,35 @@ var ToastProvider = function (_a) {
         React.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.createElement(LuiBannerV2, __assign({}, { level: level, children: children }, { onDismiss: options.timeout === Infinity ? close : undefined })));
+                var onDismiss = _a.close;
+                return (React.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'),
@@ -59564,6 +59588,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 = useContext(ToastContext);
     return useMemo(function () { return toastFunctions(dispatch); }, [dispatch]);
@@ -59655,7 +59705,7 @@ var LuiToastMessageCompatibleInterface = function (props) {
     var toastIdRef = useRef(undefined);
     var onceDismissedRef = useRef(false);
     var displayRef = 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
     useEffect(function () {
@@ -59671,23 +59721,18 @@ var LuiToastMessageCompatibleInterface = function (props) {
         if (display && !onceDismissed) {
             var notification = function (_a) {
                 var close = _a.close;
-                var onDismiss = requireDismiss ? close : undefined;
-                return React__default.createElement(LuiBannerV2, __assign({}, { level: level, onDismiss: onDismiss, children: children }));
+                return React__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);
@@ -59697,48 +59742,50 @@ var LuiToastMessageCompatibleInterface = function (props) {
     return React__default.createElement(React__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.createElement(LuiBannerV2, __assign({}, toastProps, { onDismiss: close }));
-            });
-        }
-        else {
-            toast(React__default.createElement(LuiBannerV2, __assign({}, toastProps)));
-        }
+        return t[props.messageLevel](props.message, { timeout: getTimeout(props) });
     };
 };
 
-var ToastUpgrade = createContext(false);
-var useToastUpgrade = function () { return 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 (useContext(ToastContext)) {
-        return React__default.createElement(React__default.Fragment, null, rest.children);
+        return React__default.createElement(React__default.Fragment, null, props.children);
     }
-    return (React__default.createElement(ToastUpgrade.Provider, { value: upgrade }, upgrade ? (React__default.createElement(ToastProvider, __assign({}, rest))) : (React__default.createElement(LuiMessagingContextProvider$1, __assign({}, rest)))));
+    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" },
+        React__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.createElement(LuiToastMessageCompatibleInterface, __assign({}, props))) : (React__default.createElement(LuiToastMessage$1, __assign({}, props)));
+    var version = useToastVersion();
+    return version === 'v2' ? (React__default.createElement(LuiToastMessageCompatibleInterface, __assign({}, props))) : (React__default.createElement(LuiToastMessage$1, __assign({}, props)));
 };
 
-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 };
+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, ToolbarButton, ToolbarDirection, ToolbarItem, ToolbarItemSeparator, breakpointQuery, breakpoints, isChromatic, useClickedOutsideElement, useEscapeFunction, useLuiCloseableHeaderMenuContextV2, lR as useLuiFloatingWindow, useMediaQuery, usePageClickFunction, useShowLUIMessage, useSplitterRef, useToast };
 //# sourceMappingURL=lui.esm.js.map