blue-react 9.11.0 → 9.12.0

package/dist/components/Layout.js

@@ -72,9 +72,10 @@ var Layout = /*#__PURE__*/function (_Component) {
     _this = _super.call(this, props);
     window.blueLayoutRef = _assertThisInitialized(_this);
     _this.defaultMatch = ["home"];
+    var expandSidebar = props.hideSidebarMenu ? false : props.expandSidebar !== undefined ? props.expandSidebar : localStorage.getItem("blueLayoutShrinkSidebar") === null;
     _this.state = {
       sidebarIn: props.sidebarIn || false,
-      expandSidebar: props.hideSidebarMenu ? false : props.expandSidebar !== undefined ? props.expandSidebar : localStorage.getItem("blueLayoutShrinkSidebar") === null,
+      expandSidebar: expandSidebar,
       match: null,
       history: [],
       hash: window.location.hash,
@@ -84,6 +85,7 @@ var Layout = /*#__PURE__*/function (_Component) {
     _this.hideSidebar = _this.hideSidebar.bind(_assertThisInitialized(_this));
     _this.toggleExpandSidebar = _this.toggleExpandSidebar.bind(_assertThisInitialized(_this));
     _this.eventListeners = [];
+    if (_this.props.onChangeExpandSidebar) _this.props.onChangeExpandSidebar(expandSidebar);
     return _this;
   }
 

package/dist/components/MenuItem.js

@@ -33,10 +33,20 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function findParentWithClass(element, className) {
+  while (element && !element.classList.contains(className)) {
+    element = element.parentElement;
+  }
+
+  return element;
+}
+
 /**
  * Link, button or custom component for Sidebar, Actions or ActionMenu
  */
 function MenuItem(props) {
+  var id = "blue-menu-item-wrapper-".concat(Math.random().toString(36).substring(7));
+
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
       showDropdown = _useState2[0],
@@ -47,6 +57,8 @@ function MenuItem(props) {
       active = _useState4[0],
       setActive = _useState4[1];
 
+  var menuRef = (0, _react.useRef)(null);
+
   var checkActive = function checkActive() {
     setActive(props.href && window.location.hash.indexOf(props.href) > -1 || props.isHome && (window.location.hash === "" || window.location.hash === "#/") ? true : false);
   };
@@ -71,11 +83,17 @@ function MenuItem(props) {
 
   var onClickOutside = function onClickOutside(_ref) {
     var target = _ref.target;
-
-    // Don't trigger when clicking on MenuItem
-    if (!(target !== null && target !== void 0 && target.classList.contains("blue-menu-item-dropdown-toggle")) && !(target !== null && target !== void 0 && target.classList.contains("blue-menu-item-label"))) {
-      setShowDropdown(false);
+    var ignoreClasses = props.outsideIgnoreClasses || [id];
+
+    if (ignoreClasses && target) {
+      for (var i = 0; i < ignoreClasses.length; i++) {
+        if (target !== null && target !== void 0 && target.classList.contains(ignoreClasses[i]) || findParentWithClass(target, ignoreClasses[i])) {
+          return;
+        }
+      }
     }
+
+    setShowDropdown(false);
   };
 
   (0, _react.useEffect)(function () {
@@ -92,6 +110,13 @@ function MenuItem(props) {
       props.onShowDropdown(showDropdown);
     }
   }, [props.onShowDropdown, showDropdown]);
+  (0, _react.useEffect)(function () {
+    if (menuRef && menuRef.current) {
+      var el = menuRef.current;
+      var rect = el.getBoundingClientRect();
+      el.style.setProperty("--offset-top", Math.round(rect.top) + "px");
+    }
+  }, [menuRef, showDropdown]);
   var className = "blue-menu-item btn" + (props.isActive ? " active" : "") + (props.className ? " " + props.className : "") + (props.children ? " blue-menu-item-dropdown-toggle w-100" : "") + (props.highlighted ? " highlighted" : "");
   var icon, iconForActive;
 
@@ -115,7 +140,9 @@ function MenuItem(props) {
     iconForActive = props.iconForActive;
   }
 
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/(0, _react.createElement)(props.elementType || (props.href ? "a" : "button"), {
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "blue-menu-item-wrapper ".concat(id)
+  }, /*#__PURE__*/(0, _react.createElement)(props.elementType || (props.href ? "a" : "button"), {
     to: props.to,
     href: props.href,
     exact: props.exact,
@@ -160,10 +187,12 @@ function MenuItem(props) {
     className: (0, _clsx.default)("blue-menu-item-dropdown-caret ms-auto", props.caretClassName),
     style: props.caretStyle
   }))), showDropdown && (props.supportOutside ? /*#__PURE__*/_react.default.createElement(_Outside.default, {
+    wrapperRef: menuRef,
     className: (0, _clsx.default)("blue-menu-item-dropdown", props.dropdownClassName),
     onClickOutside: onClickOutside,
     style: props.dropdownStyle
   }, props.children) : /*#__PURE__*/_react.default.createElement("div", {
+    ref: menuRef,
     className: (0, _clsx.default)("blue-menu-item-dropdown", props.dropdownClassName),
     style: props.dropdownStyle
   }, props.children)));

package/dist/components/Outside.js

@@ -45,11 +45,12 @@ function Outside(_ref) {
       className = _ref.className,
       onClickOutside = _ref.onClickOutside,
       onClick = _ref.onClick,
-      style = _ref.style;
-  var wrapperRef = (0, _react.useRef)(null);
-  useOutside(wrapperRef, onClickOutside);
+      style = _ref.style,
+      wrapperRef = _ref.wrapperRef;
+  var ref = (0, _react.useRef)(null);
+  useOutside(wrapperRef || ref, onClickOutside);
   return /*#__PURE__*/_react.default.createElement("div", {
-    ref: wrapperRef,
+    ref: wrapperRef || ref,
     className: className,
     style: style,
     onClick: onClick

package/dist/components/SidebarMenuItem.js

@@ -39,14 +39,8 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
-function getOffset(el) {
-  var rect = el.getBoundingClientRect();
-  return {
-    left: Math.round(rect.left + window.scrollX),
-    top: Math.round(rect.top + window.scrollY)
-  };
-}
 /**
+ * @deprecated `MenuItem` now has all the features of `SidebarMenuItem`. Use `MenuItem` instead.
  * Extends `MenuItem` with following features:
  * * Shows provided label as tooltip if sidebar is closed.
  * * Children will be displayed on the right side of the parent item.
@@ -61,8 +55,6 @@ function getOffset(el) {
  * </SidebarMenu>
  * ```
  */
-
-
 function SidebarMenuItem(_ref) {
   var _ref$outerClass = _ref.outerClass,
       outerClass = _ref$outerClass === void 0 ? "" : _ref$outerClass,
@@ -90,8 +82,7 @@ function SidebarMenuItem(_ref) {
   }, [window.location.hash]);
   (0, _react.useEffect)(function () {
     if (menuRef && menuRef.current) {
-      var offset = getOffset(menuRef.current);
-      setOffsetTop(offset.top);
+      setOffsetTop(menuRef.current.getBoundingClientRect().top);
     }
   }, [menuRef, open]);
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children ? /*#__PURE__*/_react.default.createElement(_Outside.default, {
@@ -104,7 +95,7 @@ function SidebarMenuItem(_ref) {
     onClick: toggle
   })), open && /*#__PURE__*/_react.default.createElement("div", {
     ref: menuRef,
-    className: ["position-absolute", "shadow", "top-0", "ms-1", "rounded", "w-bla-sidebar-width", "blue-menu-item-dropdown", "blue-menu-item-dropdown-from-start"].join(" "),
+    className: ["position-absolute", "shadow", "top-0", "ms-1", "rounded", "w-bla-sidebar-width", "blue-menu-item-dropdown-from-start"].join(" "),
     style: {
       left: "var(--blue-sidebar-width, 3rem)",
       maxHeight: "calc(100vh - (".concat(offsetTop, "px + 1rem))"),