blue-react 9.12.1 → 10.0.0-rc1

package/dist/style.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue React v9.12.1 (https://bruegmann.github.io/blue-react)
+ * Blue React v10.0.0-rc1 (https://bruegmann.github.io/blue-react)
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-react/blob/master/LICENSE).
 */
 

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

@@ -0,0 +1,77 @@
+import { Component } from "react";
+declare global {
+    interface Window {
+        blueHashRouterRef: any;
+        toggleSidebarEvent: any;
+    }
+}
+export interface HashRouterProps {
+    /**
+     * 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;
+    /**
+     * By default, the document title will automatically set. Set this prop to `true` to disable this behaviour.
+     */
+    disableTitleSet?: 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.blueHashRouterRef.setState({ blockRouting: onHashChange })` globally to set the value from anywhere in your app.
+     */
+    blockRouting?: (newMatch: string[], currentMatch: string[]) => void | boolean;
+    children?: any;
+}
+export interface HashRouterState {
+    match: any;
+    history: string[];
+    hash: string;
+    hashHistory: string[];
+    blockRouting?: (newMatch: string[], currentMatch: string[]) => void | boolean;
+}
+/**
+ * Component for simple hash routing. It's recommended to use solutions like `react-router-dom` for more complex routing.
+ *
+ * As soon this component is mounted, it is globally available under `window.blueHashRouterRef`.
+ * You can also append your own event listeners.
+ *
+ * Allowed events:
+ *
+ * * **componentDidUpdate** - Component was updated.
+ *   Example: `window.blueHashRouterRef.addEventListener("componentDidUpdate", (prevProps, prevState) => { })`
+ * * **pageDidShowAgain** - Page appeared again with the same old state. In the callback function you can reinitialize things.
+ *   Example: `window.blueHashRouterRef.addEventListener("pageDidShowAgain", "home", (prevProps, prevState) => { })`
+ * * **pageDidHide** - This page disappeared and another page appears instead.
+ *   Example: `window.blueHashRouterRef.addEventListener("pageDidHide", "home", (prevProps, prevState) => { })`
+ *
+ * Method to add event listeners:
+ * * `window.blueHashRouterRef.`**addEventListener**`(eventName: string, param2: any, param3: any, listenerId?: string)`
+ *
+ * Methods to remove event listeners:
+ * * `window.blueHashRouterRef.`**removeEventListener**`(eventName: string, listenerId: string)`
+ * * `window.blueHashRouterRef.`**removeDuplicatedEventListeners**`()` - Will automatically be called when running `addEventListener`
+ */
+export default class HashRouter extends Component<HashRouterProps, HashRouterState> {
+    defaultMatch: string[];
+    eventListeners: any[];
+    constructor(props: HashRouterProps);
+    onHashChange(): void;
+    static get defaultProps(): {
+        unrouteable: boolean;
+        disableTitleSet: boolean;
+    };
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: HashRouterProps, prevState: HashRouterState): void;
+    initMatch(): void;
+    addEventListener(param1: any, param2: any, param3: any, listenerId?: string): void;
+    removeEventListener(type: string, listenerId: string): void;
+    removeDuplicatedEventListeners(): void;
+    render(): JSX.Element;
+}

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

@@ -1,144 +1,16 @@
-import { Component, CSSProperties } from "react";
+import React from "react";
+import "blue-web/dist/js/side-layout";
 declare global {
-    interface Window {
-        blueLayoutRef: any;
-        toggleSidebarEvent: any;
+    namespace JSX {
+        interface IntrinsicElements {
+            "side-layout": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>;
+        }
     }
 }
 export interface LayoutProps {
-    id?: string;
-    /**
-     * By default, the side bar is "in".
-     * You can control the state from outside, by also using `onChangeSidebarIn`.
-     */
-    sidebarIn?: boolean;
-    /**
-     * React to changes of the `sidebarIn` state.
-     */
-    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.
-     */
-    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;
-    /**
-     * 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.
-     */
-    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;
-    children?: any;
-}
-export interface LayoutState {
-    sidebarIn: boolean;
-    expandSidebar: 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`.
- * You can also append your own event listeners.
- *
- * Allowed events:
- *
- * * **componentDidUpdate** - Component was updated.
- *   Example: `window.blueLayoutRef.addEventListener("componentDidUpdate", (prevProps, prevState) => { })`
- * * **pageDidShowAgain** - Page appeared again with the same old state. In the callback function you can reinitialize things.
- *   Example: `window.blueLayoutRef.addEventListener("pageDidShowAgain", "home", (prevProps, prevState) => { })`
- * * **pageDidHide** - This page disappeared and another page appears instead.
- *   Example: `window.blueLayoutRef.addEventListener("pageDidHide", "home", (prevProps, prevState) => { })`
- *
- * Method to add event listeners:
- * * `window.blueLayoutRef.`**addEventListener**`(eventName: string, param2: any, param3: any, listenerId?: string)`
- *
- * Methods to remove event listeners:
- * * `window.blueLayoutRef.`**removeEventListener**`(eventName: string, listenerId: string)`
- * * `window.blueLayoutRef.`**removeDuplicatedEventListeners**`()` - Will automatically be called when running `addEventListener`
- */
-export default class Layout extends Component<LayoutProps, LayoutState> {
-    defaultMatch: string[];
-    eventListeners: any[];
-    constructor(props: LayoutProps);
-    onHashChange(): void;
-    static get defaultProps(): {
-        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;
-    componentDidUpdate(prevProps: LayoutProps, prevState: LayoutState): void;
-    toggleSidebar(event: any): void;
-    hideSidebar(e: any): void;
-    initMatch(): void;
-    addEventListener(param1: any, param2: any, param3: any, listenerId?: string): void;
-    removeEventListener(type: string, listenerId: string): void;
-    removeDuplicatedEventListeners(): void;
-    toggleExpandSidebar(): void;
-    render(): JSX.Element;
+    children?: React.ReactNode;
+    header?: React.ReactNode;
+    side?: React.ReactNode;
+    pageBorder?: boolean;
 }
+export default function Layout({ children, header, side, pageBorder }: LayoutProps): JSX.Element;

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

@@ -0,0 +1,145 @@
+import { Component, CSSProperties } from "react";
+declare global {
+    interface Window {
+        blueLayoutRef: any;
+        toggleSidebarEvent: any;
+    }
+}
+export interface LayoutProps {
+    id?: string;
+    /**
+     * By default, the side bar is "in".
+     * You can control the state from outside, by also using `onChangeSidebarIn`.
+     */
+    sidebarIn?: boolean;
+    /**
+     * React to changes of the `sidebarIn` state.
+     */
+    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.
+     */
+    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;
+    /**
+     * 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.
+     */
+    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;
+    children?: any;
+}
+export interface LayoutState {
+    sidebarIn: boolean;
+    expandSidebar: boolean;
+    match: any;
+    history: string[];
+    hash: string;
+    hashHistory: string[];
+    blockRouting?: (newMatch: string[], currentMatch: string[]) => void | boolean;
+}
+/**
+ * @deprecated Consider to use the new `Layout` component instead.
+ * The main component. As soon this component is mounted, it is globally available under `window.blueLayoutRef`.
+ * You can also append your own event listeners.
+ *
+ * Allowed events:
+ *
+ * * **componentDidUpdate** - Component was updated.
+ *   Example: `window.blueLayoutRef.addEventListener("componentDidUpdate", (prevProps, prevState) => { })`
+ * * **pageDidShowAgain** - Page appeared again with the same old state. In the callback function you can reinitialize things.
+ *   Example: `window.blueLayoutRef.addEventListener("pageDidShowAgain", "home", (prevProps, prevState) => { })`
+ * * **pageDidHide** - This page disappeared and another page appears instead.
+ *   Example: `window.blueLayoutRef.addEventListener("pageDidHide", "home", (prevProps, prevState) => { })`
+ *
+ * Method to add event listeners:
+ * * `window.blueLayoutRef.`**addEventListener**`(eventName: string, param2: any, param3: any, listenerId?: string)`
+ *
+ * Methods to remove event listeners:
+ * * `window.blueLayoutRef.`**removeEventListener**`(eventName: string, listenerId: string)`
+ * * `window.blueLayoutRef.`**removeDuplicatedEventListeners**`()` - Will automatically be called when running `addEventListener`
+ */
+export default class LegacyLayout extends Component<LayoutProps, LayoutState> {
+    defaultMatch: string[];
+    eventListeners: any[];
+    constructor(props: LayoutProps);
+    onHashChange(): void;
+    static get defaultProps(): {
+        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;
+    componentDidUpdate(prevProps: LayoutProps, prevState: LayoutState): void;
+    toggleSidebar(event: any): void;
+    hideSidebar(e: any): void;
+    initMatch(): void;
+    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/LegacySidebarMenu.d.ts

@@ -0,0 +1,33 @@
+/// <reference types="react" />
+export interface SidebarMenuProps {
+    /**
+     * Extends the class name by the sidebar.
+     */
+    sidebarClass?: string;
+    /**
+     * Sets the `style` prop by the sidebar.
+     */
+    sidebarStyle?: object;
+    /**
+     * Extends the class name by the menu.
+     */
+    menuClass?: string;
+    /**
+     * Sets the `style` prop by the menu.
+     */
+    menuStyle?: object;
+    /**
+     * Content on top of the menu.
+     */
+    topContent?: any;
+    /**
+     * Content for the bottom part of the sidebar.
+     */
+    bottomContent?: any;
+    children?: any;
+}
+/**
+ * @deprecated Use the new `SidebarMenu` component instead.
+ * Sidebar for the `Layout` component.
+ */
+export default function LegacySidebarMenu(props: SidebarMenuProps): JSX.Element;

package/index.js

@@ -5,6 +5,7 @@ exports.ActionMenuItem = require("./dist/components/ActionMenuItem.js")["default
 exports.Body = require("./dist/components/Body.js")["default"]
 exports.Caret = require("./dist/components/Caret.js")["default"]
 exports.Chevron = require("./dist/components/Chevron.js")["default"]
+exports.HashRouter = require("./dist/components/HashRouter.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"]

package/package.json

@@ -1,11 +1,11 @@
 {
     "name": "blue-react",
-    "version": "9.12.1",
+    "version": "10.0.0-rc1",
     "description": "Blue React Components",
     "license": "LGPL-3.0-or-later",
     "main": "index.js",
     "types": "index.d.ts",
-    "homepage": "https://bruegmann.github.io/blue-react/v9",
+    "homepage": "https://bruegmann.github.io/blue-react/v10",
     "repository": {
         "type": "git",
         "url": "https://github.com/bruegmann/blue-react.git"
@@ -24,15 +24,15 @@
         "test": "react-scripts test",
         "eject": "react-scripts eject",
         "predeploy": "npm run build-docs",
-        "deploy": "gh-pages --dist build --dest v9",
+        "deploy": "gh-pages --dist build --dest v10",
         "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 .",
         "license-report": "npx license-report --prod --output=json > ./src/docs/data/license-report.json"
     },
     "dependencies": {
         "@popperjs/core": "^2.11.5",
-        "blue-web": "^1.3.2",
+        "blue-web": "^1.7.0",
         "bootstrap": "~5.3.3",
         "clsx": "^1.1.1"
     },