blue-react 8.1.7 → 8.3.1

package/dist/styles/mixins/_switch.scss

@@ -1,85 +1,85 @@
-@mixin switch(
-    $width: 35px,
-    $height: 20px,
-    $padding: 3px,
-    $color: $body-color,
-    $color-active: $success
-) {
-    $slider-size: $height - ($padding * 2);
-
-    & {
-        position: relative;
-        display: inline-block;
-        width: $width;
-        height: $height;
-
-        input {
-            display: none;
-        }
-
-        &.disabled {
-            opacity: 0.8;
-        }
-
-        &:not(.disabled) {
-            .slider {
-                cursor: pointer;
-            }
-        }
-
-        .slider {
-            position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: $input-group-addon-bg;
-            transition: 0.4s;
-            box-shadow: inset 0 0 0 1px rgba($color, 0.5);
-
-            &::before {
-                content: "";
-                position: absolute;
-                height: $slider-size;
-                width: $slider-size;
-                left: $padding;
-                bottom: $padding;
-                background-color: $color;
-                transition: 0.4s;
-            }
-
-            &::after {
-                content: attr(data-label);
-                position: absolute;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                margin-left: ($slider-size * 0.5);
-                transition: margin-left 0.4s;
-                color: $color;
-            }
-        }
-
-        input:checked {
-            & + .slider {
-                background-color: $color-active;
-                box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.3);
-
-                &::before {
-                    transform: translateX(
-                        $width - $slider-size - ($padding * 2)
-                    );
-                    background-color: white;
-                }
-
-                &::after {
-                    color: white;
-                    margin-left: ($slider-size * 0.5) * -1;
-                }
-            }
-        }
-        input:focus + .slider {
-            box-shadow: 0 0 1px $color-active;
-        }
-    }
-}
+@mixin switch(
+    $width: 35px,
+    $height: 20px,
+    $padding: 3px,
+    $color: $body-color,
+    $color-active: $success
+) {
+    $slider-size: $height - ($padding * 2);
+
+    & {
+        position: relative;
+        display: inline-block;
+        width: $width;
+        height: $height;
+
+        input {
+            display: none;
+        }
+
+        &.disabled {
+            opacity: 0.8;
+        }
+
+        &:not(.disabled) {
+            .slider {
+                cursor: pointer;
+            }
+        }
+
+        .slider {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: $input-group-addon-bg;
+            transition: 0.4s;
+            box-shadow: inset 0 0 0 1px rgba($color, 0.5);
+
+            &::before {
+                content: "";
+                position: absolute;
+                height: $slider-size;
+                width: $slider-size;
+                left: $padding;
+                bottom: $padding;
+                background-color: $color;
+                transition: 0.4s;
+            }
+
+            &::after {
+                content: attr(data-label);
+                position: absolute;
+                top: 50%;
+                left: 50%;
+                transform: translate(-50%, -50%);
+                margin-left: ($slider-size * 0.5);
+                transition: margin-left 0.4s;
+                color: $color;
+            }
+        }
+
+        input:checked {
+            & + .slider {
+                background-color: $color-active;
+                box-shadow: inset 0 0 12px rgba(255, 255, 255, 0.3);
+
+                &::before {
+                    transform: translateX(
+                        $width - $slider-size - ($padding * 2)
+                    );
+                    background-color: white;
+                }
+
+                &::after {
+                    color: white;
+                    margin-left: ($slider-size * 0.5) * -1;
+                }
+            }
+        }
+        input:focus + .slider {
+            box-shadow: 0 0 1px $color-active;
+        }
+    }
+}

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

@@ -1,22 +1,22 @@
-/// <reference types="react" />
-import { breakOption } from "./shared";
-export interface ActionMenuProps {
-    /**
-     * Hides the toggle button in mobile view. Can be useful when using multiple ActionMenus and not show the toggle button for each menu.
-     */
-    hideToggleAction?: boolean;
-    children?: any;
-    /**
-     * Icon component for the toggle icon.
-     */
-    toggleIcon?: any;
-    className?: string;
-    /**
-     * "sm" | "md" | "lg" | "xl" | "none"
-     */
-    break?: breakOption | "none";
-}
-/**
- * The Action Menu on the top right of a page. You can place Actions here which are in context of the current page.
- */
-export default function ActionMenu(props: ActionMenuProps): JSX.Element;
+/// <reference types="react" />
+import { breakOption } from "./shared";
+export interface ActionMenuProps {
+    /**
+     * Hides the toggle button in mobile view. Can be useful when using multiple ActionMenus and not show the toggle button for each menu.
+     */
+    hideToggleAction?: boolean;
+    children?: any;
+    /**
+     * Icon component for the toggle icon.
+     */
+    toggleIcon?: any;
+    className?: string;
+    /**
+     * "sm" | "md" | "lg" | "xl" | "none"
+     */
+    break?: breakOption | "none";
+}
+/**
+ * The Action Menu on the top right of a page. You can place Actions here which are in context of the current page.
+ */
+export default function ActionMenu(props: ActionMenuProps): JSX.Element;

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

@@ -1,11 +1,11 @@
-/// <reference types="react" />
-export interface ActionMenuSwitchProps {
-    className?: string;
-    checked?: boolean;
-    onChange?: () => void;
-    label?: any;
-}
-/**
- * Switch for the Action Menu.
- */
-export default function ActionMenuSwitch(props: ActionMenuSwitchProps): JSX.Element;
+/// <reference types="react" />
+export interface ActionMenuSwitchProps {
+    className?: string;
+    checked?: boolean;
+    onChange?: () => void;
+    label?: any;
+}
+/**
+ * Switch for the Action Menu.
+ */
+export default function ActionMenuSwitch(props: ActionMenuSwitchProps): JSX.Element;

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

