venice-ui 2.0.12 → 2.0.13

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 (12) hide show
  1. package/dist/cjs/components/Dropdown/Dropdown.js +12 -6
  2. package/dist/cjs/components/DropdownMenu/DropdownMenu.js +11 -5
  3. package/dist/cjs/components/DropdownMenu/DropdownMenu.styles.js +1 -1
  4. package/dist/cjs/components/common/commonComponents.js +1 -1
  5. package/dist/esm/components/Dropdown/Dropdown.js +12 -6
  6. package/dist/esm/components/DropdownMenu/DropdownMenu.js +11 -5
  7. package/dist/esm/components/DropdownMenu/DropdownMenu.styles.js +1 -1
  8. package/dist/esm/components/common/commonComponents.js +1 -1
  9. package/dist/types/components/Dropdown/Dropdown.d.ts +2 -0
  10. package/dist/types/components/DropdownMenu/DropdownMenu.d.ts +2 -0
  11. package/dist/types/components/common/commonComponents.d.ts +1 -0
  12. package/package.json +1 -1
package/dist/cjs/components/Dropdown/Dropdown.js CHANGED
@@ -31,7 +31,7 @@ const DropdownElements_1 = require("./DropdownElements");
31
31
  const Input_1 = require("../Input");
32
32
  const common_1 = require("../common");
33
33
  const react_dom_1 = require("react-dom");
34
- const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, }) => {
34
+ const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, }) => {
35
35
  const [open, toogleOpen] = (0, react_1.useState)(false);
36
36
  const ref = (0, react_1.useRef)(null);
37
37
  const sourceRef = (0, react_1.useRef)(null);
@@ -43,11 +43,17 @@ const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = fa
43
43
  if (!disabled) {
44
44
  if (sourceRef.current) {
45
45
  const buttonRect = sourceRef.current.getBoundingClientRect();
46
- setDropdownStyles({
46
+ const positionStyle = {
47
47
  top: buttonRect.bottom + window.scrollY,
48
- left: buttonRect.left + window.scrollX,
49
- width: buttonRect.width
50
- });
48
+ width: buttonRect.width,
49
+ };
50
+ if (position === 'left') {
51
+ positionStyle.left = buttonRect.left + window.scrollX;
52
+ }
53
+ else if (position === 'right') {
54
+ positionStyle.right = buttonRect.right + window.scrollX;
55
+ }
56
+ setDropdownStyles(positionStyle);
51
57
  }
52
58
  toogleOpen(!open);
53
59
  }
@@ -73,7 +79,7 @@ const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = fa
73
79
  react_1.default.createElement(Dropdown_styles_1.DropdownElement, { onClick: () => handleOpen(), ref: sourceRef },
74
80
  react_1.default.createElement(DropdownElements_1.Field, { inputSize: size, disabled: disabled, width: width, active: open, error: error }, value ? getLabelForValue(value) : placeholder),
75
81
  open &&
76
- (0, react_dom_1.createPortal)(react_1.default.createElement(common_1.Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true }, options &&
82
+ (0, react_dom_1.createPortal)(react_1.default.createElement(common_1.Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex }, options &&
77
83
  options.map((option) => (react_1.default.createElement(common_1.PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label)))), document.body),
78
84
  error && react_1.default.createElement(Input_1.InputErrorMsg, null, error))));
79
85
  };
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, }) => {
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, }) => {
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);
@@ -43,10 +43,16 @@ const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false,
43
43
  const toogle = (openState) => {
44
44
  if (sourceRef.current && openState) {
45
45
  const buttonRect = sourceRef.current.getBoundingClientRect();
46
- setDropdownStyles({
46
+ const positionStyle = {
47
47
  top: buttonRect.bottom + window.scrollY,
48
- left: buttonRect.left + window.scrollX,
49
- });
48
+ };
49
+ if (position === 'left') {
50
+ positionStyle.left = buttonRect.left + window.scrollX;
51
+ }
52
+ else if (position === 'right') {
53
+ positionStyle.right = buttonRect.right + window.scrollX;
54
+ }
55
+ setDropdownStyles(positionStyle);
50
56
  }
51
57
  toogleOpen(openState);
52
58
  };
