venice-ui 2.1.17 → 2.1.19

package/dist/cjs/components/Button/Button.styles.js

@@ -38,13 +38,14 @@ exports.ButtonElement = styled_components_1.default.button `
     `background-color: transparent;
     border: none;
     color: ${p.theme.action};
-    ${p.errorVariant &&
-        `color:${p.theme.errorBackgroundColor};
-      border:none;`}
     &:disabled{
       color: ${p.theme.disabledText};
-      border: 1px solid ${p.theme.disabledText};
     }
+    ${p.errorVariant &&
+        `color:${p.theme.errorBackgroundColor};
+      border:none;`}
+
+    
     `}
 
   &:hover {

package/dist/cjs/components/Card/Card.js

@@ -8,9 +8,9 @@ const react_1 = __importDefault(require("react"));
 const Card_styles_1 = require("./Card.styles");
 const ElementHeader_1 = require("../ElementHeader");
 const Theme_1 = require("../../Theme");
-const Card = ({ children, title, actionLabel, theme = Theme_1.mainTheme, iconColor = theme.textColor, iconHoverColor = theme.action, handleClick, handleBack, height, options, shadow = true, headerDivader = false }) => {
+const Card = ({ children, title, actionLabel, theme = Theme_1.mainTheme, iconColor = theme.textColor, iconHoverColor = theme.action, handleClick, handleBack, height, options, shadow = true, headerDivader = false, actionDisabled = false, }) => {
     return (react_1.default.createElement(Card_styles_1.CardElement, { height: height, shadow: shadow },
-        (title || actionLabel) && (react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title, actionLabel: actionLabel, handleClick: handleClick, handleBack: handleBack, options: options, theme: theme, iconColor: iconColor, iconHoverColor: iconHoverColor, bottomDivader: headerDivader })),
+        (title || actionLabel) && (react_1.default.createElement(ElementHeader_1.ElementHeader, { title: title, actionLabel: actionLabel, handleClick: handleClick, handleBack: handleBack, options: options, theme: theme, iconColor: iconColor, iconHoverColor: iconHoverColor, bottomDivader: headerDivader, actionDisabled: actionDisabled })),
         react_1.default.createElement(Card_styles_1.CardContent, { soloMode: !title && !actionLabel }, children)));
 };
 exports.Card = Card;

package/dist/cjs/components/DropdownMenu/DropdownMenu.js

@@ -32,7 +32,7 @@ const DropdownMenu_styles_1 = require("./DropdownMenu.styles");
 const Aligment_1 = require("../Aligment");
 const Typography_1 = require("../Typography");
 const react_dom_1 = require("react-dom");
-const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, right = false, left = false, targetID, iconColor = Theme_1.mainTheme.iconColor, iconHoverColor = Theme_1.mainTheme.iconHoverColor, iconBgColor = Theme_1.mainTheme.iconBgColor, iconBgHoverColor = Theme_1.mainTheme.iconBgHoverColor, position = 'left', zIndex, textMode = false, label = '', isTextActive = false }) => {
+const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, right = false, left = false, targetID, iconColor = Theme_1.mainTheme.iconColor, iconHoverColor = Theme_1.mainTheme.iconHoverColor, iconBgColor = Theme_1.mainTheme.iconBgColor, iconBgHoverColor = Theme_1.mainTheme.iconBgHoverColor, position = 'left', zIndex, textMode = false, label = '', isTextActive = false, }) => {
     const [open, toogleOpen] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
     const sourceRef = (0, react_1.useRef)(null);
@@ -62,19 +62,26 @@ const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false,
         footerAction && footerAction();
         close();
     };
-    const handleClick = (action, disableID) => {
+    const handleClick = (action, disabled, disableID) => {
         if (targetID) {
             if (disableID !== targetID) {
-                action(targetID);
+                if (!disabled) {
+                    action(targetID);
+                }
             }
         }
         else {
-            action();
+            if (!disabled) {
+                action();
+            }
         }
         close();
     };
-    const isDisable = (disableID) => {
-        if (targetID) {
+    const isDisable = (disableID, disabled) => {
+        if (disabled) {
+            return true;
+        }
+        else if (targetID) {
             return targetID === disableID;
         }
         return false;
@@ -118,7 +125,7 @@ const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false,
                         headerTitle && (react_1.default.createElement(Typography_1.TextAccent, { color: Theme_1.Theme.colors.text }, headerTitle)),
                         headerSubtitle && (react_1.default.createElement(Typography_1.TextLabel, { color: Theme_1.Theme.colors.text }, headerSubtitle)))),
                     react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuContent, null, options &&
-                        options.map((option) => (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuOption, { key: option.label, isDisable: isDisable(option.disableID), onClick: () => handleClick(option.action, option.disableID), isActive: option.isActive }, option.label)))),
+                        options.map((option) => (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuOption, { key: option.label, isDisable: isDisable(option.disableID, option.diasbled), onClick: () => handleClick(option.action, option.diasbled ? option.diasbled : false, option.disableID), isActive: option.isActive }, option.label)))),
                     footer && (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuFooter, null, footerText && (react_1.default.createElement(Typography_1.Text, { action: true, onClick: handleFooterAction }, footerText)))))), document.body)));
 };
 exports.DropdownMenu = DropdownMenu;

package/dist/cjs/components/DropdownMenu/DropdownMenu.styles.js

@@ -50,5 +50,5 @@ exports.DropdownMenuOption = styled_components_1.default.div `
 exports.DropdownMenuLabel = styled_components_1.default.div `
   display: flex;
   ${(p) => (0, common_1.setSize)(p.size)};
-  color:${(p) => p.isActive ? Theme_1.Theme.colors.primary : p.theme.optionColor};
+  color: ${(p) => (p.isActive ? Theme_1.Theme.colors.primary : p.theme.optionColor)};
 `;

