venice-ui 2.1.2 → 2.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/cjs/Theme/Theme.js +1 -0
  2. package/dist/cjs/components/DropdownMenu/DropdownMenu.js +3 -3
  3. package/dist/cjs/components/DropdownMenu/DropdownMenu.styles.js +7 -3
  4. package/dist/esm/Theme/Theme.js +1 -0
  5. package/dist/esm/components/DropdownMenu/DropdownMenu.js +3 -3
  6. package/dist/esm/components/DropdownMenu/DropdownMenu.styles.js +7 -3
  7. package/dist/types/Theme/Theme.d.ts +1 -0
  8. package/dist/types/components/DropdownMenu/DropdownMenu.d.ts +1 -0
  9. package/dist/types/components/DropdownMenu/DropdownMenu.styles.d.ts +2 -0
  10. package/dist/types/types/commonTypes.d.ts +1 -0
  11. package/package.json +1 -1
package/dist/cjs/Theme/Theme.js CHANGED
@@ -100,6 +100,7 @@ exports.mainTheme = {
100
100
  contentBackground: exports.Theme.colors.white,
101
101
  // selector / dropdown
102
102
  optionActiveColor: exports.Theme.colors.primary,
103
+ optionColor: exports.Theme.colors.text,
103
104
  optionHoverBackground: (0, polished_1.lighten)(0.3, exports.Theme.colors.primary),
104
105
  //table
105
106
  tableBorderColor: exports.Theme.colors.gray_3,
package/dist/cjs/components/DropdownMenu/DropdownMenu.js CHANGED
@@ -32,7 +32,7 @@ const DropdownMenu_styles_1 = require("./DropdownMenu.styles");
32
32
  const Aligment_1 = require("../Aligment");
33
33
  const Typography_1 = require("../Typography");
34
34
  const react_dom_1 = require("react-dom");
35
- 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 = '', }) => {
35
+ 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 }) => {
36
36
  const [open, toogleOpen] = (0, react_1.useState)(false);
37
37
  const ref = (0, react_1.useRef)(null);
38
38
  const sourceRef = (0, react_1.useRef)(null);
@@ -101,7 +101,7 @@ const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false,
101
101
  };
102
102
  }, [open]);
103
103
  return (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuElement, null,
104
- react_1.default.createElement("div", { ref: sourceRef, onClick: () => toogle(!open) }, textMode ? (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuLabel, { size: size }, 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 }))),
104
+ 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 }))),
105
105
  open &&
106
106
  (0, react_dom_1.createPortal)(react_1.default.createElement(common_1.Panel, { style: dropdownStyles, ref: ref, size: size, zIndex: zIndex },
107
107
  react_1.default.createElement(Aligment_1.Aligment, { direction: "column" },
@@ -109,7 +109,7 @@ const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false,
109
109
  headerTitle && (react_1.default.createElement(Typography_1.TextAccent, { color: Theme_1.Theme.colors.text }, headerTitle)),
110
110
  headerSubtitle && (react_1.default.createElement(Typography_1.TextLabel, { color: Theme_1.Theme.colors.text }, headerSubtitle)))),
111
111
  react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuContent, null, options &&
112
- 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)))),
112
+ 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)))),
113
113
  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)));
114
114
  };
115
115
  exports.DropdownMenu = DropdownMenu;
package/dist/cjs/components/DropdownMenu/DropdownMenu.styles.js CHANGED
@@ -37,7 +37,11 @@ exports.DropdownMenuOption = styled_components_1.default.div `
37
37
  min-width: 80px;
38
38
  cursor: ${(p) => (p.isDisable ? 'not-allowed' : 'pointer')};
39
39
  white-space: nowrap;
40
- color: ${(p) => (p.isDisable ? Theme_1.Theme.colors.gray_1 : Theme_1.Theme.colors.text)};
40
+ color: ${(p) => p.isActive
41
+ ? Theme_1.Theme.colors.primary
42
+ : p.isDisable
43
+ ? Theme_1.Theme.colors.gray_1
44
+ : Theme_1.Theme.colors.text};
41
45
  font-size: 16px;
42
46
  :hover {
43
47
  background-color: ${(p) => p.isDisable ? Theme_1.Theme.colors.gray_4 : (0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)};
@@ -45,6 +49,6 @@ exports.DropdownMenuOption = styled_components_1.default.div `
45
49
  `;
46
50
  exports.DropdownMenuLabel = styled_components_1.default.div `
47
51
  display: flex;
