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

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

@@ -2,7 +2,7 @@
 declare const pluridal: {
     notifications: {
         Notification: import("react").FC<import("./notifications/Notification").NotificationOwnProperties>;
-        Notifications: import("react-redux").ConnectedComponent<import("react").FC<import("./notifications/Notifications").NotificationsProperties>, import("react-redux").Omit<import("./notifications/Notifications").NotificationsProperties, "stateGeneralTheme" | "stateNotifications" | "dispatchRemoveNotification"> & import("./notifications/Notifications").NotificationsOwnProperties>;
+        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>;
     };
     sitting: {
         SittingTray: import("react-redux").ConnectedComponent<import("react").FC<import("./sitting/SittingTray").SittingTrayProperties>, any>;

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

@@ -22,5 +22,5 @@ export interface NotificationsDispatchProperties {
     dispatchRemoveNotification: typeof notificationsStateService.actions.removeNotification;
 }
 export declare type NotificationsProperties = NotificationsOwnProperties & NotificationsStateProperties & NotificationsDispatchProperties;
-declare const ConnectedNotifications: import("react-redux").ConnectedComponent<React.FC<NotificationsProperties>, import("react-redux").Omit<NotificationsProperties, "stateGeneralTheme" | "stateNotifications" | "dispatchRemoveNotification"> & NotificationsOwnProperties>;
+declare const ConnectedNotifications: import("react-redux").ConnectedComponent<React.FC<NotificationsProperties>, Omit<NotificationsProperties, "stateGeneralTheme" | "stateNotifications" | "dispatchRemoveNotification"> & NotificationsOwnProperties & import("react-redux").ConnectProps>;
 export default ConnectedNotifications;

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
 declare const notifications: {
     Notification: import("react").FC<import("./Notification").NotificationOwnProperties>;
-    Notifications: import("react-redux").ConnectedComponent<import("react").FC<import("./Notifications").NotificationsProperties>, import("react-redux").Omit<import("./Notifications").NotificationsProperties, "stateGeneralTheme" | "stateNotifications" | "dispatchRemoveNotification"> & import("./Notifications").NotificationsOwnProperties>;
+    Notifications: import("react-redux").ConnectedComponent<import("react").FC<import("./Notifications").NotificationsProperties>, Omit<import("./Notifications").NotificationsProperties, "stateGeneralTheme" | "stateNotifications" | "dispatchRemoveNotification"> & import("./Notifications").NotificationsOwnProperties & import("react-redux").ConnectProps>;
 };
 export default notifications;

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

@@ -6,6 +6,7 @@ export interface ToolbarControlsOwnProperties {
     theme?: Theme;
     style?: React.CSSProperties;
     className?: string;
+    children?: React.ReactNode;
 }
 export declare type ToolbarControlsProperties = ToolbarControlsOwnProperties;
 declare const ToolbarControls: React.FC<ToolbarControlsProperties>;

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

@@ -8,6 +8,7 @@ export interface ToolbarSpecificOwnProperties {
     activeType: any;
     selectors: any;
     position?: keyof typeof HorizontalPositions;
+    children?: React.ReactNode;
 }
 export interface ToolbarSpecificStateProperties {
     stateToolbars: any;

package/distribution/components/universal/form/FormLeftRight/index.d.ts

@@ -4,6 +4,7 @@ export interface FormLeftRightProperties {
     theme?: Theme;
     style?: React.CSSProperties;
     className?: string;
+    children?: React.ReactNode;
 }
 /**
  * Form left and right items

package/distribution/components/universal/form/Formitem/index.d.ts

@@ -5,6 +5,7 @@ export interface FormitemProperties {
     level?: number;
     style?: React.CSSProperties;
     className?: string;
+    children?: React.ReactNode;
 }
 /**
  * Renders a form item.

package/distribution/components/universal/form/Formline/index.d.ts

@@ -8,6 +8,7 @@ export interface FormlineProperties {
     responsive?: boolean;
     style?: React.CSSProperties;
     className?: string;
+    children?: React.ReactNode;
 }
 /**
  * Renders a descriptive text and a form element side by side.

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

@@ -7,6 +7,7 @@ export interface DropdownProperties {
     atSelect: (selection: PluridUIDropdownSelectable | string, kind?: string) => void;
     left?: boolean;
     kind?: string;
+    listTop?: string;
     dropdownToggled?: boolean;
     /**
      * Hide dropdown after click selection.

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

@@ -2,7 +2,7 @@ import React from 'react';
 import { Theme } from '@plurid/plurid-themes';
 export interface TextlineProperties {
     text: string;
-    atChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    atChange: (event: React.ChangeEvent<HTMLInputElement>, value: string) => void;
     atKeyDown?: (event: React.KeyboardEvent<HTMLInputElement>) => void;
     atFocus?: (event: React.FocusEvent<HTMLInputElement>) => void;
     atBlur?: (event: React.FocusEvent<HTMLInputElement>) => void;
@@ -30,12 +30,12 @@ export interface TextlineProperties {
 export declare type TextlineType = TextlineProperties & React.RefAttributes<any>;
 /**
  * @param text `string`
- * @param atChange `(event: React.ChangeEvent<HTMLInputElement>) => void`
+ * @param atChange `(event: React.ChangeEvent<HTMLInputElement>, value: string) => void`
  * @param atKeyDown `(event: React.KeyboardEvent<HTMLInputElement>) => void`
  * @param atFocus `(event: React.FocusEvent<HTMLInputElement>) => void`
  * @param atBlur `(event: React.FocusEvent<HTMLInputElement>) => void`
  *
- * @param type optional - `'text' | 'password'`
+ * @param type optional - `'text' | 'password' | 'number'`
  * @param placeholder optional - `string`
  * @param autoCapitalize optional - `string`
  * @param autoComplete optional - `string`

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 {
@@ -1020,7 +1022,9 @@ const Textline = forwardRef(((properties, reference) => {
     }, React.createElement("input", {
         type: _type,
         value: text,
-        onChange: atChange,
+        onChange: event => {
+            atChange(event, event.target.value);
+        },
         onKeyDown: handleKeyDown,
         onFocus: atFocus,
         onBlur: atBlur,
@@ -1089,6 +1093,7 @@ const StyledDropdownList = styled.div`
     }
 }};
     color: ${props => props.theme.colorPrimary};
+    position: absolute;
     left: ${props => {
     if (props.left) {
         return "0px";
@@ -1100,6 +1105,12 @@ const StyledDropdownList = styled.div`
         return "auto";
     }
     return "0px";
+}};
+    top: ${props => {
+    if (props.listTop) {
+        return props.listTop;
+    }
+    return "25px";
 }};
     height: ${props => {
     if (props.heightItems) {
@@ -1136,8 +1147,6 @@ const StyledDropdownList = styled.div`
     return "initial";
 }};
 
-    position: absolute;
-    top: 25px;
     border-radius: 10px;
     min-width: 60px;
 
@@ -1219,7 +1228,7 @@ const StyledFilterUpdate = styled.div`
 `;
 
 const Dropdown = properties => {
-    const {selected: selected, selectables: selectables, atSelect: atSelect, left: left, kind: kind, dropdownToggled: dropdownToggled, hideAtSelect: hideAtSelect, selectAtHover: selectAtHover, selectedColor: selectedColor, filterable: filterable, style: style, className: className, theme: themeProperty, generalTheme: generalThemeProperty, interactionTheme: interactionThemeProperty, level: level, heightItems: heightItems, width: width, setDropdownToggled: setDropdownToggled, filterUpdate: filterUpdate} = properties;
+    const {selected: selected, selectables: selectables, atSelect: atSelect, left: left, kind: kind, listTop: listTop, dropdownToggled: dropdownToggled, hideAtSelect: hideAtSelect, selectAtHover: selectAtHover, selectedColor: selectedColor, filterable: filterable, style: style, className: className, theme: themeProperty, generalTheme: generalThemeProperty, interactionTheme: interactionThemeProperty, level: level, heightItems: heightItems, width: width, setDropdownToggled: setDropdownToggled, filterUpdate: filterUpdate} = properties;
     const _generalTheme = generalThemeProperty === undefined ? themeProperty === undefined ? plurid : themeProperty : generalThemeProperty;
     const _interactionTheme = interactionThemeProperty === undefined ? themeProperty === undefined ? plurid : themeProperty : interactionThemeProperty;
     const _level = level !== null && level !== void 0 ? level : 0;
@@ -1391,6 +1400,7 @@ const Dropdown = properties => {
     }, typeof selected === "string" ? selected : selected.value), showList && React.createElement(StyledDropdownList, {
         theme: interactionTheme,
         left: left,
+        listTop: listTop,
         level: _level,
         heightItems: heightItems && filterable && filteredSelectables.length < heightItems ? filteredSelectables.length + 1 : heightItems,
         heightBeyond: filteredSelectables.length > (heightItems || 0),
@@ -1552,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};
+        }
     }
 `;
 
@@ -2584,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`
@@ -2601,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) {
@@ -2617,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),
@@ -3108,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 {
@@ -3271,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 {