blue-react 8.8.4 → 8.9.0

package/dist/style.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue React v8.8.4 (https://bruegmann.github.io/blue-react)
+ * Blue React v8.9.0 (https://bruegmann.github.io/blue-react)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-react/blob/master/LICENSE).
 */
 
@@ -17,6 +17,7 @@
 @import "./styles/_router";
 @import "./styles/_status";
 @import "./styles/_layout";
+@import "./styles/_sidebar";
 @import "./styles/_search";
 @import "./styles/action-menu";
 @import "./styles/_switch";

package/dist/styles/_layout.scss

@@ -21,28 +21,6 @@
             padding-right: 0;
         }
     }
-
-    &.open {
-        @media screen and (max-width: 1400px) {
-            .router-page.active {
-                .blue-page {
-                    filter: blur(3px) brightness(0.8);
-                }
-            }
-        }
-
-        @include openSidebarMenu();
-    }
-
-    &:not(.open) {
-        .blue-sidebar-visible-on-open {
-            display: none;
-        }
-
-        .blue-sidebar-hidden-on-open {
-            animation: fade-in 1s;
-        }
-    }
 }
 
 .blue-header-wrapper {
@@ -59,7 +37,7 @@
     height: $normal-size;
     left: 0;
     top: 0;
-    z-index: 3;
+    z-index: 5;
 }
 
 .blue-header {
@@ -67,10 +45,6 @@
     color: $header-color;
 }
 
-// .blue-layout:not(.wrapper-in) .blue-header {
-//     overflow: hidden;
-// }
-
 .blue-header {
     height: $normal-size;
     position: fixed;
@@ -181,7 +155,7 @@
             display: none;
         }
 
-        .blue-header {
+        &.hideToggleExpandSidebar .blue-header {
             left: 0;
         }
     }

package/dist/styles/_sidebar.scss

@@ -0,0 +1,42 @@
+.blue-sidebar-state {
+    &.open {
+        @media screen and (max-width: 1400px) {
+            .router-page.active {
+                .blue-page {
+                    filter: blur(3px) brightness(0.8);
+                }
+            }
+        }
+
+        @include openSidebarMenu();
+
+        .blue-menu-item:not(.blue-open-menu) {
+            width: $bla-sidebar-width;
+
+            & > * {
+                width: auto;
+            }
+        }
+    }
+
+    &:not(.open) {
+        .blue-sidebar-visible-on-open {
+            display: none;
+        }
+
+        .blue-sidebar-hidden-on-open {
+            animation: fade-in 1s;
+        }
+    }
+}
+
+@keyframes blue-menu-item-dropdown-from-start {
+    from {
+        transform: translateX(-50%);
+        opacity: 0;
+    }
+}
+
+.blue-menu-item-dropdown-from-start {
+    animation: blue-menu-item-dropdown-from-start 0.15s;
+}

package/dist/types/components/Layout.d.ts

