@lanaco/lnc-react-ui 3.9.0 → 3.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/lib/index.esm.js +26 -14
  2. package/lib/index.js +26 -14
  3. package/package.json +1 -1
package/lib/index.esm.js CHANGED
@@ -80880,7 +80880,7 @@ var _templateObject$g;
80880
80880
  var StyledPageLayout = newStyled.section(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral(["\n display: flex;\n flex: auto;\n flex-direction: ", ";\n height: ", ";\n\n * {\n box-sizing: border-box;\n }\n\n & header,\n footer {\n flex: 0 0 auto;\n min-height: 4rem;\n }\n\n & main {\n flex: auto;\n overflow: hidden;\n }\n\n & aside {\n flex: 0 0 15rem;\n height: 100%;\n }\n"])), function (props) {
80881
80881
  return props.hasSidebar ? "row" : "column";
80882
80882
  }, function (props) {
80883
- return props.isChild ? "100%" : "100vh";
80883
+ return props.isChild ? "100%" : "100dvh";
80884
80884
  });
80885
80885
  var PageLayout = /*#__PURE__*/React__default.forwardRef(function (props, ref) {
80886
80886
  var children = props.children,
@@ -81250,7 +81250,7 @@ TabItem.propTypes = {
81250
81250
  //---------------------------------------------------------------
81251
81251
  className: PropTypes.string,
81252
81252
  style: PropTypes.object,
81253
- color: PropTypes.oneOf(["primary", "secondary", "success", "warning", "danger", "information"]),
81253
+ color: PropTypes.oneOf(["primary", "secondary", "success", "warning", "danger", "information", "neutral"]),
81254
81254
  size: PropTypes.oneOf(["small", "medium", "large"])
81255
81255
  };
81256
81256
 
@@ -81559,17 +81559,17 @@ var HEADER_HEIGHT = "3.8rem";
81559
81559
  var MODAL_PADDING = "1.5rem";
81560
81560
  var getMaxHeight = function getMaxHeight(size, header, footer) {
81561
81561
  if (header && footer) {
81562
- if (size == "FULL") return "calc(100vh - ".concat(HEADER_HEIGHT, " - ").concat(FOOTER_HEIGHT, ")");
81563
- return "calc(100vh - ".concat(HEADER_HEIGHT, " - ").concat(FOOTER_HEIGHT, " - ").concat(MODAL_PADDING, ")");
81562
+ if (size == "FULL") return "calc(100dvh - ".concat(HEADER_HEIGHT, " - ").concat(FOOTER_HEIGHT, ")");
81563
+ return "calc(100dvh - ".concat(HEADER_HEIGHT, " - ").concat(FOOTER_HEIGHT, " - ").concat(MODAL_PADDING, ")");
81564
81564
  } else if (header) {
81565
- if (size == "FULL") return "calc(100vh - ".concat(HEADER_HEIGHT, ")");
81566
- return "calc(100vh - ".concat(HEADER_HEIGHT, " - ").concat(MODAL_PADDING, ")");
81565
+ if (size == "FULL") return "calc(100dvh - ".concat(HEADER_HEIGHT, ")");
81566
+ return "calc(100dvh - ".concat(HEADER_HEIGHT, " - ").concat(MODAL_PADDING, ")");
81567
81567
  } else if (footer) {
81568
- if (size == "FULL") return "calc(100vh - ".concat(FOOTER_HEIGHT, ")");
81569
- return "calc(100vh - ".concat(FOOTER_HEIGHT, " - ").concat(MODAL_PADDING, ")");
81568
+ if (size == "FULL") return "calc(100dvh - ".concat(FOOTER_HEIGHT, ")");
81569
+ return "calc(100dvh - ".concat(FOOTER_HEIGHT, " - ").concat(MODAL_PADDING, ")");
81570
81570
  }
81571
- if (size == "FULL") return "100vh";
81572
- return "calc(100vh - ".concat(MODAL_PADDING, ")");
81571
+ if (size == "FULL") return "100dvh";
81572
+ return "calc(100dvh - ".concat(MODAL_PADDING, ")");
81573
81573
  };
81574
81574
  var getMaxWidth = function getMaxWidth(size) {
81575
81575
  if (size == "FULL") return "100vw";
@@ -81601,7 +81601,7 @@ var ModalContainer = newStyled(motion.div)(_templateObject2$2 || (_templateObjec
81601
81601
  }, function (props) {
81602
81602
  return props.size.toUpperCase() != "FULL" ? "16px" : "0";
81603
81603
  }, HEADER_HEIGHT, MODAL_PADDING, MODAL_PADDING, MODAL_PADDING, FOOTER_HEIGHT, function (props) {
81604
- return props.size.toUpperCase() == "FULL" && "height: 100vh";
81604
+ return props.size.toUpperCase() == "FULL" && "height: 100dvh";
81605
81605
  }, function (props) {
81606
81606
  return props.scrollOverlay == false && "max-height: ".concat(getMaxHeight(props.size.toUpperCase(), props.header, props.footer), ";");
81607
81607
  }, function (props) {
@@ -82432,8 +82432,12 @@ var getWidth = function getWidth(direction, isOpen, isFullPage, drawerSize, unse
82432
82432
  if (isOpen) return "width: " + drawerSize + ";";
82433
82433
  return "width: 0;";
82434
82434
  };
82435
- var StyledDrawer = newStyled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral(["\n touch-action: none;\n overflow: auto;\n max-height: \"100vh\";\n ", "\n max-width: \"100vw\";\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 (props) {
82435
+ 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) {
82436
+ return p.isOpen || p.unsetHeight === false ? "100dvh" : 0;
82437
+ }, function (props) {
82436
82438
  return getHeight(props.direction, props.isOpen, props.isFullPage, props.drawerSize, props.unsetHeight);
82439
+ }, function (p) {
82440
+ return p.isOpen || p.unsetWidth === false ? "100vw" : 0;
82437
82441
  }, function (props) {
82438
82442
  return getWidth(props.direction, props.isOpen, props.isFullPage, props.drawerSize, props.unsetWidth);
82439
82443
  }, function (props) {
@@ -82464,7 +82468,7 @@ var StyledDrawer = newStyled.div(_templateObject$4 || (_templateObject$4 = _tagg
82464
82468
  var StyledOverlay = newStyled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n z-index: ", ";\n position: fixed;\n top: 0;\n left: 0;\n\n height: ", ";\n width: ", ";\n background-color: ", ";\n"])), function (props) {
82465
82469
  return props.zIndex;
82466
82470
  }, function (props) {
82467
- return props.isOpen === true && props.enableOverlay === true ? "100vh" : 0;
82471
+ return props.isOpen === true && props.enableOverlay === true ? "100dvh" : 0;
82468
82472
  }, function (props) {
82469
82473
  return props.isOpen === true && props.enableOverlay === true ? "100vw" : 0;
82470
82474
  }, function (props) {
@@ -82597,7 +82601,7 @@ var SwipeableDrawer = /*#__PURE__*/React__default.forwardRef(function (props, re
82597
82601
  drawerSize: drawerSize,
82598
82602
  onTouchStart: handleTouchStart,
82599
82603
  onTouchMove: handleTouchMove
82600
- }, rest), children, "askldjflkasjdflkasj ajdklfjals", /*#__PURE__*/React__default.createElement("div", null, "jsldfjlaskdjf"), /*#__PURE__*/React__default.createElement("div", null, "asdjkfaklsdjfkl"))));
82604
+ }, rest), children)));
82601
82605
  });