package/dist/cjs/components/ElementHeader/ElementHeader.js

@@ -12,7 +12,7 @@ const Theme_1 = require("../../Theme");
 const Button_1 = require("../Button");
 const DropdownMenu_1 = require("../DropdownMenu");
 const ElementHeader_styles_1 = require("./ElementHeader.styles");
-const ElementHeader = ({ title, actionLabel = '', handleClose, handleClick, handleBack, children, theme = Theme_1.mainTheme, backgroundColor = theme.contentBackground, iconColor = theme.textColor, iconHoverColor = theme.action, options, bottomDivader = false, }) => {
+const ElementHeader = ({ title, actionLabel = '', handleClose, handleClick, handleBack, children, theme = Theme_1.mainTheme, backgroundColor = theme.contentBackground, iconColor = theme.textColor, iconHoverColor = theme.action, options, bottomDivader = false, actionDisabled = false, }) => {
     const leftSide = () => {
         if (title) {
             return (react_1.default.createElement(ElementHeader_styles_1.TitleWrapper, null,
@@ -30,7 +30,7 @@ const ElementHeader = ({ title, actionLabel = '', handleClose, handleClick, hand
         }
         else if (!handleClose && handleClick && actionLabel) {
             return (react_1.default.createElement(Aligment_1.Aligment, { align: "center", width: "auto" },
-                react_1.default.createElement(Button_1.Button, { mode: "secondary", text: actionLabel, onClick: () => handleClick() }),
+                react_1.default.createElement(Button_1.Button, { mode: "secondary", text: actionLabel, onClick: () => handleClick(), disabled: actionDisabled }),
                 options && (react_1.default.createElement(DropdownMenu_1.DropdownMenu, { options: options, right: true, iconColor: iconColor, position: 'right' }))));
         }
     };

package/dist/esm/components/Button/Button.styles.js

@@ -32,13 +32,14 @@ export const ButtonElement = styled.button `
     `background-color: transparent;
     border: none;
     color: ${p.theme.action};
-    ${p.errorVariant &&
-        `color:${p.theme.errorBackgroundColor};
-      border:none;`}
     &:disabled{
       color: ${p.theme.disabledText};
-      border: 1px solid ${p.theme.disabledText};
     }
+    ${p.errorVariant &&
+        `color:${p.theme.errorBackgroundColor};
+      border:none;`}
+
+    
     `}
 
   &:hover {

package/dist/esm/components/Card/Card.js

@@ -2,8 +2,8 @@ import React from 'react';
 import { CardContent, CardElement } from './Card.styles';
 import { ElementHeader } from '../ElementHeader';
 import { mainTheme } from '../../Theme';
-export const Card = ({ children, title, actionLabel, theme = mainTheme, iconColor = theme.textColor, iconHoverColor = theme.action, handleClick, handleBack, height, options, shadow = true, headerDivader = false }) => {
+export const Card = ({ children, title, actionLabel, theme = mainTheme, iconColor = theme.textColor, iconHoverColor = theme.action, handleClick, handleBack, height, options, shadow = true, headerDivader = false, actionDisabled = false, }) => {
     return (React.createElement(CardElement, { height: height, shadow: shadow },
-        (title || actionLabel) && (React.createElement(ElementHeader, { title: title, actionLabel: actionLabel, handleClick: handleClick, handleBack: handleBack, options: options, theme: theme, iconColor: iconColor, iconHoverColor: iconHoverColor, bottomDivader: headerDivader })),
+        (title || actionLabel) && (React.createElement(ElementHeader, { title: title, actionLabel: actionLabel, handleClick: handleClick, handleBack: handleBack, options: options, theme: theme, iconColor: iconColor, iconHoverColor: iconHoverColor, bottomDivader: headerDivader, actionDisabled: actionDisabled })),
         React.createElement(CardContent, { soloMode: !title && !actionLabel }, children)));
 };

package/dist/esm/components/DropdownMenu/DropdownMenu.js

@@ -6,7 +6,7 @@ import { DropdownMenuOption, DropdownMenuElement, DropdownMenuContent, DropdownM
 import { Aligment } from '../Aligment';
 import { TextAccent, TextLabel, Text } from '../Typography';
 import { createPortal } from 'react-dom';
-export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, right = false, left = false, targetID, iconColor = mainTheme.iconColor, iconHoverColor = mainTheme.iconHoverColor, iconBgColor = mainTheme.iconBgColor, iconBgHoverColor = mainTheme.iconBgHoverColor, position = 'left', zIndex, textMode = false, label = '', isTextActive = false }) => {
+export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false, headerTitle, headerSubtitle, footer = false, footerText, footerAction, options, right = false, left = false, targetID, iconColor = mainTheme.iconColor, iconHoverColor = mainTheme.iconHoverColor, iconBgColor = mainTheme.iconBgColor, iconBgHoverColor = mainTheme.iconBgHoverColor, position = 'left', zIndex, textMode = false, label = '', isTextActive = false, }) => {
     const [open, toogleOpen] = useState(false);
     const ref = useRef(null);
     const sourceRef = useRef(null);
@@ -36,19 +36,26 @@ export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header =
         footerAction && footerAction();
         close();
     };
-    const handleClick = (action, disableID) => {
+    const handleClick = (action, disabled, disableID) => {
         if (targetID) {
             if (disableID !== targetID) {
-                action(targetID);
+                if (!disabled) {
+                    action(targetID);
+                }
             }
         }
         else {
-            action();
+            if (!disabled) {
+                action();
+            }
         }
         close();
     };
-    const isDisable = (disableID) => {
-        if (targetID) {
+    const isDisable = (disableID, disabled) => {
+        if (disabled) {
+            return true;
+        }
+        else if (targetID) {
             return targetID === disableID;
         }
         return false;
@@ -92,6 +99,6 @@ export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header =
                         headerTitle && (React.createElement(TextAccent, { color: Theme.colors.text }, headerTitle)),
                         headerSubtitle && (React.createElement(TextLabel, { color: Theme.colors.text }, headerSubtitle)))),
                     React.createElement(DropdownMenuContent, null, options &&
-                        options.map((option) => (React.createElement(DropdownMenuOption, { key: option.label, isDisable: isDisable(option.disableID), onClick: () => handleClick(option.action, option.disableID), isActive: option.isActive }, option.label)))),
+                        options.map((option) => (React.createElement(DropdownMenuOption, { key: option.label, isDisable: isDisable(option.disableID, option.diasbled), onClick: () => handleClick(option.action, option.diasbled ? option.diasbled : false, option.disableID), isActive: option.isActive }, option.label)))),
                     footer && (React.createElement(DropdownMenuFooter, null, footerText && (React.createElement(Text, { action: true, onClick: handleFooterAction }, footerText)))))), document.body)));
 };

package/dist/esm/components/DropdownMenu/DropdownMenu.styles.js

@@ -44,5 +44,5 @@ export const DropdownMenuOption = styled.div `
 export const DropdownMenuLabel = styled.div `
   display: flex;
   ${(p) => setSize(p.size)};
-  color:${(p) => p.isActive ? Theme.colors.primary : p.theme.optionColor};
+  color: ${(p) => (p.isActive ? Theme.colors.primary : p.theme.optionColor)};
 `;

package/dist/esm/components/ElementHeader/ElementHeader.js

@@ -6,7 +6,7 @@ import { Theme, mainTheme } from '../../Theme';
 import { Button } from '../Button';
 import { DropdownMenu } from '../DropdownMenu';
 import { ElementHeaderWrapper, TitleWrapper } from './ElementHeader.styles';
-export const ElementHeader = ({ title, actionLabel = '', handleClose, handleClick, handleBack, children, theme = mainTheme, backgroundColor = theme.contentBackground, iconColor = theme.textColor, iconHoverColor = theme.action, options, bottomDivader = false, }) => {
+export const ElementHeader = ({ title, actionLabel = '', handleClose, handleClick, handleBack, children, theme = mainTheme, backgroundColor = theme.contentBackground, iconColor = theme.textColor, iconHoverColor = theme.action, options, bottomDivader = false, actionDisabled = false, }) => {
     const leftSide = () => {
         if (title) {
             return (React.createElement(TitleWrapper, null,
@@ -24,7 +24,7 @@ export const ElementHeader = ({ title, actionLabel = '', handleClose, handleClic
         }
         else if (!handleClose && handleClick && actionLabel) {
             return (React.createElement(Aligment, { align: "center", width: "auto" },
-                React.createElement(Button, { mode: "secondary", text: actionLabel, onClick: () => handleClick() }),
+                React.createElement(Button, { mode: "secondary", text: actionLabel, onClick: () => handleClick(), disabled: actionDisabled }),
                 options && (React.createElement(DropdownMenu, { options: options, right: true, iconColor: iconColor, position: 'right' }))));
         }
     };

package/dist/types/components/Card/Card.d.ts

@@ -13,6 +13,7 @@ interface ICardProps {
     iconHoverColor?: string;
     shadow?: boolean;
     headerDivader?: boolean;
+    actionDisabled?: boolean;
 }
 export declare const Card: FC<ICardProps>;
 export {};

package/dist/types/components/ElementHeader/ElementHeader.d.ts

@@ -13,6 +13,7 @@ interface IElementHeader {
     options?: IAction[];
     theme?: any;
     bottomDivader?: boolean;
+    actionDisabled?: boolean;
 }
 export declare const ElementHeader: FC<IElementHeader>;
 export {};

package/dist/types/types/commonTypes.d.ts

@@ -7,6 +7,7 @@ export interface IAction {
     label: string | number;
     disableID?: string;
     isActive?: boolean;
+    diasbled?: boolean;
 }
 export interface IIconsActions {
     iconName: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "2.1.17",
+  "version": "2.1.19",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",