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

package/distribution/components/pluridal/head/Head/index.d.ts

@@ -22,6 +22,7 @@ export interface HeadDefaults {
     appleTouchIcon?: string;
 }
 export interface HeadOwnProperties {
+    Helmet: any;
     defaults?: Partial<head.HeadState> & HeadDefaults;
     selectors: HeadSelectors;
     context: React.Context<any>;

package/distribution/components/universal/inputs/InputSwitch/index.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
 import { Theme } from '@plurid/plurid-themes';
+import { SwitchProperties } from '../Switch';
 export interface InputSwitchProperties {
     name: string;
     checked: boolean;
     atChange: () => void;
     theme?: Theme;
     compact?: boolean;
+    switch?: SwitchProperties;
     style?: React.CSSProperties;
     className?: string;
 }

package/distribution/index.es.js

@@ -1781,7 +1781,7 @@ const StyledInputSwitch = styled.div`
 `;
 
 const InputSwitch = properties => {
-    const {name: name, checked: checked, atChange: atChange, theme: themeProperty, compact: compact, style: style, className: className} = properties;
+    const {name: name, checked: checked, atChange: atChange, theme: themeProperty, compact: compact, switch: switchProperties, style: style, className: className} = properties;
     const theme = themeProperty || plurid;
     return React.createElement(StyledInputSwitch, {
         compact: compact,
@@ -1791,13 +1791,13 @@ const InputSwitch = properties => {
         style: {
             marginLeft: "0.9rem"
         }
-    }, name), React.createElement(Switch, {
+    }, name), React.createElement(Switch, Object.assign({
         checked: checked,
         level: 2,
         exclusive: true,
         theme: theme,
         atChange: () => atChange()
-    })));
+    }, switchProperties))));
 };
 
 const StyledItemsline = styled.div`
@@ -2569,7 +2569,7 @@ const universal = {
 
 const Head = properties => {
     var _a, _b, _c, _d;
-    const {defaults: defaults, children: children, stateHead: stateHead} = properties;
+    const {Helmet: Helmet, defaults: defaults, children: children, stateHead: stateHead} = properties;
     const robots = (defaults === null || defaults === void 0 ? void 0 : defaults.robots) || "index,follow";
     const viewport = (defaults === null || defaults === void 0 ? void 0 : defaults.viewport) || "width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, shrink-to-fit=no";
     const faviconIcon = (_a = defaults === null || defaults === void 0 ? void 0 : defaults.faviconIcon) !== null && _a !== void 0 ? _a : "/favicon.ico";
@@ -2590,7 +2590,7 @@ const Head = properties => {
     const ogSiteName = (defaults === null || defaults === void 0 ? void 0 : defaults.ogSiteName) || "";
     const appleTouchIcon = (defaults === null || defaults === void 0 ? void 0 : defaults.appleTouchIcon) || "";
     const {styles: styles, scripts: scripts} = stateHead;
-    return React.createElement(React.Fragment, null, React.createElement("meta", {
+    return React.createElement(Helmet, null, React.createElement("meta", {
         charSet: "utf-8"
     }), React.createElement("meta", {
         name: "robots",
@@ -2598,9 +2598,6 @@ const Head = properties => {
     }), React.createElement("meta", {
         name: "viewport",
         content: viewport
-    }), React.createElement("meta", {
-        name: "description",
-        content: descriptionValue
     }), React.createElement("title", null, titleValue), React.createElement("meta", {
         name: "title",
         content: titleValue
@@ -2699,7 +2696,7 @@ const Head = properties => {
 };
 
 const mapStateToProperties$7 = (state, ownProperties) => ({
-    stateHead: ownProperties.selectors.notifications.getAll(state)
+    stateHead: ownProperties.selectors.head.getHead(state)
 });
 
 const mapDispatchToProperties$7 = dispatch => ({});
@@ -2732,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;
@@ -2760,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 () => {
@@ -2791,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)