venice-ui 2.0.11 → 2.0.12

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 +15 -3
  2. package/dist/cjs/components/DropdownMenu/DropdownMenu.js +24 -9
  3. package/dist/cjs/components/common/commonComponents.js +0 -1
  4. package/dist/cjs/components/common/inputStyles.js +1 -9
  5. package/dist/esm/components/Dropdown/Dropdown.js +15 -3
  6. package/dist/esm/components/DropdownMenu/DropdownMenu.js +24 -9
  7. package/dist/esm/components/common/commonComponents.js +1 -2
  8. package/dist/esm/components/common/inputStyles.js +0 -7
  9. package/dist/types/components/common/commonComponents.d.ts +1 -2
  10. package/dist/types/components/common/inputStyles.d.ts +1 -6
  11. package/dist/types/types/types.d.ts +0 -1
  12. package/package.json +1 -1
package/dist/cjs/components/Dropdown/Dropdown.js CHANGED
@@ -30,14 +30,25 @@ const Dropdown_styles_1 = require("./Dropdown.styles");
30
30
  const DropdownElements_1 = require("./DropdownElements");
31
31
  const Input_1 = require("../Input");
32
32
  const common_1 = require("../common");
33
+ const react_dom_1 = require("react-dom");
33
34
  const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, }) => {
34
35
  const [open, toogleOpen] = (0, react_1.useState)(false);
35
36
  const ref = (0, react_1.useRef)(null);
37
+ const sourceRef = (0, react_1.useRef)(null);
38
+ const [dropdownStyles, setDropdownStyles] = (0, react_1.useState)({});
36
39
  const getLabelForValue = (value) => {
37
40
  return options.find((option) => option.value === value).label;
38
41
  };
39
42
  const handleOpen = () => {
40
43
  if (!disabled) {
44
+ if (sourceRef.current) {
45
+ const buttonRect = sourceRef.current.getBoundingClientRect();
46
+ setDropdownStyles({
47
+ top: buttonRect.bottom + window.scrollY,
48
+ left: buttonRect.left + window.scrollX,
49
+ width: buttonRect.width
50
+ });
51
+ }
41
52
  toogleOpen(!open);
42
53
  }
43
54
  };
@@ -59,10 +70,11 @@ const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = fa
59
70
  }, [open]);
60
71
  return (react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
61
72
  label && (react_1.default.createElement(Input_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
62
- react_1.default.createElement(Dropdown_styles_1.DropdownElement, { onClick: () => handleOpen() },
73
+ react_1.default.createElement(Dropdown_styles_1.DropdownElement, { onClick: () => handleOpen(), ref: sourceRef },
63
74
  react_1.default.createElement(DropdownElements_1.Field, { inputSize: size, disabled: disabled, width: width, active: open, error: error }, value ? getLabelForValue(value) : placeholder),
64
- open && (react_1.default.createElement(common_1.Panel, { ref: ref, size: size, position: "left", fullWidth: true }, options &&
65
- 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))))),
75
+ open &&
76
+ (0, react_dom_1.createPortal)(react_1.default.createElement(common_1.Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true }, options &&
77
+ 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),
66
78
  error && react_1.default.createElement(Input_1.InputErrorMsg, null, error))));
67
79
  };
68
80
  exports.Dropdown = Dropdown;
package/dist/cjs/components/DropdownMenu/DropdownMenu.js CHANGED
@@ -31,12 +31,25 @@ const Icons_1 = require("../Icons");
31
31
  const DropdownMenu_styles_1 = require("./DropdownMenu.styles");
32
32
  const Aligment_1 = require("../Aligment");
33
33
  const Typography_1 = require("../Typography");
34
+ const react_dom_1 = require("react-dom");
34
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
36
  const [open, toogleOpen] = (0, react_1.useState)(false);
36
37
  const ref = (0, react_1.useRef)(null);
38
+ const sourceRef = (0, react_1.useRef)(null);
39
+ const [dropdownStyles, setDropdownStyles] = (0, react_1.useState)({});
37
40
  const close = () => {
38
41
  toogleOpen(false);
39
42
  };
43
+ const toogle = (openState) => {
44
+ if (sourceRef.current && openState) {
45
+ const buttonRect = sourceRef.current.getBoundingClientRect();
46
+ setDropdownStyles({
47
+ top: buttonRect.bottom + window.scrollY,
48
+ left: buttonRect.left + window.scrollX,
49
+ });
50
+ }
51
+ toogleOpen(openState);
52
+ };
40
53
  const handleFooterAction = () => {
41
54
  footerAction && footerAction();
42
55
  close();
@@ -57,14 +70,16 @@ const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false,
57
70
  };
