@plurid/plurid-ui-components-react 0.0.0-18 → 0.0.0-19

package/distribution/index.es.js

@@ -2729,6 +2729,7 @@ const StyledNotification = styled.div`
     color: ${props => props.theme.colorPrimary};
     box-shadow: ${props => props.theme.boxShadowUmbra};
     animation: ${translateUp} 750ms ease-in-out forwards;
+    transition: opacity 400ms;
 
     a {
         text-decoration: none;
@@ -2757,12 +2758,16 @@ const StyledNotificationClose = styled.div`
 const Notification = properties => {
     const {data: data, theme: theme, remove: remove, elements: elements, style: style, className: className} = properties;
     const {id: id, text: text, html: html, react: react, timeout: timeout, wordBreak: wordBreak} = data;
-    const resolvedWordBreak = wordBreak === false ? "normal" : "break-all";
+    const resolvedWordBreak = wordBreak === true ? "break-all" : "normal";
+    const [prepareForRemoval, setPrepareForRemoval] = useState(false);
     const notificationTimeout = useRef(null);
     useEffect((() => {
         if (timeout) {
             notificationTimeout.current = setTimeout((() => {
-                remove(id);
+                setPrepareForRemoval(true);
+                setTimeout((() => {
+                    remove(id);
+                }), 400);
             }), timeout);
         }
         return () => {
@@ -2788,7 +2793,9 @@ const Notification = properties => {
     const content = resolveRender();
     return React.createElement(StyledNotification, {
         theme: theme,
-        style: Object.assign({}, style),
+        style: Object.assign(Object.assign({}, style), {
+            opacity: prepareForRemoval ? 0 : undefined
+        }),
         className: className
     }, content, React.createElement(StyledNotificationClose, null, React.createElement(PluridIconDelete, {
         atClick: () => remove(id)