venice-ui 2.1.1 → 2.1.4

package/dist/cjs/Theme/Theme.js

@@ -100,6 +100,7 @@ exports.mainTheme = {
     contentBackground: exports.Theme.colors.white,
     // selector / dropdown
     optionActiveColor: exports.Theme.colors.primary,
+    optionColor: exports.Theme.colors.text,
     optionHoverBackground: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary),
     //table
     tableBorderColor: exports.Theme.colors.gray_3,

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, }) => {
+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);
@@ -101,8 +101,7 @@ const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false,
         };
     }, [open]);
     return (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuElement, null,
-        react_1.default.createElement("div", { ref: sourceRef, onClick: () => toogle(!open) },
-            react_1.default.createElement(Icons_1.Icon, { name: iconName, size: (0, common_1.setIconSize)(size), isActive: open, right: right, left: left, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor })),
+        react_1.default.createElement("div", { ref: sourceRef, onClick: () => toogle(!open) }, textMode ? (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuLabel, { size: size, isActive: isTextActive }, label)) : (react_1.default.createElement(Icons_1.Icon, { name: iconName, size: (0, common_1.setIconSize)(size), isActive: open, right: right, left: left, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor }))),
         open &&
             (0, react_dom_1.createPortal)(react_1.default.createElement(common_1.Panel, { style: dropdownStyles, ref: ref, size: size, zIndex: zIndex },
                 react_1.default.createElement(Aligment_1.Aligment, { direction: "column" },
@@ -110,7 +109,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) }, option.label)))),
+                        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)))),
                     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

@@ -3,11 +3,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropdownMenuOption = exports.DropdownMenuContent = exports.DropdownMenuFooter = exports.DropdownMenuHeader = exports.DropdownMenuElement = void 0;
+exports.DropdownMenuLabel = exports.DropdownMenuOption = exports.DropdownMenuContent = exports.DropdownMenuFooter = exports.DropdownMenuHeader = exports.DropdownMenuElement = void 0;
 const polished_1 = require("polished");
 const styled_components_1 = __importDefault(require("styled-components"));
 const Theme_1 = require("../../Theme");
+const common_1 = require("../common");
 exports.DropdownMenuElement = styled_components_1.default.div `
+  cursor: pointer;
   position: relative;
   width: auto;
   display: flex;
@@ -35,9 +37,18 @@ exports.DropdownMenuOption = styled_components_1.default.div `
   min-width: 80px;
   cursor: ${(p) => (p.isDisable ? 'not-allowed' : 'pointer')};
   white-space: nowrap;
-  color: ${(p) => (p.isDisable ? Theme_1.Theme.colors.gray_1 : Theme_1.Theme.colors.text)};
+  color: ${(p) => p.isActive
+    ? Theme_1.Theme.colors.primary
+    : p.isDisable
+        ? Theme_1.Theme.colors.gray_1
+        : Theme_1.Theme.colors.text};
   font-size: 16px;
   :hover {
     background-color: ${(p) => p.isDisable ? Theme_1.Theme.colors.gray_4 : (0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)};
   }
 `;
+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};
+`;

package/dist/esm/Theme/Theme.js

