blue-react 7.8.0 → 8.0.0-next.3

package/dist/components/Modal.js

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = Modal;
 
-var _Utilities = _interopRequireDefault(require("./Utilities"));
-
 var _react = _interopRequireWildcard(require("react"));
 
 var _bootstrap = require("bootstrap");
@@ -19,8 +17,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -37,7 +33,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * Simple modal/dialog. Designed to work as an alternative to JavaScript's native `alert()`, `prompt()` and `confirm()` functions.
  * It uses Bootstrap's Modal components.
  *
- * For easy use, you should use the hook `useModal` together with `ModalProvider`. See the example below.
+ * For easy use, you should use the hook `useModal` together with `ModalProvider`. See the example there.
  */
 function Modal(_ref) {
   var modalContent = _ref.modalContent,
@@ -79,12 +75,20 @@ function Modal(_ref) {
   var btnStyle = {
     maxWidth: "10rem"
   };
+
+  var focusFirstControl = function focusFirstControl() {
+    var myModal = modalRef.current;
+    myModal.removeEventListener("shown.bs.modal", focusFirstControl);
+    var firstControl = myModal.querySelector(".btn, .form-control");
+
+    if (firstControl) {
+      firstControl.focus();
+    }
+  };
+
   (0, _react.useEffect)(function () {
     setInput(defaultInput || "");
   }, [defaultInput]);
-  (0, _react.useEffect)(function () {
-    _Utilities.default.registerFluentBtns();
-  });
   (0, _react.useEffect)(function () {
     var myModal = modalRef.current;
 
@@ -98,7 +102,10 @@ function Modal(_ref) {
         cancel();
       });
     } else {
-      modalContent !== undefined ? bsModal.show() : bsModal.hide();
+      modalContent !== undefined ? bsModal.show() : bsModal.hide(); // Will focus first button or text field inside of modal when it is shown.
+      // For accessibility: This way you can control the modal actions with a keyboard.
+
+      myModal.addEventListener("shown.bs.modal", focusFirstControl);
     }
   }, [modalContent]);
   return /*#__PURE__*/_react.default.createElement("div", {

package/dist/components/ModalProvider.js

@@ -11,6 +11,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _Modal = _interopRequireDefault(require("./Modal"));
 
+var _excluded = ["children"];
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -31,13 +33,20 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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; }
+
 var ModalContext = /*#__PURE__*/(0, _react.createContext)({
   ask: undefined,
   tell: undefined,
   verify: undefined
 });
 
-var ModalProvider = function ModalProvider(props) {
+var ModalProvider = function ModalProvider(_ref) {
+  var children = _ref.children,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
   var _useState = (0, _react.useState)("tell"),
       _useState2 = _slicedToArray(_useState, 2),
       type = _useState2[0],
@@ -109,7 +118,7 @@ var ModalProvider = function ModalProvider(props) {
       tell: tell,
       verify: verify
     }
-  }, props), props.children, /*#__PURE__*/_react.default.createElement(_Modal.default, {
+  }, rest), children, /*#__PURE__*/_react.default.createElement(_Modal.default, {
     modalContent: modalContent,
     unSetModalContent: unSetModalContent,
     onSubmit: onSubmit,

package/dist/components/Outside.js

@@ -23,10 +23,6 @@ function useOutside(ref, callback) {
      * Alert if clicked on outside of element
      */
     function handleClickOutside(event) {
-      console.log({
-        target: event.target
-      });
-
       if (ref.current && !ref.current.contains(event.target) && callback) {
         callback(event);
       }

package/dist/components/Page.js

@@ -11,8 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _clsx = _interopRequireDefault(require("clsx"));
 
-var _Utilities = _interopRequireDefault(require("./Utilities"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -44,12 +42,9 @@ function Page(_ref) {
       setHasHeader = _useState2[1];
 
   var elementRef = (0, _react.useRef)(null);
-  (0, _react.useEffect)(function () {
-    _Utilities.default.registerFluentBtns();
-  });
   (0, _react.useEffect)(function () {
     if (elementRef && elementRef.current) {
-      var headerElement = elementRef.current.querySelector(".blue-app-header");
+      var headerElement = elementRef.current.querySelector(".blue-header");
       setHasHeader(headerElement !== null && headerElement !== undefined);
     }
   }, [elementRef]);
@@ -61,7 +56,7 @@ function Page(_ref) {
     }
   }, [title]);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _clsx.default)("blue-app-page-wrapper", {
+    className: (0, _clsx.default)("blue-page-wrapper", {
       hasHeader: hasHeader
     }),
     ref: elementRef

package/dist/components/Search.js

@@ -46,7 +46,7 @@ function Search(props) {
       resetIcon = props.resetIcon,
       sidebar = props.sidebar;
 
-  var SearchControlId = "blue-app-search-control-" + _Utilities.default.guid();
+  var SearchControlId = "blue-search-control-" + _Utilities.default.guid();
 
   var _useState = (0, _react.useState)(props.value || ""),
       _useState2 = _slicedToArray(_useState, 2),
@@ -65,14 +65,14 @@ function Search(props) {
   };
 
   return /*#__PURE__*/_react.default.createElement("form", {
-    className: "blue-app-search " + (body ? "blue-app-search-body " : "") + (focus ? "focus " : "") + (sidebar ? "blue-app-search-sidebar " : "") + className,
+    className: "blue-search " + (body ? "blue-search-body " : "") + (focus ? "focus " : "") + (sidebar ? "blue-search-sidebar " : "") + className,
     onSubmit: function onSubmit(event) {
       event.preventDefault();
       toggleSidebar();
       if (_onSubmit) _onSubmit(event);
     }
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "blue-app-search-input-group input-group"
+    className: "blue-search-input-group input-group"
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "input-group-text",
     onClick: function onClick() {
@@ -101,7 +101,7 @@ function Search(props) {
       if (_onChange) _onChange(event);
     },
     id: SearchControlId,
-    className: "blue-app-search-control form-control default input-lg",
+    className: "blue-search-control form-control default input-lg",
     placeholder: placeholder,
     autoFocus: autoFocus,
     style: {
@@ -117,7 +117,7 @@ function Search(props) {
     className: "input-group-btn"
   }, /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
-    className: "blue-app-search-reset-btn btn btn-link btn-lg",
+    className: "blue-search-reset-btn btn btn-link btn-lg",
     onClick: function onClick() {
       var _document$getElementB2;
 
@@ -140,7 +140,7 @@ function Search(props) {
     d: "M4.646 4.646a.5.5 0 01.708 0L8 7.293l2.646-2.647a.5.5 0 01.708.708L8.707 8l2.647 2.646a.5.5 0 01-.708.708L8 8.707l-2.646 2.647a.5.5 0 01-.708-.708L7.293 8 4.646 5.354a.5.5 0 010-.708z"
   }))))), sidebar && /*#__PURE__*/_react.default.createElement(_MenuItem.default, {
     href: "#",
-    className: "blue-app-search-btn",
+    className: "blue-search-btn",
     icon: icon,
     onClick: function onClick(event) {
       event.preventDefault();
@@ -149,7 +149,7 @@ function Search(props) {
         var _document$querySelect;
 
         ;
-        (_document$querySelect = document.querySelector(".blue-app-search-control")) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.select();
+        (_document$querySelect = document.querySelector(".blue-search-control")) === null || _document$querySelect === void 0 ? void 0 : _document$querySelect.select();
       }, 200);
     }
   }));

package/dist/components/SidebarMenu.js

@@ -26,12 +26,9 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 /**
- * Sidebar for the `Grid` component.
+ * Sidebar for the `Layout` component.
  */
 function SidebarMenu(props) {
-  var _props$fluent = props.fluent,
-      fluent = _props$fluent === void 0 ? true : _props$fluent;
-
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
       hasShadow = _useState2[0],
@@ -44,7 +41,7 @@ function SidebarMenu(props) {
   };
 
   (0, _react.useEffect)(function () {
-    var blueAppSidebar = document.querySelector(".blue-app-sidebar");
+    var blueAppSidebar = document.querySelector(".blue-sidebar");
     window.addEventListener("resize", updateDimensions);
 
     if (blueAppSidebar.scrollHeight > blueAppSidebar.clientHeight) {
@@ -63,18 +60,14 @@ function SidebarMenu(props) {
     };
   }, []);
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: "blue-app-sidebar " + (props.sidebarClass ? props.sidebarClass : ""),
+    className: "blue-sidebar " + (props.sidebarClass ? props.sidebarClass : ""),
     style: props.sidebarStyle ? props.sidebarStyle : {}
   }, props.topContent && /*#__PURE__*/_react.default.createElement("div", {
-    className: "blue-app-sidebar-top"
+    className: "blue-sidebar-top"
   }, props.topContent), /*#__PURE__*/_react.default.createElement("div", {
-    className: "blue-app-menu " + (props.menuClass ? props.menuClass : ""),
+    className: "blue-menu " + (props.menuClass ? props.menuClass : ""),
     style: props.menuStyle ? props.menuStyle : {}
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: fluent === true ? "fluent-btn" : ""
-  }, fluent === true ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "fluent-btn-ball"
-  }) : /*#__PURE__*/_react.default.createElement(_react.Fragment, null), props.children)), props.bottomContent && /*#__PURE__*/_react.default.createElement("div", {
-    className: "blue-app-sidebar-bottom " + (hasShadow ? " has-shadow" : "")
+  }, props.children), props.bottomContent && /*#__PURE__*/_react.default.createElement("div", {
+    className: "blue-sidebar-bottom " + (hasShadow ? " has-shadow" : "")
   }, props.bottomContent));
 }

package/dist/components/Status.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Status;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _clsx = _interopRequireDefault(require("clsx"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function Status(_ref) {
+  var alert = _ref.alert,
+      onUnsetAlert = _ref.onUnsetAlert,
+      _ref$successIcon = _ref.successIcon,
+      successIcon = _ref$successIcon === void 0 ? "✔" : _ref$successIcon,
+      _ref$infoIcon = _ref.infoIcon,
+      infoIcon = _ref$infoIcon === void 0 ? "ℹ️" : _ref$infoIcon,
+      _ref$warningIcon = _ref.warningIcon,
+      warningIcon = _ref$warningIcon === void 0 ? "⚠️" : _ref$warningIcon,
+      _ref$dangerIcon = _ref.dangerIcon,
+      dangerIcon = _ref$dangerIcon === void 0 ? "❌" : _ref$dangerIcon,
+      _ref$status = _ref.status,
+      status = _ref$status === void 0 ? null : _ref$status;
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)("blue-status-circle blue-loading blue-status-loading", {
+      "d-block": status === "loading" || alert && alert.status === "loading"
+    })
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "spinner-bounce-circle"
+  }, /*#__PURE__*/_react.default.createElement("div", null), /*#__PURE__*/_react.default.createElement("div", null))), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)("blue-status-circle blue-status-success", {
+      "d-flex": status === "success" || alert && alert.status === "success"
+    })
+  }, successIcon), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)("blue-status-circle blue-status-info", {
+      "d-flex": status === "info" || alert && alert.status === "info"
+    })
+  }, infoIcon), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)("blue-status-circle blue-status-warning", {
+      "d-flex": status === "warning" || alert && alert.status === "warning"
+    })
+  }, warningIcon), /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)("blue-status-circle blue-status-danger", {
+      "d-flex": status === "danger" || alert && alert.status === "danger"
+    })
+  }, dangerIcon), /*#__PURE__*/_react.default.createElement("div", {
+    className: "blue-status-alert alert"
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "btn-close float-end mb-1",
+    "aria-label": "Close"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "alert-body"
+  })), alert && /*#__PURE__*/_react.default.createElement("div", {
+    className: (0, _clsx.default)("blue-status-alert alert d-block", alert.alertClassName, alert.status && "alert-".concat(alert.status))
+  }, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    className: "btn-close float-end mb-1 d-inline-block",
+    "aria-label": "Close",
+    onClick: onUnsetAlert
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "alert-body"
+  }, alert.title && /*#__PURE__*/_react.default.createElement("h2", null, alert.title), alert.detailText && /*#__PURE__*/_react.default.createElement("span", null, alert.detailText))));
+}