58
71
  }, [open]);
59
72
  return (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuElement, null,
60
- react_1.default.createElement(Icons_1.Icon, { name: iconName, onClick: () => toogleOpen(!open), size: (0, common_1.setIconSize)(size), isActive: open, right: right, left: left, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor }),
61
- open && (react_1.default.createElement(common_1.Panel, { ref: ref, size: size, position: "right" },
62
- react_1.default.createElement(Aligment_1.Aligment, { direction: "column" },
63
- header && (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuHeader, null,
64
- headerTitle && (react_1.default.createElement(Typography_1.TextAccent, { color: Theme_1.Theme.colors.text }, headerTitle)),
65
- headerSubtitle && (react_1.default.createElement(Typography_1.TextLabel, { color: Theme_1.Theme.colors.text }, headerSubtitle)))),
66
- react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuContent, null, options &&
67
- options.map((option) => (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuOption, { key: option.label, onClick: () => handleClick(option.action) }, option.label)))),
68
- footer && (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuFooter, null, footerText && (react_1.default.createElement(Typography_1.Text, { action: true, onClick: handleFooterAction }, footerText)))))))));
73
+ react_1.default.createElement("div", { ref: sourceRef, onClick: () => toogle(!open) },
74
+ 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
+ open &&
76
+ (0, react_dom_1.createPortal)(react_1.default.createElement(common_1.Panel, { style: dropdownStyles, ref: ref, size: size },
77
+ react_1.default.createElement(Aligment_1.Aligment, { direction: "column" },
78
+ header && (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuHeader, null,
79
+ headerTitle && (react_1.default.createElement(Typography_1.TextAccent, { color: Theme_1.Theme.colors.text }, headerTitle)),
80
+ headerSubtitle && (react_1.default.createElement(Typography_1.TextLabel, { color: Theme_1.Theme.colors.text }, headerSubtitle)))),
81
+ react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuContent, null, options &&
82
+ options.map((option) => (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuOption, { key: option.label, onClick: () => handleClick(option.action) }, option.label)))),
83
+ 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)));
69
84
  };
70
85
  exports.DropdownMenu = DropdownMenu;
package/dist/cjs/components/common/commonComponents.js CHANGED
@@ -31,7 +31,6 @@ exports.Panel = styled_components_1.default.div `
31
31
  border: 1px solid ${Theme_1.Theme.colors.gray_2};
32
32
  border-top: none;
33
33
  min-width: 30px;
34
- ${(p) => (0, inputStyles_1.setPanelPosition)(p.position)}
35
34
  `;
36
35
  exports.PanelOption = styled_components_1.default.div `
37
36
  padding: ${Theme_1.Theme.padding.s} ${Theme_1.Theme.padding.m};
package/dist/cjs/components/common/inputStyles.js CHANGED
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.setAnimationParams = exports.animationParams = exports.setFieldHeight = exports.fieldHeight = exports.setPanelPosition = exports.panelPosition = exports.setPanelTop = exports.panelTop = exports.setIconSize = exports.iconSize = exports.setLabelFontSize = exports.lableFontSize = exports.inputColorSchema = exports.setEyeTopPosition = exports.setButtonLoaderSize = exports.setToogleSize = exports.setButtonSize = exports.setHeight = exports.setSize = exports.eyeTopPosition = exports.buttonLoaderHeight = exports.buttonLoaderPadding = exports.buttonPadding = exports.inputPadding = exports.toogleSize = exports.height = exports.sizes = exports.defaultStyles = void 0;
3
+ exports.setAnimationParams = exports.animationParams = exports.setFieldHeight = exports.fieldHeight = exports.setPanelTop = exports.panelTop = exports.setIconSize = exports.iconSize = exports.setLabelFontSize = exports.lableFontSize = exports.inputColorSchema = exports.setEyeTopPosition = exports.setButtonLoaderSize = exports.setToogleSize = exports.setButtonSize = exports.setHeight = exports.setSize = exports.eyeTopPosition = exports.buttonLoaderHeight = exports.buttonLoaderPadding = exports.buttonPadding = exports.inputPadding = exports.toogleSize = exports.height = exports.sizes = exports.defaultStyles = void 0;
4
4
  const polished_1 = require("polished");
5
5
  const Theme_1 = require("../../Theme");
6
6
  exports.defaultStyles = `
@@ -172,14 +172,6 @@ const setPanelTop = (size) => {
172
172
  return exports.panelTop[size];
173
173
  };
174
174
  exports.setPanelTop = setPanelTop;
