blue-react 9.12.1 → 10.0.0-rc2

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

@@ -1,35 +1,34 @@
-/// <reference types="react" />
-import { MenuItemProps } from "./MenuItem";
-export interface ActionMenuItemProps extends MenuItemProps {
-}
-/**
- * Use this instead of `MenuItem` when you want to use it inside an `ActionMenu` to make it appear as a dropdown.
- *
- * It basically is a shortcut. Instead of writing:
- *
- * ```tsx
- * <ActionMenu>
- *     <div className="position-relative z-1">
- *         <MenuItem
- *             label="Parent"
- *             supportOutside
- *             dropdownClassName={`position-md-absolute end-0 d-flex flex-column`}
- *         >
- *             <MenuItem label="Item 1" />
- *         </MenuItem>
- *     </div>
- * </ActionMenu>
- * ```
- *
- * you can write:
- * ```tsx
- * <ActionMenu>
- *     <ActionMenuItem label="Parent">
- *         <MenuItem label="Item 1" />
- *     </MenuItem>
- * </ActionMenu>
- * ```
- *
- * The responsive utility class for absolute position (`position-md-absolute` in this example) is automatically added based on the `break` param of the parent `ActionMenu`.
- */
-export default function ActionMenuItem({ children, ...props }: ActionMenuItemProps): JSX.Element;
+import { MenuItemProps } from "./MenuItem";
+export interface ActionMenuItemProps extends MenuItemProps {
+}
+/**
+ * Use this instead of `MenuItem` when you want to use it inside an `ActionMenu` to make it appear as a dropdown.
+ *
+ * It basically is a shortcut. Instead of writing:
+ *
+ * ```tsx
+ * <ActionMenu>
+ *     <div className="position-relative z-1">
+ *         <MenuItem
+ *             label="Parent"
+ *             supportOutside
+ *             dropdownClassName={`position-md-absolute end-0 d-flex flex-column`}
+ *         >
+ *             <MenuItem label="Item 1" />
+ *         </MenuItem>
+ *     </div>
+ * </ActionMenu>
+ * ```
+ *
+ * you can write:
+ * ```tsx
+ * <ActionMenu>
+ *     <ActionMenuItem label="Parent">
+ *         <MenuItem label="Item 1" />
+ *     </MenuItem>
+ * </ActionMenu>
+ * ```
+ *
+ * The responsive utility class for absolute position (`position-md-absolute` in this example) is automatically added based on the `break` param of the parent `ActionMenu`.
+ */
+export default function ActionMenuItem({ children, ...props }: ActionMenuItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,21 +1,20 @@
-/// <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;
+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): import("react/jsx-runtime").JSX.Element;

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

