venice-ui 2.0.11 → 2.0.13

package/dist/cjs/components/Dropdown/Dropdown.js

@@ -30,14 +30,31 @@ const Dropdown_styles_1 = require("./Dropdown.styles");
 const DropdownElements_1 = require("./DropdownElements");
 const Input_1 = require("../Input");
 const common_1 = require("../common");
-const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, }) => {
+const react_dom_1 = require("react-dom");
+const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, }) => {
     const [open, toogleOpen] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
+    const sourceRef = (0, react_1.useRef)(null);
+    const [dropdownStyles, setDropdownStyles] = (0, react_1.useState)({});
     const getLabelForValue = (value) => {
         return options.find((option) => option.value === value).label;
     };
     const handleOpen = () => {
         if (!disabled) {
+            if (sourceRef.current) {
+                const buttonRect = sourceRef.current.getBoundingClientRect();
+                const positionStyle = {
+                    top: buttonRect.bottom + window.scrollY,
+                    width: buttonRect.width,
+                };
+                if (position === 'left') {
+                    positionStyle.left = buttonRect.left + window.scrollX;
+                }
+                else if (position === 'right') {
+                    positionStyle.right = buttonRect.right + window.scrollX;
+                }
+                setDropdownStyles(positionStyle);
+            }
             toogleOpen(!open);
         }
     };
@@ -59,10 +76,11 @@ const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = fa
     }, [open]);
     return (react_1.default.createElement(Aligment_1.Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
         label && (react_1.default.createElement(Input_1.InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
-        react_1.default.createElement(Dropdown_styles_1.DropdownElement, { onClick: () => handleOpen() },
+        react_1.default.createElement(Dropdown_styles_1.DropdownElement, { onClick: () => handleOpen(), ref: sourceRef },
             react_1.default.createElement(DropdownElements_1.Field, { inputSize: size, disabled: disabled, width: width, active: open, error: error }, value ? getLabelForValue(value) : placeholder),
-            open && (react_1.default.createElement(common_1.Panel, { ref: ref, size: size, position: "left", fullWidth: true }, options &&
-                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))))),
+            open &&
+                (0, react_dom_1.createPortal)(react_1.default.createElement(common_1.Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex }, options &&
+                    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),
             error && react_1.default.createElement(Input_1.InputErrorMsg, null, error))));
 };
 exports.Dropdown = Dropdown;

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

@@ -31,12 +31,31 @@ const Icons_1 = require("../Icons");
 const DropdownMenu_styles_1 = require("./DropdownMenu.styles");
 const Aligment_1 = require("../Aligment");
 const Typography_1 = require("../Typography");