package/dist/components/{DropdownMenuItem.js → StatusProvider.js}

@@ -5,13 +5,13 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = DropdownMenuItem;
+exports.StatusProvider = exports.useStatus = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Caret = _interopRequireDefault(require("./Caret"));
+var _Status = _interopRequireDefault(require("./Status"));
 
-var _Utilities = _interopRequireDefault(require("./Utilities"));
+var _excluded = ["children", "successIcon", "infoIcon", "warningIcon", "dangerIcon"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -33,60 +33,61 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-/**
- * @deprecated Use nested `MenuItem`s instead.
- * Dropdown with button for sidebar.
- */
-function DropdownMenuItem(props) {
-  var _useState = (0, _react.useState)(props.isActive || false),
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+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; }
+
+var StatusContext = /*#__PURE__*/(0, _react.createContext)({
+  setAlert: undefined,
+  setStatus: undefined
+});
+
+var StatusProvider = function StatusProvider(_ref) {
+  var children = _ref.children,
+      successIcon = _ref.successIcon,
+      infoIcon = _ref.infoIcon,
+      warningIcon = _ref.warningIcon,
+      dangerIcon = _ref.dangerIcon,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var _useState = (0, _react.useState)(null),
       _useState2 = _slicedToArray(_useState, 2),
-      active = _useState2[0],
-      setActive = _useState2[1];
+      alert = _useState2[0],
+      setAlert = _useState2[1];
 
-  var _useState3 = (0, _react.useState)(false),
+  var _useState3 = (0, _react.useState)(null),
       _useState4 = _slicedToArray(_useState3, 2),
-      showDropdown = _useState4[0],
-      setShowDropdown = _useState4[1];
+      status = _useState4[0],
+      setStatus = _useState4[1];
 
-  var handleClick = function handleClick() {
-    if (props.children) {
-      setShowDropdown(!showDropdown);
+  return /*#__PURE__*/_react.default.createElement(StatusContext.Provider, _extends({
+    value: {
+      setAlert: setAlert,
+      setStatus: setStatus
     }
-  };
-
-  var icon;
-
-  if (typeof props.icon === "string") {
-    // is className
-    icon = /*#__PURE__*/_react.default.createElement("span", {
-      className: props.icon + (props.children ? " blue-app-sidebar-dropdown-icon" : "")
-    });
-  } else {
-    // is element / component
-    icon = props.icon;
+  }, rest), children, /*#__PURE__*/_react.default.createElement(_Status.default, {
+    alert: alert || undefined,
+    onUnsetAlert: function onUnsetAlert() {
+      return setAlert(null);
+    },
+    successIcon: successIcon,
+    infoIcon: infoIcon,
+    warningIcon: warningIcon,
+    dangerIcon: dangerIcon,
+    status: status
+  }));
+};
+
+exports.StatusProvider = StatusProvider;
+
+var useStatus = function useStatus() {
+  var context = (0, _react.useContext)(StatusContext);
+
+  if (context === undefined) {
+    throw new Error("useStatus must be used within a StatusProvider");
   }
 
-  var id = {
-    id: "blue-action-menu-item-" + _Utilities.default.guid()
-  };
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("div", {
-    className: "btn-group w-100"
-  }, /*#__PURE__*/_react.default.createElement("a", _extends({}, id, {
-    className: "blue-app-toggle-page blue-app-sidebar-btn btn pe-0 " + (active ? "active" : ""),
-    href: props.to
-  }), icon, /*#__PURE__*/_react.default.createElement("span", {
-    className: "blue-app-sidebar-label"
-  }, props.label)), /*#__PURE__*/_react.default.createElement("button", {
-    type: "button",
-    className: "btn blue-app-sidebar-btn w-auto ps-0",
-    onClick: handleClick
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "sr-only"
-  }, "Toggle Dropdown"), /*#__PURE__*/_react.default.createElement(_Caret.default, {
-    open: showDropdown,
-    mirrored: true,
-    className: "w-auto ps-5 mt-2"
-  }))), showDropdown && /*#__PURE__*/_react.default.createElement("div", {
-    className: "blue-app-sidebar-dropdown"
-  }, props.children));
-}
+  return context;
+};
+
+exports.useStatus = useStatus;

