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

package/distribution/index.js

@@ -1799,7 +1799,7 @@ const StyledInputSwitch = styled__default["default"].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 || themes.plurid;
     return React__default["default"].createElement(StyledInputSwitch, {
         compact: compact,
@@ -1809,13 +1809,13 @@ const InputSwitch = properties => {
         style: {
             marginLeft: "0.9rem"
         }
-    }, name), React__default["default"].createElement(Switch, {
+    }, name), React__default["default"].createElement(Switch, Object.assign({
         checked: checked,
         level: 2,
         exclusive: true,
         theme: theme,
         atChange: () => atChange()
-    })));
+    }, switchProperties))));
 };
 
 const StyledItemsline = styled__default["default"].div`
@@ -2587,7 +2587,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";
@@ -2608,7 +2608,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__default["default"].createElement(React__default["default"].Fragment, null, React__default["default"].createElement("meta", {
+    return React__default["default"].createElement(Helmet, null, React__default["default"].createElement("meta", {
         charSet: "utf-8"
     }), React__default["default"].createElement("meta", {
         name: "robots",
@@ -2616,9 +2616,6 @@ const Head = properties => {
     }), React__default["default"].createElement("meta", {
         name: "viewport",
         content: viewport
-    }), React__default["default"].createElement("meta", {
-        name: "description",
-        content: descriptionValue
     }), React__default["default"].createElement("title", null, titleValue), React__default["default"].createElement("meta", {
         name: "title",
         content: titleValue
@@ -2717,7 +2714,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 => ({});
@@ -2750,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;
@@ -2778,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 () => {
@@ -2809,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)