@plurid/plurid-ui-components-react 0.0.0-13 → 0.0.0-14

package/distribution/components/pluridal/notifications/Notification/styled.d.ts

@@ -3,5 +3,8 @@ export interface IStyledNotification {
     theme: Theme;
 }
 export declare const StyledNotification: import("styled-components").StyledComponent<"div", any, IStyledNotification, never>;
-export declare const StyledNotificationContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export interface IStyledNotificationContent {
+    wordBreak: string;
+}
+export declare const StyledNotificationContent: import("styled-components").StyledComponent<"div", any, IStyledNotificationContent, never>;
 export declare const StyledNotificationClose: import("styled-components").StyledComponent<"div", any, {}, never>;

package/distribution/index.es.js

@@ -286,8 +286,9 @@ const StyledPureButton = styled.button`
     min-height: 40px;
     min-width: 160px;
 
-    :hover {
-        background-color: ${({theme: theme, level: level, isDisabled: isDisabled}) => {
+    @media (hover: hover) {
+        :hover {
+            background-color: ${({theme: theme, level: level, isDisabled: isDisabled}) => {
     if (isDisabled) {
         return theme.backgroundColorPrimaryAlpha;
     }
@@ -308,6 +309,7 @@ const StyledPureButton = styled.button`
         return theme.backgroundColorSecondary;
     }
 }};
+        }
     }
 
     :active {
@@ -1560,6 +1562,11 @@ const StyledInputBox = styled.div`
         color: ${({theme: theme}) => theme.colorPrimary};
         background-color: ${({theme: theme}) => theme.backgroundColorTertiary};
         box-shadow: inset 0px 4px 4px ${({theme: theme}) => theme.boxShadowUmbraColor};
+
+
+        ::placeholder {
+            color: ${({theme: theme}) => theme.colorSecondary};
+        }
     }
 `;
 
@@ -2592,7 +2599,7 @@ const StyledNotification = styled.div`
 const StyledNotificationContent = styled.div`
     font-size: 0.9rem;
     padding: 32px 16px;
-    word-break: break-all;
+    word-break: ${({wordBreak: wordBreak}) => wordBreak};
 `;
 
 const StyledNotificationClose = styled.div`
@@ -2609,7 +2616,8 @@ 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} = data;
+    const {id: id, text: text, html: html, react: react, timeout: timeout, wordBreak: wordBreak} = data;
+    const resolvedWordBreak = wordBreak === false ? "normal" : "break-all";
     const notificationTimeout = useRef(null);
     useEffect((() => {
         if (timeout) {
@@ -2625,9 +2633,21 @@ const Notification = properties => {
             }
         };
     }), [ id, timeout, remove ]);
-    const content = html ? React.createElement(StyledNotificationContent, {
-        dangerouslySetInnerHTML: createMarkup(text)
-    }) : react && elements && elements[text] ? React.createElement(StyledNotificationContent, null, elements[text]) : React.createElement(StyledNotificationContent, null, text);
+    const resolveRender = () => {
+        const contentProperties = {
+            wordBreak: resolvedWordBreak
+        };
+        if (html) {
+            return React.createElement(StyledNotificationContent, Object.assign({
+                dangerouslySetInnerHTML: createMarkup(text)
+            }, contentProperties));
+        }
+        if (react && elements && elements[text]) {
+            return React.createElement(StyledNotificationContent, Object.assign({}, contentProperties), elements[text]);
+        }
+        return React.createElement(StyledNotificationContent, Object.assign({}, contentProperties), text);
+    };
+    const content = resolveRender();
     return React.createElement(StyledNotification, {
         theme: theme,
         style: Object.assign({}, style),
@@ -3116,17 +3136,19 @@ const StyledHorizontalToolbarButton = styled.div`
     color: ${props => props.theme.colorPrimary};
     font-family:  ${props => props.theme.fontFamilySansSerif};
 
-    :hover {
-        background: ${props => props.theme.backgroundColorTertiary};
-    }
+    @media (hover: hover) {
+        :hover {
+            background: ${props => props.theme.backgroundColorTertiary};
+        }
 
-    :hover svg {
-        transform: ${props => {
+        :hover svg {
+            transform: ${props => {
     if (props.scaleIcon) {
         return "scale(1.2)";
     }
     return "";
 }};
+        }
     }
 
     svg {
@@ -3279,17 +3301,19 @@ const StyledVerticalToolbarButton = styled.div`
     return "transparent";
 }};
 
-    :hover {
-        background: ${props => props.theme.backgroundColorTertiary};
-    }
+    @media (hover: hover) {
+        :hover {
+            background: ${props => props.theme.backgroundColorTertiary};
+        }
 
-    :hover svg {
-        transform: ${props => {
+        :hover svg {
+            transform: ${props => {
     if (props.scaleIcon) {
         return "scale(1.2)";
     }
     return "";
 }};
+        }
     }
 
     svg {