@@ -73,7 +79,7 @@ const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false,
73
79
  react_1.default.createElement("div", { ref: sourceRef, onClick: () => toogle(!open) },
74
80
  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 })),
75
81
  open &&
76
- (0, react_dom_1.createPortal)(react_1.default.createElement(common_1.Panel, { style: dropdownStyles, ref: ref, size: size },
82
+ (0, react_dom_1.createPortal)(react_1.default.createElement(common_1.Panel, { style: dropdownStyles, ref: ref, size: size, zIndex: zIndex },
77
83
  react_1.default.createElement(Aligment_1.Aligment, { direction: "column" },
78
84
  header && (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuHeader, null,
79
85
  headerTitle && (react_1.default.createElement(Typography_1.TextAccent, { color: Theme_1.Theme.colors.text }, headerTitle)),
package/dist/cjs/components/DropdownMenu/DropdownMenu.styles.js CHANGED
@@ -36,7 +36,7 @@ exports.DropdownMenuOption = styled_components_1.default.div `
36
36
  cursor: pointer;
37
37
  white-space: nowrap;
38
38
  color: ${Theme_1.Theme.colors.text};
39
-
39
+ font-size:1.6rem;
40
40
  :hover {
41
41
  background-color: ${(0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)};
42
42
  }
package/dist/cjs/components/common/commonComponents.js CHANGED
@@ -26,7 +26,7 @@ exports.Panel = styled_components_1.default.div `
26
26
  height: ${(p) => (p.height ? p.height : 'auto')};
27
27
  width: ${(p) => (p.fullWidth ? '100%' : 'auto')};
28
28
  position: absolute;
29
- z-index: ${Theme_1.Theme.zIndex.dropdown};
29
+ z-index: ${p => p.zIndex ? p.zIndex : Theme_1.Theme.zIndex.dropdown};
30
30
  top: ${(p) => (0, inputStyles_1.setPanelTop)(p.size)};
31
31
  border: 1px solid ${Theme_1.Theme.colors.gray_2};
32
32
  border-top: none;
package/dist/esm/components/Dropdown/Dropdown.js CHANGED
@@ -5,7 +5,7 @@ import { Field } from './DropdownElements';
5
5
  import { InputErrorMsg, InputLabelElement } from '../Input';
6
6
  import { Panel, PanelOption } from '../common';
7
7
  import { createPortal } from 'react-dom';
8
- export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, }) => {
8
+ export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, }) => {
9
9
  const [open, toogleOpen] = useState(false);
10
10
  const ref = useRef(null);
11
11
  const sourceRef = useRef(null);
@@ -17,11 +17,17 @@ export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabl
17
17
  if (!disabled) {
18
18
  if (sourceRef.current) {
19
19
  const buttonRect = sourceRef.current.getBoundingClientRect();
20
- setDropdownStyles({
20
+ const positionStyle = {
21
21
  top: buttonRect.bottom + window.scrollY,
22
- left: buttonRect.left + window.scrollX,
23
- width: buttonRect.width
24
- });
22
+ width: buttonRect.width,
23
+ };
24
+ if (position === 'left') {
25
+ positionStyle.left = buttonRect.left + window.scrollX;
26
+ }
27
+ else if (position === 'right') {
28
+ positionStyle.right = buttonRect.right + window.scrollX;
29
+ }
30
+ setDropdownStyles(positionStyle);
25
31
  }
26
32
  toogleOpen(!open);
27
33
  }
@@ -47,7 +53,7 @@ export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabl
47
53
  React.createElement(DropdownElement, { onClick: () => handleOpen(), ref: sourceRef },
48
54
  React.createElement(Field, { inputSize: size, disabled: disabled, width: width, active: open, error: error }, value ? getLabelForValue(value) : placeholder),
49
55
  open &&
50
- createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true }, options &&
56
+ createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex }, options &&
51
57
  options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label)))), document.body),
52
58
  error && React.createElement(InputErrorMsg, null, error))));
