@useblu/ocean-react 1.67.0 → 1.68.0

package/CHANGELOG.md

@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.68.0](https://github.com/ocean-ds/ocean-web/compare/v1.67.0...v1.68.0) (2024-08-15)
+
+### Features
+
+- create web notification component ([#1117](https://github.com/ocean-ds/ocean-web/issues/1117)) ([3d3ef2d](https://github.com/ocean-ds/ocean-web/commit/3d3ef2da18e20e203dc3e281a0301749849e08c5))
+
 # [1.67.0](https://github.com/ocean-ds/ocean-web/compare/v1.66.0...v1.67.0) (2024-07-15)
 
 ### Features

package/WebNotification/WebNotification.d.ts

@@ -0,0 +1,26 @@
+import React, { Dispatch, SetStateAction } from 'react';
+export declare type Position = 'bottom-left' | 'bottom-right';
+export declare type WebNotificationProps = {
+    type?: 'info' | 'positive' | 'warning';
+    description?: string;
+    isOpen: boolean;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
+    action?: () => void;
+    actionLabel?: string;
+    position?: Position;
+    className?: string;
+    title?: string;
+} & React.ComponentPropsWithoutRef<'div'>;
+declare const WebNotification: React.ForwardRefExoticComponent<{
+    type?: "info" | "positive" | "warning" | undefined;
+    description?: string | undefined;
+    isOpen: boolean;
+    setIsOpen: Dispatch<SetStateAction<boolean>>;
+    action?: (() => void) | undefined;
+    actionLabel?: string | undefined;
+    position?: Position | undefined;
+    className?: string | undefined;
+    title?: string | undefined;
+} & Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React.HTMLAttributes<HTMLDivElement>> & React.RefAttributes<HTMLDivElement>>;
+export default WebNotification;
+//# sourceMappingURL=WebNotification.d.ts.map

package/WebNotification/WebNotification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WebNotification.d.ts","sourceRoot":"","sources":["../../src/WebNotification/WebNotification.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EACZ,QAAQ,EACR,cAAc,EAIf,MAAM,OAAO,CAAC;AAOf,oBAAY,QAAQ,GAAG,aAAa,GAAG,cAAc,CAAC;AAEtD,oBAAY,oBAAoB,GAAG;IACjC,IAAI,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,SAAS,CAAC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,EAAE,OAAO,CAAC;IAChB,SAAS,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC7C,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,CAAC,EAAE,QAAQ,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,CAAC;AAE1C,QAAA,MAAM,eAAe;;;YATX,OAAO;eACJ,SAAS,eAAe,OAAO,CAAC,CAAC;oBAC7B,IAAI;;;;;kLAoGpB,CAAC;AAIF,eAAe,eAAe,CAAC"}

package/WebNotification/hook/useWebNotification.d.ts

@@ -0,0 +1,9 @@
+import { WebNotificationProps } from '../WebNotification';
+declare type IWebNotificationProps = Pick<WebNotificationProps, 'type' | 'isOpen' | 'setIsOpen' | 'action'>;
+interface IWebNotificationReturn {
+    closeWebNotification: () => void;
+    dispatchAction: () => void;
+}
+export default function useWebNotification({ setIsOpen, action, }: IWebNotificationProps): IWebNotificationReturn;
+export {};
+//# sourceMappingURL=useWebNotification.d.ts.map

package/WebNotification/hook/useWebNotification.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWebNotification.d.ts","sourceRoot":"","sources":["../../../src/WebNotification/hook/useWebNotification.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,oBAAoB,CAAC;AAE1D,aAAK,qBAAqB,GAAG,IAAI,CAC/B,oBAAoB,EACpB,MAAM,GAAG,QAAQ,GAAG,WAAW,GAAG,QAAQ,CAC3C,CAAC;AAEF,UAAU,sBAAsB;IAC9B,oBAAoB,EAAE,MAAM,IAAI,CAAC;IACjC,cAAc,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EACzC,SAAS,EACT,MAAM,GACP,EAAE,qBAAqB,GAAG,sBAAsB,CAahD"}

package/WebNotification/index.d.ts

@@ -0,0 +1,2 @@
+export { default } from './WebNotification';
+//# sourceMappingURL=index.d.ts.map

package/WebNotification/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/WebNotification/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC"}

package/index.d.ts

@@ -74,4 +74,6 @@ export { default as CardListItem } from './CardListItem';
 export * from './CardListItem';
 export { default as Chips } from './Chips';
 export * from './Chips';
+export { default as WebNotification } from './WebNotification';
+export * from './WebNotification';
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/index.es.js

@@ -48248,5 +48248,60 @@ var Chips = function (_a) {
 };
 Chips.displayName = 'Chips';
 
-export { Accordion, Alert, Badge, Breadcrumb, Button$1 as Button, CardListItem, Carousel, DoughnutChart as Chart, Checkbox, Chips, Col, Container, CrossSellCard, DatePickerSingle as DatePicker, DatePickerRange as DateRange, Divider, DoughnutChart, Drawer, index$1 as Grid, IconButton, Input, Link, List, Modal, Progress, Radio, Row$1 as Row, Search, Select, SelectAutocomplete, Shortcut, Snackbar, Stepper, Steps, SubHeader, Switch, Tag, TextArea, TokenInput, TopBar, TransactionListItem, Typography, UnorderedListItem };
+function useWebNotification(_a) {
+    var setIsOpen = _a.setIsOpen, action = _a.action;
+    var closeWebNotification = useCallback(function () {
+        setIsOpen(false);
+    }, [setIsOpen]);
+    var dispatchAction = useCallback(function () {
+        if (action)
+            action();
+    }, [action]);
+    return {
+        closeWebNotification: closeWebNotification,
+        dispatchAction: dispatchAction
+    };
+}
+
+var WebNotification = e.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 = useState(0), notificationIndex = _e[0], setNotificationIndex = _e[1];
+    var notificationRef = useRef(null);
+    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.createElement(e.Fragment, null, isOpen && (e.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.createElement("div", { className: "ods-web-notification__content" },
+            e.createElement("div", { className: "ods-web-notification__wrapper" },
+                e.createElement("div", { className: "ods-web-notification__body" },
+                    e.createElement(Typography, { variant: "description", inverse: true }, title),
+                    e.createElement(Typography, { variant: "caption" }, description)),
+                action && (e.createElement(e.Fragment, null,
+                    e.createElement(Link, { onClick: dispatchAction, className: "ods-web-notification__action-text-".concat(type), size: "sm" }, actionLabel !== null && actionLabel !== void 0 ? actionLabel : 'action')))),
+            e.createElement("div", { className: "ods-web-notification__close-button" },
+                e.createElement(Wa, { size: 16, onClick: closeWebNotification })))))));
+});
+WebNotification.displayName = 'WebNotification';
+
+export { Accordion, Alert, Badge, Breadcrumb, Button$1 as Button, CardListItem, Carousel, DoughnutChart as Chart, Checkbox, Chips, Col, Container, CrossSellCard, DatePickerSingle as DatePicker, DatePickerRange as DateRange, Divider, DoughnutChart, Drawer, index$1 as Grid, IconButton, Input, Link, List, Modal, Progress, Radio, Row$1 as Row, Search, Select, SelectAutocomplete, Shortcut, Snackbar, Stepper, Steps, SubHeader, Switch, Tag, TextArea, TokenInput, TopBar, TransactionListItem, Typography, UnorderedListItem, WebNotification };
 //# sourceMappingURL=index.es.js.map