@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/CHANGELOG.md +7 -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/components/common/Hooks.d.ts +1 -1
- package/dist/hooks/useClickedOutsideElement.d.ts +2 -2
- package/dist/index.d.ts +1 -3
- package/dist/index.js +126 -175
- package/dist/index.js.map +1 -1
- package/dist/lui.css +0 -95
- package/dist/lui.css.map +1 -1
- package/dist/lui.esm.js +127 -173
- package/dist/lui.esm.js.map +1 -1
- package/dist/scss/base.scss +0 -1
- package/package.json +1 -1
- package/dist/components/LuiModal/LuiAlertModalV2.d.ts +0 -7
- package/dist/components/LuiModal/LuiModalV2.d.ts +0 -33
- package/dist/scss/Components/Modal/modal-v2.scss +0 -121
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
|
|
39805
|
-
|
|
39806
|
-
|
|
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(
|
|
39809
|
-
return function () {
|
|
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
|
|
59465
|
-
var
|
|
59466
|
-
var
|
|
59467
|
-
|
|
59468
|
-
|
|
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(
|
|
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 () {
|
|
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,
|
|
59538
|
-
|
|
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
|
|
59552
|
-
return (React.createElement(LuiBannerV2, __assign({}, { level: level, children: children
|
|
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
|
|
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
|
-
|
|
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:
|
|
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
|
-
|
|
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
|
|
59660
|
+
var t = useToast();
|
|
59705
59661
|
return function (props) {
|
|
59706
|
-
|
|
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
|
-
*
|
|
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,
|
|
59672
|
+
return React__default.createElement(React__default.Fragment, null, props.children);
|
|
59729
59673
|
}
|
|
59730
|
-
return (React__default.createElement(
|
|
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
|
|
59687
|
+
var version = useToastVersion();
|
|
59734
59688
|
var older = useShowLUIMessage$1();
|
|
59735
59689
|
var newer = useShowLUIMessageCompatibleInterface();
|
|
59736
|
-
return
|
|
59690
|
+
return version === 'v2' ? newer : older;
|
|
59737
59691
|
};
|
|
59738
59692
|
var LuiToastMessage = function (props) {
|
|
59739
|
-
var
|
|
59740
|
-
return
|
|
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,
|
|
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
|