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

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import { StateOfAny, head } from '@plurid/plurid-ui-state-react';
+export declare type HeadState = StateOfAny & {
+    head: head.HeadState;
+};
+export declare type HeadSelectors = StateOfAny & {
+    head: typeof head.selectors;
+};
+export interface HeadDefaults {
+    robots?: string;
+    viewport?: string;
+    faviconIcon?: string;
+    favicon16?: string;
+    favicon32?: string;
+    manifest?: string;
+    themeColor?: string;
+    apiDomain?: string;
+    canonicalURL?: string;
+    ogImageWidth?: string;
+    ogImageHeight?: string;
+    ogSiteName?: string;
+    appleTouchIcon?: string;
+}
+export interface HeadOwnProperties {
+    defaults?: Partial<head.HeadState> & HeadDefaults;
+    selectors: HeadSelectors;
+    context: React.Context<any>;
+    children?: React.ReactNode;
+}
+export interface HeadStateProperties {
+    stateHead: head.HeadState;
+}
+export interface HeadDispatchProperties {
+}
+export declare type HeadProperties = HeadOwnProperties & HeadStateProperties & HeadDispatchProperties;
+declare const ConnectedHead: import("react-redux").ConnectedComponent<React.FC<HeadProperties>, Omit<HeadProperties, "stateHead"> & HeadOwnProperties & import("react-redux").ConnectProps>;
+export default ConnectedHead;

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+declare const head: {
+    Head: import("react-redux").ConnectedComponent<import("react").FC<import("./Head").HeadProperties>, Omit<import("./Head").HeadProperties, "stateHead"> & import("./Head").HeadOwnProperties & import("react-redux").ConnectProps>;
+};
+export default head;

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