48
- ${(p) => (0, common_1.setSize)(p.size)}
49
- color:${p => p.theme.optionActiveColor};
52
+ ${(p) => (0, common_1.setSize)(p.size)};
53
+ color:${(p) => p.isActive ? Theme_1.Theme.colors.primary : p.theme.optionColor};
50
54
  `;
package/dist/esm/Theme/Theme.js CHANGED
@@ -97,6 +97,7 @@ export const mainTheme = {
97
97
  contentBackground: Theme.colors.white,
98
98
  // selector / dropdown
99
99
  optionActiveColor: Theme.colors.primary,
100
+ optionColor: Theme.colors.text,
100
101
  optionHoverBackground: lighten(0.3, Theme.colors.primary),
101
102
  //table
102
103
  tableBorderColor: Theme.colors.gray_3,
package/dist/esm/components/DropdownMenu/DropdownMenu.js CHANGED
@@ -6,7 +6,7 @@ import { DropdownMenuOption, DropdownMenuElement, DropdownMenuContent, DropdownM
6
6
  import { Aligment } from '../Aligment';
7
7
  import { TextAccent, TextLabel, Text } from '../Typography';
8
8
  import { createPortal } from 'react-dom';
9
- 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 = '', }) => {
9
+ 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 }) => {
10
10
  const [open, toogleOpen] = useState(false);
11
11
  const ref = useRef(null);
12
12
  const sourceRef = useRef(null);
@@ -75,7 +75,7 @@ export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header =
75
75
  };
76
76
  }, [open]);
77
77
  return (React.createElement(DropdownMenuElement, null,
78
- React.createElement("div", { ref: sourceRef, onClick: () => toogle(!open) }, textMode ? (React.createElement(DropdownMenuLabel, { size: size }, label)) : (React.createElement(Icon, { name: iconName, size: setIconSize(size), isActive: open, right: right, left: left, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor }))),
78
+ 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 }))),
79
79
  open &&
80
80
  createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size, zIndex: zIndex },
81
81
  React.createElement(Aligment, { direction: "column" },
@@ -83,6 +83,6 @@ export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header =
83
83
  headerTitle && (React.createElement(TextAccent, { color: Theme.colors.text }, headerTitle)),
84
84
  headerSubtitle && (React.createElement(TextLabel, { color: Theme.colors.text }, headerSubtitle)))),
85
85
  React.createElement(DropdownMenuContent, null, options &&
86
- options.map((option) => (React.createElement(DropdownMenuOption, { key: option.label, isDisable: isDisable(option.disableID), onClick: () => handleClick(option.action, option.disableID) }, option.label)))),
86
+ options.map((option) => (React.createElement(DropdownMenuOption, { key: option.label, isDisable: isDisable(option.disableID), onClick: () => handleClick(option.action, option.disableID), isActive: option.isActive }, option.label)))),
87
87
  footer && (React.createElement(DropdownMenuFooter, null, footerText && (React.createElement(Text, { action: true, onClick: handleFooterAction }, footerText)))))), document.body)));
88
88
  };
package/dist/esm/components/DropdownMenu/DropdownMenu.styles.js CHANGED
@@ -31,7 +31,11 @@ export const DropdownMenuOption = styled.div `
31
31
  min-width: 80px;
32
32
  cursor: ${(p) => (p.isDisable ? 'not-allowed' : 'pointer')};
33
33
  white-space: nowrap;
34
- color: ${(p) => (p.isDisable ? Theme.colors.gray_1 : Theme.colors.text)};
34
+ color: ${(p) => p.isActive
35
+ ? Theme.colors.primary
36
+ : p.isDisable
37
+ ? Theme.colors.gray_1
38
+ : Theme.colors.text};
35
39
  font-size: 16px;
36
40
  :hover {
37
41
  background-color: ${(p) => p.isDisable ? Theme.colors.gray_4 : lighten(0.4, Theme.colors.primary)};
@@ -39,6 +43,6 @@ export const DropdownMenuOption = styled.div `
39
43
  `;
40
44
  export const DropdownMenuLabel = styled.div `
41
45
  display: flex;
42
- ${(p) => setSize(p.size)}
43
- color:${p => p.theme.optionActiveColor};
46
+ ${(p) => setSize(p.size)};
47
+ color:${(p) => p.isActive ? Theme.colors.primary : p.theme.optionColor};
44
48
  `;
package/dist/types/Theme/Theme.d.ts CHANGED
@@ -90,6 +90,7 @@ export declare const mainTheme: {
90
90
  inputErrorTextColor: string;
91
91
  contentBackground: string;
92
92
  optionActiveColor: string;
93
+ optionColor: string;
93
94
  optionHoverBackground: string;
94
95
  tableBorderColor: string;
95
96
  tableHeaderBackground: string;
package/dist/types/components/DropdownMenu/DropdownMenu.d.ts CHANGED
@@ -21,6 +21,7 @@ interface IDropdownMenuProps {
21
21
  zIndex?: number;
22
22
  textMode?: boolean;
23
23
  label?: string;
24
+ isTextActive?: boolean;
24
25
  }
25
26
  export declare const DropdownMenu: FC<IDropdownMenuProps>;
26
27
  export {};
package/dist/types/components/DropdownMenu/DropdownMenu.styles.d.ts CHANGED
@@ -6,11 +6,13 @@ export declare const DropdownMenuContent: import("styled-components").StyledComp
6
6
  interface IPanelOptionStyle {
7
7
  onClick?: any;
8
8
  isDisable: boolean;
9
+ isActive?: boolean;
9
10
  }
10
11
  export declare const DropdownMenuOption: import("styled-components").StyledComponent<"div", any, IPanelOptionStyle, never>;
11
12
  interface IDropdownMenuLabel {
12
13
  size: InputSize;
13
14
  theme: any;
15
+ isActive?: boolean;
14
16
  }
15
17
  export declare const DropdownMenuLabel: import("styled-components").StyledComponent<"div", any, IDropdownMenuLabel, never>;
16
18
  export {};
package/dist/types/types/commonTypes.d.ts CHANGED
@@ -6,6 +6,7 @@ export interface IAction {
6
6
  action: (id?: string) => void;
7
7
  label: string | number;
8
8
  disableID?: string;
9
+ isActive?: boolean;
9
10
  }
10
11
  export interface IIconsActions {
11
12
  iconName: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "venice-ui",
3
- "version": "2.1.2",
3
+ "version": "2.1.4",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "module": "./dist/esm/index.js",