82602
82606
  SwipeableDrawer.defaultProps = {
82603
82607
  direction: "right",
@@ -82611,7 +82615,15 @@ SwipeableDrawer.defaultProps = {
82611
82615
  isFullPage: false,
82612
82616
  drawerSize: "12.5rem",
82613
82617
  size: "small",
82618
+ /**
82619
+ * used to fit size of the drawer to the size of its child
82620
+ * when position is top or bottom
82621
+ */
82614
82622
  unsetHeight: false,
82623
+ /**
82624
+ * used to fit size of the drawer to the size of its child
82625
+ * when position is right or left
82626
+ */
82615
82627
  unsetWidth: false,
82616
82628
  //-------------------------
82617
82629
  onClose: function onClose() {},
package/lib/index.js CHANGED
@@ -80929,7 +80929,7 @@ var _templateObject$g;
80929
80929
  var StyledPageLayout = newStyled.section(_templateObject$g || (_templateObject$g = _taggedTemplateLiteral__default["default"](["\n display: flex;\n flex: auto;\n flex-direction: ", ";\n height: ", ";\n\n * {\n box-sizing: border-box;\n }\n\n & header,\n footer {\n flex: 0 0 auto;\n min-height: 4rem;\n }\n\n & main {\n flex: auto;\n overflow: hidden;\n }\n\n & aside {\n flex: 0 0 15rem;\n height: 100%;\n }\n"])), function (props) {
80930
80930
  return props.hasSidebar ? "row" : "column";
80931
80931
  }, function (props) {
80932
- return props.isChild ? "100%" : "100vh";
80932
+ return props.isChild ? "100%" : "100dvh";
80933
80933
  });
80934
80934
  var PageLayout = /*#__PURE__*/React__default["default"].forwardRef(function (props, ref) {
80935
80935
  var children = props.children,
@@ -81299,7 +81299,7 @@ TabItem.propTypes = {
81299
81299
  //---------------------------------------------------------------
81300
81300
  className: PropTypes__default["default"].string,
81301
81301
  style: PropTypes__default["default"].object,
81302
- color: PropTypes__default["default"].oneOf(["primary", "secondary", "success", "warning", "danger", "information"]),
81302
+ color: PropTypes__default["default"].oneOf(["primary", "secondary", "success", "warning", "danger", "information", "neutral"]),
81303
81303
  size: PropTypes__default["default"].oneOf(["small", "medium", "large"])
81304
81304
  };
81305
81305
 
@@ -81608,17 +81608,17 @@ var HEADER_HEIGHT = "3.8rem";
81608
81608
  var MODAL_PADDING = "1.5rem";
81609
81609
  var getMaxHeight = function getMaxHeight(size, header, footer) {
81610
81610
  if (header && footer) {
81611
- if (size == "FULL") return "calc(100vh - ".concat(HEADER_HEIGHT, " - ").concat(FOOTER_HEIGHT, ")");
81612
- return "calc(100vh - ".concat(HEADER_HEIGHT, " - ").concat(FOOTER_HEIGHT, " - ").concat(MODAL_PADDING, ")");
81611
+ if (size == "FULL") return "calc(100dvh - ".concat(HEADER_HEIGHT, " - ").concat(FOOTER_HEIGHT, ")");
81612
+ return "calc(100dvh - ".concat(HEADER_HEIGHT, " - ").concat(FOOTER_HEIGHT, " - ").concat(MODAL_PADDING, ")");
81613
81613
  } else if (header) {
81614
- if (size == "FULL") return "calc(100vh - ".concat(HEADER_HEIGHT, ")");
81615
- return "calc(100vh - ".concat(HEADER_HEIGHT, " - ").concat(MODAL_PADDING, ")");
81614
+ if (size == "FULL") return "calc(100dvh - ".concat(HEADER_HEIGHT, ")");
81615
+ return "calc(100dvh - ".concat(HEADER_HEIGHT, " - ").concat(MODAL_PADDING, ")");
81616
81616
  } else if (footer) {
81617
- if (size == "FULL") return "calc(100vh - ".concat(FOOTER_HEIGHT, ")");
81618
- return "calc(100vh - ".concat(FOOTER_HEIGHT, " - ").concat(MODAL_PADDING, ")");
81617
+ if (size == "FULL") return "calc(100dvh - ".concat(FOOTER_HEIGHT, ")");
81618
+ return "calc(100dvh - ".concat(FOOTER_HEIGHT, " - ").concat(MODAL_PADDING, ")");
81619
81619
  }
81620
- if (size == "FULL") return "100vh";
81621
- return "calc(100vh - ".concat(MODAL_PADDING, ")");
81620
+ if (size == "FULL") return "100dvh";
81621
+ return "calc(100dvh - ".concat(MODAL_PADDING, ")");
81622
81622
  };
81623
81623
  var getMaxWidth = function getMaxWidth(size) {
81624
81624
  if (size == "FULL") return "100vw";
@@ -81650,7 +81650,7 @@ var ModalContainer = newStyled(motion.div)(_templateObject2$2 || (_templateObjec
81650
81650
  }, function (props) {
81651
81651
  return props.size.toUpperCase() != "FULL" ? "16px" : "0";
81652
81652
  }, HEADER_HEIGHT, MODAL_PADDING, MODAL_PADDING, MODAL_PADDING, FOOTER_HEIGHT, function (props) {
81653
- return props.size.toUpperCase() == "FULL" && "height: 100vh";
81653
+ return props.size.toUpperCase() == "FULL" && "height: 100dvh";
81654
81654
  }, function (props) {
81655
81655
  return props.scrollOverlay == false && "max-height: ".concat(getMaxHeight(props.size.toUpperCase(), props.header, props.footer), ";");
81656
81656
  }, function (props) {
@@ -82481,8 +82481,12 @@ var getWidth = function getWidth(direction, isOpen, isFullPage, drawerSize, unse
82481
82481
  if (isOpen) return "width: " + drawerSize + ";";
82482
82482
  return "width: 0;";
82483
82483
  };
82484
- var StyledDrawer = newStyled.div(_templateObject$4 || (_templateObject$4 = _taggedTemplateLiteral__default["default"](["\n touch-action: none;\n overflow: auto;\n max-height: \"100vh\";\n ", "\n max-width: \"100vw\";\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 (props) {
82484
+ 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) {
82485
+ return p.isOpen || p.unsetHeight === false ? "100dvh" : 0;
82486
+ }, function (props) {
82485
82487
  return getHeight(props.direction, props.isOpen, props.isFullPage, props.drawerSize, props.unsetHeight);
82488
+ }, function (p) {
82489
+ return p.isOpen || p.unsetWidth === false ? "100vw" : 0;
82486
82490
  }, function (props) {
82487
82491
  return getWidth(props.direction, props.isOpen, props.isFullPage, props.drawerSize, props.unsetWidth);
82488
82492
  }, function (props) {
@@ -82513,7 +82517,7 @@ var StyledDrawer = newStyled.div(_templateObject$4 || (_templateObject$4 = _tagg
82513
82517
  var StyledOverlay = newStyled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral__default["default"](["\n z-index: ", ";\n position: fixed;\n top: 0;\n left: 0;\n\n height: ", ";\n width: ", ";\n background-color: ", ";\n"])), function (props) {
82514
82518
  return props.zIndex;
82515
82519
  }, function (props) {
82516
- return props.isOpen === true && props.enableOverlay === true ? "100vh" : 0;
82520
+ return props.isOpen === true && props.enableOverlay === true ? "100dvh" : 0;
82517
82521
  }, function (props) {
82518
82522
  return props.isOpen === true && props.enableOverlay === true ? "100vw" : 0;
82519
82523
  }, function (props) {
@@ -82646,7 +82650,7 @@ var SwipeableDrawer = /*#__PURE__*/React__default["default"].forwardRef(function
82646
82650
  drawerSize: drawerSize,
82647
82651
  onTouchStart: handleTouchStart,
82648
82652
  onTouchMove: handleTouchMove
82649
- }, rest), children, "askldjflkasjdflkasj ajdklfjals", /*#__PURE__*/React__default["default"].createElement("div", null, "jsldfjlaskdjf"), /*#__PURE__*/React__default["default"].createElement("div", null, "asdjkfaklsdjfkl"))));
82653
+ }, rest), children)));
82650
82654
  });
82651
82655
  SwipeableDrawer.defaultProps = {
82652
82656
  direction: "right",
@@ -82660,7 +82664,15 @@ SwipeableDrawer.defaultProps = {
82660
82664
  isFullPage: false,
82661
82665
  drawerSize: "12.5rem",
82662
82666
  size: "small",
82667
+ /**
82668
+ * used to fit size of the drawer to the size of its child
82669
+ * when position is top or bottom
82670
+ */
82663
82671
  unsetHeight: false,
82672
+ /**
82673
+ * used to fit size of the drawer to the size of its child
82674
+ * when position is right or left
82675
+ */
82664
82676
  unsetWidth: false,
82665
82677
  //-------------------------
82666
82678
  onClose: function onClose() {},
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@lanaco/lnc-react-ui",
3
3
  "type": "module",
4
- "version": "3.9.0",
4
+ "version": "3.11.0",
5
5
  "description": "component library",
6
6
  "main": "lib/index.js",
7
7
  "module": "lib/index.esm.js",