venice-ui 2.0.12 → 2.0.14

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

@@ -31,7 +31,7 @@ const DropdownElements_1 = require("./DropdownElements");
 const Input_1 = require("../Input");
 const common_1 = require("../common");
 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, }) => {
+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);
@@ -43,11 +43,17 @@ const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = fa
         if (!disabled) {
             if (sourceRef.current) {
                 const buttonRect = sourceRef.current.getBoundingClientRect();
-                setDropdownStyles({
+                const positionStyle = {
                     top: buttonRect.bottom + window.scrollY,
-                    left: buttonRect.left + window.scrollX,
-                    width: buttonRect.width
-                });
+                    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);
         }
@@ -73,7 +79,7 @@ const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = fa
         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 &&
-                (0, react_dom_1.createPortal)(react_1.default.createElement(common_1.Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true }, options &&
+                (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))));
 };

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, }) => {
+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);
@@ -43,10 +43,16 @@ const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false,
     const toogle = (openState) => {
         if (sourceRef.current && openState) {
             const buttonRect = sourceRef.current.getBoundingClientRect();
-            setDropdownStyles({
+            const positionStyle = {
                 top: buttonRect.bottom + window.scrollY,
-                left: buttonRect.left + window.scrollX,
-            });
+            };
+            if (position === 'left') {
+                positionStyle.left = buttonRect.left + window.scrollX;
+            }
+            else if (position === 'right') {
+                positionStyle.right = buttonRect.right + window.scrollX;
+            }
+            setDropdownStyles(positionStyle);
         }
         toogleOpen(openState);
     };
@@ -73,7 +79,7 @@ const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header = false,
         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 },
+            (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)),

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/Form/Form.js

@@ -45,7 +45,7 @@ const Form = ({ formData, size = 'medium', read }) => {
             case 'increase':
                 return (react_1.default.createElement(Input_1.Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step, readOnly: read, autoFocus: item.autofocus, handleSubmit: item.submit }));
             case 'select':
-                return (react_1.default.createElement(Dropdown_1.Dropdown, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label }));
+                return (react_1.default.createElement(Dropdown_1.Dropdown, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex }));
             case 'file':
                 return (react_1.default.createElement(File_1.File, { label: item.label, fileValue: item.value, name: item.name, size: size, handleChange: onFileHandler, readOnly: read }));
         }

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

@@ -26,7 +26,7 @@ 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;

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

@@ -5,7 +5,7 @@ import { Field } from './DropdownElements';
 import { InputErrorMsg, InputLabelElement } from '../Input';
 import { Panel, PanelOption } from '../common';
 import { createPortal } from 'react-dom';
-export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, width, options, value, placeholder = 'Please select', name, handleSelect, }) => {
+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);
@@ -17,11 +17,17 @@ export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabl
         if (!disabled) {
             if (sourceRef.current) {
                 const buttonRect = sourceRef.current.getBoundingClientRect();
-                setDropdownStyles({
+                const positionStyle = {
                     top: buttonRect.bottom + window.scrollY,
-                    left: buttonRect.left + window.scrollX,
-                    width: buttonRect.width
-                });
+                    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);
         }
@@ -47,7 +53,7 @@ export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabl
         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 &&
-                createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true }, options &&
+                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

@@ -6,7 +6,7 @@ import { DropdownMenuOption, DropdownMenuElement, DropdownMenuContent, DropdownM
 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, }) => {
+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);
@@ -17,10 +17,16 @@ export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header =
     const toogle = (openState) => {
         if (sourceRef.current && openState) {
             const buttonRect = sourceRef.current.getBoundingClientRect();
-            setDropdownStyles({
+            const positionStyle = {
                 top: buttonRect.bottom + window.scrollY,
-                left: buttonRect.left + window.scrollX,
-            });
+            };
+            if (position === 'left') {
+                positionStyle.left = buttonRect.left + window.scrollX;
+            }
+            else if (position === 'right') {
+                positionStyle.right = buttonRect.right + window.scrollX;
+            }
+            setDropdownStyles(positionStyle);
         }
         toogleOpen(openState);
     };
@@ -47,7 +53,7 @@ export const DropdownMenu = ({ size = 'medium', iconName = 'more_vert', header =
         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 },
+            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)),

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/Form/Form.js

@@ -39,7 +39,7 @@ export const Form = ({ formData, size = 'medium', read }) => {
             case 'increase':
                 return (React.createElement(Input, { type: "increase", label: item.label, value: item.value, name: item.name, size: size, handleChange: onIntChangeHandler, min: item.min, max: item.max, step: item.step, readOnly: read, autoFocus: item.autofocus, handleSubmit: item.submit }));
             case 'select':
-                return (React.createElement(Dropdown, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label }));
+                return (React.createElement(Dropdown, { options: item.options, handleSelect: onChangeHandler, name: item.name, value: item.value, size: size, label: item.label, position: item.position, zIndex: item.zIndex }));
             case 'file':
                 return (React.createElement(File, { label: item.label, fileValue: item.value, name: item.name, size: size, handleChange: onFileHandler, readOnly: read }));
         }

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

@@ -20,7 +20,7 @@ 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;

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/Form/formTypes.d.ts

@@ -10,6 +10,8 @@ export interface FormDataProps {
     options?: IOption[];
     autofocus?: boolean;
     submit?: () => void;
+    position?: string;
+    zIndex?: number;
 }
 interface FormDataParentProps {
     row: FormDataProps[];

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

@@ -5,6 +5,7 @@ interface IPanelStyle {
     height?: string;
     size: InputSize;
     fullWidth?: boolean;
+    zIndex?: number;
 }
 export declare const Panel: import("styled-components").StyledComponent<"div", any, IPanelStyle, never>;
 interface IPanelOptionStyle {

package/package.json

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