@lanaco/lnc-react-ui 3.0.0-rc.16 → 3.0.0-rc.17

package/lib/index.esm.js

@@ -67998,7 +67998,7 @@ KanbanCard.propTypes = {
 };
 
 var _excluded$I = ["children", "containerId", "columns", "disabled", "id", "items", "className", "renderFooterContent", "maxContainerHeight", "style"],
-  _excluded2$1 = ["horizontalDisplay", "verticalDisplay", "adjustScale", "itemCount", "cancelDrop", "columns", "handle", "containerStyle", "coordinateGetter", "getItemStyles", "wrapperStyle", "minimal", "modifiers", "renderItem", "strategy", "scrollable", "maxContainerHeight", "cardProps", "headerProps", "footerProps", "data", "columnInfo", "onColumnMoved", "onCardMoved", "onCardChangedColumns", "color", "size", "children"];
+  _excluded2$2 = ["horizontalDisplay", "verticalDisplay", "adjustScale", "itemCount", "cancelDrop", "columns", "handle", "containerStyle", "coordinateGetter", "getItemStyles", "wrapperStyle", "minimal", "modifiers", "renderItem", "strategy", "scrollable", "maxContainerHeight", "cardProps", "headerProps", "footerProps", "data", "columnInfo", "onColumnMoved", "onCardMoved", "onCardChangedColumns", "color", "size", "children"];
 var _templateObject$F, _templateObject2$d;
 function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty$h(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -68201,7 +68201,7 @@ var Kanban = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     color = props.color,
     size = props.size,
     children = props.children,
-    rest = _objectWithoutProperties$b(props, _excluded2$1);
+    rest = _objectWithoutProperties$b(props, _excluded2$2);
   var theme = useTheme$1();
 
   //================== STATE =====================
@@ -72638,7 +72638,7 @@ function isExt(v) {
  */
 
 var _excluded$t = ["children"],
-    _excluded2 = ["open"],
+    _excluded2$1 = ["open"],
     _excluded3 = ["refKey", "role", "onKeyDown", "onFocus", "onBlur", "onClick", "onDragEnter", "onDragOver", "onDragLeave", "onDrop"],
     _excluded4 = ["refKey", "onChange", "onClick"];
 
@@ -72692,7 +72692,7 @@ var Dropzone = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   var _useDropzone = useDropzone(params),
       open = _useDropzone.open,
-      props = _objectWithoutProperties(_useDropzone, _excluded2);
+      props = _objectWithoutProperties(_useDropzone, _excluded2$1);
 
   useImperativeHandle(ref, function () {
     return {
@@ -77928,7 +77928,8 @@ Breadcrumbs.propTypes = {
   size: PropTypes.oneOf(["small", "medium", "large"])
 };
 
-var _excluded$7 = ["modalRef", "themeProps", "scrollOverlay", "modalAnimation", "showCloseButton", "close", "header", "footer", "children"];
+var _excluded$7 = ["overlay", "scrollOverlay", "onClickOutsideModal", "overlayColor", "overlayProps", "overlayAnimation", "modalAnimation", "themeProps", "showCloseButton", "header", "footer", "close", "isOpen", "modalRef", "children"],
+  _excluded2 = ["modalRef", "themeProps", "scrollOverlay", "modalAnimation", "showCloseButton", "close", "header", "footer", "children"];
 var _templateObject$8, _templateObject2$2, _templateObject3$1, _templateObject4;
 var FOOTER_HEIGHT = "5rem";
 var HEADER_HEIGHT = "3.8rem";
@@ -77998,7 +77999,8 @@ var SecondOverlay = newStyled(motion.div)(_templateObject4 || (_templateObject4
   return props.overlayColor;
 });
 var Modal = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
-  var isOpen = props.isOpen,
+  var portalElement = props.portalElement,
+    isOpen = props.isOpen,
     header = props.header,
     footer = props.footer,
     scrollOverlay = props.scrollOverlay,
@@ -78056,7 +78058,56 @@ var Modal = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     setShow(false);
     onClose(event);
   };
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, show && /*#__PURE__*/React__default.createElement(AnimatePresence, null, overlay ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SecondOverlay, _extends$g({
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, show && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, portalElement ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/createPortal( /*#__PURE__*/React__default.createElement(ModalContent, _extends$g({
+    modalRef: ref,
+    overlay: overlay,
+    scrollOverlay: scrollOverlay,
+    onClickOutsideModal: onClickOutsideModal,
+    overlayColor: overlayColor,
+    overlayProps: overlayProps,
+    overlayAnimation: overlayAnimation,
+    modalAnimation: modalAnimation,
+    themeProps: themeProps,
+    showCloseButton: showCloseButton,
+    close: _close,
+    header: header,
+    footer: footer,
+    isOpen: isOpen
+  }, rest), children), portalElement)) : /*#__PURE__*/React__default.createElement(ModalContent, _extends$g({
+    modalRef: ref,
+    overlay: overlay,
+    scrollOverlay: scrollOverlay,
+    onClickOutsideModal: onClickOutsideModal,
+    overlayColor: overlayColor,
+    overlayProps: overlayProps,
+    overlayAnimation: overlayAnimation,
+    modalAnimation: modalAnimation,
+    themeProps: themeProps,
+    showCloseButton: showCloseButton,
+    close: _close,
+    header: header,
+    footer: footer,
+    isOpen: isOpen
+  }, rest), children)));
+});
+var ModalContent = function ModalContent(_ref) {
+  var overlay = _ref.overlay,
+    scrollOverlay = _ref.scrollOverlay,
+    onClickOutsideModal = _ref.onClickOutsideModal,
+    overlayColor = _ref.overlayColor,
+    overlayProps = _ref.overlayProps,
+    overlayAnimation = _ref.overlayAnimation,
+    modalAnimation = _ref.modalAnimation,
+    themeProps = _ref.themeProps,
+    showCloseButton = _ref.showCloseButton,
+    header = _ref.header,
+    footer = _ref.footer,
+    close = _ref.close,
+    isOpen = _ref.isOpen,
+    modalRef = _ref.modalRef,
+    children = _ref.children,
+    rest = _objectWithoutProperties$b(_ref, _excluded$7);
+  return /*#__PURE__*/React__default.createElement(AnimatePresence, null, overlay ? /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SecondOverlay, _extends$g({
     scrollOverlay: scrollOverlay,
     onClick: onClickOutsideModal,
     overlayColor: overlayColor
@@ -78066,12 +78117,12 @@ var Modal = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     overlayColor: overlayColor,
     isOpen: isOpen
   }, overlayProps, overlayAnimation), /*#__PURE__*/React__default.createElement(ModalWrapper, _extends$g({
-    modalRef: ref,
+    modalRef: modalRef,
     themeProps: themeProps,
     scrollOverlay: scrollOverlay,
     modalAnimation: modalAnimation,
     showCloseButton: showCloseButton,
-    close: _close,
+    close: close,
     header: header,
     footer: footer
   }, rest), children))) : /*#__PURE__*/React__default.createElement(ModalWrapper, _extends$g({
@@ -78079,22 +78130,22 @@ var Modal = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
     themeProps: themeProps,
     modalAnimation: modalAnimation,
     showCloseButton: showCloseButton,
-    close: _close,
+    close: close,
     header: header,
     footer: footer
-  }, rest), children)));
-});
-var ModalWrapper = function ModalWrapper(_ref) {
-  var modalRef = _ref.modalRef,
-    themeProps = _ref.themeProps,
-    scrollOverlay = _ref.scrollOverlay,
-    modalAnimation = _ref.modalAnimation,
-    showCloseButton = _ref.showCloseButton,
-    close = _ref.close,
-    header = _ref.header,
-    footer = _ref.footer,
-    children = _ref.children,
-    rest = _objectWithoutProperties$b(_ref, _excluded$7);
+  }, rest), children));
+};
+var ModalWrapper = function ModalWrapper(_ref2) {
+  var modalRef = _ref2.modalRef,
+    themeProps = _ref2.themeProps,
+    scrollOverlay = _ref2.scrollOverlay,
+    modalAnimation = _ref2.modalAnimation,
+    showCloseButton = _ref2.showCloseButton,
+    close = _ref2.close,
+    header = _ref2.header,
+    footer = _ref2.footer,
+    children = _ref2.children,
+    rest = _objectWithoutProperties$b(_ref2, _excluded2);
   return /*#__PURE__*/React__default.createElement(AnimatePresence, null, /*#__PURE__*/React__default.createElement(ModalContainer, _extends$g({
     ref: modalRef
   }, themeProps, modalAnimation, {
@@ -78114,6 +78165,7 @@ var ModalWrapper = function ModalWrapper(_ref) {
   }, footer)));
 };
 Modal.defaultProps = {
+  portalElement: document.body,
   isOpen: false,
   showCloseButton: true,
   scrollOverlay: false,
@@ -78157,6 +78209,10 @@ Modal.defaultProps = {
   clickOutsideToClose: true
 };
 Modal.propTypes = {
+  /**
+   * If the value is given modal will use createPortal to be rendered in portalElement
+   */
+  portalElement: PropTypes.any,
   /**
    * Is modal open by default
    */

package/lib/index.js

@@ -68047,7 +68047,7 @@ KanbanCard.propTypes = {
 };
 
 var _excluded$I = ["children", "containerId", "columns", "disabled", "id", "items", "className", "renderFooterContent", "maxContainerHeight", "style"],
-  _excluded2$1 = ["horizontalDisplay", "verticalDisplay", "adjustScale", "itemCount", "cancelDrop", "columns", "handle", "containerStyle", "coordinateGetter", "getItemStyles", "wrapperStyle", "minimal", "modifiers", "renderItem", "strategy", "scrollable", "maxContainerHeight", "cardProps", "headerProps", "footerProps", "data", "columnInfo", "onColumnMoved", "onCardMoved", "onCardChangedColumns", "color", "size", "children"];
+  _excluded2$2 = ["horizontalDisplay", "verticalDisplay", "adjustScale", "itemCount", "cancelDrop", "columns", "handle", "containerStyle", "coordinateGetter", "getItemStyles", "wrapperStyle", "minimal", "modifiers", "renderItem", "strategy", "scrollable", "maxContainerHeight", "cardProps", "headerProps", "footerProps", "data", "columnInfo", "onColumnMoved", "onCardMoved", "onCardChangedColumns", "color", "size", "children"];
 var _templateObject$F, _templateObject2$d;
 function ownKeys$6(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread$6(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys$6(Object(source), !0).forEach(function (key) { _defineProperty__default$1["default"](target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys$6(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -68250,7 +68250,7 @@ var Kanban = /*#__PURE__*/React__default["default"].forwardRef(function (props,
     color = props.color,
     size = props.size,
     children = props.children,
-    rest = _objectWithoutProperties__default["default"](props, _excluded2$1);
+    rest = _objectWithoutProperties__default["default"](props, _excluded2$2);
   var theme = useTheme$1();
 
   //================== STATE =====================
@@ -72687,7 +72687,7 @@ function isExt(v) {
  */
 
 var _excluded$t = ["children"],
-    _excluded2 = ["open"],
+    _excluded2$1 = ["open"],
     _excluded3 = ["refKey", "role", "onKeyDown", "onFocus", "onBlur", "onClick", "onDragEnter", "onDragOver", "onDragLeave", "onDrop"],
     _excluded4 = ["refKey", "onChange", "onClick"];
 
@@ -72741,7 +72741,7 @@ var Dropzone = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
 
   var _useDropzone = useDropzone(params),
       open = _useDropzone.open,
-      props = _objectWithoutProperties(_useDropzone, _excluded2);
+      props = _objectWithoutProperties(_useDropzone, _excluded2$1);
 
   React.useImperativeHandle(ref, function () {
     return {
@@ -77977,7 +77977,8 @@ Breadcrumbs.propTypes = {
   size: PropTypes__default["default"].oneOf(["small", "medium", "large"])
 };
 
-var _excluded$7 = ["modalRef", "themeProps", "scrollOverlay", "modalAnimation", "showCloseButton", "close", "header", "footer", "children"];
+var _excluded$7 = ["overlay", "scrollOverlay", "onClickOutsideModal", "overlayColor", "overlayProps", "overlayAnimation", "modalAnimation", "themeProps", "showCloseButton", "header", "footer", "close", "isOpen", "modalRef", "children"],
+  _excluded2 = ["modalRef", "themeProps", "scrollOverlay", "modalAnimation", "showCloseButton", "close", "header", "footer", "children"];
 var _templateObject$8, _templateObject2$2, _templateObject3$1, _templateObject4;
 var FOOTER_HEIGHT = "5rem";
 var HEADER_HEIGHT = "3.8rem";
@@ -78047,7 +78048,8 @@ var SecondOverlay = newStyled(motion.div)(_templateObject4 || (_templateObject4
   return props.overlayColor;
 });
 var Modal = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
-  var isOpen = props.isOpen,
+  var portalElement = props.portalElement,
+    isOpen = props.isOpen,
     header = props.header,
     footer = props.footer,
     scrollOverlay = props.scrollOverlay,
@@ -78105,7 +78107,56 @@ var Modal = /*#__PURE__*/React__default["default"].forwardRef(function (props, r
     setShow(false);
     onClose(event);
   };
-  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, show && /*#__PURE__*/React__default["default"].createElement(AnimatePresence, null, overlay ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(SecondOverlay, _extends__default$1["default"]({
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, show && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, portalElement ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default["default"].createElement(ModalContent, _extends__default$1["default"]({
+    modalRef: ref,
+    overlay: overlay,
+    scrollOverlay: scrollOverlay,
+    onClickOutsideModal: onClickOutsideModal,
+    overlayColor: overlayColor,
+    overlayProps: overlayProps,
+    overlayAnimation: overlayAnimation,
+    modalAnimation: modalAnimation,
+    themeProps: themeProps,
+    showCloseButton: showCloseButton,
+    close: _close,
+    header: header,
+    footer: footer,
+    isOpen: isOpen
+  }, rest), children), portalElement)) : /*#__PURE__*/React__default["default"].createElement(ModalContent, _extends__default$1["default"]({
+    modalRef: ref,
+    overlay: overlay,
+    scrollOverlay: scrollOverlay,
+    onClickOutsideModal: onClickOutsideModal,
+    overlayColor: overlayColor,
+    overlayProps: overlayProps,
+    overlayAnimation: overlayAnimation,
+    modalAnimation: modalAnimation,
+    themeProps: themeProps,
+    showCloseButton: showCloseButton,
+    close: _close,
+    header: header,
+    footer: footer,
+    isOpen: isOpen
+  }, rest), children)));
+});
+var ModalContent = function ModalContent(_ref) {
+  var overlay = _ref.overlay,
+    scrollOverlay = _ref.scrollOverlay,
+    onClickOutsideModal = _ref.onClickOutsideModal,
+    overlayColor = _ref.overlayColor,
+    overlayProps = _ref.overlayProps,
+    overlayAnimation = _ref.overlayAnimation,
+    modalAnimation = _ref.modalAnimation,
+    themeProps = _ref.themeProps,
+    showCloseButton = _ref.showCloseButton,
+    header = _ref.header,
+    footer = _ref.footer,
+    close = _ref.close,
+    isOpen = _ref.isOpen,
+    modalRef = _ref.modalRef,
+    children = _ref.children,
+    rest = _objectWithoutProperties__default["default"](_ref, _excluded$7);
+  return /*#__PURE__*/React__default["default"].createElement(AnimatePresence, null, overlay ? /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, /*#__PURE__*/React__default["default"].createElement(SecondOverlay, _extends__default$1["default"]({
     scrollOverlay: scrollOverlay,
     onClick: onClickOutsideModal,
     overlayColor: overlayColor
@@ -78115,12 +78166,12 @@ var Modal = /*#__PURE__*/React__default["default"].forwardRef(function (props, r
     overlayColor: overlayColor,
     isOpen: isOpen
   }, overlayProps, overlayAnimation), /*#__PURE__*/React__default["default"].createElement(ModalWrapper, _extends__default$1["default"]({
-    modalRef: ref,
+    modalRef: modalRef,
     themeProps: themeProps,
     scrollOverlay: scrollOverlay,
     modalAnimation: modalAnimation,
     showCloseButton: showCloseButton,
-    close: _close,
+    close: close,
     header: header,
     footer: footer
   }, rest), children))) : /*#__PURE__*/React__default["default"].createElement(ModalWrapper, _extends__default$1["default"]({
@@ -78128,22 +78179,22 @@ var Modal = /*#__PURE__*/React__default["default"].forwardRef(function (props, r
     themeProps: themeProps,
     modalAnimation: modalAnimation,
     showCloseButton: showCloseButton,
-    close: _close,
+    close: close,
     header: header,
     footer: footer
-  }, rest), children)));
-});
-var ModalWrapper = function ModalWrapper(_ref) {
-  var modalRef = _ref.modalRef,
-    themeProps = _ref.themeProps,
-    scrollOverlay = _ref.scrollOverlay,
-    modalAnimation = _ref.modalAnimation,
-    showCloseButton = _ref.showCloseButton,
-    close = _ref.close,
-    header = _ref.header,
-    footer = _ref.footer,
-    children = _ref.children,
-    rest = _objectWithoutProperties__default["default"](_ref, _excluded$7);
+  }, rest), children));
+};
+var ModalWrapper = function ModalWrapper(_ref2) {
+  var modalRef = _ref2.modalRef,
+    themeProps = _ref2.themeProps,
+    scrollOverlay = _ref2.scrollOverlay,
+    modalAnimation = _ref2.modalAnimation,
+    showCloseButton = _ref2.showCloseButton,
+    close = _ref2.close,
+    header = _ref2.header,
+    footer = _ref2.footer,
+    children = _ref2.children,
+    rest = _objectWithoutProperties__default["default"](_ref2, _excluded2);
   return /*#__PURE__*/React__default["default"].createElement(AnimatePresence, null, /*#__PURE__*/React__default["default"].createElement(ModalContainer, _extends__default$1["default"]({
     ref: modalRef
   }, themeProps, modalAnimation, {
@@ -78163,6 +78214,7 @@ var ModalWrapper = function ModalWrapper(_ref) {
   }, footer)));
 };
 Modal.defaultProps = {
+  portalElement: document.body,
   isOpen: false,
   showCloseButton: true,
   scrollOverlay: false,
@@ -78206,6 +78258,10 @@ Modal.defaultProps = {
   clickOutsideToClose: true
 };
 Modal.propTypes = {
+  /**
+   * If the value is given modal will use createPortal to be rendered in portalElement
+   */
+  portalElement: PropTypes__default["default"].any,
   /**
    * Is modal open by default
    */

package/package.json

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