@@ -1,5 +1,8 @@
 /// <reference types="react" />
 declare const pluridal: {
+    head: {
+        Head: import("react-redux").ConnectedComponent<import("react").FC<import("./head/Head").HeadProperties>, Omit<import("./head/Head").HeadProperties, "stateHead"> & import("./head/Head").HeadOwnProperties & import("react-redux").ConnectProps>;
+    };
     notifications: {
         Notification: import("react").FC<import("./notifications/Notification").NotificationOwnProperties>;
         Notifications: import("react-redux").ConnectedComponent<import("react").FC<import("./notifications/Notifications").NotificationsProperties>, Omit<import("./notifications/Notifications").NotificationsProperties, "stateGeneralTheme" | "stateNotifications" | "dispatchRemoveNotification"> & import("./notifications/Notifications").NotificationsOwnProperties & import("react-redux").ConnectProps>;

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import { Theme } from '@plurid/plurid-themes';
-import { notifications } from '@plurid/plurid-ui-state-react';
+import { DispatchAction, Notification, notifications } from '@plurid/plurid-ui-state-react';
 export interface NotificationOwnProperties {
-    data: notifications.Types.Notification;
+    data: Notification;
     theme: Theme;
-    remove: (payload: notifications.Types.RemoveNotificationPayload) => void;
+    remove: DispatchAction<typeof notifications.actions.remove>;
     elements?: Record<string, JSX.Element>;
     style?: React.CSSProperties;
     className?: string;

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/components/pluridal/notifications/Notifications/index.d.ts

@@ -1,9 +1,9 @@
 import React from 'react';
-import { StateOfAny, themes as themesStateService, notifications as notificationsStateService } from '@plurid/plurid-ui-state-react';
 import { Theme } from '@plurid/plurid-themes';
+import { DispatchAction, StateOfAny, themes as themesStateService, notifications as notificationsStateService, Notification as INotification } from '@plurid/plurid-ui-state-react';
 export declare type NotificationsState = StateOfAny & {
-    themes: themesStateService.Types.State;
-    notifications: notificationsStateService.Types.State;
+    themes: themesStateService.ThemesState;
+    notifications: notificationsStateService.NotificationsState;
 };
 export declare type NotificationsSelectors = StateOfAny & {
     themes: typeof themesStateService.selectors;
@@ -16,10 +16,10 @@ export interface NotificationsOwnProperties {
 }
 export interface NotificationsStateProperties {
     stateGeneralTheme: Theme;
-    stateNotifications: notificationsStateService.Types.Notification[];
+    stateNotifications: INotification[];
 }
 export interface NotificationsDispatchProperties {
-    dispatchRemoveNotification: typeof notificationsStateService.actions.removeNotification;
+    dispatchRemoveNotification: DispatchAction<typeof notificationsStateService.actions.remove>;
 }
 export declare type NotificationsProperties = NotificationsOwnProperties & NotificationsStateProperties & NotificationsDispatchProperties;
 declare const ConnectedNotifications: import("react-redux").ConnectedComponent<React.FC<NotificationsProperties>, Omit<NotificationsProperties, "stateGeneralTheme" | "stateNotifications" | "dispatchRemoveNotification"> & NotificationsOwnProperties & import("react-redux").ConnectProps>;

package/distribution/components/pluridal/sitting/SittingTray/components/Sittings/index.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { Theme } from '@plurid/plurid-themes';
 export interface SittingsOwnProperties {
     selectors: any;
+    context: React.Context<any>;
 }
 export interface SittingsStateProperties {
     stateInteractionTheme: Theme;

package/distribution/components/pluridal/sitting/SittingTray/components/StateImage/index.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 import { Theme } from '@plurid/plurid-themes';
 export interface StateImageOwnProperties {
     selectors: any;
+    context: React.Context<any>;
 }
 export interface StateImageStateProperties {
     stateInteractionTheme: Theme;

package/distribution/components/pluridal/sitting/SittingTray/components/StateLine/index.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 export interface StateLineProperties {
     theme: any;
+    context: React.Context<any>;
 }
 declare const ConnectedStateLine: import("react-redux").ConnectedComponent<React.FC<StateLineProperties>, any>;
 export default ConnectedStateLine;

package/distribution/components/pluridal/sitting/SittingTray/components/StateLink/index.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 export interface StateLinkProperties {
     theme: any;
     currentLink: string;
+    context: React.Context<any>;
 }
 declare const ConnectedStateLink: import("react-redux").ConnectedComponent<React.FC<StateLinkProperties>, any>;
 export default ConnectedStateLink;

package/distribution/components/pluridal/sitting/SittingTray/index.d.ts

@@ -2,7 +2,7 @@ import React from 'react';
 import { Theme } from '@plurid/plurid-themes';
 export interface SittingTrayOwnProperties {
     selectors: any;
-    context: any;
+    context: React.Context<any>;
 }
 export interface SittingTrayStateProperties {
     stateInteractionTheme: Theme;

package/distribution/components/pluridal/toolbars/ToolbarGeneral/index.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
-import { sitting } from '@plurid/plurid-ui-state-react';
 import { Theme } from '@plurid/plurid-themes';
+import { DispatchAction, sitting } from '@plurid/plurid-ui-state-react';
 import { ToolbarButton } from "../../../../data/interfaces";
 export interface ToolbarGeneralOwnProperties {
     buttons: ToolbarButton[];
     selectors: any;
-    context: any;
+    context: React.Context<any>;
     handleClick: (type: any) => void;
     speakButton?: boolean;
     sittingButton?: boolean;
@@ -17,7 +17,7 @@ export interface ToolbarGeneralStateProperties {
     stateInteractionTheme: Theme;
 }
 export interface ToolbarGeneralDispatchProperties {
-    dispatchToggleSittingTray: typeof sitting.actions.toggleSittingTray;
+    dispatchToggleSittingTray: DispatchAction<typeof sitting.actions.toggleSittingTray>;
 }
 export declare type ToolbarGeneralProperties = ToolbarGeneralOwnProperties & ToolbarGeneralStateProperties & ToolbarGeneralDispatchProperties;
 declare const ConnectedToolbarGeneral: import("react-redux").ConnectedComponent<React.FC<ToolbarGeneralProperties>, any>;

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};
+        }
     }
 `;
 
@@ -2560,6 +2567,149 @@ const universal = {
     varia: varia
 };
 
+const Head = properties => {
+    var _a, _b, _c, _d;
+    const {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";
+    const favicon16 = (_b = defaults === null || defaults === void 0 ? void 0 : defaults.favicon16) !== null && _b !== void 0 ? _b : "/favicon-32x32.png";
+    const favicon32 = (_c = defaults === null || defaults === void 0 ? void 0 : defaults.favicon32) !== null && _c !== void 0 ? _c : "/favicon-16x16.png";
+    const manifest = (_d = defaults === null || defaults === void 0 ? void 0 : defaults.manifest) !== null && _d !== void 0 ? _d : "/site.webmanifest";
+    const themeColor = (defaults === null || defaults === void 0 ? void 0 : defaults.themeColor) || "";
+    const titleValue = stateHead.title || (defaults === null || defaults === void 0 ? void 0 : defaults.title) || "";
+    const descriptionValue = stateHead.description || (defaults === null || defaults === void 0 ? void 0 : defaults.description) || "";
+    const canonicalURL = stateHead.canonicalURL || (defaults === null || defaults === void 0 ? void 0 : defaults.canonicalURL) || "";
+    const ogTitleValue = stateHead.ogTitle || titleValue;
+    const ogDescriptionValue = stateHead.ogDescription || titleValue;
+    const ogImageValue = stateHead.ogImage || (defaults === null || defaults === void 0 ? void 0 : defaults.ogImage) || "";
+    const ogURLValue = stateHead.ogURL || (defaults === null || defaults === void 0 ? void 0 : defaults.ogURL) || "";
+    const apiDomain = (defaults === null || defaults === void 0 ? void 0 : defaults.apiDomain) || "";
+    const ogImageWidth = (defaults === null || defaults === void 0 ? void 0 : defaults.ogImageWidth) || "1200";
+    const ogImageHeight = (defaults === null || defaults === void 0 ? void 0 : defaults.ogImageHeight) || "630";
+    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", {
+        charSet: "utf-8"
+    }), React.createElement("meta", {
+        name: "robots",
+        content: robots
+    }), 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
+    }), React.createElement("meta", {
+        name: "description",
+        content: descriptionValue
+    }), apiDomain && React.createElement(React.Fragment, null, React.createElement("link", {
+        rel: "preconnect",
+        href: apiDomain
+    }), React.createElement("link", {
+        rel: "dns-prefetch",
+        href: apiDomain
+    })), faviconIcon && React.createElement("link", {
+        rel: "icon",
+        sizes: "64x64",
+        href: faviconIcon
+    }), favicon32 && React.createElement("link", {
+        rel: "icon",
+        type: "image/png",
+        sizes: "32x32",
+        href: favicon32
+    }), favicon16 && React.createElement("link", {
+        rel: "icon",
+        type: "image/png",
+        sizes: "16x16",
+        href: favicon16
+    }), manifest && React.createElement("link", {
+        rel: "manifest",
+        href: manifest
+    }), themeColor && React.createElement("meta", {
+        name: "theme-color",
+        content: themeColor
+    }), canonicalURL && React.createElement("link", {
+        rel: "canonical",
+        href: canonicalURL
+    }), React.createElement("meta", {
+        property: "og:type",
+        content: "website"
+    }), React.createElement("meta", {
+        property: "og:title",
+        content: ogTitleValue
+    }), React.createElement("meta", {
+        property: "og:image",
+        content: ogImageValue
+    }), React.createElement("meta", {
+        property: "og:image:width",
+        content: ogImageWidth
+    }), React.createElement("meta", {
+        property: "og:image:height",
+        content: ogImageHeight
+    }), ogSiteName && React.createElement("meta", {
+        property: "og:site_name",
+        content: ogSiteName
+    }), React.createElement("meta", {
+        property: "og:url",
+        content: ogURLValue
+    }), React.createElement("meta", {
+        property: "og:description",
+        content: ogDescriptionValue
+    }), React.createElement("meta", {
+        property: "twitter:card",
+        content: "summary_large_image"
+    }), React.createElement("meta", {
+        property: "twitter:url",
+        content: ogURLValue
+    }), React.createElement("meta", {
+        property: "twitter:title",
+        content: ogTitleValue
+    }), React.createElement("meta", {
+        property: "twitter:description",
+        content: ogDescriptionValue
+    }), React.createElement("meta", {
+        property: "twitter:image",
+        content: ogImageValue
+    }), React.createElement("meta", {
+        name: "apple-mobile-web-app-capable",
+        content: "yes"
+    }), React.createElement("meta", {
+        name: "apple-mobile-web-app-status-bar-style",
+        content: "default"
+    }), React.createElement("meta", {
+        name: "apple-mobile-web-app-title",
+        content: titleValue
+    }), appleTouchIcon && React.createElement("link", {
+        rel: "apple-touch-icon",
+        sizes: "180x180",
+        href: appleTouchIcon
+    }), children, styles === null || styles === void 0 ? void 0 : styles.map((style => React.createElement("link", {
+        rel: "stylesheet",
+        key: "head-style" + style,
+        href: style
+    }))), scripts === null || scripts === void 0 ? void 0 : scripts.map((script => React.createElement("script", {
+        key: "head-script" + script,
+        src: script
+    }))));
+};
+
+const mapStateToProperties$7 = (state, ownProperties) => ({
+    stateHead: ownProperties.selectors.notifications.getAll(state)
+});
+
+const mapDispatchToProperties$7 = dispatch => ({});
+
+const ConnectedHead = connect(mapStateToProperties$7, mapDispatchToProperties$7)(Head);
+
+const head = {
+    Head: ConnectedHead
+};
+
 const translateUp = keyframes`
     from {
         transform: translateY(2000px);
@@ -2592,7 +2742,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,14 +2759,13 @@ 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) {
             notificationTimeout.current = setTimeout((() => {
-                remove({
-                    id: id
-                });
+                remove(id);
             }), timeout);
         }
         return () => {
@@ -2625,17 +2774,27 @@ 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),
         className: className
     }, content, React.createElement(StyledNotificationClose, null, React.createElement(PluridIconDelete, {
-        atClick: () => remove({
-            id: id
-        })
+        atClick: () => remove(id)
     })));
 };
 
@@ -2668,7 +2827,7 @@ const mapStateToProperties$6 = (state, ownProperties) => ({
 });
 
 const mapDispatchToProperties$6 = dispatch => ({
-    dispatchRemoveNotification: payload => dispatch(notifications$1.actions.removeNotification(payload))
+    dispatchRemoveNotification: payload => dispatch(notifications$1.actions.remove(payload))
 });
 
 const ConnectedNotifications = connect(mapStateToProperties$6, mapDispatchToProperties$6)(Notifications);
@@ -3116,17 +3275,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 +3440,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 {
@@ -3534,6 +3697,7 @@ const toolbars = {
 };
 
 const pluridal = {
+    head: head,
     notifications: notifications,
     sitting: sitting,
     toolbars: toolbars