@lanaco/lnc-react-ui 3.0.2 → 3.0.4

package/README.md

@@ -1,6 +1,6 @@
 # Lanaco ReactJS UI components library
 
-[Deployment](https://lanaco.github.io/lnc-react-ui/?path=/docs/intro--intro)
+[Deployment](https://lanaco.github.io/lnc-react-ui/?path=/docs/intro--page)
 
 This library includes basic and advanced UI components used with ReactJS frontend framework
 

package/lib/index.esm.js

@@ -64651,9 +64651,9 @@ var AnimatePresence = function (_a) {
         : childrenToRender.map(function (child) { return cloneElement(child); })));
 };
 
-var _excluded$N = ["anchorElement", "borderRadius", "vertical", "horizontal", "offset", "zIndex", "popoverContainer", "closeOnClickOutside", "onOpen", "onClose", "className", "style", "children"];
+var _excluded$N = ["anchorElement", "borderRadius", "vertical", "horizontal", "offset", "zIndex", "popoverContainer", "portalTarget", "closeOnClickOutside", "closeOnScroll", "onOpen", "onClose", "className", "style", "children"];
 var _templateObject$L;
-var StyledPopover = newStyled(motion.div)(_templateObject$L || (_templateObject$L = _taggedTemplateLiteral(["\n  box-sizing: border-box;\n  font-family: ", ";\n  display: ", ";\n  opacity: 0;\n  opacity: ", ";\n  animation: fadeIn 0.4s;\n\n  position: absolute;\n  top: ", ";\n  left: ", ";\n  ", ";\n  ", ";\n  overflow: auto;\n  box-shadow: ", ";\n  border-radius: ", ";\n  border-top: 1px solid rgba(0, 0, 0, 0.04);\n  box-sizing: border-box;\n  max-width: ", ";\n  max-height: ", ";\n  padding: 12px;\n  background-color: ", ";\n\n  z-index: ", ";\n\n  @keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @-moz-keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @-webkit-keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @-o-keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @-ms-keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n"])), function (props) {
+var StyledPopover = newStyled(motion.div)(_templateObject$L || (_templateObject$L = _taggedTemplateLiteral(["\n  color: black;\n  box-sizing: border-box;\n  font-family: ", ";\n  display: ", ";\n  opacity: 0;\n  opacity: ", ";\n  animation: fadeIn 0.4s;\n\n  position: absolute;\n  max-height: ", ";\n  max-width: ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n\n  overflow: auto;\n  box-shadow: ", ";\n  border-radius: ", ";\n  border-top: 1px solid rgba(0, 0, 0, 0.04);\n  box-sizing: border-box;\n  padding: 12px;\n  background-color: ", ";\n\n  z-index: ", ";\n\n  @keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @-moz-keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @-webkit-keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @-o-keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @-ms-keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n"])), function (props) {
   var _props$theme, _props$theme$typograp;
   return (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : (_props$theme$typograp = _props$theme.typography) === null || _props$theme$typograp === void 0 ? void 0 : _props$theme$typograp.fontFamily;
 }, function (props) {
@@ -64661,26 +64661,21 @@ var StyledPopover = newStyled(motion.div)(_templateObject$L || (_templateObject$
 }, function (props) {
   return props.show ? "1" : "0";
 }, function (props) {
-  var _props$position, _props$position2;
-  return props.position ? "".concat(((_props$position = props.position) === null || _props$position === void 0 ? void 0 : _props$position.top) + ((_props$position2 = props.position) === null || _props$position2 === void 0 ? void 0 : _props$position2.height)) : "0";
+  return props.position.maxHeight + "px";
 }, function (props) {
-  return props.position ? props.left : "";
+  return props.position.maxWidth + "px";
 }, function (props) {
-  var _props$position3;
-  return (_props$position3 = props.position) === null || _props$position3 === void 0 ? void 0 : _props$position3.horizontalPosition;
+  return props.position.top !== null && "top: ".concat(props.position.top, "px;");
 }, function (props) {
-  var _props$position4;
-  return (_props$position4 = props.position) === null || _props$position4 === void 0 ? void 0 : _props$position4.verticalPosition;
+  return props.position.bottom !== null && "bottom: ".concat(props.position.bottom, "px;");
 }, function (props) {
-  return getComponentPropValue(props.theme, "Popover", props.color, "enabled", "boxShadow");
+  return props.position.left !== null && "left: ".concat(props.position.left, "px;");
 }, function (props) {
-  return getBorderRadiusValueWithUnits(props.theme, props.borderRadius);
+  return props.position.right !== null && "right: ".concat(props.position.right, "px;");
 }, function (props) {
-  var _props$position5;
-  return (_props$position5 = props.position) !== null && _props$position5 !== void 0 && _props$position5.maxWidth ? props.position.maxWidth != "100vw" ? props.position.maxWidth + "px" : "100vw" : "100vw";
+  return getComponentPropValue(props.theme, "Popover", props.color, "enabled", "boxShadow");
 }, function (props) {
-  var _props$position6;
-  return (_props$position6 = props.position) !== null && _props$position6 !== void 0 && _props$position6.maxHeight ? props.position.maxHeight != "100vh" ? props.position.maxHeight + "px" : "100vh" : "100vh";
+  return getBorderRadiusValueWithUnits(props.theme, props.borderRadius);
 }, function (props) {
   return getColorRgbaValue(props.theme, "Popover", "default", "enabled", "bg");
 }, function (props) {
@@ -64692,25 +64687,38 @@ var Popover$1 = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     vertical = props.vertical,
     horizontal = props.horizontal,
     offset = props.offset,
-    zIndex = props.zIndex,
-    popoverContainer = props.popoverContainer,
+    zIndex = props.zIndex;
+    props.popoverContainer;
+    var portalTarget = props.portalTarget,
     closeOnClickOutside = props.closeOnClickOutside,
+    closeOnScroll = props.closeOnScroll,
     onOpen = props.onOpen,
     onClose = props.onClose,
     className = props.className,
     style = props.style,
     children = props.children,
     rest = _objectWithoutProperties$b(props, _excluded$N);
+  var _useState = useState(document.body),
+    _useState2 = _slicedToArray$2(_useState, 2),
+    portal = _useState2[0],
+    setPortal = _useState2[1];
   var theme = useTheme$1();
   var popoverRef = useRef(ref);
-  var _useState = useState(false),
-    _useState2 = _slicedToArray$2(_useState, 2),
-    show = _useState2[0],
-    setShow = _useState2[1];
-  var _useState3 = useState(),
+  var _useState3 = useState(false),
     _useState4 = _slicedToArray$2(_useState3, 2),
-    popoverPosition = _useState4[0],
-    setPopoverPosition = _useState4[1];
+    show = _useState4[0],
+    setShow = _useState4[1];
+  var _useState5 = useState({
+      top: null,
+      bottom: null,
+      left: null,
+      right: null,
+      maxHeight: null,
+      width: null
+    }),
+    _useState6 = _slicedToArray$2(_useState5, 2),
+    popoverPosition = _useState6[0],
+    setPopoverPosition = _useState6[1];
 
   //Expose functions through ref
   useImperativeHandle(ref, function () {
@@ -64735,115 +64743,145 @@ var Popover$1 = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     onClose(event);
   };
   useEffect(function () {
-    if (anchorElement && show == true) {
-      //Anchor element can be ref or HTML element
-      var anchorElPosition = getElementPosition(anchorElement !== null && anchorElement !== void 0 && anchorElement.current ? anchorElement.current : anchorElement);
-      var anchorViewPortPosition = getElementViewPortPosition(anchorElement !== null && anchorElement !== void 0 && anchorElement.current ? anchorElement.current : anchorElement);
-      if (anchorElPosition && anchorViewPortPosition) setPopoverPosition(findPopoverPosition(anchorElPosition, anchorViewPortPosition));
-    }
-  }, [anchorElement, vertical, horizontal, show]);
-  var findPopoverPosition = function findPopoverPosition(anchorElPosition, anchorViewPortPosition) {
-    var _document$body = document.body;
-      _document$body.clientHeight;
-      var windowWidth = _document$body.clientWidth;
-    var _window = window,
-      windowInnerHeight = _window.innerHeight,
-      windowInnerWidth = _window.innerWidth;
-    var popoverMeasures = getElementPosition(popoverRef.current);
-    if (popoverMeasures && anchorElPosition) {
-      var _ref = horizontal ? findHorizontalPosition(horizontal, anchorElPosition, popoverMeasures, anchorViewPortPosition, windowInnerWidth) : {
-          horizontalPosition: "",
-          maxWidth: "100vw"
-        },
-        horizontalPosition = _ref.horizontalPosition,
-        maxWidth = _ref.maxWidth;
-      var _ref2 = vertical ? findVerticalPosition(vertical, anchorElPosition, popoverMeasures, anchorViewPortPosition, windowInnerHeight) : {
-          verticalPosition: "",
-          maxHeight: "100vh"
-        },
-        verticalPosition = _ref2.verticalPosition,
-        maxHeight = _ref2.maxHeight;
-      if (!horizontal) {
-        maxWidth = "100vw";
-        //horizontal
-        if (popoverMeasures.width / 2 <= anchorElPosition.left + anchorElPosition.width / 2 && popoverMeasures.width / 2 <= windowWidth - anchorElPosition.right + anchorElPosition.width / 2) {
-          horizontalPosition = "left: ".concat(anchorElPosition.left + anchorElPosition.width / 2 - popoverMeasures.width / 2, "px");
-        } else if (popoverMeasures.width / 2 > anchorElPosition.left + anchorElPosition.width / 2) {
-          horizontalPosition = "left: 0";
+    if (anchorElement && show === true) {
+      if (portalTarget) {
+        setPortal(portalTarget !== null && portalTarget !== void 0 && portalTarget.current ? portalTarget.current : portalTarget);
+      } else {
+        //todo set relative implicitly to anchor
+        if (anchorElement !== null && anchorElement !== void 0 && anchorElement.current) {
+          anchorElement.current.style.position = "relative";
         } else {
-          horizontalPosition = "right: 0";
+          anchorElement.style.position = "relative";
         }
+        setPortal(anchorElement !== null && anchorElement !== void 0 && anchorElement.current ? anchorElement.current : anchorElement);
+      }
+    }
+  }, [anchorElement, show]);
+  useEffect(function () {
+    if (anchorElement && show == true) {
+      var anchorElPosition = getElementPositionInContainer(anchorElement !== null && anchorElement !== void 0 && anchorElement.current ? anchorElement.current : anchorElement, portalTarget);
+      var popoverMeasures = getElementMeasures(popoverRef.current);
+      var container = portalTarget ? portalTarget.current ? portalTarget.current : portalTarget : document.body;
+      var containerMeasures = getElementMeasures(container);
+      var resultPosition = getPopoverPosition(anchorElPosition, popoverMeasures, containerMeasures, offset, portalTarget);
+      setPopoverPosition(resultPosition);
+    }
+  }, [anchorElement, vertical, horizontal, show, portal]);
+  var getPopoverPosition = function getPopoverPosition(anchorPosition, popoverMeasures, containerMeasures, offset, portalTarget) {
+    var freeSpaceTop = getFreeSpaceFromTheTop(anchorPosition, offset);
+    var freeSpaceBottom = getFreeSpaceFromTheBottom(anchorPosition, offset, containerMeasures);
+    var freeSpaceLeft = getFreeSpaceToTheLeft(anchorPosition);
+    var position = {
+      top: null,
+      bottom: null,
+      left: null,
+      right: null,
+      maxHeight: null,
+      maxWidth: null
+    };
+    var anchMeas = getElementMeasures(portal);
+
+    // getting vertical position and max height boundaries
+    if (freeSpaceTop > freeSpaceBottom) {
+      if (portalTarget) {
+        position.top = anchorPosition.top - offset - popoverMeasures.height > 0 ? anchorPosition.top - offset - popoverMeasures.height : 0;
+      } else {
+        position.top = anchorPosition.top - offset - popoverMeasures.height > 0 ? 0 - popoverMeasures.height : 0 - freeSpaceTop - offset;
+      }
+      position.maxHeight = freeSpaceTop;
+    } else {
+      if (portalTarget) {
+        position.top = anchorPosition.bottom + offset;
+      } else {
+        position.top = anchMeas.height + offset;
+      }
+      position.maxHeight = freeSpaceBottom;
+    }
+
+    // getting horizontal positio and max width boundaries
+    if (horizontal === "left") {
+      position.maxWidth = containerMeasures.width - anchorPosition.left;
+      if (portalTarget) {
+        position.left = anchorPosition.left;
+      } else {
+        position.left = 0;
+      }
+    } else if (horizontal === "right") {
+      position.maxWidth = anchorPosition.right;
+      if (portalTarget) {
+        position.left = anchorPosition.right - popoverMeasures.width > 0 ? anchorPosition.right - popoverMeasures.width : 0;
+      } else {
+        position.right = 0;
       }
-      if (!vertical) {
-        //vertical
-        if (anchorViewPortPosition.top >= innerHeight - anchorViewPortPosition.bottom) {
-          //on top
-          maxHeight = "".concat(anchorViewPortPosition.top - offset);
-          verticalPosition = "top: ".concat(anchorElPosition.top - (popoverMeasures.height > maxHeight ? +maxHeight + offset : popoverMeasures.height + offset), "px");
+    } else {
+      position.maxWidth = containerMeasures.width;
+      if (anchorPosition.horizontalCenter >= popoverMeasures.width / 2) {
+        if (portalTarget) {
+          position.left = anchorPosition.horizontalCenter - popoverMeasures.width / 2;
+        } else {
+          position.left = anchMeas.width / 2 - popoverMeasures.width / 2;
+        }
+      } else {
+        if (portalTarget) {
+          position.left = 0;
         } else {
-          //on bottom
-          maxHeight = "".concat(windowInnerHeight - anchorViewPortPosition.bottom - offset);
-          verticalPosition = "top: ".concat(anchorElPosition.bottom + offset, "px");
+          position.left = 0 - freeSpaceLeft;
         }
       }
-      return {
-        horizontalPosition: horizontalPosition,
-        verticalPosition: verticalPosition,
-        maxHeight: maxHeight,
-        maxWidth: maxWidth
-      };
     }
-    return null;
+    return position;
   };
-  var findHorizontalPosition = function findHorizontalPosition(horizontalPosition, anchorElPosition, popoverMeasures, anchorViewPortPosition, windowInnerWidht) {
-    var horizontalResult = "";
-    var maxWidth = "";
-    if (horizontalPosition == "right") {
-      maxWidth = "".concat(anchorViewPortPosition.right);
-      horizontalResult = "left: ".concat(anchorElPosition.right - (popoverMeasures.width > +maxWidth ? +maxWidth : popoverMeasures.width), "px");
-    } else if (horizontalPosition == "left") {
-      maxWidth = "".concat(windowInnerWidht - anchorViewPortPosition.left);
-      horizontalResult = "left: ".concat(anchorElPosition.left, "px");
-    } else if (horizontalPosition == "center") {
-      maxWidth = "100vw";
-      horizontalResult = "left: ".concat(anchorElPosition.left + anchorElPosition.width / 2 - popoverMeasures.width / 2, "px");
-    }
-    return {
-      horizontalPosition: horizontalResult,
-      maxWidth: maxWidth
-    };
+  var getFreeSpaceToTheLeft = function getFreeSpaceToTheLeft(anchorPosition) {
+    return anchorPosition.left;
+  };
+
+  // Vertical offset can exist
+  var getFreeSpaceFromTheTop = function getFreeSpaceFromTheTop(anchorPosition, offset) {
+    if (vertical === "bottom") return 0;
+    return anchorPosition.top - offset;
   };
-  var findVerticalPosition = function findVerticalPosition(verticalPosition, anchorElPosition, popoverMeasures, anchorViewPortPosition, windowInnerHeight) {
-    var verticalResult = "";
-    var maxHeight = "";
-    if (verticalPosition == "top") {
-      maxHeight = "".concat(anchorViewPortPosition.top - offset);
-      verticalResult = "top: ".concat(anchorElPosition.top - (popoverMeasures.height > maxHeight ? +maxHeight + offset : popoverMeasures.height + offset), "px");
-    } else if (verticalPosition == "bottom") {
-      maxHeight = "".concat(windowInnerHeight - anchorViewPortPosition.bottom - offset);
-      verticalResult = "top: ".concat(anchorElPosition.bottom + offset, "px");
+
+  // Vertical offset can exist
+  var getFreeSpaceFromTheBottom = function getFreeSpaceFromTheBottom(anchorPosition, offset, containerMeasures) {
+    if (vertical === "top") return 0;
+    return containerMeasures.height - anchorPosition.bottom - offset;
+  };
+  var getElementPositionInContainer = function getElementPositionInContainer(element, portalTarget) {
+    //if there is no portal target get position relative to document.body
+    if (!portalTarget || portalTarget == document.body) {
+      var clientRect = element.getBoundingClientRect();
+      var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+      var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      return {
+        left: clientRect.left + scrollLeft,
+        top: clientRect.top + scrollTop,
+        right: clientRect.right + scrollLeft,
+        bottom: clientRect.bottom + scrollTop,
+        height: clientRect.height,
+        width: clientRect.width,
+        horizontalCenter: clientRect.left + scrollLeft + clientRect.width / 2
+      };
     }
+
+    //else find relative to portal target
+    scrollLeft = portalTarget.offsetLeft;
+    scrollTop = portalTarget.offsetTop;
     return {
-      verticalPosition: verticalResult,
-      maxHeight: maxHeight
+      left: element.offsetLeft,
+      top: element.offsetTop,
+      right: element.offsetLeft + element.offsetWidth,
+      bottom: element.offsetTop + element.offsetHeight,
+      height: element.offsetHeight,
+      width: element.offsetWidth,
+      horizontalCenter: element.offsetLeft + element.offsetWidth / 2
     };
   };
-  var getElementPosition = function getElementPosition(element) {
-    var clientRect = element.getBoundingClientRect();
-    var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+  var getElementMeasures = function getElementMeasures(element) {
     return {
-      left: clientRect.left + scrollLeft,
-      top: clientRect.top + scrollTop,
-      right: clientRect.right + scrollLeft,
-      bottom: clientRect.bottom + scrollTop,
-      height: clientRect.height,
-      width: clientRect.width
+      height: element.offsetHeight,
+      width: element.offsetWidth
     };
   };
-  var getElementViewPortPosition = function getElementViewPortPosition(element) {
-    return element.getBoundingClientRect();
-  };
 
   //Outside click handling
   useEffect(function () {
@@ -64852,11 +64890,18 @@ var Popover$1 = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
         if (closeOnClickOutside == true) _close();
       }
     };
+    var handleScroll = function handleScroll(event) {
+      if (popoverRef !== null && popoverRef !== void 0 && popoverRef.current && !(popoverRef !== null && popoverRef !== void 0 && popoverRef.current.contains(event.target))) {
+        if (closeOnScroll == true) _close();
+      }
+    };
     //Fired on component mount
-    document.addEventListener('click', handleClickOutside, true);
+    document.addEventListener("click", handleClickOutside, true);
+    document.addEventListener("scroll", handleScroll, true);
     return function () {
       //Fired on component unmount
-      document.removeEventListener('click', handleClickOutside, true);
+      document.removeEventListener("click", handleClickOutside, true);
+      document.removeEventListener("scroll", handleScroll, true);
     };
   }, []);
   return /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement(StyledPopover, _extends$g({
@@ -64867,8 +64912,11 @@ var Popover$1 = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     show: show,
     borderRadius: borderRadius,
     className: className,
-    style: style
-  }, rest), children), popoverContainer);
+    style: style,
+    onBlur: _close
+  }, rest), children),
+  // parentContainer
+  portal);
 });
 Popover$1.defaultProps = {
   className: "",
@@ -64876,8 +64924,8 @@ Popover$1.defaultProps = {
   borderRadius: "regular",
   horizontal: null,
   offset: 0,
-  popoverContainer: document.body,
-  closeOnClickOutside: true,
+  closeOnClickOutside: false,
+  closeOnScroll: false,
   onOpen: function onOpen() {},
   onClose: function onClose() {}
 };
@@ -64888,18 +64936,23 @@ Popover$1.propTypes = {
    */
   anchorElement: PropTypes.object,
   borderRadius: PropTypes.oneOf(["regular", "curved"]),
-  horizontal: PropTypes.oneOf(["left", "right", "center"]),
+  horizontal: PropTypes.oneOf(["left", "right", "center", null]),
   vertical: PropTypes.oneOf(["top", "bottom", null]),
   /**
    * popoverContainer is DOM element, popover won't be mounted into the DOM as a child of the nearest parent node, it will be inserted as a child of popoverContainer location in the DOM
    */
   popoverContainer: PropTypes.any,
+  /**
+   * portalTarget can be DOM element or a ref to an element, possible value is `document.body`
+   */
+  portalTarget: PropTypes.any,
   /**
    * Offset from anchor element in pixels
    */
   offset: PropTypes.number,
   zIndex: PropTypes.number,
   closeOnClickOutside: PropTypes.bool,
+  closeOnScroll: PropTypes.bool,
   //--------------------------
   onOpen: PropTypes.func,
   onClose: PropTypes.func,
@@ -65907,7 +65960,7 @@ ThemeProvider.propTypes = {
   theme: PropTypes.oneOfType([PropTypes.string, PropTypes.object])
 };
 
-var _excluded$M = ["control", "openOnClick", "openOnHover", "offset", "verticalAlignment", "horizontalAlignment", "widthFitContent", "closeOnItemSelect", "onFocus", "onBlur", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onItemSelected", "animation", "className", "style", "color", "size", "popoverProps", "children"];
+var _excluded$M = ["control", "openOnClick", "openOnHover", "offset", "verticalAlignment", "horizontalAlignment", "widthFitContent", "closeOnItemSelect", "portalTarget", "onFocus", "onBlur", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onItemSelected", "animation", "className", "style", "color", "size", "popoverProps", "children"];
 var _templateObject$J, _templateObject2$f;
 var StyledDropDown = newStyled.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteral([""])));
 var PopoverContent = newStyled(motion.div)(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral(["\n  padding: 0.25rem;\n  gap: 0.25rem;\n  display: flex;\n  flex-direction: column;\n  ", ";\n  background-color: ", ";\n"])), function (props) {
@@ -65924,6 +65977,7 @@ var DropdownMenu = /*#__PURE__*/React__default.forwardRef(function (props, ref)
     horizontalAlignment = props.horizontalAlignment,
     widthFitContent = props.widthFitContent,
     closeOnItemSelect = props.closeOnItemSelect,
+    portalTarget = props.portalTarget,
     onFocus = props.onFocus,
     onBlur = props.onBlur,
     onClick = props.onClick,
@@ -66057,6 +66111,8 @@ var DropdownMenu = /*#__PURE__*/React__default.forwardRef(function (props, ref)
       maxHeight: "unset"
     },
     closeOnClickOutside: false //dropdown has it's own outside click handler which includes control (element that opens dropdown)
+    ,
+    portalTarget: portalTarget
   }, popoverProps), /*#__PURE__*/React__default.createElement(PopoverContent, {
     ref: menuContentRef,
     widthFitContent: widthFitContent,
@@ -66132,6 +66188,10 @@ DropdownMenu.propTypes = {
    * Close menu when item is selected
    */
   closeOnItemSelect: PropTypes.bool,
+  /**
+   * portalTarget can be DOM element or a ref to an element, possible value is `document.body`
+   */
+  portalTarget: PropTypes.any,
   //---------------------------------------------------------------
   onBlur: PropTypes.func,
   onFocus: PropTypes.func,
@@ -72327,7 +72387,6 @@ DragAndDropFile.defaultProps = {
   id: "",
   disabled: false,
   acceptDropzone: {},
-  acceptInput: acceptInput,
   multiple: false,
   selectFileText: "Select file",
   dndFileText: "Drag and drop file here or",

package/lib/index.js

@@ -64700,9 +64700,9 @@ var AnimatePresence = function (_a) {
         : childrenToRender.map(function (child) { return React.cloneElement(child); })));
 };
 
-var _excluded$N = ["anchorElement", "borderRadius", "vertical", "horizontal", "offset", "zIndex", "popoverContainer", "closeOnClickOutside", "onOpen", "onClose", "className", "style", "children"];
+var _excluded$N = ["anchorElement", "borderRadius", "vertical", "horizontal", "offset", "zIndex", "popoverContainer", "portalTarget", "closeOnClickOutside", "closeOnScroll", "onOpen", "onClose", "className", "style", "children"];
 var _templateObject$L;
-var StyledPopover = newStyled(motion.div)(_templateObject$L || (_templateObject$L = _taggedTemplateLiteral__default["default"](["\n  box-sizing: border-box;\n  font-family: ", ";\n  display: ", ";\n  opacity: 0;\n  opacity: ", ";\n  animation: fadeIn 0.4s;\n\n  position: absolute;\n  top: ", ";\n  left: ", ";\n  ", ";\n  ", ";\n  overflow: auto;\n  box-shadow: ", ";\n  border-radius: ", ";\n  border-top: 1px solid rgba(0, 0, 0, 0.04);\n  box-sizing: border-box;\n  max-width: ", ";\n  max-height: ", ";\n  padding: 12px;\n  background-color: ", ";\n\n  z-index: ", ";\n\n  @keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @-moz-keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @-webkit-keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @-o-keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @-ms-keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n"])), function (props) {
+var StyledPopover = newStyled(motion.div)(_templateObject$L || (_templateObject$L = _taggedTemplateLiteral__default["default"](["\n  color: black;\n  box-sizing: border-box;\n  font-family: ", ";\n  display: ", ";\n  opacity: 0;\n  opacity: ", ";\n  animation: fadeIn 0.4s;\n\n  position: absolute;\n  max-height: ", ";\n  max-width: ", ";\n  ", "\n  ", "\n  ", "\n  ", "\n\n  overflow: auto;\n  box-shadow: ", ";\n  border-radius: ", ";\n  border-top: 1px solid rgba(0, 0, 0, 0.04);\n  box-sizing: border-box;\n  padding: 12px;\n  background-color: ", ";\n\n  z-index: ", ";\n\n  @keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @-moz-keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @-webkit-keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @-o-keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n\n  @-ms-keyframes fadeIn {\n    0% {\n      opacity: 0;\n    }\n    100% {\n      opacity: 1;\n    }\n  }\n"])), function (props) {
   var _props$theme, _props$theme$typograp;
   return (_props$theme = props.theme) === null || _props$theme === void 0 ? void 0 : (_props$theme$typograp = _props$theme.typography) === null || _props$theme$typograp === void 0 ? void 0 : _props$theme$typograp.fontFamily;
 }, function (props) {
@@ -64710,26 +64710,21 @@ var StyledPopover = newStyled(motion.div)(_templateObject$L || (_templateObject$
 }, function (props) {
   return props.show ? "1" : "0";
 }, function (props) {
-  var _props$position, _props$position2;
-  return props.position ? "".concat(((_props$position = props.position) === null || _props$position === void 0 ? void 0 : _props$position.top) + ((_props$position2 = props.position) === null || _props$position2 === void 0 ? void 0 : _props$position2.height)) : "0";
+  return props.position.maxHeight + "px";
 }, function (props) {
-  return props.position ? props.left : "";
+  return props.position.maxWidth + "px";
 }, function (props) {
-  var _props$position3;
-  return (_props$position3 = props.position) === null || _props$position3 === void 0 ? void 0 : _props$position3.horizontalPosition;
+  return props.position.top !== null && "top: ".concat(props.position.top, "px;");
 }, function (props) {
-  var _props$position4;
-  return (_props$position4 = props.position) === null || _props$position4 === void 0 ? void 0 : _props$position4.verticalPosition;
+  return props.position.bottom !== null && "bottom: ".concat(props.position.bottom, "px;");
 }, function (props) {
-  return getComponentPropValue(props.theme, "Popover", props.color, "enabled", "boxShadow");
+  return props.position.left !== null && "left: ".concat(props.position.left, "px;");
 }, function (props) {
-  return getBorderRadiusValueWithUnits(props.theme, props.borderRadius);
+  return props.position.right !== null && "right: ".concat(props.position.right, "px;");
 }, function (props) {
-  var _props$position5;
-  return (_props$position5 = props.position) !== null && _props$position5 !== void 0 && _props$position5.maxWidth ? props.position.maxWidth != "100vw" ? props.position.maxWidth + "px" : "100vw" : "100vw";
+  return getComponentPropValue(props.theme, "Popover", props.color, "enabled", "boxShadow");
 }, function (props) {
-  var _props$position6;
-  return (_props$position6 = props.position) !== null && _props$position6 !== void 0 && _props$position6.maxHeight ? props.position.maxHeight != "100vh" ? props.position.maxHeight + "px" : "100vh" : "100vh";
+  return getBorderRadiusValueWithUnits(props.theme, props.borderRadius);
 }, function (props) {
   return getColorRgbaValue(props.theme, "Popover", "default", "enabled", "bg");
 }, function (props) {
@@ -64741,25 +64736,38 @@ var Popover$1 = /*#__PURE__*/React__default["default"].forwardRef(function (prop
     vertical = props.vertical,
     horizontal = props.horizontal,
     offset = props.offset,
-    zIndex = props.zIndex,
-    popoverContainer = props.popoverContainer,
+    zIndex = props.zIndex;
+    props.popoverContainer;
+    var portalTarget = props.portalTarget,
     closeOnClickOutside = props.closeOnClickOutside,
+    closeOnScroll = props.closeOnScroll,
     onOpen = props.onOpen,
     onClose = props.onClose,
     className = props.className,
     style = props.style,
     children = props.children,
     rest = _objectWithoutProperties__default["default"](props, _excluded$N);
+  var _useState = React.useState(document.body),
+    _useState2 = _slicedToArray__default["default"](_useState, 2),
+    portal = _useState2[0],
+    setPortal = _useState2[1];
   var theme = useTheme$1();
   var popoverRef = React.useRef(ref);
-  var _useState = React.useState(false),
-    _useState2 = _slicedToArray__default["default"](_useState, 2),
-    show = _useState2[0],
-    setShow = _useState2[1];
-  var _useState3 = React.useState(),
+  var _useState3 = React.useState(false),
     _useState4 = _slicedToArray__default["default"](_useState3, 2),
-    popoverPosition = _useState4[0],
-    setPopoverPosition = _useState4[1];
+    show = _useState4[0],
+    setShow = _useState4[1];
+  var _useState5 = React.useState({
+      top: null,
+      bottom: null,
+      left: null,
+      right: null,
+      maxHeight: null,
+      width: null
+    }),
+    _useState6 = _slicedToArray__default["default"](_useState5, 2),
+    popoverPosition = _useState6[0],
+    setPopoverPosition = _useState6[1];
 
   //Expose functions through ref
   React.useImperativeHandle(ref, function () {
@@ -64784,115 +64792,145 @@ var Popover$1 = /*#__PURE__*/React__default["default"].forwardRef(function (prop
     onClose(event);
   };
   React.useEffect(function () {
-    if (anchorElement && show == true) {
-      //Anchor element can be ref or HTML element
-      var anchorElPosition = getElementPosition(anchorElement !== null && anchorElement !== void 0 && anchorElement.current ? anchorElement.current : anchorElement);
-      var anchorViewPortPosition = getElementViewPortPosition(anchorElement !== null && anchorElement !== void 0 && anchorElement.current ? anchorElement.current : anchorElement);
-      if (anchorElPosition && anchorViewPortPosition) setPopoverPosition(findPopoverPosition(anchorElPosition, anchorViewPortPosition));
-    }
-  }, [anchorElement, vertical, horizontal, show]);
-  var findPopoverPosition = function findPopoverPosition(anchorElPosition, anchorViewPortPosition) {
-    var _document$body = document.body;
-      _document$body.clientHeight;
-      var windowWidth = _document$body.clientWidth;
-    var _window = window,
-      windowInnerHeight = _window.innerHeight,
-      windowInnerWidth = _window.innerWidth;
-    var popoverMeasures = getElementPosition(popoverRef.current);
-    if (popoverMeasures && anchorElPosition) {
-      var _ref = horizontal ? findHorizontalPosition(horizontal, anchorElPosition, popoverMeasures, anchorViewPortPosition, windowInnerWidth) : {
-          horizontalPosition: "",
-          maxWidth: "100vw"
-        },
-        horizontalPosition = _ref.horizontalPosition,
-        maxWidth = _ref.maxWidth;
-      var _ref2 = vertical ? findVerticalPosition(vertical, anchorElPosition, popoverMeasures, anchorViewPortPosition, windowInnerHeight) : {
-          verticalPosition: "",
-          maxHeight: "100vh"
-        },
-        verticalPosition = _ref2.verticalPosition,
-        maxHeight = _ref2.maxHeight;
-      if (!horizontal) {
-        maxWidth = "100vw";
-        //horizontal
-        if (popoverMeasures.width / 2 <= anchorElPosition.left + anchorElPosition.width / 2 && popoverMeasures.width / 2 <= windowWidth - anchorElPosition.right + anchorElPosition.width / 2) {
-          horizontalPosition = "left: ".concat(anchorElPosition.left + anchorElPosition.width / 2 - popoverMeasures.width / 2, "px");
-        } else if (popoverMeasures.width / 2 > anchorElPosition.left + anchorElPosition.width / 2) {
-          horizontalPosition = "left: 0";
+    if (anchorElement && show === true) {
+      if (portalTarget) {
+        setPortal(portalTarget !== null && portalTarget !== void 0 && portalTarget.current ? portalTarget.current : portalTarget);
+      } else {
+        //todo set relative implicitly to anchor
+        if (anchorElement !== null && anchorElement !== void 0 && anchorElement.current) {
+          anchorElement.current.style.position = "relative";
         } else {
-          horizontalPosition = "right: 0";
+          anchorElement.style.position = "relative";
         }
+        setPortal(anchorElement !== null && anchorElement !== void 0 && anchorElement.current ? anchorElement.current : anchorElement);
+      }
+    }
+  }, [anchorElement, show]);
+  React.useEffect(function () {
+    if (anchorElement && show == true) {
+      var anchorElPosition = getElementPositionInContainer(anchorElement !== null && anchorElement !== void 0 && anchorElement.current ? anchorElement.current : anchorElement, portalTarget);
+      var popoverMeasures = getElementMeasures(popoverRef.current);
+      var container = portalTarget ? portalTarget.current ? portalTarget.current : portalTarget : document.body;
+      var containerMeasures = getElementMeasures(container);
+      var resultPosition = getPopoverPosition(anchorElPosition, popoverMeasures, containerMeasures, offset, portalTarget);
+      setPopoverPosition(resultPosition);
+    }
+  }, [anchorElement, vertical, horizontal, show, portal]);
+  var getPopoverPosition = function getPopoverPosition(anchorPosition, popoverMeasures, containerMeasures, offset, portalTarget) {
+    var freeSpaceTop = getFreeSpaceFromTheTop(anchorPosition, offset);
+    var freeSpaceBottom = getFreeSpaceFromTheBottom(anchorPosition, offset, containerMeasures);
+    var freeSpaceLeft = getFreeSpaceToTheLeft(anchorPosition);
+    var position = {
+      top: null,
+      bottom: null,
+      left: null,
+      right: null,
+      maxHeight: null,
+      maxWidth: null
+    };
+    var anchMeas = getElementMeasures(portal);
+
+    // getting vertical position and max height boundaries
+    if (freeSpaceTop > freeSpaceBottom) {
+      if (portalTarget) {
+        position.top = anchorPosition.top - offset - popoverMeasures.height > 0 ? anchorPosition.top - offset - popoverMeasures.height : 0;
+      } else {
+        position.top = anchorPosition.top - offset - popoverMeasures.height > 0 ? 0 - popoverMeasures.height : 0 - freeSpaceTop - offset;
+      }
+      position.maxHeight = freeSpaceTop;
+    } else {
+      if (portalTarget) {
+        position.top = anchorPosition.bottom + offset;
+      } else {
+        position.top = anchMeas.height + offset;
+      }
+      position.maxHeight = freeSpaceBottom;
+    }
+
+    // getting horizontal positio and max width boundaries
+    if (horizontal === "left") {
+      position.maxWidth = containerMeasures.width - anchorPosition.left;
+      if (portalTarget) {
+        position.left = anchorPosition.left;
+      } else {
+        position.left = 0;
+      }
+    } else if (horizontal === "right") {
+      position.maxWidth = anchorPosition.right;
+      if (portalTarget) {
+        position.left = anchorPosition.right - popoverMeasures.width > 0 ? anchorPosition.right - popoverMeasures.width : 0;
+      } else {
+        position.right = 0;
       }
-      if (!vertical) {
-        //vertical
-        if (anchorViewPortPosition.top >= innerHeight - anchorViewPortPosition.bottom) {
-          //on top
-          maxHeight = "".concat(anchorViewPortPosition.top - offset);
-          verticalPosition = "top: ".concat(anchorElPosition.top - (popoverMeasures.height > maxHeight ? +maxHeight + offset : popoverMeasures.height + offset), "px");
+    } else {
+      position.maxWidth = containerMeasures.width;
+      if (anchorPosition.horizontalCenter >= popoverMeasures.width / 2) {
+        if (portalTarget) {
+          position.left = anchorPosition.horizontalCenter - popoverMeasures.width / 2;
+        } else {
+          position.left = anchMeas.width / 2 - popoverMeasures.width / 2;
+        }
+      } else {
+        if (portalTarget) {
+          position.left = 0;
         } else {
-          //on bottom
-          maxHeight = "".concat(windowInnerHeight - anchorViewPortPosition.bottom - offset);
-          verticalPosition = "top: ".concat(anchorElPosition.bottom + offset, "px");
+          position.left = 0 - freeSpaceLeft;
         }
       }
-      return {
-        horizontalPosition: horizontalPosition,
-        verticalPosition: verticalPosition,
-        maxHeight: maxHeight,
-        maxWidth: maxWidth
-      };
     }
-    return null;
+    return position;
   };
-  var findHorizontalPosition = function findHorizontalPosition(horizontalPosition, anchorElPosition, popoverMeasures, anchorViewPortPosition, windowInnerWidht) {
-    var horizontalResult = "";
-    var maxWidth = "";
-    if (horizontalPosition == "right") {
-      maxWidth = "".concat(anchorViewPortPosition.right);
-      horizontalResult = "left: ".concat(anchorElPosition.right - (popoverMeasures.width > +maxWidth ? +maxWidth : popoverMeasures.width), "px");
-    } else if (horizontalPosition == "left") {
-      maxWidth = "".concat(windowInnerWidht - anchorViewPortPosition.left);
-      horizontalResult = "left: ".concat(anchorElPosition.left, "px");
-    } else if (horizontalPosition == "center") {
-      maxWidth = "100vw";
-      horizontalResult = "left: ".concat(anchorElPosition.left + anchorElPosition.width / 2 - popoverMeasures.width / 2, "px");
-    }
-    return {
-      horizontalPosition: horizontalResult,
-      maxWidth: maxWidth
-    };
+  var getFreeSpaceToTheLeft = function getFreeSpaceToTheLeft(anchorPosition) {
+    return anchorPosition.left;
+  };
+
+  // Vertical offset can exist
+  var getFreeSpaceFromTheTop = function getFreeSpaceFromTheTop(anchorPosition, offset) {
+    if (vertical === "bottom") return 0;
+    return anchorPosition.top - offset;
   };
-  var findVerticalPosition = function findVerticalPosition(verticalPosition, anchorElPosition, popoverMeasures, anchorViewPortPosition, windowInnerHeight) {
-    var verticalResult = "";
-    var maxHeight = "";
-    if (verticalPosition == "top") {
-      maxHeight = "".concat(anchorViewPortPosition.top - offset);
-      verticalResult = "top: ".concat(anchorElPosition.top - (popoverMeasures.height > maxHeight ? +maxHeight + offset : popoverMeasures.height + offset), "px");
-    } else if (verticalPosition == "bottom") {
-      maxHeight = "".concat(windowInnerHeight - anchorViewPortPosition.bottom - offset);
-      verticalResult = "top: ".concat(anchorElPosition.bottom + offset, "px");
+
+  // Vertical offset can exist
+  var getFreeSpaceFromTheBottom = function getFreeSpaceFromTheBottom(anchorPosition, offset, containerMeasures) {
+    if (vertical === "top") return 0;
+    return containerMeasures.height - anchorPosition.bottom - offset;
+  };
+  var getElementPositionInContainer = function getElementPositionInContainer(element, portalTarget) {
+    //if there is no portal target get position relative to document.body
+    if (!portalTarget || portalTarget == document.body) {
+      var clientRect = element.getBoundingClientRect();
+      var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+      var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+      return {
+        left: clientRect.left + scrollLeft,
+        top: clientRect.top + scrollTop,
+        right: clientRect.right + scrollLeft,
+        bottom: clientRect.bottom + scrollTop,
+        height: clientRect.height,
+        width: clientRect.width,
+        horizontalCenter: clientRect.left + scrollLeft + clientRect.width / 2
+      };
     }
+
+    //else find relative to portal target
+    scrollLeft = portalTarget.offsetLeft;
+    scrollTop = portalTarget.offsetTop;
     return {
-      verticalPosition: verticalResult,
-      maxHeight: maxHeight
+      left: element.offsetLeft,
+      top: element.offsetTop,
+      right: element.offsetLeft + element.offsetWidth,
+      bottom: element.offsetTop + element.offsetHeight,
+      height: element.offsetHeight,
+      width: element.offsetWidth,
+      horizontalCenter: element.offsetLeft + element.offsetWidth / 2
     };
   };
-  var getElementPosition = function getElementPosition(element) {
-    var clientRect = element.getBoundingClientRect();
-    var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
-    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+  var getElementMeasures = function getElementMeasures(element) {
     return {
-      left: clientRect.left + scrollLeft,
-      top: clientRect.top + scrollTop,
-      right: clientRect.right + scrollLeft,
-      bottom: clientRect.bottom + scrollTop,
-      height: clientRect.height,
-      width: clientRect.width
+      height: element.offsetHeight,
+      width: element.offsetWidth
     };
   };
-  var getElementViewPortPosition = function getElementViewPortPosition(element) {
-    return element.getBoundingClientRect();
-  };
 
   //Outside click handling
   React.useEffect(function () {
@@ -64901,11 +64939,18 @@ var Popover$1 = /*#__PURE__*/React__default["default"].forwardRef(function (prop
         if (closeOnClickOutside == true) _close();
       }
     };
+    var handleScroll = function handleScroll(event) {
+      if (popoverRef !== null && popoverRef !== void 0 && popoverRef.current && !(popoverRef !== null && popoverRef !== void 0 && popoverRef.current.contains(event.target))) {
+        if (closeOnScroll == true) _close();
+      }
+    };
     //Fired on component mount
-    document.addEventListener('click', handleClickOutside, true);
+    document.addEventListener("click", handleClickOutside, true);
+    document.addEventListener("scroll", handleScroll, true);
     return function () {
       //Fired on component unmount
-      document.removeEventListener('click', handleClickOutside, true);
+      document.removeEventListener("click", handleClickOutside, true);
+      document.removeEventListener("scroll", handleScroll, true);
     };
   }, []);
   return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default["default"].createElement(StyledPopover, _extends__default$1["default"]({
@@ -64916,8 +64961,11 @@ var Popover$1 = /*#__PURE__*/React__default["default"].forwardRef(function (prop
     show: show,
     borderRadius: borderRadius,
     className: className,
-    style: style
-  }, rest), children), popoverContainer);
+    style: style,
+    onBlur: _close
+  }, rest), children),
+  // parentContainer
+  portal);
 });
 Popover$1.defaultProps = {
   className: "",
@@ -64925,8 +64973,8 @@ Popover$1.defaultProps = {
   borderRadius: "regular",
   horizontal: null,
   offset: 0,
-  popoverContainer: document.body,
-  closeOnClickOutside: true,
+  closeOnClickOutside: false,
+  closeOnScroll: false,
   onOpen: function onOpen() {},
   onClose: function onClose() {}
 };
@@ -64937,18 +64985,23 @@ Popover$1.propTypes = {
    */
   anchorElement: PropTypes__default["default"].object,
   borderRadius: PropTypes__default["default"].oneOf(["regular", "curved"]),
-  horizontal: PropTypes__default["default"].oneOf(["left", "right", "center"]),
+  horizontal: PropTypes__default["default"].oneOf(["left", "right", "center", null]),
   vertical: PropTypes__default["default"].oneOf(["top", "bottom", null]),
   /**
    * popoverContainer is DOM element, popover won't be mounted into the DOM as a child of the nearest parent node, it will be inserted as a child of popoverContainer location in the DOM
    */
   popoverContainer: PropTypes__default["default"].any,
+  /**
+   * portalTarget can be DOM element or a ref to an element, possible value is `document.body`
+   */
+  portalTarget: PropTypes__default["default"].any,
   /**
    * Offset from anchor element in pixels
    */
   offset: PropTypes__default["default"].number,
   zIndex: PropTypes__default["default"].number,
   closeOnClickOutside: PropTypes__default["default"].bool,
+  closeOnScroll: PropTypes__default["default"].bool,
   //--------------------------
   onOpen: PropTypes__default["default"].func,
   onClose: PropTypes__default["default"].func,
@@ -65956,7 +66009,7 @@ ThemeProvider.propTypes = {
   theme: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].object])
 };
 
-var _excluded$M = ["control", "openOnClick", "openOnHover", "offset", "verticalAlignment", "horizontalAlignment", "widthFitContent", "closeOnItemSelect", "onFocus", "onBlur", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onItemSelected", "animation", "className", "style", "color", "size", "popoverProps", "children"];
+var _excluded$M = ["control", "openOnClick", "openOnHover", "offset", "verticalAlignment", "horizontalAlignment", "widthFitContent", "closeOnItemSelect", "portalTarget", "onFocus", "onBlur", "onClick", "onKeyDown", "onMouseEnter", "onMouseLeave", "onItemSelected", "animation", "className", "style", "color", "size", "popoverProps", "children"];
 var _templateObject$J, _templateObject2$f;
 var StyledDropDown = newStyled.div(_templateObject$J || (_templateObject$J = _taggedTemplateLiteral__default["default"]([""])));
 var PopoverContent = newStyled(motion.div)(_templateObject2$f || (_templateObject2$f = _taggedTemplateLiteral__default["default"](["\n  padding: 0.25rem;\n  gap: 0.25rem;\n  display: flex;\n  flex-direction: column;\n  ", ";\n  background-color: ", ";\n"])), function (props) {
@@ -65973,6 +66026,7 @@ var DropdownMenu = /*#__PURE__*/React__default["default"].forwardRef(function (p
     horizontalAlignment = props.horizontalAlignment,
     widthFitContent = props.widthFitContent,
     closeOnItemSelect = props.closeOnItemSelect,
+    portalTarget = props.portalTarget,
     onFocus = props.onFocus,
     onBlur = props.onBlur,
     onClick = props.onClick,
@@ -66106,6 +66160,8 @@ var DropdownMenu = /*#__PURE__*/React__default["default"].forwardRef(function (p
       maxHeight: "unset"
     },
     closeOnClickOutside: false //dropdown has it's own outside click handler which includes control (element that opens dropdown)
+    ,
+    portalTarget: portalTarget
   }, popoverProps), /*#__PURE__*/React__default["default"].createElement(PopoverContent, {
     ref: menuContentRef,
     widthFitContent: widthFitContent,
@@ -66181,6 +66237,10 @@ DropdownMenu.propTypes = {
    * Close menu when item is selected
    */
   closeOnItemSelect: PropTypes__default["default"].bool,
+  /**
+   * portalTarget can be DOM element or a ref to an element, possible value is `document.body`
+   */
+  portalTarget: PropTypes__default["default"].any,
   //---------------------------------------------------------------
   onBlur: PropTypes__default["default"].func,
   onFocus: PropTypes__default["default"].func,
@@ -72376,7 +72436,6 @@ DragAndDropFile.defaultProps = {
   id: "",
   disabled: false,
   acceptDropzone: {},
-  acceptInput: acceptInput,
   multiple: false,
   selectFileText: "Select file",
   dndFileText: "Drag and drop file here or",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lanaco/lnc-react-ui",
   "type": "module",
-  "version": "3.0.2",
+  "version": "3.0.4",
   "description": "component library",
   "main": "lib/index.js",
   "module": "lib/index.esm.js",