blue-react 9.0.0-alpha1 → 9.0.0

package/dist/style.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue React v9.0.0-alpha1-alpha1-alpha1-alpha1-alpha1-alpha1-alpha1 (https://bruegmann.github.io/blue-react)
+ * Blue React v9.0.0-alpha2 (https://bruegmann.github.io/blue-react)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-react/blob/master/LICENSE).
 */
 
@@ -11,16 +11,16 @@
 @import "./styles/_mixins";
 @import "./styles/_keyframes";
 
-@import "./styles/_bootstrap";
+// @import "./styles/_bootstrap";
+@import "node_modules/bootstrap/scss/bootstrap";
 
 @import "./styles/_general";
 @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

@@ -1,11 +1,3 @@
-// Bootstrap
-$primary: #007bff !default;
-$success: #4bd763 !default;
-$info: rgb(62, 158, 187) !default;
-$warning: #f0ad4e !default;
-$danger: #d9534f !default;
-// Bootstrap ENDE
-
 // Main color theme. E.g. used for background for body and sidebar.
 $theme: $primary !default;
 
@@ -68,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;
@@ -100,16 +88,13 @@ $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;
 
-    --blue-app-bg: var(--blue-theme, #{$app-bg});
-    --blue-sidebar-bg: var(--blue-theme, #{$sidebar-bg});
-    --blue-header-bg: var(--blue-theme, #{$header-bg});
+    --blue-app-bg: #{$app-bg};
+    --blue-sidebar-bg: #{$sidebar-bg};
+    --blue-header-bg: #{$header-bg};
     --blue-action-link-bg-color: var(--blue-theme);
     --blue-menu-item-indicator-bg: #{$sidebar-indicator-color};
 }

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.
      */
@@ -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/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/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

@@ -18,15 +18,9 @@ export { ActionMenuSwitchProps } from "./dist/types/components/ActionMenuSwitch"
 export { default as Body } from "./dist/types/components/Body"
 export { BodyProps } from "./dist/types/components/Body"
 
-export { default as BodyRounded } from "./dist/types/components/BodyRounded"
-export { BodyRoundedProps } from "./dist/types/components/BodyRounded"
-
 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"
 
@@ -56,12 +50,17 @@ 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"
 
 export { default as Status } from "./dist/types/components/Status"
 export { StatusProps } from "./dist/types/components/Status"
 
+export { StatusProvider, useStatus } from "./dist/types/components/StatusProvider"
+
 export { default as Switch } from "./dist/types/components/Switch"
 export { SwitchProps } from "./dist/types/components/Switch"
 

package/index.js

@@ -1,9 +1,7 @@
 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.BodyRounded = require("./dist/components/BodyRounded.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"]
@@ -16,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-alpha1",
+    "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.2.2",
+        "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/components/BodyRounded.js

@@ -1,44 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = BodyRounded;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Body = _interopRequireDefault(require("./Body"));
-
-var _excluded = ["classNameTop", "classNameBottom", "children"];
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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; }
-
-/**
- * Extended variation of `Body` with rounded elements on top and bottom of the page.
- */
-function BodyRounded(_ref) {
-  var classNameTop = _ref.classNameTop,
-      classNameBottom = _ref.classNameBottom,
-      children = _ref.children,
-      bodyProps = _objectWithoutProperties(_ref, _excluded);
-
-  return /*#__PURE__*/_react.default.createElement(_Body.default, bodyProps, /*#__PURE__*/_react.default.createElement("div", {
-    className: "blue-app-body-rounded-top bg-theme pt-1 d-none d-md-block " + classNameTop,
-    style: {
-      height: "1rem"
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "rounded-top bg-body w-100 h-100"
-  })), children, /*#__PURE__*/_react.default.createElement("div", {
-    className: "blue-app-body-rounded-bottom bg-theme pb-1 d-none d-md-block " + classNameBottom,
-    style: {
-      height: "1rem"
-    }
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "rounded-bottom bg-body w-100 h-100"
-  })));
-}