175
- exports.panelPosition = {
176
- left: `left:0px`,
177
- right: 'right:0px',
178
- };
179
- const setPanelPosition = (position) => {
180
- return exports.panelPosition[position];
181
- };
182
- exports.setPanelPosition = setPanelPosition;
183
175
  exports.fieldHeight = {
184
176
  small: '26px',
185
177
  medium: '36px',
package/dist/esm/components/Dropdown/Dropdown.js CHANGED
@@ -4,14 +4,25 @@ import { DropdownElement } from './Dropdown.styles';
4
4
  import { Field } from './DropdownElements';
5
5
  import { InputErrorMsg, InputLabelElement } from '../Input';
6
6
  import { Panel, PanelOption } from '../common';
7
+ import { createPortal } from 'react-dom';
7
8
  export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, }) => {
8
9
  const [open, toogleOpen] = useState(false);
9
10
  const ref = useRef(null);
11
+ const sourceRef = useRef(null);
12
+ const [dropdownStyles, setDropdownStyles] = useState({});
10
13
  const getLabelForValue = (value) => {
11
14
  return options.find((option) => option.value === value).label;
12
15
  };
13
16
  const handleOpen = () => {
14
17
  if (!disabled) {
18
+ if (sourceRef.current) {
19
+ const buttonRect = sourceRef.current.getBoundingClientRect();
20
+ setDropdownStyles({
21
+ top: buttonRect.bottom + window.scrollY,
22
+ left: buttonRect.left + window.scrollX,
23
+ width: buttonRect.width
24
+ });
25
+ }
15
26
  toogleOpen(!open);
16
27
  }
17
28
  };
@@ -33,9 +44,10 @@ export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabl
33
44
  }, [open]);
34
45
  return (React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
35
46
  label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
36
- React.createElement(DropdownElement, { onClick: () => handleOpen() },
47
+ React.createElement(DropdownElement, { onClick: () => handleOpen(), ref: sourceRef },
37
48
  React.createElement(Field, { inputSize: size, disabled: disabled, width: width, active: open, error: error }, value ? getLabelForValue(value) : placeholder),
38
- open && (React.createElement(Panel, { ref: ref, size: size, position: "left", fullWidth: true }, options &&
39
- options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label))))),
49
+ open &&
50
+ createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true }, options &&
51
+ options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label)))), document.body),
40
52
  error && React.createElement(InputErrorMsg, null, error))));
41
53
  };
package/dist/esm/components/DropdownMenu/DropdownMenu.js CHANGED
@@ -5,12 +5,25 @@ import { Icon } from '../Icons';
5
5
  import { DropdownMenuOption, DropdownMenuElement, DropdownMenuContent, DropdownMenuFooter, DropdownMenuHeader, } from './DropdownMenu.styles';
6
6
  import { Aligment } from '../Aligment';
7
7
  import { TextAccent, TextLabel, Text } from '../Typography';
8
+ import { createPortal } from 'react-dom';
8
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
10
  const [open, toogleOpen] = useState(false);
10
11
  const ref = useRef(null);
12
+ const sourceRef = useRef(null);
13
+ const [dropdownStyles, setDropdownStyles] = useState({});
11
14
  const close = () => {
12
15
  toogleOpen(false);
13
16
  };
17
+ const toogle = (openState) => {
18
+ if (sourceRef.current && openState) {
19
+ const buttonRect = sourceRef.current.getBoundingClientRect();
20
+ setDropdownStyles({
21
+ top: buttonRect.bottom + window.scrollY,
22
+ left: buttonRect.left + window.scrollX,
23
+ });
24
+ }
25
+ toogleOpen(openState);
26
+ };
14
27
  const handleFooterAction = () => {
15
28
  footerAction && footerAction();
16
29
  close();
@@ -31,13 +44,15 @@ export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header =
31
44
  };
32
45
  }, [open]);