package/dist/components/Utilities.js

@@ -36,25 +36,25 @@ Utilities.toggleClass = function (element, className) {
 };
 
 Utilities.startLoading = function () {
-  document.querySelectorAll(".blue-app-loading")[0].style.display = "block";
+  document.querySelectorAll(".blue-loading")[0].style.display = "block";
 };
 
 Utilities.finishLoading = function () {
-  document.querySelectorAll(".blue-app-loading")[0].style.display = "";
+  document.querySelectorAll(".blue-loading")[0].style.display = "";
 };
 
 Utilities.showSuccess = function () {
-  document.querySelectorAll(".blue-app-status-success")[0].style.display = "flex";
+  document.querySelectorAll(".blue-status-success")[0].style.display = "flex";
 };
 
 Utilities.hideSuccess = function () {
-  document.querySelectorAll(".blue-app-status-success")[0].style.display = "";
+  document.querySelectorAll(".blue-status-success")[0].style.display = "";
 };
 
 Utilities.toggleActions = function () {
-  this.toggleClass(document.querySelector(".blue-app-wrapper"), "active");
-  this.toggleClass(document.querySelector(".blue-app-grid"), "wrapper-in");
-  var els = document.querySelectorAll(".blue-app-actions");
+  this.toggleClass(document.querySelector(".blue-wrapper"), "active");
+  this.toggleClass(document.querySelector(".blue-layout"), "wrapper-in");
+  var els = document.querySelectorAll(".blue-actions");
 
   for (var i = 0; i < els.length; i++) {
     this.toggleClass(els[i], "open");
@@ -63,8 +63,8 @@ Utilities.toggleActions = function () {
 
 Utilities.resetAlertMessage = function () {
   var alertClassName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "info";
-  var alertElement = document.querySelectorAll(".blue-app-status-alert")[0];
-  document.querySelectorAll(".blue-app-status-" + alertClassName)[0].style.display = "";
+  var alertElement = document.querySelectorAll(".blue-status-alert")[0];
+  document.querySelectorAll(".blue-status-" + alertClassName)[0].style.display = "";
   alertElement.style.display = "";
   this.removeClass(alertElement, "alert-" + (alertClassName === "loading" ? "info" : alertClassName));
 };
@@ -75,13 +75,13 @@ Utilities.setAlertMessage = function (message) {
   var alertClassName = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : "info";
   var close = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
   var detailText = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : undefined;
-  var alertElement = document.querySelectorAll(".blue-app-status-alert")[0];
+  var alertElement = document.querySelectorAll(".blue-status-alert")[0];
 
   if (alertClassName.indexOf("alert-") > -1) {
     alertClassName = alertClassName.replace("alert-", "");
   }
 
-  document.querySelectorAll(".blue-app-status-" + alertClassName)[0].style.display = "flex";
+  document.querySelectorAll(".blue-status-" + alertClassName)[0].style.display = "flex";
   alertElement.style.display = "block";
   this.addClass(alertElement, "alert-" + (alertClassName === "loading" ? "info" : alertClassName));
   alertElement.querySelector(".alert-body").innerHTML = "<h2>" + message + "</h2>";
@@ -117,24 +117,6 @@ Utilities.scrollToTop = function () {
     top: 0
   });
 };
-/**
- * @deprecated Fluent buttons got removed from blue-react.
- */
-
-
-Utilities.fluentBtnsListener = function (event, btn) {};
-/**
- * @deprecated Fluent buttons got removed from blue-react.
- */
-
-
-Utilities.unregisterFluentBtns = function () {};
-/**
- * @deprecated Fluent buttons got removed from blue-react.
- */
-
-
-Utilities.registerFluentBtns = function () {};
 
 Utilities.fetchData = function (input) {
   var init = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;