@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 +15 -0
- package/dist/components/LuiModal/LuiModal.d.ts +12 -0
- package/dist/components/LuiModal/LuiModalV2.d.ts +1 -0
- package/dist/components/Toast/Helpers/ToastTypes.d.ts +0 -5
- package/dist/components/Toast/Upgrade/ToastVersion.d.ts +3 -0
- package/dist/components/Toast/Upgrade/index.d.ts +29 -4
- package/dist/components/Toast/Upgrade/useShowLUIMessageCompatibleInterface.d.ts +1 -1
- package/dist/components/Toast/useToast.d.ts +32 -5
- package/dist/index.d.ts +1 -1
- package/dist/index.js +101 -55
- package/dist/index.js.map +1 -1
- package/dist/lui.esm.js +102 -55
- package/dist/lui.esm.js.map +1 -1
- package/package.json +1 -1
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<{
|
|
@@ -1,13 +1,38 @@
|
|
|
1
1
|
import { ComponentProps, ReactNode } from 'react';
|
|
2
2
|
import { LuiToastMessage as LuiToastMessageOld } from '../../LuiToastMessage/LuiToastMessage';
|
|
3
|
-
declare type
|
|
4
|
-
|
|
5
|
-
|
|
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
|
-
*
|
|
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) =>
|
|
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
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
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
|
|
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
|
|
59494
|
-
var
|
|
59495
|
-
var
|
|
59496
|
-
|
|
59497
|
-
|
|
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(
|
|
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 () {
|
|
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,
|
|
59567
|
-
|
|
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
|
|
59581
|
-
return (React__namespace.createElement(LuiBannerV2, __assign({}, { level: level, children: children
|
|
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
|
|
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
|
-
|
|
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:
|
|
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
|
-
|
|
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
|
|
59782
|
+
var t = useToast();
|
|
59734
59783
|
return function (props) {
|
|
59735
|
-
|
|
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
|
-
*
|
|
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,
|
|
59794
|
+
return React__default["default"].createElement(React__default["default"].Fragment, null, props.children);
|
|
59758
59795
|
}
|
|
59759
|
-
return (React__default["default"].createElement(
|
|
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
|
|
59809
|
+
var version = useToastVersion();
|
|
59763
59810
|
var older = useShowLUIMessage$1();
|
|
59764
59811
|
var newer = useShowLUIMessageCompatibleInterface();
|
|
59765
|
-
return
|
|
59812
|
+
return version === 'v2' ? newer : older;
|
|
59766
59813
|
};
|
|
59767
59814
|
var LuiToastMessage = function (props) {
|
|
59768
|
-
var
|
|
59769
|
-
return
|
|
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;
|