-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, }) => {
+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 [open, toogleOpen] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
+    const sourceRef = (0, react_1.useRef)(null);
+    const [dropdownStyles, setDropdownStyles] = (0, react_1.useState)({});
     const close = () => {
         toogleOpen(false);
     };
+    const toogle = (openState) => {
+        if (sourceRef.current && openState) {
+            const buttonRect = sourceRef.current.getBoundingClientRect();
+            const positionStyle = {
+                top: buttonRect.bottom + window.scrollY,
+            };
+            if (position === 'left') {
+                positionStyle.left = buttonRect.left + window.scrollX;
+            }
+            else if (position === 'right') {
+                positionStyle.right = buttonRect.right + window.scrollX;
+            }
+            setDropdownStyles(positionStyle);
+        }
+        toogleOpen(openState);
+    };
     const handleFooterAction = () => {
         footerAction && footerAction();
         close();
@@ -57,14 +76,16 @@ const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false,
         };
     }, [open]);
     return (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuElement, null,
-        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 }),
-        open && (react_1.default.createElement(common_1.Panel, { ref: ref, size: size, position: "right" },
-            react_1.default.createElement(Aligment_1.Aligment, { direction: "column" },
-                header && (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuHeader, null,
-                    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, onClick: () => handleClick(option.action) }, 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)))))))));
+        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 })),
+        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" },
+                    header && (react_1.default.createElement(DropdownMenu_styles_1.DropdownMenuHeader, null,
+                        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, onClick: () => handleClick(option.action) }, 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

@@ -36,7 +36,7 @@ exports.DropdownMenuOption = styled_components_1.default.div `
   cursor: pointer;
   white-space: nowrap;
   color: ${Theme_1.Theme.colors.text};
-
+  font-size:1.6rem;
   :hover {
     background-color: ${(0, polished_1.lighten)(0.4, Theme_1.Theme.colors.primary)};
   }

package/dist/cjs/components/common/commonComponents.js

@@ -26,12 +26,11 @@ exports.Panel = styled_components_1.default.div `
   height: ${(p) => (p.height ? p.height : 'auto')};
   width: ${(p) => (p.fullWidth ? '100%' : 'auto')};
   position: absolute;
-  z-index: ${Theme_1.Theme.zIndex.dropdown};
+  z-index: ${p => p.zIndex ? p.zIndex : Theme_1.Theme.zIndex.dropdown};
   top: ${(p) => (0, inputStyles_1.setPanelTop)(p.size)};
   border: 1px solid ${Theme_1.Theme.colors.gray_2};
   border-top: none;
   min-width: 30px;
-  ${(p) => (0, inputStyles_1.setPanelPosition)(p.position)}
 `;
 exports.PanelOption = styled_components_1.default.div `
   padding: ${Theme_1.Theme.padding.s} ${Theme_1.Theme.padding.m};

package/dist/cjs/components/common/inputStyles.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-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;
+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;
 const polished_1 = require("polished");
 const Theme_1 = require("../../Theme");
 exports.defaultStyles = `
@@ -172,14 +172,6 @@ const setPanelTop = (size) => {
     return exports.panelTop[size];
 };
 exports.setPanelTop = setPanelTop;
-exports.panelPosition = {
-    left: `left:0px`,
-    right: 'right:0px',
-};
-const setPanelPosition = (position) => {
-    return exports.panelPosition[position];
-};
-exports.setPanelPosition = setPanelPosition;
 exports.fieldHeight = {
     small: '26px',
     medium: '36px',

package/dist/esm/components/Dropdown/Dropdown.js

@@ -4,14 +4,31 @@ import { DropdownElement } from './Dropdown.styles';
 import { Field } from './DropdownElements';
 import { InputErrorMsg, InputLabelElement } from '../Input';
 import { Panel, PanelOption } from '../common';
-export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, }) => {
+import { createPortal } from 'react-dom';
+export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, }) => {
     const [open, toogleOpen] = useState(false);
     const ref = useRef(null);
+    const sourceRef = useRef(null);
+    const [dropdownStyles, setDropdownStyles] = useState({});
     const getLabelForValue = (value) => {
         return options.find((option) => option.value === value).label;
     };
     const handleOpen = () => {
         if (!disabled) {
+            if (sourceRef.current) {
+                const buttonRect = sourceRef.current.getBoundingClientRect();
+                const positionStyle = {
+                    top: buttonRect.bottom + window.scrollY,
+                    width: buttonRect.width,
+                };
+                if (position === 'left') {
+                    positionStyle.left = buttonRect.left + window.scrollX;
+                }
+                else if (position === 'right') {
+                    positionStyle.right = buttonRect.right + window.scrollX;
+                }
+                setDropdownStyles(positionStyle);
+            }
             toogleOpen(!open);
         }
     };
@@ -33,9 +50,10 @@ export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabl
     }, [open]);
     return (React.createElement(Aligment, { align: labelPosition === 'top' ? 'flex-start' : 'center', direction: labelPosition === 'top' ? 'column' : 'row', wrap: 'nowrap', width: width },
         label && (React.createElement(InputLabelElement, { size: size, labelPosition: labelPosition }, label)),
-        React.createElement(DropdownElement, { onClick: () => handleOpen() },
+        React.createElement(DropdownElement, { onClick: () => handleOpen(), ref: sourceRef },
             React.createElement(Field, { inputSize: size, disabled: disabled, width: width, active: open, error: error }, value ? getLabelForValue(value) : placeholder),
-            open && (React.createElement(Panel, { ref: ref, size: size, position: "left", fullWidth: true }, options &&
-                options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label))))),
+            open &&
+                createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex }, options &&
+                    options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value) }, option.label)))), document.body),
             error && React.createElement(InputErrorMsg, null, error))));
 };

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

@@ -5,12 +5,31 @@ import { Icon } from '../Icons';
 import { DropdownMenuOption, DropdownMenuElement, DropdownMenuContent, DropdownMenuFooter, DropdownMenuHeader, } from './DropdownMenu.styles';
 import { Aligment } from '../Aligment';
 import { TextAccent, TextLabel, Text } from '../Typography';
-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, }) => {
+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, }) => {
     const [open, toogleOpen] = useState(false);
     const ref = useRef(null);
+    const sourceRef = useRef(null);
+    const [dropdownStyles, setDropdownStyles] = useState({});
     const close = () => {
         toogleOpen(false);
     };
+    const toogle = (openState) => {
+        if (sourceRef.current && openState) {
+            const buttonRect = sourceRef.current.getBoundingClientRect();
+            const positionStyle = {
+                top: buttonRect.bottom + window.scrollY,
+            };
+            if (position === 'left') {
+                positionStyle.left = buttonRect.left + window.scrollX;
+            }
+            else if (position === 'right') {
+                positionStyle.right = buttonRect.right + window.scrollX;
+            }
+            setDropdownStyles(positionStyle);
+        }
+        toogleOpen(openState);
+    };
     const handleFooterAction = () => {
         footerAction && footerAction();
         close();
@@ -31,13 +50,15 @@ export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header =
         };
     }, [open]);
     return (React.createElement(DropdownMenuElement, null,
-        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 }),
-        open && (React.createElement(Panel, { ref: ref, size: size, position: "right" },
-            React.createElement(Aligment, { direction: "column" },
-                header && (React.createElement(DropdownMenuHeader, null,
-                    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, onClick: () => handleClick(option.action) }, option.label)))),
-                footer && (React.createElement(DropdownMenuFooter, null, footerText && (React.createElement(Text, { action: true, onClick: handleFooterAction }, footerText)))))))));
+        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 })),
+        open &&
+            createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size, zIndex: zIndex },
+                React.createElement(Aligment, { direction: "column" },
+                    header && (React.createElement(DropdownMenuHeader, null,
+                        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, onClick: () => handleClick(option.action) }, 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

@@ -30,7 +30,7 @@ export const DropdownMenuOption = styled.div `
   cursor: pointer;
   white-space: nowrap;
   color: ${Theme.colors.text};
-
+  font-size:1.6rem;
   :hover {
     background-color: ${lighten(0.4, Theme.colors.primary)};
   }

package/dist/esm/components/common/commonComponents.js

@@ -1,7 +1,7 @@
 import { lighten } from 'polished';
 import styled from 'styled-components';
 import { Theme } from '../../Theme/Theme';
-import { setPanelPosition, setPanelTop } from './inputStyles';
+import { setPanelTop } from './inputStyles';
 export const Container = styled.div `
   width: 100%;
 `;
@@ -20,12 +20,11 @@ export const Panel = styled.div `
   height: ${(p) => (p.height ? p.height : 'auto')};
   width: ${(p) => (p.fullWidth ? '100%' : 'auto')};
   position: absolute;
-  z-index: ${Theme.zIndex.dropdown};
+  z-index: ${p => p.zIndex ? p.zIndex : Theme.zIndex.dropdown};
   top: ${(p) => setPanelTop(p.size)};
   border: 1px solid ${Theme.colors.gray_2};
   border-top: none;
   min-width: 30px;
-  ${(p) => setPanelPosition(p.position)}
 `;
 export const PanelOption = styled.div `
   padding: ${Theme.padding.s} ${Theme.padding.m};

package/dist/esm/components/common/inputStyles.js

@@ -160,13 +160,6 @@ export const panelTop = {
 export const setPanelTop = (size) => {
     return panelTop[size];
 };
-export const panelPosition = {
-    left: `left:0px`,
-    right: 'right:0px',
-};
-export const setPanelPosition = (position) => {
-    return panelPosition[position];
-};
 export const fieldHeight = {
     small: '26px',
     medium: '36px',

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

@@ -3,5 +3,7 @@ import { IFormElement, IOption } from '../../types';
 export interface IDropdownProps extends IFormElement {
     options: IOption[];
     handleSelect: (name: string, value: string | number) => void;
+    position?: string;
+    zIndex?: number;
 }
 export declare const Dropdown: FC<IDropdownProps>;

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

@@ -17,6 +17,8 @@ interface IDropdownMenuProps {
     iconHoverColor?: string;
     iconBgColor?: string;
     iconBgHoverColor?: string;
+    position?: string;
+    zIndex?: number;
 }
 export declare const DropdownMenu: FC<IDropdownMenuProps>;
 export {};

package/dist/types/components/common/commonComponents.d.ts

@@ -1,11 +1,11 @@
-import { InputSize, PanelPosition } from '../../types';
+import { InputSize } from '../../types';
 export declare const Container: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const ScrollCotainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 interface IPanelStyle {
     height?: string;
     size: InputSize;
-    position: PanelPosition;
     fullWidth?: boolean;
+    zIndex?: number;
 }
 export declare const Panel: import("styled-components").StyledComponent<"div", any, IPanelStyle, never>;
 interface IPanelOptionStyle {

package/dist/types/components/common/inputStyles.d.ts

@@ -1,4 +1,4 @@
-import { InputSize, PanelPosition } from '../../types';
+import { InputSize } from '../../types';
 export declare const defaultStyles: string;
 export declare const sizes: {
     small: string;
@@ -69,11 +69,6 @@ export declare const panelTop: {
     large: string;
 };
 export declare const setPanelTop: (size: InputSize) => string;
-export declare const panelPosition: {
-    left: string;
-    right: string;
-};
-export declare const setPanelPosition: (position: PanelPosition) => string;
 export declare const fieldHeight: {
     small: string;
     medium: string;

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

@@ -3,7 +3,6 @@ export type InputSize = 'large' | 'medium' | 'small';
 export type InputType = "text" | "password" | "email" | "number" | "increase";
 export type LabelPosition = "top" | "left";
 export type TitlePosition = "left" | "center" | "right";
-export type PanelPosition = 'left' | 'right';
 export interface IFormElement {
     label?: string;
     labelPosition?: LabelPosition;

package/package.json

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