@@ -1,18 +1,18 @@
-import { CSSProperties } from "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;
-    style?: CSSProperties;
-}
-/**
- * @deprecated Will be replaced by the `Chevron` component in the next major version.
- * Caret icon component.
- */
-export default function Caret({ open, mirrored, className, style }: CaretProps): JSX.Element;
+import { CSSProperties } from "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;
+    style?: CSSProperties;
+}
+/**
+ * @deprecated Will be replaced by the `Chevron` component in the next major version.
+ * Caret icon component.
+ */
+export default function Caret({ open, mirrored, className, style }: CaretProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,17 +1,17 @@
-import { CSSProperties } from "react";
-export interface ChevronProps {
-    /**
-     * Indicates if open or not.
-     */
-    open?: boolean;
-    /**
-     * By default the chevron points to the right when closed. Set mirrored and it will point to the left.
-     */
-    mirrored?: boolean;
-    className?: string;
-    style?: CSSProperties;
-}
-/**
- * Chevron icon component with open state.
- */
-export default function Chevron({ open, mirrored, className, style }: ChevronProps): JSX.Element;
+import { CSSProperties } from "react";
+export interface ChevronProps {
+    /**
+     * Indicates if open or not.
+     */
+    open?: boolean;
+    /**
+     * By default the chevron points to the right when closed. Set mirrored and it will point to the left.
+     */
+    mirrored?: boolean;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * Chevron icon component with open state.
+ */
+export default function Chevron({ open, mirrored, className, style }: ChevronProps): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,76 @@
+import { Component, ReactNode } from "react";
+declare global {
+    interface Window {
+        blueHashRouterRef: any;
+    }
+}
+export interface HashRouterProps {
+    /**
+     * Registers pages for the built-in routing system. Example: `[{name: "home", component: <HomePage />}]`
+     */
+    pages?: {
+        name: string;
+        component: ReactNode;
+    }[];
+    /**
+     * 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(): import("react/jsx-runtime").JSX.Element;
+}

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

@@ -1,8 +1,8 @@
-import { ReactNode } from "react";
-export interface HeaderProps {
-    children?: ReactNode;
-}
-/**
- * The top of a page.
- */
-export default function Header({ children }: HeaderProps): JSX.Element;
+import { ReactNode } from "react";
+export interface HeaderProps {
+    children?: ReactNode;
+}
+/**
+ * The top of a page.
+ */
+export default function Header({ children }: HeaderProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,40 +1,39 @@
-/// <reference types="react" />
-export interface HeaderTitleProps {
-    /**
-     * Can be an image. Will be placed inside of the `src` attribute.
-     */
-    logo?: string;
-    logoAlt?: string;
-    /**
-     * Text next to the logo.
-     */
-    appTitle?: string;
-    /**
-     * Disables that the app title will disappear at a specific view width.
-     */
-    keepAppTitle?: boolean;
-    children?: any;
-    /**
-     * Extends `className` from parent element.
-     */
-    className?: string;
-    /**
-     * Is the component used on the sidebar?
-     */
-    sidebar?: boolean;
-    /**
-     * By default, MenuItem is a `"a"`.
-     * If you want to have it another type, you can pass a component reference with this prop (e.g. `Link`).
-     */
-    elementType?: any;
-    /**
-     * Sets `to` prop, e.g. when you use the `Link` component from React Router.
-     */
-    to?: string;
-    href?: string;
-}
-/**
- * The title area at the header bar.
- * Depending on its content, the document's title will be set aswell (what will be shown in the browser title bar).
- */
-export default function HeaderTitle({ logo, logoAlt, appTitle, keepAppTitle, children, className, sidebar, elementType, to, href }: HeaderTitleProps): JSX.Element;
+export interface HeaderTitleProps {
+    /**
+     * Can be an image. Will be placed inside of the `src` attribute.
+     */
+    logo?: string;
+    logoAlt?: string;
+    /**
+     * Text next to the logo.
+     */
+    appTitle?: string;
+    /**
+     * Disables that the app title will disappear at a specific view width.
+     */
+    keepAppTitle?: boolean;
+    children?: any;
+    /**
+     * Extends `className` from parent element.
+     */
+    className?: string;
+    /**
+     * Is the component used on the sidebar?
+     */
+    sidebar?: boolean;
+    /**
+     * By default, MenuItem is a `"a"`.
+     * If you want to have it another type, you can pass a component reference with this prop (e.g. `Link`).
+     */
+    elementType?: any;
+    /**
+     * Sets `to` prop, e.g. when you use the `Link` component from React Router.
+     */
+    to?: string;
+    href?: string;
+}
+/**
+ * The title area at the header bar.
+ * Depending on its content, the document's title will be set aswell (what will be shown in the browser title bar).
+ */
+export default function HeaderTitle({ logo, logoAlt, appTitle, keepAppTitle, children, className, sidebar, elementType, to, href }: HeaderTitleProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,19 +1,18 @@
-/// <reference types="react" />
-import { MenuItemProps } from "./MenuItem";
-export interface IconMenuItemProps extends MenuItemProps {
-    outerClass?: string;
-    /**
-     * Tooltip will be placed to the end/right by default. You can change the direction with this prop.
-     */
-    tooltipClass?: string;
-    /**
-     * When used inside of the sidebar: active indicator will be displayed underneath instead of before.
-     * The prop to `false` to disable this behavior.
-     */
-    horizontalOnOpenSidebar?: boolean;
-}
-/**
- * Variant of `MenuItem` to primarily display an icon without a label.
- * The label prop will be displayed as a tooltip.
- */
-export default function IconMenuItem({ label, outerClass, tooltipClass, horizontalOnOpenSidebar, className, ...props }: IconMenuItemProps): JSX.Element;
+import { MenuItemProps } from "./MenuItem";
+export interface IconMenuItemProps extends MenuItemProps {
+    outerClass?: string;
+    /**
+     * Tooltip will be placed to the end/right by default. You can change the direction with this prop.
+     */
+    tooltipClass?: string;
+    /**
+     * When used inside of the sidebar: active indicator will be displayed underneath instead of before.
+     * The prop to `false` to disable this behavior.
+     */
+    horizontalOnOpenSidebar?: boolean;
+}
+/**
+ * Variant of `MenuItem` to primarily display an icon without a label.
+ * The label prop will be displayed as a tooltip.
+ */
+export default function IconMenuItem({ label, outerClass, tooltipClass, horizontalOnOpenSidebar, className, ...props }: IconMenuItemProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,23 +1,22 @@
-/// <reference types="react" />
-export interface IntroProps {
-    /**
-     * Can be an image. Will be placed inside of the `src` attribute.
-     */
-    logo?: string;
-    /**
-     * Max width from the logo.
-     */
-    logoMaxWidth?: string;
-    /**
-     * Text which will be placed under the logo.
-     */
-    title?: string;
-    /**
-     * Content
-     */
-    children?: any;
-}
-/**
- * Can be used for a sign-in page.
- */
-export default function Intro({ logo, logoMaxWidth, title, children }: IntroProps): JSX.Element;
+export interface IntroProps {
+    /**
+     * Can be an image. Will be placed inside of the `src` attribute.
+     */
+    logo?: string;
+    /**
+     * Max width from the logo.
+     */
+    logoMaxWidth?: string;
+    /**
+     * Text which will be placed under the logo.
+     */
+    title?: string;
+    /**
+     * Content
+     */
+    children?: any;
+}
+/**
+ * Can be used for a sign-in page.
+ */
+export default function Intro({ logo, logoMaxWidth, title, children }: IntroProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,144 +1,9 @@
-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;
-}
-/**
- * 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;
-}
+import React from "react";
+import "blue-web/dist/js/side-layout";
+export interface LayoutProps {
+    children?: React.ReactNode;
+    header?: React.ReactNode;
+    side?: React.ReactNode;
+    noPageBorder?: boolean;
+}
+export default function Layout({ children, header, side, noPageBorder }: LayoutProps): import("react/jsx-runtime").JSX.Element;