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

package/distribution/index.js

@@ -2747,6 +2747,7 @@ const StyledNotification = styled__default["default"].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;
@@ -2775,12 +2776,16 @@ const StyledNotificationClose = styled__default["default"].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] = React.useState(false);
     const notificationTimeout = React.useRef(null);
     React.useEffect((() => {
         if (timeout) {
             notificationTimeout.current = setTimeout((() => {
-                remove(id);
+                setPrepareForRemoval(true);
+                setTimeout((() => {
+                    remove(id);
+                }), 400);
             }), timeout);
         }
         return () => {
@@ -2806,7 +2811,9 @@ const Notification = properties => {
     const content = resolveRender();
     return React__default["default"].createElement(StyledNotification, {
         theme: theme,
-        style: Object.assign({}, style),
+        style: Object.assign(Object.assign({}, style), {
+            opacity: prepareForRemoval ? 0 : undefined
+        }),
         className: className
     }, content, React__default["default"].createElement(StyledNotificationClose, null, React__default["default"].createElement(pluridIconsReact.PluridIconDelete, {
         atClick: () => remove(id)