@lanaco/lnc-react-ui 3.8.0 → 3.10.0

package/lib/index.esm.js

@@ -82416,24 +82416,30 @@ NestedDropdownItem.propTypes = {
   __TYPE__: PropTypes.string
 };
 
-var _excluded$4 = ["direction", "open", "duration", "enableOverlay", "zIndex", "closeOnClickOutside", "closeOnSwipe", "isFullPage", "onClose", "onOpen", "className", "style", "color", "overlayColor", "size", "drawerSize", "children"];
+var _excluded$4 = ["direction", "open", "duration", "enableOverlay", "zIndex", "closeOnClickOutside", "closeOnSwipe", "isFullPage", "unsetHeight", "unsetWidth", "onClose", "onOpen", "className", "style", "color", "overlayColor", "size", "drawerSize", "children"];
 var _templateObject$4, _templateObject2;
-var getHeight = function getHeight(direction, isOpen, isFullPage, drawerSize) {
-  if (direction === "right" || direction === "left") return "100%";
-  if (isOpen && isFullPage) return "100%";
-  if (isOpen) return drawerSize;
-  return 0;
+var getHeight = function getHeight(direction, isOpen, isFullPage, drawerSize, unsetHeight) {
+  if (direction === "right" || direction === "left") return "height: 100%;";
+  if (isOpen && isFullPage) return "height: 100%;";
+  if (isOpen && unsetHeight === true) return;
+  if (isOpen) return "height: " + drawerSize + ";";
+  return "height: 0;";
 };
-var getWidth = function getWidth(direction, isOpen, isFullPage, drawerSize) {
-  if (direction === "top" || direction === "bottom") return "100%";
-  if (isOpen && isFullPage) return "100%";
-  if (isOpen) return drawerSize;
-  return 0;
+var getWidth = function getWidth(direction, isOpen, isFullPage, drawerSize, unsetWidth) {
+  if (direction === "top" || direction === "bottom") return "width: 100%;";
+  if (isOpen && isFullPage) return "width: 100%;";
+  if (isOpen && unsetWidth === true) return;
+  if (isOpen) return "width: " + drawerSize + ";";
+  return "width: 0;";
 };
-var StyledDrawer = newStyled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  touch-action: none;\n  overflow: auto;\n  max-height: \"100vh\";\n  height: ", ";\n  max-width: \"100vw\";\n  width: ", ";\n  position: fixed;\n  z-index: ", ";\n  ", ";\n  ", ";\n  -webkit-transition: ", ";\n  -moz-transition: ", ";\n  -ms-transition: ", ";\n  -o-transition: ", ";\n  transition: ", ";\n  padding: ", ";\n\n  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);\n\n  background-color: ", ";\n  color: ", ";\n  ", ";\n"])), function (props) {
-  return getHeight(props.direction, props.isOpen, props.isFullPage, props.drawerSize);
+var StyledDrawer = newStyled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n  touch-action: none;\n  overflow: auto;\n  max-height: ", ";\n  ", "\n  max-width: ", ";\n  ", "\n  position: fixed;\n  z-index: ", ";\n  ", ";\n  ", ";\n  -webkit-transition: ", ";\n  -moz-transition: ", ";\n  -ms-transition: ", ";\n  -o-transition: ", ";\n  transition: ", ";\n  padding: ", ";\n\n  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);\n\n  background-color: ", ";\n  color: ", ";\n  ", ";\n"])), function (p) {
+  return p.isOpen || p.unsetHeight === false ? "100vh" : 0;
 }, function (props) {
-  return getWidth(props.direction, props.isOpen, props.isFullPage, props.drawerSize);
+  return getHeight(props.direction, props.isOpen, props.isFullPage, props.drawerSize, props.unsetHeight);
+}, function (p) {
+  return p.isOpen || p.unsetWidth === false ? "100vw" : 0;
+}, function (props) {
+  return getWidth(props.direction, props.isOpen, props.isFullPage, props.drawerSize, props.unsetWidth);
 }, function (props) {
   return props.zIndex;
 }, function (props) {
@@ -82477,6 +82483,8 @@ var SwipeableDrawer = /*#__PURE__*/React__default.forwardRef(function (props, re
     closeOnClickOutside = props.closeOnClickOutside,
     closeOnSwipe = props.closeOnSwipe,
     isFullPage = props.isFullPage,
+    unsetHeight = props.unsetHeight,
+    unsetWidth = props.unsetWidth,
     onClose = props.onClose,
     onOpen = props.onOpen,
     className = props.className,
@@ -82582,6 +82590,8 @@ var SwipeableDrawer = /*#__PURE__*/React__default.forwardRef(function (props, re
     isOpen: _isOpen,
     direction: direction,
     isFullPage: isFullPage,
+    unsetHeight: unsetHeight,
+    unsetWidth: unsetWidth,
     duration: duration,
     color: color,
     theme: theme,
@@ -82605,6 +82615,16 @@ SwipeableDrawer.defaultProps = {
   isFullPage: false,
   drawerSize: "12.5rem",
   size: "small",
+  /**
+   * used to fit size of the drawer to the size of its child
+   * when position is top or bottom
+   */
+  unsetHeight: false,
+  /**
+   * used to fit size of the drawer to the size of its child
+   * when position is right or left
+   */
+  unsetWidth: false,
   //-------------------------
   onClose: function onClose() {},
   onOpen: function onOpen() {},
@@ -82633,6 +82653,8 @@ SwipeableDrawer.propTypes = {
    * Determines whether drawer takes up the whole page
    */
   isFullPage: PropTypes.bool,
+  unsetHeight: PropTypes.bool,
+  unsetWidth: PropTypes.bool,
   //---------------------------------------------------------------
   onClose: PropTypes.func,
   onOpen: PropTypes.func,

package/lib/index.js

@@ -82465,24 +82465,30 @@ NestedDropdownItem.propTypes = {
   __TYPE__: PropTypes__default["default"].string
 };
 
-var _excluded$4 = ["direction", "open", "duration", "enableOverlay", "zIndex", "closeOnClickOutside", "closeOnSwipe", "isFullPage", "onClose", "onOpen", "className", "style", "color", "overlayColor", "size", "drawerSize", "children"];
+var _excluded$4 = ["direction", "open", "duration", "enableOverlay", "zIndex", "closeOnClickOutside", "closeOnSwipe", "isFullPage", "unsetHeight", "unsetWidth", "onClose", "onOpen", "className", "style", "color", "overlayColor", "size", "drawerSize", "children"];
 var _templateObject$4, _templateObject2;
-var getHeight = function getHeight(direction, isOpen, isFullPage, drawerSize) {
-  if (direction === "right" || direction === "left") return "100%";
-  if (isOpen && isFullPage) return "100%";
-  if (isOpen) return drawerSize;
-  return 0;
+var getHeight = function getHeight(direction, isOpen, isFullPage, drawerSize, unsetHeight) {
+  if (direction === "right" || direction === "left") return "height: 100%;";
+  if (isOpen && isFullPage) return "height: 100%;";
+  if (isOpen && unsetHeight === true) return;
+  if (isOpen) return "height: " + drawerSize + ";";
+  return "height: 0;";
 };
-var getWidth = function getWidth(direction, isOpen, isFullPage, drawerSize) {
-  if (direction === "top" || direction === "bottom") return "100%";
-  if (isOpen && isFullPage) return "100%";
-  if (isOpen) return drawerSize;
-  return 0;
+var getWidth = function getWidth(direction, isOpen, isFullPage, drawerSize, unsetWidth) {
+  if (direction === "top" || direction === "bottom") return "width: 100%;";
+  if (isOpen && isFullPage) return "width: 100%;";
+  if (isOpen && unsetWidth === true) return;
+  if (isOpen) return "width: " + drawerSize + ";";
+  return "width: 0;";
 };
-var StyledDrawer = newStyled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral__default["default"](["\n  touch-action: none;\n  overflow: auto;\n  max-height: \"100vh\";\n  height: ", ";\n  max-width: \"100vw\";\n  width: ", ";\n  position: fixed;\n  z-index: ", ";\n  ", ";\n  ", ";\n  -webkit-transition: ", ";\n  -moz-transition: ", ";\n  -ms-transition: ", ";\n  -o-transition: ", ";\n  transition: ", ";\n  padding: ", ";\n\n  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);\n\n  background-color: ", ";\n  color: ", ";\n  ", ";\n"])), function (props) {
-  return getHeight(props.direction, props.isOpen, props.isFullPage, props.drawerSize);
+var StyledDrawer = newStyled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral__default["default"](["\n  touch-action: none;\n  overflow: auto;\n  max-height: ", ";\n  ", "\n  max-width: ", ";\n  ", "\n  position: fixed;\n  z-index: ", ";\n  ", ";\n  ", ";\n  -webkit-transition: ", ";\n  -moz-transition: ", ";\n  -ms-transition: ", ";\n  -o-transition: ", ";\n  transition: ", ";\n  padding: ", ";\n\n  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);\n\n  background-color: ", ";\n  color: ", ";\n  ", ";\n"])), function (p) {
+  return p.isOpen || p.unsetHeight === false ? "100vh" : 0;
 }, function (props) {
-  return getWidth(props.direction, props.isOpen, props.isFullPage, props.drawerSize);
+  return getHeight(props.direction, props.isOpen, props.isFullPage, props.drawerSize, props.unsetHeight);
+}, function (p) {
+  return p.isOpen || p.unsetWidth === false ? "100vw" : 0;
+}, function (props) {
+  return getWidth(props.direction, props.isOpen, props.isFullPage, props.drawerSize, props.unsetWidth);
 }, function (props) {
   return props.zIndex;
 }, function (props) {
@@ -82526,6 +82532,8 @@ var SwipeableDrawer = /*#__PURE__*/React__default["default"].forwardRef(function
     closeOnClickOutside = props.closeOnClickOutside,
     closeOnSwipe = props.closeOnSwipe,
     isFullPage = props.isFullPage,
+    unsetHeight = props.unsetHeight,
+    unsetWidth = props.unsetWidth,
     onClose = props.onClose,
     onOpen = props.onOpen,
     className = props.className,
@@ -82631,6 +82639,8 @@ var SwipeableDrawer = /*#__PURE__*/React__default["default"].forwardRef(function
     isOpen: _isOpen,
     direction: direction,
     isFullPage: isFullPage,
+    unsetHeight: unsetHeight,
+    unsetWidth: unsetWidth,
     duration: duration,
     color: color,
     theme: theme,
@@ -82654,6 +82664,16 @@ SwipeableDrawer.defaultProps = {
   isFullPage: false,
   drawerSize: "12.5rem",
   size: "small",
+  /**
+   * used to fit size of the drawer to the size of its child
+   * when position is top or bottom
+   */
+  unsetHeight: false,
+  /**
+   * used to fit size of the drawer to the size of its child
+   * when position is right or left
+   */
+  unsetWidth: false,
   //-------------------------
   onClose: function onClose() {},
   onOpen: function onOpen() {},
@@ -82682,6 +82702,8 @@ SwipeableDrawer.propTypes = {
    * Determines whether drawer takes up the whole page
    */
   isFullPage: PropTypes__default["default"].bool,
+  unsetHeight: PropTypes__default["default"].bool,
+  unsetWidth: PropTypes__default["default"].bool,
   //---------------------------------------------------------------
   onClose: PropTypes__default["default"].func,
   onOpen: PropTypes__default["default"].func,

package/package.json

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