@useblu/ocean-react 1.67.0 → 1.68.0

package/index.js

@@ -48257,6 +48257,61 @@ var Chips = function (_a) {
 };
 Chips.displayName = 'Chips';
 
+function useWebNotification(_a) {
+    var setIsOpen = _a.setIsOpen, action = _a.action;
+    var closeWebNotification = e.useCallback(function () {
+        setIsOpen(false);
+    }, [setIsOpen]);
+    var dispatchAction = e.useCallback(function () {
+        if (action)
+            action();
+    }, [action]);
+    return {
+        closeWebNotification: closeWebNotification,
+        dispatchAction: dispatchAction
+    };
+}
+
+var WebNotification = e__default["default"].forwardRef(function (_a, ref) {
+    var _b = _a.type, type = _b === void 0 ? 'info' : _b, description = _a.description, isOpen = _a.isOpen, setIsOpen = _a.setIsOpen, action = _a.action, actionLabel = _a.actionLabel, _c = _a.position, position = _c === void 0 ? 'bottom-right' : _c, className = _a.className, title = _a.title;
+    var _d = useWebNotification({
+        type: type,
+        isOpen: isOpen,
+        setIsOpen: setIsOpen,
+        action: action
+    }), closeWebNotification = _d.closeWebNotification, dispatchAction = _d.dispatchAction;
+    var _e = e.useState(0), notificationIndex = _e[0], setNotificationIndex = _e[1];
+    var notificationRef = e.useRef(null);
+    e.useEffect(function () {
+        if (isOpen) {
+            var allOpenedNotifications = Array.from(document.querySelectorAll('.ods-web-notification')).reverse();
+            var notificationPosition = allOpenedNotifications.findIndex(function (el) { return el === notificationRef.current; }) + 1;
+            setNotificationIndex(notificationPosition);
+        }
+    }, [isOpen]);
+    return (e__default["default"].createElement(e__default["default"].Fragment, null, isOpen && (e__default["default"].createElement("div", { className: classNames('ods-web-notification', "position-".concat(notificationIndex), "ods-web-notification__".concat(position, "-").concat(action ? 'action' : 'default'), className), ref: function (el) {
+            notificationRef.current = el;
+            if (ref) {
+                if (typeof ref === 'function') {
+                    ref(el);
+                }
+                else {
+                    ref.current = el;
+                }
+            }
+        }, "data-testid": "web-notification-test" },
+        e__default["default"].createElement("div", { className: "ods-web-notification__content" },
+            e__default["default"].createElement("div", { className: "ods-web-notification__wrapper" },
+                e__default["default"].createElement("div", { className: "ods-web-notification__body" },
+                    e__default["default"].createElement(Typography, { variant: "description", inverse: true }, title),
+                    e__default["default"].createElement(Typography, { variant: "caption" }, description)),
+                action && (e__default["default"].createElement(e__default["default"].Fragment, null,
+                    e__default["default"].createElement(Link, { onClick: dispatchAction, className: "ods-web-notification__action-text-".concat(type), size: "sm" }, actionLabel !== null && actionLabel !== void 0 ? actionLabel : 'action')))),
+            e__default["default"].createElement("div", { className: "ods-web-notification__close-button" },
+                e__default["default"].createElement(Wa, { size: 16, onClick: closeWebNotification })))))));
+});
+WebNotification.displayName = 'WebNotification';
+
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.Badge = Badge;
@@ -48300,4 +48355,5 @@ exports.TopBar = TopBar;
 exports.TransactionListItem = TransactionListItem;
 exports.Typography = Typography;
 exports.UnorderedListItem = UnorderedListItem;
+exports.WebNotification = WebNotification;
 //# sourceMappingURL=index.js.map