@@ -97,6 +97,7 @@ export const mainTheme = {
     contentBackground: Theme.colors.white,
     // selector / dropdown
     optionActiveColor: Theme.colors.primary,
+    optionColor: Theme.colors.text,
     optionHoverBackground: lighten(0.3, Theme.colors.primary),
     //table
     tableBorderColor: Theme.colors.gray_3,

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

@@ -2,11 +2,11 @@ import { Panel, setIconSize } from '../common';
 import React, { useState, useRef, useEffect } from 'react';
 import { Theme, mainTheme } from '../../Theme';
 import { Icon } from '../Icons';
-import { DropdownMenuOption, DropdownMenuElement, DropdownMenuContent, DropdownMenuFooter, DropdownMenuHeader, } from './DropdownMenu.styles';
+import { DropdownMenuOption, DropdownMenuElement, DropdownMenuContent, DropdownMenuFooter, DropdownMenuHeader, DropdownMenuLabel, } from './DropdownMenu.styles';
 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, }) => {
+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);
@@ -75,8 +75,7 @@ export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header =
         };
     }, [open]);
     return (React.createElement(DropdownMenuElement, null,
-        React.createElement("div", { ref: sourceRef, onClick: () => toogle(!open) },
-            React.createElement(Icon, { name: iconName, size: setIconSize(size), isActive: open, right: right, left: left, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor })),
+        React.createElement("div", { ref: sourceRef, onClick: () => toogle(!open) }, textMode ? (React.createElement(DropdownMenuLabel, { size: size, isActive: isTextActive }, label)) : (React.createElement(Icon, { name: iconName, size: setIconSize(size), isActive: open, right: right, left: left, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor }))),
         open &&
             createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size, zIndex: zIndex },
                 React.createElement(Aligment, { direction: "column" },
@@ -84,6 +83,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) }, option.label)))),
+                        options.map((option) => (React.createElement(DropdownMenuOption, { key: option.label, isDisable: isDisable(option.disableID), onClick: () => handleClick(option.action, 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

@@ -1,7 +1,9 @@
 import { lighten } from 'polished';
 import styled from 'styled-components';
 import { Theme } from '../../Theme';
+import { setSize } from '../common';
 export const DropdownMenuElement = styled.div `
+  cursor: pointer;
   position: relative;
   width: auto;
   display: flex;
@@ -29,9 +31,18 @@ export const DropdownMenuOption = styled.div `
   min-width: 80px;
   cursor: ${(p) => (p.isDisable ? 'not-allowed' : 'pointer')};
   white-space: nowrap;
-  color: ${(p) => (p.isDisable ? Theme.colors.gray_1 : Theme.colors.text)};
+  color: ${(p) => p.isActive
+    ? Theme.colors.primary
+    : p.isDisable
+        ? Theme.colors.gray_1
+        : Theme.colors.text};
   font-size: 16px;
   :hover {
     background-color: ${(p) => p.isDisable ? Theme.colors.gray_4 : lighten(0.4, Theme.colors.primary)};
   }
 `;
+export const DropdownMenuLabel = styled.div `
+  display: flex;
+  ${(p) => setSize(p.size)};
+  color:${(p) => p.isActive ? Theme.colors.primary : p.theme.optionColor};
+`;

package/dist/types/Theme/Theme.d.ts

@@ -90,6 +90,7 @@ export declare const mainTheme: {
     inputErrorTextColor: string;
     contentBackground: string;
     optionActiveColor: string;
+    optionColor: string;
     optionHoverBackground: string;
     tableBorderColor: string;
     tableHeaderBackground: string;

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

@@ -19,6 +19,9 @@ interface IDropdownMenuProps {
     iconBgHoverColor?: string;
     position?: string;
     zIndex?: number;
+    textMode?: boolean;
+    label?: string;
+    isTextActive?: boolean;
 }
 export declare const DropdownMenu: FC<IDropdownMenuProps>;
 export {};

package/dist/types/components/DropdownMenu/DropdownMenu.styles.d.ts

@@ -1,3 +1,4 @@
+import { InputSize } from '../../types';
 export declare const DropdownMenuElement: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DropdownMenuHeader: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const DropdownMenuFooter: import("styled-components").StyledComponent<"div", any, {}, never>;
@@ -5,6 +6,13 @@ export declare const DropdownMenuContent: import("styled-components").StyledComp
 interface IPanelOptionStyle {
     onClick?: any;
     isDisable: boolean;
+    isActive?: boolean;
 }
 export declare const DropdownMenuOption: import("styled-components").StyledComponent<"div", any, IPanelOptionStyle, never>;
+interface IDropdownMenuLabel {
+    size: InputSize;
+    theme: any;
+    isActive?: boolean;
+}
+export declare const DropdownMenuLabel: import("styled-components").StyledComponent<"div", any, IDropdownMenuLabel, never>;
 export {};

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

@@ -6,6 +6,7 @@ export interface IAction {
     action: (id?: string) => void;
     label: string | number;
     disableID?: string;
+    isActive?: boolean;
 }
 export interface IIconsActions {
     iconName: string;

package/package.json

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