@@ -17,10 +17,18 @@ export interface LayoutProps {
      */
     onChangeSidebarIn?: (sidebarIn: boolean) => void;
     style?: CSSProperties;
+    /**
+     * Set `true` to hide button to toggle `expandSidebar` state.
+     */
+    hideToggleExpandSidebar?: boolean;
     /**
      * Sidebar is automatically expanded on wider views.
      */
     expandSidebar?: boolean;
+    /**
+     * React to changes of the `expandSidebar` state.
+     */
+    onChangeExpandSidebar?: (expandSidebar: boolean) => void;
     /**
      * Disables sidebar.
      */
@@ -48,6 +56,11 @@ export interface LayoutProps {
      * If you don't use blueicon, you can define another icon element for the sidebar toggle button.
      */
     sidebarToggleIconComponent?: any;
+    /**
+     * Set `true` if you want to use the Utilities functions for status and alert.
+     * Set `false` if you want to use `StatusProvider` instead.
+     */
+    enableStatus?: boolean;
     /**
      * Will replace status icons with custom ones. This will also overwrite the `useBlueicons` option.
      * This can be a SVG component or a normal element component.
@@ -71,6 +84,7 @@ export interface LayoutProps {
 }
 export interface LayoutState {
     sidebarIn: boolean;
+    expandSidebar: boolean;
     match: any;
     history: string[];
     hash: string;
@@ -103,17 +117,18 @@ export default class Layout extends Component<LayoutProps, LayoutState> {
     constructor(props: LayoutProps);
     onHashChange(): void;
     static get defaultProps(): {
-        expandSidebar: boolean;
         hideSidebarMenu: boolean;
         unrouteable: boolean;
         disableTitleSet: boolean;
         sidebarToggleIconComponent: JSX.Element;
+        enableStatus: boolean;
         statusIcons: {
             danger: JSX.Element;
             info: JSX.Element;
             success: JSX.Element;
             warning: JSX.Element;
         };
+        hideToggleExpandSidebar: boolean;
     };
     componentDidMount(): void;
     componentWillUnmount(): void;
@@ -124,5 +139,6 @@ export default class Layout extends Component<LayoutProps, LayoutState> {
     addEventListener(param1: any, param2: any, param3: any, listenerId?: string): void;
     removeEventListener(type: string, listenerId: string): void;
     removeDuplicatedEventListeners(): void;
+    toggleExpandSidebar(): void;
     render(): JSX.Element;
 }

package/dist/types/components/SidebarMenuItem.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+import { MenuItemProps } from "./MenuItem";
+export interface SidebarMenuItemProps extends MenuItemProps {
+    outerClass?: string;
+}
+/**
+ * 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.
+ *
+ * **Important!** Set the following props to the surrounding `SidebarMenu` to provide problems with tooltips:
+ * ```jsx
+ * <SidebarMenu
+ *     sidebarClass="overflow-visible"
+ *     menuClass="overflow-visible"
+ * >
+ *     ...
+ * </SidebarMenu>
+ * ```
+ */
+export default function SidebarMenuItem({ outerClass, children, onClick, ...props }: SidebarMenuItemProps): JSX.Element;

package/dist/types/components/SidebarToggler.d.ts

@@ -0,0 +1,10 @@
+import { MouseEventHandler, ReactNode } from "react";
+export interface SidebarTogglerProps {
+    className?: string;
+    sidebarToggleIconComponent: ReactNode;
+    onClick: MouseEventHandler<HTMLButtonElement>;
+}
+/**
+ * Button to toggle sidebar state. Designed for internal use inside of `Layout`.
+ */
+export default function SidebarToggler({ className, sidebarToggleIconComponent, onClick }: SidebarTogglerProps): JSX.Element;

package/dist/types/components/Utilities.d.ts

@@ -13,9 +13,13 @@ export declare function hideSuccess(): void;
 export declare function toggleActions(): void;
 /**
  * Resets alert messages that was set with `setAlertMessage`.
+ * When using React, you should use `StatusProvider` instead: https://bruegmann.github.io/blue-react/v8/component/StatusProvider
  * @param alertClassName Leave empty to reset messages of any status type
  */
 export declare function resetAlertMessage(alertClassName?: StatusType): void;
+/**
+ * When using React, you should use `StatusProvider` instead: https://bruegmann.github.io/blue-react/v8/component/StatusProvider
+ */
 export declare function setAlertMessage(message: string, alertClassName?: StatusType, close?: boolean, detailText?: string): void;
 export declare const guid: () => string;
 export declare function scrollToTop(): void;

package/index.d.ts

@@ -53,6 +53,9 @@ export { SearchProps } from "./dist/types/components/Search"
 export { default as SidebarMenu } from "./dist/types/components/SidebarMenu"
 export { SidebarMenuProps } from "./dist/types/components/SidebarMenu"
 
+export { default as SidebarMenuItem } from "./dist/types/components/SidebarMenuItem"
+export { SidebarMenuItemProps } from "./dist/types/components/SidebarMenuItem"
+
 export { default as SlimContainer } from "./dist/types/components/SlimContainer"
 export { SlimContainerProps } from "./dist/types/components/SlimContainer"
 

package/index.js

@@ -15,6 +15,7 @@ exports.Outside = require("./dist/components/Outside.js")["default"]
 exports.Page = require("./dist/components/Page.js")["default"]
 exports.Search = require("./dist/components/Search.js")["default"]
 exports.SidebarMenu = require("./dist/components/SidebarMenu.js")["default"]
+exports.SidebarMenuItem = require("./dist/components/SidebarMenuItem.js")["default"]
 exports.SlimContainer = require("./dist/components/SlimContainer.js")["default"]
 exports.Status = require("./dist/components/Status.js")["default"]
 exports.StatusProvider = require("./dist/components/StatusProvider.js")["StatusProvider"]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "blue-react",
-    "version": "8.8.4",
+    "version": "8.9.0",
     "description": "Blue React Components",
     "license": "LGPL-3.0-or-later",
     "main": "index.js",