blue-react 10.2.0 → 11.0.0

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

@@ -1,144 +0,0 @@
-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;
-}

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

@@ -1,30 +0,0 @@
-import { ReactNode } from "react";
-import { ModalType } from "./shared";
-export interface ModalProps {
-    modalContent?: string;
-    modalTitle?: string;
-    modalIcon?: ReactNode;
-    unSetModalContent: (modalContent?: string) => void;
-    /**
-     * Type of `input` depends on `type` prop and which action occured.
-     * When it's a string, the user entered something. When it's a boolean, the user clicked "Yes" or "No".
-     * When it's `null`, the user cancelled the modal.
-     */
-    onSubmit?: (input: string | boolean | null) => void;
-    defaultInput?: string;
-    /**
-     * `"ask"` | `"tell"` | `"verify"`
-     */
-    type: ModalType;
-    inputType?: string;
-    switchPrimaryBtn?: boolean;
-    acceptBtnText?: string;
-    cancelBtnText?: string;
-}
-/**
- * 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 there.
- */
-export default function Modal({ modalContent, modalTitle, modalIcon, unSetModalContent, onSubmit, defaultInput, type, inputType, switchPrimaryBtn, acceptBtnText, cancelBtnText }: ModalProps): JSX.Element;

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

@@ -1,21 +0,0 @@
-import { ReactNode } from "react";
-interface ModelAlertOptions {
-    title?: string;
-    icon?: ReactNode;
-    switchPrimaryBtn?: boolean;
-    acceptBtnText?: string;
-    cancelBtnText?: string;
-}
-interface ModelAskOptions extends ModelAlertOptions {
-    inputType?: string;
-}
-export interface ModalProviderProps {
-    children?: ReactNode;
-}
-declare const ModalProvider: ({ children, ...rest }: ModalProviderProps) => JSX.Element;
-declare const useModal: () => {
-    ask: (text: string, options?: ModelAskOptions) => Promise<string | boolean>;
-    tell: (text: string, options?: ModelAlertOptions) => Promise<boolean>;
-    verify: (text: string, options?: ModelAlertOptions) => Promise<boolean>;
-};
-export { ModalProvider, useModal };

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

@@ -1,17 +0,0 @@
-import { CSSProperties, MouseEventHandler, MutableRefObject, RefObject } from "react";
-/**
- * Hook that alerts clicks outside of the passed ref
- */
-export declare function useOutside(ref: MutableRefObject<any>, callback?: (event: MouseEvent) => void): void;
-export interface OutsideProps {
-    children: any;
-    className?: string;
-    onClickOutside?: (event: MouseEvent) => void;
-    onClick?: MouseEventHandler<HTMLDivElement> | undefined;
-    style?: CSSProperties;
-    wrapperRef?: RefObject<HTMLDivElement>;
-}
-/**
- * Component that fires an event if you click outside of it
- */
-export default function Outside({ children, className, onClickOutside, onClick, style, wrapperRef }: OutsideProps): JSX.Element;

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

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-export interface PageProps {
-    /**
-     * Will be set to the document's `<title>` tag.
-     */
-    title?: string;
-    children?: any;
-}
-/**
- * Main component for each page.
- */
-export default function Page({ children, title }: PageProps): JSX.Element;

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

@@ -1,36 +0,0 @@
-import React, { ReactNode, RefObject } from "react";
-export interface SearchProps {
-    autoFocus?: boolean;
-    /**
-     * Is component inside of a page?
-     */
-    body?: boolean;
-    className?: string;
-    icon?: any;
-    onChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
-    placeholder?: string;
-    /**
-     * Allow reset?
-     */
-    reset?: boolean;
-    /**
-     * Define custom icon for the reset button.
-     */
-    resetIcon?: any;
-    /**
-     * Is component inside of the sidebar?
-     */
-    sidebar?: boolean;
-    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.
- */
-export default function Search(props: SearchProps): JSX.Element;

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

@@ -1,32 +0,0 @@
-/// <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;
-}
-/**
- * Sidebar for the `Layout` component.
- */
-export default function SidebarMenu(props: SidebarMenuProps): JSX.Element;

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

@@ -1,22 +0,0 @@
-/// <reference types="react" />
-import { MenuItemProps } from "./MenuItem";
-export interface SidebarMenuItemProps extends MenuItemProps {
-    outerClass?: string;
-}
-/**
- * @deprecated `MenuItem` now has all the features of `SidebarMenuItem`. Use `MenuItem` instead.
- * 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

@@ -1,10 +0,0 @@
-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/SlimContainer.d.ts

@@ -1,10 +0,0 @@
-import { ReactNode } from "react";
-export interface SlimContainerProps {
-    children?: ReactNode;
-    className?: string;
-    innerClassName?: string;
-}
-/**
- * Shortcut for a combination using Bootstrap's Grid System to create a slim responsive container.
- */
-export default function SlimContainer({ children, className, innerClassName }: SlimContainerProps): JSX.Element;

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

