blue-react 7.9.1 → 8.0.0-next.4

package/dist/styles/mixins/_sidebar.scss

@@ -1,69 +1,69 @@
 @mixin openSidebarMenu() {
-    .blue-app-sidebar-hidden-on-open {
+    .blue-sidebar-hidden-on-open {
         display: none;
     }
 
-    .blue-app-sidebar-visible-on-open {
+    .blue-sidebar-visible-on-open {
         animation: fade-in 1s;
         display: flex;
     }
 
-    .blue-app-sidebar-label {
+    .blue-menu-item-label {
         display: inline-block;
     }
 
-    .blue-app-sidebar {
+    .blue-sidebar {
         z-index: 42;
         box-shadow: 0.6rem 6rem 6rem rgba(0, 0, 0, 0.4);
         // background-color: darken($theme, 30%);
     }
 
-    .blue-app-sidebar,
-    .blue-app-sidebar .blue-app-sidebar-btn {
+    .blue-sidebar,
+    .blue-sidebar .blue-menu-item {
         width: $bla-sidebar-width;
     }
 
-    .blue-app-sidebar .blue-app-sidebar-btn {
+    .blue-sidebar .blue-menu-item {
         & > * {
             width: auto;
         }
     }
 
-    .blue-app-sub-sidebar {
+    .blue-sub-sidebar {
         left: $bla-sidebar-width;
     }
 
-    .blue-app-sidebar-dropdown-caret.caret {
+    .blue-menu-item-dropdown-caret.caret {
         display: flex;
     }
 
-    .blue-app-sidebar-dropdown {
-        .blue-app-sidebar-btn {
+    .blue-menu-item-dropdown {
+        .blue-menu-item {
             width: 100%;
         }
     }
 
     /* search */
-    .blue-app-search {
+    .blue-search {
         background-color: $sidebar-search-bg;
     }
 
-    .blue-app-search-btn {
+    .blue-search-btn {
         display: none;
     }
 
-    .blue-app-search-input-group {
+    .blue-search-input-group {
         display: flex;
         align-items: center;
     }
 
-    .blue-app-header-logo.sidebar {
+    .blue-header-logo.sidebar {
         transform: translateX(0);
     }
 }
 
-@mixin blue-app-sidebar($width) {
-    .blue-app-sidebar-btn {
+@mixin blue-sidebar($width) {
+    .blue-menu-item {
         color: $sidebar-color;
         width: $normal-size;
         height: $normal-size;
@@ -94,12 +94,12 @@
             animation: sidebar-menu-item-indicator-in 0.2s ease-in-out;
         }
 
-        & > * + .blue-app-sidebar-label {
+        & > * + .blue-menu-item-label {
             margin-left: 0.5rem;
         }
     }
 
-    .blue-app-sidebar {
+    .blue-sidebar {
         width: $width;
         color: $sidebar-color;
         background: var(--sidebar-bg);
@@ -112,19 +112,19 @@
         flex-direction: column;
         @include slide-transition();
 
-        .blue-app-menu {
+        .blue-menu {
             overflow-y: auto;
             flex: 1;
             @include scroll-shadow(var(--sidebar-bg), $sidebar-bg);
         }
 
         &:hover {
-            .blue-app-sidebar-btn {
+            .blue-menu-item {
                 background-color: var(--sidebar-bg);
             }
         }
 
-        .blue-app-sidebar-btn {
+        .blue-menu-item {
             & > * {
                 width: 100%;
             }

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

@@ -1,11 +1,11 @@
 import { Component, CSSProperties } from "react";
 declare global {
     interface Window {
-        blueGridRef: any;
+        blueLayoutRef: any;
         toggleSidebarEvent: any;
     }
 }
-export interface GridProps {
+export interface LayoutProps {
     id?: string;
     sidebarIn?: boolean;
     style?: CSSProperties;
@@ -56,11 +56,11 @@ export interface GridProps {
     disableHeaders?: boolean;
     /**
      * Define a function, that will be fired when switching routes. When your function returns `true`, the default route behaviour will be blocked.
-     * You can use something like `window.blueGridRef.setState({ blockRouting: onHashChange })` globally to set the value from anywhere in your app.
+     * You can use something like `window.blueLayoutRef.setState({ blockRouting: onHashChange })` globally to set the value from anywhere in your app.
      */
     blockRouting?: (newMatch: string[], currentMatch: string[]) => void | boolean;
 }
-export interface GridState {
+export interface LayoutState {
     sidebarIn?: boolean;
     match: any;
     history: string[];
@@ -69,23 +69,22 @@ export interface GridState {
     blockRouting?: (newMatch: string[], currentMatch: string[]) => void | boolean;
 }
 /**
- * The main component. As soon this component is mounted, it is globally available under `window.blueGridRef`.
- * Also you can append your own event listeners with `blueGridRef.addEventListener(eventName, (prevProps, prevState) => { })`
- * and remove it with `blueGridRef.removeEventListener(eventName, listener)`.
+ * The main component. As soon this component is mounted, it is globally available under `window.blueLayoutRef`.
+ * Also you can append your own event listeners with `blueLayoutRef.addEventListener(eventName, (prevProps, prevState) => { })`.
  *
  * Allowed event listeners:
  *
  * * **componentDidUpdate** - Component was updated.
- *   Example: `blueGridRef.addEventListener("componentDidUpdate", (prevProps, prevState) => { })`
+ *   Example: `blueLayoutRef.addEventListener("componentDidUpdate", (prevProps, prevState) => { })`
  * * **pageDidShowAgain** - Page appeared again with the same old state. In the callback function you can reinitialize things.
- *   Example: `blueGridRef.addEventListener("pageDidShowAgain", "home", (prevProps, prevState) => { })`
+ *   Example: `blueLayoutRef.addEventListener("pageDidShowAgain", "home", (prevProps, prevState) => { })`
  * * **pageDidHide** - This page disappeared and another page appears instead.
- *   Example: `blueGridRef.addEventListener("pageDidHide", "home", (prevProps, prevState) => { })`
+ *   Example: `blueLayoutRef.addEventListener("pageDidHide", "home", (prevProps, prevState) => { })`
  */
-export default class Grid extends Component<GridProps, GridState> {
+export default class Layout extends Component<LayoutProps, LayoutState> {
     defaultMatch: string[];
     eventListeners: any[];
-    constructor(props: GridProps);
+    constructor(props: LayoutProps);
     onHashChange(event: HashChangeEvent): void;
     static get defaultProps(): {
         expandSidebar: boolean;
@@ -102,11 +101,10 @@ export default class Grid extends Component<GridProps, GridState> {
     };
     componentDidMount(): void;
     componentWillUnmount(): void;
-    componentDidUpdate(prevProps: GridProps, prevState: GridState): void;
+    componentDidUpdate(prevProps: LayoutProps, prevState: LayoutState): void;
     toggleSidebar(event: any): void;
     hideSidebar(e: any): void;
     initMatch(): void;
     addEventListener(param1: any, param2: any, param3: any): void;
-    removeEventListener(type: string, listener: any): void;
     render(): JSX.Element;
 }

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

@@ -0,0 +1,111 @@
+import { Component, CSSProperties } from "react";
+declare global {
+    interface Window {
+        blueLayoutRef: any;
+        toggleSidebarEvent: any;
+    }
+}
+export interface LayoutProps {
+    id?: string;
+    sidebarIn?: boolean;
+    style?: CSSProperties;
+    /**
+     * Sidebar is automatically expanded on wider views.
+     */
+    expandSidebar?: boolean;
+    /**
+     * Disables sidebar.
+     */
+    hideSidebarMenu?: boolean;
+    /**
+     * Registers pages for the built-in routing system. Example: `[{name: "home", component: <HomePage />}]`
+     */
+    pages?: {
+        name: string;
+        component: JSX.Element;
+    }[];
+    /**
+     * When `true`, always the "home" route will be rendered.
+     */
+    unrouteable?: boolean;
+    /**
+     * Extends `className`.
+     */
+    className?: string;
+    /**
+     * By default, the document title will automatically set. Set this prop to `true` to disable this behaviour.
+     */
+    disableTitleSet?: boolean;
+    /**
+     * If you don't use blueicon, you can define another icon element for the sidebar toggle button.
+     */
+    sidebarToggleIconComponent?: any;
+    /**
+     * 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.
+     */
+    statusIcons?: {
+        danger: any;
+        info: any;
+        success: any;
+        warning: any;
+    };
+    /**
+     * Disables the header bars on pages.
+     */
+    disableHeaders?: boolean;
+    /**
+     * Define a function, that will be fired when switching routes. When your function returns `true`, the default route behaviour will be blocked.
+     * You can use something like `window.blueLayoutRef.setState({ blockRouting: onHashChange })` globally to set the value from anywhere in your app.
+     */
+    blockRouting?: (newMatch: string[], currentMatch: string[]) => void | boolean;
+}
+export interface LayoutState {
+    sidebarIn?: boolean;
+    match: any;
+    history: string[];
+    hash: string;
+    hashHistory: string[];
+    blockRouting?: (newMatch: string[], currentMatch: string[]) => void | boolean;
+}
+/**
+ * The main component. As soon this component is mounted, it is globally available under `window.blueLayoutRef`.
+ * Also you can append your own event listeners with `blueLayoutRef.addEventListener(eventName, (prevProps, prevState) => { })`.
+ *
+ * Allowed event listeners:
+ *
+ * * **componentDidUpdate** - Component was updated.
+ *   Example: `blueLayoutRef.addEventListener("componentDidUpdate", (prevProps, prevState) => { })`
+ * * **pageDidShowAgain** - Page appeared again with the same old state. In the callback function you can reinitialize things.
+ *   Example: `blueLayoutRef.addEventListener("pageDidShowAgain", "home", (prevProps, prevState) => { })`
+ * * **pageDidHide** - This page disappeared and another page appears instead.
+ *   Example: `blueLayoutRef.addEventListener("pageDidHide", "home", (prevProps, prevState) => { })`
+ */
+export default class Layout extends Component<LayoutProps, LayoutState> {
+    defaultMatch: string[];
+    eventListeners: any[];
+    constructor(props: LayoutProps);
+    onHashChange(): void;
+    static get defaultProps(): {
+        expandSidebar: boolean;
+        hideSidebarMenu: boolean;
+        unrouteable: boolean;
+        disableTitleSet: boolean;
+        sidebarToggleIconComponent: JSX.Element;
+        statusIcons: {
+            danger: JSX.Element;
+            info: JSX.Element;
+            success: JSX.Element;
+            warning: JSX.Element;
+        };
+    };
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: LayoutProps, prevState: LayoutState): void;
+    toggleSidebar(event: any): void;
+    hideSidebar(e: any): void;
+    initMatch(): void;
+    addEventListener(param1: any, param2: any, param3: any): void;
+    removeEventListener(type: string, listener: any): void;
+    render(): JSX.Element;
+}

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

@@ -10,6 +10,10 @@ export interface MenuItemProps {
     exact?: boolean;
     href?: string;
     onClick?: (event: React.MouseEvent) => void;
+    /**
+     * Will be fired after `onClick`
+     */
+    onClickAttached?: (event: React.MouseEvent) => void;
     /**
      * Icon component or a class name.
      */

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

@@ -19,6 +19,6 @@ export interface ModalProps {
  * 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.
  */
 export default function Modal({ modalContent, unSetModalContent, onSubmit, defaultInput, type }: ModalProps): JSX.Element;

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

@@ -1,5 +1,8 @@
-/// <reference types="react" />
-declare const ModalProvider: (props: any) => JSX.Element;
+import { ReactNode } from "react";
+export interface ModalProviderProps {
+    children?: ReactNode;
+}
+declare const ModalProvider: ({ children, ...rest }: ModalProviderProps) => JSX.Element;
 declare const useModal: () => {
     ask: (text: string) => Promise<string | boolean>;
     tell: (text: string) => Promise<boolean>;

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

@@ -1,9 +1,5 @@
 /// <reference types="react" />
 export interface SidebarMenuProps {
-    /**
-     * Should menu items have a Fluent effect. Default: `true`
-     */
-    fluent?: boolean;
     /**
      * Extends the class name by the sidebar.
      */
@@ -31,6 +27,6 @@ export interface SidebarMenuProps {
     children?: any;
 }
 /**
- * Sidebar for the `Grid` component.
+ * Sidebar for the `Layout` component.
  */
 export default function SidebarMenu(props: SidebarMenuProps): JSX.Element;

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

@@ -0,0 +1,12 @@
+import { ReactNode } from "react";
+import { StatusAlert, StatusType } from "./shared";
+export interface StatusProps {
+    alert?: StatusAlert;
+    onUnsetAlert?: () => void;
+    successIcon?: ReactNode;
+    infoIcon?: ReactNode;
+    warningIcon?: ReactNode;
+    dangerIcon?: ReactNode;
+    status?: StatusType;
+}
+export default function Status({ alert, onUnsetAlert, successIcon, infoIcon, warningIcon, dangerIcon, status }: StatusProps): JSX.Element;

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

@@ -0,0 +1,15 @@
+import { ReactNode } from "react";
+import { StatusAlert, StatusType } from "./shared";
+export interface StatusProviderProps {
+    children?: ReactNode;
+    successIcon?: ReactNode;
+    infoIcon?: ReactNode;
+    warningIcon?: ReactNode;
+    dangerIcon?: ReactNode;
+}
+declare const StatusProvider: ({ children, successIcon, infoIcon, warningIcon, dangerIcon, ...rest }: StatusProviderProps) => JSX.Element;
+declare const useStatus: () => {
+    setAlert: (alert: StatusAlert | null) => void;
+    setStatus: (status: StatusType) => void;
+};
+export { useStatus, StatusProvider };

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

@@ -13,17 +13,5 @@ declare namespace Utilities {
     function setAlertMessage(message: any, alertClassName?: string, close?: any, detailText?: any): void;
     function guid(): string;
     function scrollToTop(): void;
-    /**
-     * @deprecated Fluent buttons got removed from blue-react.
-     */
-    function fluentBtnsListener(event: any, btn: any): void;
-    /**
-     * @deprecated Fluent buttons got removed from blue-react.
-     */
-    function unregisterFluentBtns(): void;
-    /**
-     * @deprecated Fluent buttons got removed from blue-react.
-     */
-    function registerFluentBtns(): void;
     function fetchData(input: any, init?: any, showErrorDetail?: boolean, onError?: any): Promise<Response>;
 }

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

@@ -1,5 +1,13 @@
 export declare type breakOption = "sm" | "md" | "lg" | "xl";
 export declare type ModalType = "ask" | "tell" | "verify";
+export declare type StatusType = null | "loading" | "success" | "info" | "warning" | "danger";
+export interface StatusAlert {
+    title?: string;
+    alertClassName?: string;
+    close?: boolean;
+    detailText?: string;
+    status?: StatusType;
+}
 interface Phrases {
     [key: string]: string[];
 }

package/index.d.ts

@@ -1,26 +1,20 @@
 declare global {
     interface Window {
-        blueGridRef: any
+        blueLayoutRef: any
         toggleSidebarEvent: any
     }
 }
 export default global
 
-export { default as Grid } from "./dist/types/components/Grid"
-export { GridProps } from "./dist/types/components/Grid"
+export { default as Layout } from "./dist/types/components/Layout"
+export { LayoutProps } from "./dist/types/components/Layout"
 
 export { default as ActionMenu } from "./dist/types/components/ActionMenu"
 export { ActionMenuProps } from "./dist/types/components/ActionMenu"
 
-export { default as ActionMenuItem } from "./dist/types/components/ActionMenuItem"
-export { ActionMenuItemProps } from "./dist/types/components/ActionMenuItem"
-
 export { default as ActionMenuSwitch } from "./dist/types/components/ActionMenuSwitch"
 export { ActionMenuSwitchProps } from "./dist/types/components/ActionMenuSwitch"
 
-export { default as Actions } from "./dist/types/components/Actions"
-export { ActionsProps } from "./dist/types/components/Actions"
-
 export { default as Body } from "./dist/types/components/Body"
 export { BodyProps } from "./dist/types/components/Body"
 
@@ -33,18 +27,9 @@ 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 DropdownMenuItem } from "./dist/types/components/DropdownMenuItem"
-export { DropdownMenuItemProps } from "./dist/types/components/DropdownMenuItem"
-
-export { default as FluentBtn } from "./dist/types/components/FluentBtn"
-export { FluentBtnProps } from "./dist/types/components/FluentBtn"
-
 export { default as Header } from "./dist/types/components/Header"
 export { HeaderProps } from "./dist/types/components/Header"
 
-export { default as HeaderActions } from "./dist/types/components/HeaderActions"
-export { HeaderActionsProps } from "./dist/types/components/HeaderActions"
-
 export { default as HeaderTitle } from "./dist/types/components/HeaderTitle"
 export { HeaderTitleProps } from "./dist/types/components/HeaderTitle"
 
@@ -71,6 +56,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 Status } from "./dist/types/components/Status"
+export { StatusProps } from "./dist/types/components/Status"
+
 export { default as Switch } from "./dist/types/components/Switch"
 export { SwitchProps } from "./dist/types/components/Switch"
 

package/index.js

@@ -1,8 +1,4 @@
-exports.Actions = require("./dist/components/Actions.js")["default"]
 exports.ActionMenu = require("./dist/components/ActionMenu.js")["default"]
-exports.ActionMenuItem = require("./dist/components/ActionMenuItem.js")[
-    "default"
-]
 exports.ActionMenuSwitch = require("./dist/components/ActionMenuSwitch.js")[
     "default"
 ]
@@ -10,10 +6,8 @@ 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.FluentBtn = require("./dist/components/FluentBtn.js")["default"]
-exports.Grid = require("./dist/components/Grid.js")["default"]
+exports.Layout = require("./dist/components/Layout.js")["default"]
 exports.Header = require("./dist/components/Header.js")["default"]
-exports.HeaderActions = require("./dist/components/HeaderActions.js")["default"]
 exports.HeaderTitle = require("./dist/components/HeaderTitle.js")["default"]
 exports.Intro = require("./dist/components/Intro.js")["default"]
 exports.MenuItem = require("./dist/components/MenuItem.js")["default"]
@@ -26,8 +20,8 @@ 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.Status = require("./dist/components/Status.js")["default"]
+exports.StatusProvider = require("./dist/components/StatusProvider.js")["StatusProvider"]
+exports.useStatus = require("./dist/components/StatusProvider.js")["useStatus"]
 exports.Switch = require("./dist/components/Switch.js")["default"]
-exports.DropdownMenuItem = require("./dist/components/DropdownMenuItem.js")[
-    "default"
-]
 exports.Utilities = require("./dist/components/Utilities.js")["default"]

package/package.json

@@ -1,11 +1,11 @@
 {
     "name": "blue-react",
-    "version": "7.9.1",
+    "version": "8.0.0-next.4",
     "description": "Blue React Components",
     "license": "LGPL-3.0-or-later",
     "main": "index.js",
     "types": "index.d.ts",
-    "homepage": "https://bruegmann.github.io/blue-react/v7",
+    "homepage": "https://bruegmann.github.io/blue-react/v8",
     "repository": {
         "type": "git",
         "url": "https://github.com/bruegmann/blue-react.git"
@@ -20,18 +20,18 @@
         "build": "babel ./src/components --out-dir ./dist/components --extensions \".tsx,.js,.ts\"",
         "build-css": "node ./setVersionToStyleScss.js && node-sass ./dist/style.scss ./dist/style.css && npx postcss ./dist/style.css --use autoprefixer -r && npx postcss ./dist/style.css --use postcss-minify -o ./dist/style.min.css",
         "build-release": "npm run build-types && npm run build && npm run build-css && npm run docgen",
-        "docgen": "react-docgen ./src/components/ -o ./src/docs/data/docs.json --exclude Utilities.js --exclude ModalProvider.tsx --extension tsx && node followUpDocs",
+        "docgen": "react-docgen ./src/components/ -o ./src/docs/data/docs.json --exclude Utilities.js --extension tsx && node followUpDocs",
         "test": "react-scripts test",
         "eject": "react-scripts eject",
         "predeploy": "npm run build-docs",
-        "deploy": "gh-pages --dist build --dest v7",
+        "deploy": "gh-pages --dist build --dest v8",
         "prepublishOnly": "npm i && npm run build-release",
-        "release": "npm publish && npm run deploy",
+        "release": "npm publish --tag next && npm run deploy",
         "prettier": "npx prettier --write ."
     },
     "dependencies": {
-        "@popperjs/core": "^2.10.1",
-        "bootstrap": "~5.0.2",
+        "@popperjs/core": "^2.10.2",
+        "bootstrap": "^5.1.3",
         "clsx": "^1.1.1"
     },
     "peerDependencies": {

package/dist/components/ActionMenuItem.js

@@ -1,42 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = ActionMenuItem;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _MenuItem = _interopRequireDefault(require("./MenuItem"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-/**
- * @deprecated This is just an alias for `MenuItem`, so you should use that component instead.
- * If you need the older `ActionMenuItem`, make sure to the prop `useDeprecated`.
- * List Item and Link for the current Action Menu.
- */
-function ActionMenuItem(props) {
-  if (props.useDeprecated) {
-    var _props = {};
-    Object.keys(props).map(function (key) {
-      if (key !== "navItemClassName" && key !== "icon" && key !== "label") {
-        _props[key] = props[key];
-      }
-    });
-    return /*#__PURE__*/_react.default.createElement("li", {
-      className: "nav-item " + props.navItemClassName
-    }, /*#__PURE__*/_react.default.createElement("a", _extends({}, _props, {
-      href: props.href,
-      className: "nav-link blue-app-actions-menu-item " + props.className
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: props.icon
-    }), props.label && /*#__PURE__*/_react.default.createElement("span", {
-      className: "blue-app-actions-label"
-    }, props.icon && /*#__PURE__*/_react.default.createElement("span", null, "\xA0"), props.label)));
-  } else {
-    return /*#__PURE__*/_react.default.createElement(_MenuItem.default, props);
-  }
-}