53
59
  };
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, }) => {
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, }) => {
10
10
  const [open, toogleOpen] = useState(false);
11
11
  const ref = useRef(null);
12
12
  const sourceRef = useRef(null);
@@ -17,10 +17,16 @@ export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header =
17
17
  const toogle = (openState) => {
18
18
  if (sourceRef.current && openState) {
19
19
  const buttonRect = sourceRef.current.getBoundingClientRect();
20
- setDropdownStyles({
20
+ const positionStyle = {
21
21
  top: buttonRect.bottom + window.scrollY,
22
- left: buttonRect.left + window.scrollX,
23
- });
22
+ };
23
+ if (position === 'left') {
24
+ positionStyle.left = buttonRect.left + window.scrollX;
25
+ }
26
+ else if (position === 'right') {
27
+ positionStyle.right = buttonRect.right + window.scrollX;
28
+ }
29
+ setDropdownStyles(positionStyle);
24
30
  }
25
31
  toogleOpen(openState);
26
32
  };
@@ -47,7 +53,7 @@ export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header =
47
53
  React.createElement("div", { ref: sourceRef, onClick: () => toogle(!open) },
48
54
  React.createElement(Icon, { name: iconName, size: setIconSize(size), isActive: open, right: right, left: left, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor })),
49
55
  open &&
50
- createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size },
56
+ createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size, zIndex: zIndex },
51
57
  React.createElement(Aligment, { direction: "column" },
52
58
  header && (React.createElement(DropdownMenuHeader, null,
53
59
  headerTitle && (React.createElement(TextAccent, { color: Theme.colors.text }, headerTitle)),
package/dist/esm/components/DropdownMenu/DropdownMenu.styles.js CHANGED
@@ -30,7 +30,7 @@ export const DropdownMenuOption = styled.div `
30
30
  cursor: pointer;
31
31
  white-space: nowrap;
32
32
  color: ${Theme.colors.text};
33
-
33
+ font-size:1.6rem;
34
34
  :hover {
35
35
  background-color: ${lighten(0.4, Theme.colors.primary)};
36
36
  }
package/dist/esm/components/common/commonComponents.js CHANGED
@@ -20,7 +20,7 @@ export const Panel = styled.div `
20
20
  height: ${(p) => (p.height ? p.height : 'auto')};
21
21
  width: ${(p) => (p.fullWidth ? '100%' : 'auto')};
22
22
  position: absolute;
23
- z-index: ${Theme.zIndex.dropdown};
23
+ z-index: ${p => p.zIndex ? p.zIndex : Theme.zIndex.dropdown};
24
24
  top: ${(p) => setPanelTop(p.size)};
25
25
  border: 1px solid ${Theme.colors.gray_2};
26
26
  border-top: none;
package/dist/types/components/Dropdown/Dropdown.d.ts CHANGED
@@ -3,5 +3,7 @@ import { IFormElement, IOption } from '../../types';
3
3
  export interface IDropdownProps extends IFormElement {
4
4
  options: IOption[];
5
5
  handleSelect: (name: string, value: string | number) => void;
6
+ position?: string;
7
+ zIndex?: number;
6
8
  }
7
9
  export declare const Dropdown: FC<IDropdownProps>;
package/dist/types/components/DropdownMenu/DropdownMenu.d.ts CHANGED
@@ -17,6 +17,8 @@ interface IDropdownMenuProps {
17
17
  iconHoverColor?: string;
18
18
  iconBgColor?: string;
19
19
  iconBgHoverColor?: string;
20
+ position?: string;
21
+ zIndex?: number;
20
22
  }
21
23
  export declare const DropdownMenu: FC<IDropdownMenuProps>;
22
24
  export {};
package/dist/types/components/common/commonComponents.d.ts CHANGED
@@ -5,6 +5,7 @@ interface IPanelStyle {
5
5
  height?: string;
6
6
  size: InputSize;
7
7
  fullWidth?: boolean;
8
+ zIndex?: number;
8
9
  }
9
10
  export declare const Panel: import("styled-components").StyledComponent<"div", any, IPanelStyle, never>;
10
11
  interface IPanelOptionStyle {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "venice-ui",
3
- "version": "2.0.12",
3
+ "version": "2.0.13",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "module": "./dist/esm/index.js",