33
46
  return (React.createElement(DropdownMenuElement, null,
34
- React.createElement(Icon, { name: iconName, onClick: () => toogleOpen(!open), size: setIconSize(size), isActive: open, right: right, left: left, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor }),
35
- open && (React.createElement(Panel, { ref: ref, size: size, position: "right" },
36
- React.createElement(Aligment, { direction: "column" },
37
- header && (React.createElement(DropdownMenuHeader, null,
38
- headerTitle && (React.createElement(TextAccent, { color: Theme.colors.text }, headerTitle)),
39
- headerSubtitle && (React.createElement(TextLabel, { color: Theme.colors.text }, headerSubtitle)))),
40
- React.createElement(DropdownMenuContent, null, options &&
41
- options.map((option) => (React.createElement(DropdownMenuOption, { key: option.label, onClick: () => handleClick(option.action) }, option.label)))),
42
- footer && (React.createElement(DropdownMenuFooter, null, footerText && (React.createElement(Text, { action: true, onClick: handleFooterAction }, footerText)))))))));
47
+ React.createElement("div", { ref: sourceRef, onClick: () => toogle(!open) },
48
+ React.createElement(Icon, { name: iconName, size: setIconSize(size), isActive: open, right: right, left: left, iconColor: iconColor, iconHoverColor: iconHoverColor, iconBgColor: iconBgColor, iconBgHoverColor: iconBgHoverColor })),
49
+ open &&
50
+ createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size },
51
+ React.createElement(Aligment, { direction: "column" },
52
+ header && (React.createElement(DropdownMenuHeader, null,
53
+ headerTitle && (React.createElement(TextAccent, { color: Theme.colors.text }, headerTitle)),
54
+ headerSubtitle && (React.createElement(TextLabel, { color: Theme.colors.text }, headerSubtitle)))),
55
+ React.createElement(DropdownMenuContent, null, options &&
56
+ options.map((option) => (React.createElement(DropdownMenuOption, { key: option.label, onClick: () => handleClick(option.action) }, option.label)))),
57
+ footer && (React.createElement(DropdownMenuFooter, null, footerText && (React.createElement(Text, { action: true, onClick: handleFooterAction }, footerText)))))), document.body)));
43
58
  };
package/dist/esm/components/common/commonComponents.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { lighten } from 'polished';
2
2
  import styled from 'styled-components';
3
3
  import { Theme } from '../../Theme/Theme';
4
- import { setPanelPosition, setPanelTop } from './inputStyles';
4
+ import { setPanelTop } from './inputStyles';
5
5
  export const Container = styled.div `
6
6
  width: 100%;
7
7
  `;
@@ -25,7 +25,6 @@ export const Panel = styled.div `
25
25
  border: 1px solid ${Theme.colors.gray_2};
26
26
  border-top: none;
27
27
  min-width: 30px;
28
- ${(p) => setPanelPosition(p.position)}
29
28
  `;
30
29
  export const PanelOption = styled.div `
31
30
  padding: ${Theme.padding.s} ${Theme.padding.m};
package/dist/esm/components/common/inputStyles.js CHANGED
@@ -160,13 +160,6 @@ export const panelTop = {
160
160
  export const setPanelTop = (size) => {
161
161
  return panelTop[size];
162
162
  };
163
- export const panelPosition = {
164
- left: `left:0px`,
165
- right: 'right:0px',
166
- };
167
- export const setPanelPosition = (position) => {
168
- return panelPosition[position];
169
- };
170
163
  export const fieldHeight = {
171
164
  small: '26px',
172
165
  medium: '36px',
package/dist/types/components/common/commonComponents.d.ts CHANGED
@@ -1,10 +1,9 @@
1
- import { InputSize, PanelPosition } from '../../types';
1
+ import { InputSize } from '../../types';
2
2
  export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
3
3
  export declare const ScrollCotainer: import("styled-components").StyledComponent<"div", any, {}, never>;
4
4
  interface IPanelStyle {
5
5
  height?: string;
6
6
  size: InputSize;
7
- position: PanelPosition;
8
7
  fullWidth?: boolean;
9
8
  }
10
9
  export declare const Panel: import("styled-components").StyledComponent<"div", any, IPanelStyle, never>;
package/dist/types/components/common/inputStyles.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { InputSize, PanelPosition } from '../../types';
1
+ import { InputSize } from '../../types';
2
2
  export declare const defaultStyles: string;
3
3
  export declare const sizes: {
4
4
  small: string;
@@ -69,11 +69,6 @@ export declare const panelTop: {
69
69
  large: string;
70
70
  };
71
71
  export declare const setPanelTop: (size: InputSize) => string;
72
- export declare const panelPosition: {
73
- left: string;
74
- right: string;
75
- };
76
- export declare const setPanelPosition: (position: PanelPosition) => string;
77
72
  export declare const fieldHeight: {
78
73
  small: string;
79
74
  medium: string;
package/dist/types/types/types.d.ts CHANGED
@@ -3,7 +3,6 @@ export type InputSize = 'large' | 'medium' | 'small';
3
3
  export type InputType = "text" | "password" | "email" | "number" | "increase";
4
4
  export type LabelPosition = "top" | "left";
5
5
  export type TitlePosition = "left" | "center" | "right";
6
- export type PanelPosition = 'left' | 'right';
7
6
  export interface IFormElement {
8
7
  label?: string;
9
8
  labelPosition?: LabelPosition;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "venice-ui",
3
- "version": "2.0.11",
3
+ "version": "2.0.12",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "module": "./dist/esm/index.js",