blue-react 9.0.0-alpha2 → 9.0.0

package/dist/style.scss

@@ -18,10 +18,9 @@
 @import "./styles/_router";
 @import "./styles/_status";
 @import "./styles/_layout";
+@import "./styles/_sidebar";
 @import "./styles/_search";
 @import "./styles/action-menu";
 @import "./styles/_caret";
 @import "./styles/_tooltips";
 @import "./styles/_hover";
-
-@import "./styles/_bootstrap-optimizations";

package/dist/styles/_bootstrap-variables.scss

@@ -12,5 +12,5 @@ $custom-checkbox-indicator-border-radius: $border-radius-sm !default;
 $link-decoration: none !default;
 $link-hover-decoration: underline !default;
 
-$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
-    Cantarell, "Helvetica Neue", sans-serif !default;
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Roboto, Oxygen-Sans,
+    Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default;

package/dist/styles/_bootstrap.scss

@@ -48,6 +48,7 @@
 @import "node_modules/bootstrap/scss/carousel";
 @import "node_modules/bootstrap/scss/spinners";
 @import "node_modules/bootstrap/scss/offcanvas";
+@import "node_modules/bootstrap/scss/placeholders";
 
 // Helpers
 @import "node_modules/bootstrap/scss/helpers";

package/dist/styles/_general.scss

@@ -131,8 +131,8 @@ body {
 
     @media screen and (min-width: 768px) {
         .sign-in-container {
-            padding: 0 calc(50% - 18rem);
-            width: auto;
+            padding: var(--blue-sign-in-container-md-padding, 0 calc(50% - 18rem));
+            width: var(--blue-sign-in-container-md-width, auto);
         }
     }
 }

package/dist/styles/_layout.scss

@@ -59,7 +59,7 @@
     height: $normal-size;
     left: 0;
     top: 0;
-    z-index: 3;
+    z-index: 5;
 }
 
 .blue-header {
@@ -67,10 +67,6 @@
     color: $header-color;
 }
 
-// .blue-layout:not(.wrapper-in) .blue-header {
-//     overflow: hidden;
-// }
-
 .blue-header {
     height: $normal-size;
     position: fixed;
@@ -181,7 +177,7 @@
             display: none;
         }
 
-        .blue-header {
+        &.hideToggleExpandSidebar .blue-header {
             left: 0;
         }
     }
@@ -200,7 +196,7 @@
     &,
     &:hover,
     &:focus {
-        color: $sidebar-color;
+        color: var(--blue-sidebar-color);
         background-color: var(--blue-sidebar-bg);
         border-color: transparent;
     }

package/dist/styles/_sidebar.scss