@@ -1,21 +1,21 @@
-/// <reference types="react" />
-import { breakOption } from "./shared";
-export interface BodyProps {
-    id?: string;
-    className?: string;
-    /**
-     * Class name for the container. More info: https://getbootstrap.com/docs/4.0/layout/overview/#containers
-     */
-    containerClass?: string;
-    /**
-     * Set `true` if this page uses `<Actions />`, so this component will get enough padding to avoid overlapping of the content.
-     */
-    hasActions?: boolean;
-    break?: breakOption;
-    onClick?: (event: any) => void;
-    children?: any;
-}
-/**
- * Contains the content of the page.
- */
-export default function Body({ id, className, containerClass, hasActions, onClick, children, ...rest }: BodyProps): JSX.Element;
+/// <reference types="react" />
+import { breakOption } from "./shared";
+export interface BodyProps {
+    id?: string;
+    className?: string;
+    /**
+     * Class name for the container. More info: https://getbootstrap.com/docs/4.0/layout/overview/#containers
+     */
+    containerClass?: string;
+    /**
+     * Set `true` if this page uses `<Actions />`, so this component will get enough padding to avoid overlapping of the content.
+     */
+    hasActions?: boolean;
+    break?: breakOption;
+    onClick?: (event: any) => void;
+    children?: any;
+}
+/**
+ * Contains the content of the page.
+ */
+export default function Body({ id, className, containerClass, hasActions, onClick, children, ...rest }: BodyProps): JSX.Element;

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

@@ -1,10 +1,10 @@
-/// <reference types="react" />
-import { BodyProps } from "./Body";
-export interface BodyRoundedProps extends BodyProps {
-    classNameTop?: string;
-    classNameBottom?: string;
-}
-/**
- * Extended variation of `Body` with rounded elements on top and bottom of the page.
- */
-export default function BodyRounded({ classNameTop, classNameBottom, children, ...bodyProps }: BodyRoundedProps): JSX.Element;
+/// <reference types="react" />
+import { BodyProps } from "./Body";
+export interface BodyRoundedProps extends BodyProps {
+    classNameTop?: string;
+    classNameBottom?: string;
+}
+/**
+ * Extended variation of `Body` with rounded elements on top and bottom of the page.
+ */
+export default function BodyRounded({ classNameTop, classNameBottom, children, ...bodyProps }: BodyRoundedProps): JSX.Element;

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

@@ -1,16 +1,16 @@
-/// <reference types="react" />
-export interface CaretProps {
-    /**
-     * Indicates if open or not.
-     */
-    open?: boolean;
-    /**
-     * By default the caret points to the right when closed. Set mirrored and it will point to the left.
-     */
-    mirrored?: boolean;
-    className?: string;
-}
-/**
- * Caret icon component.
- */
-export default function Caret({ open, mirrored, className }: CaretProps): JSX.Element;
+/// <reference types="react" />
+export interface CaretProps {
+    /**
+     * Indicates if open or not.
+     */
+    open?: boolean;
+    /**
+     * By default the caret points to the right when closed. Set mirrored and it will point to the left.
+     */
+    mirrored?: boolean;
+    className?: string;
+}
+/**
+ * Caret icon component.
+ */
+export default function Caret({ open, mirrored, className }: CaretProps): JSX.Element;

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

@@ -1,23 +1,23 @@
-/// <reference types="react" />
-export interface DocumentViewProps {
-    /**
-     * Source of the content (URL)
-     */
-    src?: string;
-    /**
-     * Instead of a source, you can also set the content directly (HTML)
-     */
-    content?: string;
-    /**
-     * MIME type of the content (e.g. "application/pdf")
-     */
-    mimeType: string;
-    /**
-     * Label for the button to display
-     */
-    showDocumentLabel: string;
-}
-/**
- * Tries to display content in an iframe. When the content can't displayed in an iframe, it will show a download button instead.
- */
-export default function DocumentView({ content, mimeType, src, showDocumentLabel }: DocumentViewProps): JSX.Element;
+/// <reference types="react" />
+export interface DocumentViewProps {
+    /**
+     * Source of the content (URL)
+     */
+    src?: string;
+    /**
+     * Instead of a source, you can also set the content directly (HTML)
+     */
+    content?: string;
+    /**
+     * MIME type of the content (e.g. "application/pdf")
+     */
+    mimeType: string;
+    /**
+     * Label for the button to display
+     */
+    showDocumentLabel: string;
+}
+/**
+ * Tries to display content in an iframe. When the content can't displayed in an iframe, it will show a download button instead.
+ */
+export default function DocumentView({ content, mimeType, src, showDocumentLabel }: DocumentViewProps): JSX.Element;

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

@@ -1,110 +1,110 @@
-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(event: HashChangeEvent): 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;
-    render(): JSX.Element;
-}
+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(event: HashChangeEvent): 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;
+    render(): JSX.Element;
+}

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

@@ -1,8 +1,8 @@
-/// <reference types="react" />
-export interface HeaderProps {
-    children?: any;
-}
-/**
- * The top of a page.
- */
-export default function Header({ children }: HeaderProps): JSX.Element;
+/// <reference types="react" />
+export interface HeaderProps {
+    children?: any;
+}
+/**
+ * The top of a page.
+ */
+export default function Header({ children }: HeaderProps): JSX.Element;