venice-ui 2.4.9 → 2.4.11

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

@@ -33,7 +33,7 @@ const common_1 = require("../common");
 const react_dom_1 = require("react-dom");
 const Icons_1 = require("../Icons");
 const Theme_1 = require("../../Theme");
-const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, errorMsg, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, theme = Theme_1.mainTheme, handleFieldFocus, handleFieldBlur, }) => {
+const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, errorMsg, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, maxHeight, readOnly = false, theme = Theme_1.mainTheme, handleFieldFocus, handleFieldBlur, }) => {
     const [open, toogleOpen] = (0, react_1.useState)(false);
     const ref = (0, react_1.useRef)(null);
     const sourceRef = (0, react_1.useRef)(null);
@@ -100,7 +100,7 @@ const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = fa
             react_1.default.createElement(Input_1.EyeIconWrapper, { size: size },
                 react_1.default.createElement(Icons_1.Icon, { name: open ? 'arrow_drop_up' : 'arrow_drop_down', size: 24, iconColor: theme.inputDefaultTextColor, iconHoverColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" })),
             open &&
-                (0, react_dom_1.createPortal)(react_1.default.createElement(common_1.Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex }, options &&
+                (0, react_dom_1.createPortal)(react_1.default.createElement(common_1.Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex, maxHeight: maxHeight }, 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.disabled), isDisabled: option.disabled || false }, option.label)))), document.body),
             error && errorMsg && react_1.default.createElement(Input_1.InputErrorMsg, null, errorMsg)))));
 };

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

@@ -31,6 +31,12 @@ exports.Panel = styled_components_1.default.div `
   border: 1px solid ${Theme_1.Theme.colors.gray_2};
   border-top: none;
   min-width: 30px;
+  ${(p) => p.maxHeight &&
+    `
+  max-height: ${p.maxHeight};
+  overflow: auto;
+  
+  `}
 `;
 exports.PanelOption = styled_components_1.default.div `
   padding: ${Theme_1.Theme.padding.s} ${Theme_1.Theme.padding.m};

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

@@ -7,7 +7,7 @@ import { Panel, PanelOption } from '../common';
 import { createPortal } from 'react-dom';
 import { Icon } from '../Icons';
 import { mainTheme } from '../../Theme';
-export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, errorMsg, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, readOnly = false, theme = mainTheme, handleFieldFocus, handleFieldBlur, }) => {
+export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabled = false, error, errorMsg, width, options, value, placeholder = 'Please select', name, handleSelect, position = 'left', zIndex, maxHeight, readOnly = false, theme = mainTheme, handleFieldFocus, handleFieldBlur, }) => {
     const [open, toogleOpen] = useState(false);
     const ref = useRef(null);
     const sourceRef = useRef(null);
@@ -74,7 +74,7 @@ export const Dropdown = ({ size = 'medium', label, labelPosition = 'top', disabl
             React.createElement(EyeIconWrapper, { size: size },
                 React.createElement(Icon, { name: open ? 'arrow_drop_up' : 'arrow_drop_down', size: 24, iconColor: theme.inputDefaultTextColor, iconHoverColor: theme.inputDefaultTextColor, iconBgHoverColor: "transparent" })),
             open &&
-                createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex }, options &&
+                createPortal(React.createElement(Panel, { style: dropdownStyles, ref: ref, size: size, fullWidth: true, zIndex: zIndex, maxHeight: maxHeight }, options &&
                     options.map((option) => (React.createElement(PanelOption, { key: option.value, active: option.value === value, onClick: (e) => selectOption(e, option.value, option.disabled), isDisabled: option.disabled || false }, option.label)))), document.body),
             error && errorMsg && React.createElement(InputErrorMsg, null, errorMsg)))));
 };

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

@@ -25,6 +25,12 @@ export const Panel = styled.div `
   border: 1px solid ${Theme.colors.gray_2};
   border-top: none;
   min-width: 30px;
+  ${(p) => p.maxHeight &&
+    `
+  max-height: ${p.maxHeight};
+  overflow: auto;
+  
+  `}
 `;
 export const PanelOption = styled.div `
   padding: ${Theme.padding.s} ${Theme.padding.m};

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

@@ -5,6 +5,7 @@ export interface IDropdownProps extends IFormElement {
     handleSelect: (name: string, value: string | number) => void;
     position?: string;
     zIndex?: number;
+    maxHeight?: string;
     theme?: any;
     handleFieldFocus?: (name: string) => void;
     handleFieldBlur?: () => void;

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

@@ -2,8 +2,9 @@ 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;
+    height?: string;
+    maxHeight?: string;
     fullWidth?: boolean;
     zIndex?: number;
 }

package/package.json

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