@@ -0,0 +1,36 @@
+.blue-sidebar-state {
+    &.open {
+        @include openSidebarMenu();
+
+        .blue-menu-item {
+            width: $bla-sidebar-width;
+        }
+
+        .blue-menu-item {
+            & > * {
+                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/styles/_variables.scss

@@ -60,11 +60,7 @@ $sidebar-open-bg: darken($sidebar-bg, 30%) !default;
 $sidebar-deep-bg: darken($sidebar-bg, 4%) !default;
 
 // Text color of sidebar.
-$blue-sidebar-color-h: 0 !default;
-$blue-sidebar-color-s: 100% !default;
-$blue-sidebar-color-l: 100% !default;
-$blue-sidebar-color: hsl($blue-sidebar-color-h, $blue-sidebar-color-s, $blue-sidebar-color-l) !default;
-$sidebar-color: $blue-sidebar-color !default;
+$sidebar-color: #fff !default;
 
 // Color of indicator for active sidebar item.
 $sidebar-indicator-color: $sidebar-color !default;
@@ -92,10 +88,7 @@ $scrollbar-size: 10px;
 
 :root {
     --blue-sidebar-width: #{$bla-sidebar-width};
-    --blue-sidebar-color-h: #{$blue-sidebar-color-h};
-    --blue-sidebar-color-s: #{$blue-sidebar-color-s};
-    --blue-sidebar-color-l: #{$blue-sidebar-color-l};
-    --blue-sidebar-color: #{$blue-sidebar-color};
+    --blue-sidebar-color: #{$sidebar-color};
     --blue-theme: var(--theme, #{$theme});
     --blue-shimmering: 0.8;
 

package/dist/styles/mixins/_sidebar.scss

@@ -94,7 +94,8 @@
         }
 
         &:hover,
-        &:active {
+        &:active,
+        &.highlighted {
             color: inherit;
             border-color: transparent;
 
@@ -104,6 +105,19 @@
             }
         }
 
+        &.highlighted {
+            &::before {
+                opacity: 0.16;
+            }
+        }
+
+        &:hover,
+        &:active {
+            &::before {
+                opacity: 0.25;
+            }
+        }
+
         &.active::after {
             content: "";
             position: absolute;
@@ -127,7 +141,7 @@
 
     .blue-sidebar {
         width: $width;
-        color: $sidebar-color;
+        color: var(--blue-sidebar-color);
         background: var(--blue-sidebar-bg);
         position: fixed;
         left: 0;

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.
      */
@@ -76,6 +84,7 @@ export interface LayoutProps {
 }
 export interface LayoutState {
     sidebarIn: boolean;
+    expandSidebar: boolean;
     match: any;
     history: string[];
     hash: string;
@@ -108,7 +117,6 @@ export default class Layout extends Component<LayoutProps, LayoutState> {
     constructor(props: LayoutProps);
     onHashChange(): void;
     static get defaultProps(): {
-        expandSidebar: boolean;
         hideSidebarMenu: boolean;
         unrouteable: boolean;
         disableTitleSet: boolean;
@@ -120,6 +128,7 @@ export default class Layout extends Component<LayoutProps, LayoutState> {
             success: JSX.Element;
             warning: JSX.Element;
         };
+        hideToggleExpandSidebar: boolean;
     };
     componentDidMount(): void;
     componentWillUnmount(): void;
@@ -130,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/MenuItem.d.ts

@@ -30,6 +30,10 @@ export interface MenuItemProps {
      * Should be set as active.
      */
     isActive?: boolean;
+    /**
+     * Set true to highlight the current menu item.
+     */
+    highlighted?: boolean;
     /**
      * When using Blue React's routing system: define this link as home page link.
      */

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

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React, { ReactNode, RefObject } from "react";
 export interface SearchProps {
     autoFocus?: boolean;
     /**
@@ -7,8 +7,8 @@ export interface SearchProps {
     body?: boolean;
     className?: string;
     icon?: any;
-    onChange?: (event: React.ChangeEvent) => void;
-    onSubmit?: (event: React.FormEvent) => void;
+    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
+    onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
     placeholder?: string;
     /**
      * Allow reset?
@@ -25,6 +25,10 @@ export interface SearchProps {
     value?: string;
     children?: ReactNode;
     id?: string;
+    /**
+     * Set `ref` prop of the input element. Let's you take control of it from the outside, e.g. to set focus.
+     */
+    inputRef?: RefObject<HTMLInputElement>;
 }
 /**
  * A search bar that can be placed to the sidebar or on a page.

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/index.d.ts

@@ -21,9 +21,6 @@ export { BodyProps } from "./dist/types/components/Body"
 export { default as Caret } from "./dist/types/components/Caret"
 export { CaretProps } from "./dist/types/components/Caret"
 
-export { default as DocumentView } from "./dist/types/components/DocumentView"
-export { DocumentViewProps } from "./dist/types/components/DocumentView"
-
 export { default as Header } from "./dist/types/components/Header"
 export { HeaderProps } from "./dist/types/components/Header"
 
@@ -53,6 +50,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

@@ -2,7 +2,6 @@ exports.ActionMenu = require("./dist/components/ActionMenu.js")["default"]
 exports.ActionMenuSwitch = require("./dist/components/ActionMenuSwitch.js")["default"]
 exports.Body = require("./dist/components/Body.js")["default"]
 exports.Caret = require("./dist/components/Caret.js")["default"]
-exports.DocumentView = require("./dist/components/DocumentView.js")["default"]
 exports.Layout = require("./dist/components/Layout.js")["default"]
 exports.Header = require("./dist/components/Header.js")["default"]
 exports.HeaderTitle = require("./dist/components/HeaderTitle.js")["default"]
@@ -15,6 +14,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,11 +1,11 @@
 {
     "name": "blue-react",
-    "version": "9.0.0-alpha2",
+    "version": "9.0.0",
     "description": "Blue React Components",
     "license": "LGPL-3.0-or-later",
     "main": "index.js",
     "types": "index.d.ts",
-    "homepage": "https://bruegmann.github.io/blue-react/v8",
+    "homepage": "https://bruegmann.github.io/blue-react/v9",
     "repository": {
         "type": "git",
         "url": "https://github.com/bruegmann/blue-react.git"
@@ -26,13 +26,13 @@
         "predeploy": "npm run build-docs",
         "deploy": "gh-pages --dist build --dest v9",
         "prepublishOnly": "npm i && npm run build-release",
-        "release": "npm publish --tag next && npm run deploy",
+        "release": "npm publish && npm run deploy",
         "prettier": "npx prettier --write .",
         "license-report": "npx license-report --prod --output=json > ./src/docs/data/license-report.json"
     },
     "dependencies": {
         "@popperjs/core": "^2.11.5",
-        "bootstrap": "~5.3.0-alpha3",
+        "bootstrap": "~5.3.0",
         "clsx": "^1.1.1"
     },
     "peerDependencies": {
@@ -54,7 +54,6 @@
         "@types/react-router-dom": "^5.3.3",
         "@types/react-syntax-highlighter": "^13.5.0",
         "autoprefixer": "^10.3.6",
-        "blue-web-components": "github:bruegmann/blue-web-components",
         "gh-pages": "^3.1.0",
         "license-report": "^6.2.0",
         "lint-staged": "^11.1.2",

package/dist/styles/_bootstrap-optimizations.scss

@@ -1,5 +0,0 @@
-@include media-breakpoint-up(sm) {
-    .form-horizontal .col-form-label {
-        text-align: right;
-    }
-}