@@ -1,12 +0,0 @@
-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

@@ -1,15 +0,0 @@
-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/Switch.d.ts

@@ -1,33 +0,0 @@
-import React, { ReactNode } from "react";
-export interface SwitchProps {
-    className?: string;
-    checked?: boolean;
-    onChange?: (event: React.ChangeEvent) => void;
-    /**
-     * Sets label inside of the switch. If you set this, you should also set the className "lg" to make the switch larger.
-     */
-    sliderLabel?: string;
-    /**
-     * You can change the type of the wrapper element. If you do, the `onChange` event might not be triggered.
-     */
-    elementType?: string;
-    disabled?: boolean;
-    /**
-     * Set prop to use the older look and feel. Will disappear in future releases.
-     */
-    legacy?: boolean;
-    label?: ReactNode | string;
-}
-/**
- * @deprecated
- * Use Bootstrap's `.form-check.form-switch` instead:
- * https://getbootstrap.com/docs/5.2/forms/checks-radios/#switches
- *
- * For now, this component acts as proxy for Bootstrap's Switch.
- * To place a label next to the switch, use the new `label` prop.
- *
- * Migrate to Blue React 8.4.0 and use legacy support: Set the `label` with a string. Or set the `legacy` prop to use the previous look and behaviour.
- */
-export default function Switch({ className, checked, onChange, sliderLabel, disabled, elementType, legacy, label }: SwitchProps): React.ReactElement<{
-    className: string;
-}, string | React.JSXElementConstructor<any>>;

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

@@ -1,22 +0,0 @@
-import { ReactNode } from "react";
-export interface ToastProviderProps {
-    children?: ReactNode;
-    successIcon?: ReactNode;
-    infoIcon?: ReactNode;
-    warningIcon?: ReactNode;
-    dangerIcon?: ReactNode;
-}
-export declare type ToastItemType = "success" | "danger" | "info" | "warning";
-export interface ToastItem {
-    type: ToastItemType;
-    title?: string;
-    message?: string;
-}
-/**
- * Push notifications to your visitors using Bootstrap's toast component.
- */
-export declare function ToastProvider({ children, successIcon, infoIcon, warningIcon, dangerIcon }: ToastProviderProps): JSX.Element;
-export declare const useToast: () => {
-    addToast: (toastItem: ToastItem) => void;
-    clearToasts: () => void;
-};

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

@@ -1,41 +0,0 @@
-import { startLoading, finishLoading, showSuccess, hideSuccess, resetAlertMessage, setAlertMessage, scrollToTop, fetchData } from "blue-web/dist/js/utils";
-/**
- * @deprecated Use (el as HTMLElement).classList.contains("my-class") instead.
- */
-export declare function hasClass(el: HTMLElement | null, className: string): boolean;
-/**
- * @deprecated Use (el as HTMLElement).classList.add("my-class") instead.
- */
-export declare function addClass(el: HTMLElement | null, className: string): void;
-/**
- * @deprecated Use (el as HTMLElement).classList.remove("my-class") instead.
- */
-export declare function removeClass(el: HTMLElement | null, className: string): void;
-/**
- * @deprecated Use (el as HTMLElement).classList.toggle("my-class") instead.
- */
-export declare function toggleClass(element: HTMLElement | null, className: string): void;
-/**
- * @deprecated Is handled inside of `ActioMenu` component now
- */
-export declare function toggleActions(): void;
-/**
- * @deprecated In future versions of Blue React, you will need to use utils of Blue Web directly.
- */
-declare const _default: {
-    hasClass: typeof hasClass;
-    addClass: typeof addClass;
-    removeClass: typeof removeClass;
-    toggleClass: typeof toggleClass;
-    startLoading: typeof startLoading;
-    finishLoading: typeof finishLoading;
-    showSuccess: typeof showSuccess;
-    hideSuccess: typeof hideSuccess;
-    toggleActions: typeof toggleActions;
-    resetAlertMessage: typeof resetAlertMessage;
-    setAlertMessage: typeof setAlertMessage;
-    guid: () => string;
-    scrollToTop: typeof scrollToTop;
-    fetchData: typeof fetchData;
-};
-export default _default;

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

@@ -1,15 +0,0 @@
-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[];
-}
-export declare function getPhrase(keyword: string, countryCode?: string | undefined, _phrases?: Phrases | undefined): string;
-export {};