blue-react 10.1.2 → 10.2.0

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

@@ -0,0 +1,9 @@
+import React from "react";
+export interface AProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+}
+/**
+ * The `<a>` element automatically sets `rel="noreferrer"` for external links with `target="_blank"`.\
+ * `A` allows all props of the `<a>` element.\
+ * `<A href="https://example.com" target="_blank">Example</A>` ➡️ `<a href="https://example.com" target="_blank" rel="noreferrer">Example</a>`
+ */
+export default function A({ children, rel, ...rest }: AProps): JSX.Element;

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

@@ -0,0 +1,25 @@
+import React from "react";
+import { breakOption } from "./shared";
+export declare const ActionMenuContext: React.Context<{
+    breakOption: breakOption | "none";
+}>;
+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". Default is "lg". The responsive breakpoint at which the menu will be shown as a dropdown.
+     */
+    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/ActionMenuItem.d.ts

@@ -0,0 +1,35 @@
+/// <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;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { SwitchProps } from "./Switch";
+export interface ActionMenuSwitchProps extends SwitchProps {
+    onChange?: () => void;
+    label?: any;
+}
+/**
+ * @deprecated
+ * Use a solution with Bootstrap's `.form-check.form-switch` or `MenuItem` with a switch icon.
+ * Switch for the Action Menu.
+ */
+export default function ActionMenuSwitch({ label, ...props }: ActionMenuSwitchProps): JSX.Element;

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,40 @@
+/// <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;

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

@@ -0,0 +1,19 @@
+/// <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;

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

@@ -0,0 +1,23 @@
+/// <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;

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

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

@@ -0,0 +1,149 @@
+import React, { CSSProperties } from "react";
+export interface MenuItemProps {
+    /**
+     * Sets `to` prop, e.g. when you use the `NavLink` component from React Router.
+     */
+    to?: string;
+    /**
+     * Prop for components by React Router.
+     */
+    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.
+     */
+    icon?: any;
+    /**
+     * Addition to class name of icon wrapper element
+     */
+    iconClassName?: string;
+    /**
+     * Icon component or a class name when the MenuItem is active.
+     */
+    iconForActive?: any;
+    /**
+     * Label of the link.
+     */
+    label?: any;
+    /**
+     * Addition to class name of label wrapper element
+     */
+    labelClassName?: string;
+    /**
+     * Addition to class name of caret
+     */
+    caretClassName?: string;
+    /**
+     * Addition to style of caret
+     */
+    caretStyle?: CSSProperties;
+    /**
+     * Should be set as active.
+     */
+    isActive?: boolean;
+    /**
+     * Set true to highlight the current menu item.
+     */
+    highlighted?: boolean;
+    /**
+     * When using Blue React's routing system: define this link as home page link.
+     */
+    isHome?: boolean;
+    /**
+     * Extends class name of the dropdown menu.
+     */
+    dropdownClassName?: string;
+    /**
+     * Extends style of the dropdown menu.
+     */
+    dropdownStyle?: CSSProperties;
+    /**
+     * Set children to create a nested `MenuItem` as a dropdown.
+     */
+    children?: any;
+    /**
+     * Defines class name.
+     */
+    className?: any;
+    /**
+     * Defines dropdown status from outside.
+     */
+    showDropdown?: boolean;
+    /**
+     * Callback when `showDropdown` changes.
+     */
+    onShowDropdown?: (showDropdown: boolean) => void;
+    /**
+     * Close on click outside.
+     */
+    supportOutside?: boolean;
+    /**
+     * Overrides default class list to be ignored on click outside.
+     * Hint: If you want this menu item to stay open when others will open, set:
+     * `outsideIgnoreClasses={["blue-menu-item-wrapper"]}`.
+     */
+    outsideIgnoreClasses?: string[];
+    /**
+     * By default, MenuItem is a `"button"`. If you set a `href`, it's a `"a"`.
+     * If you want to have it another type, you can pass a component reference with this prop (e.g. `Link`).
+     */
+    elementType?: any;
+    target?: string;
+    rel?: string;
+    title?: string;
+    type?: string;
+    /**
+     * Fired on the draggable target (the source element): occurs when the user starts to drag an element
+     */
+    onDragStart?: (event: React.DragEvent) => void | React.DragEventHandler;
+    /**
+     * Fired on the draggable target (the source element): occurs when an element is being dragged
+     */
+    onDrag?: (event: React.DragEvent) => void | React.DragEventHandler;
+    /**
+     * Fired on the draggable target (the source element): occurs when the user has finished dragging the element
+     */
+    onDragEnd?: (event: React.DragEvent) => void | React.DragEventHandler;
+    /**
+     * Fired on the drop target: occurs when the dragged element enters the drop target
+     */
+    onDragEnter?: (event: React.DragEvent) => void | React.DragEventHandler;
+    /**
+     * Fired on the drop target: occurs when the dragged element is over the drop target
+     */
+    onDragOver?: (event: React.DragEvent) => void | React.DragEventHandler;
+    /**
+     * Fired on the drop target: occurs when the dragged element leaves the drop target
+     */
+    onDragLeave?: (event: React.DragEvent) => void | React.DragEventHandler;
+    /**
+     * Fired on the drop target: occurs when the dragged element is dropped on the drop target
+     */
+    onDrop?: (event: React.DragEvent) => void | React.DragEventHandler;
+    /**
+     * Specifies whether an element is draggable or not.
+     *
+     * **Important:** To make draggable menu items work in Firefox, the elementType must not be `"button"`. Set it to something else, like `"div"`.
+     */
+    draggable?: boolean;
+    hideDraggableIcon?: boolean;
+    "data-tooltip"?: string;
+    /**
+     * Specifies whether an element is disabled or not.
+     */
+    disabled?: boolean;
+    /**
+     * Specifies style of an element.
+     */
+    style?: React.CSSProperties;
+    id?: string;
+}
+/**
+ * Link, button or custom component for Sidebar, Actions or ActionMenu
+ */
+export default function MenuItem(props: MenuItemProps): JSX.Element;

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

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

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

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

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

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