blue-react 10.0.0-rc1 → 10.0.0-rc2

package/dist/components/shared.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getPhrase = getPhrase;
 var phrases = {
   Cancel: ["Cancel", "Abbrechen"],
   Yes: ["Yes", "Ja"],
@@ -14,15 +8,11 @@ var phrases = {
   Error: ["Error", "Fehler"],
   Information: ["Information", "Information"]
 };
-
-function getPhrase(keyword) {
+export function getPhrase(keyword) {
   var countryCode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : undefined;
-
   var _phrases = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : undefined;
-
   countryCode = countryCode || navigator.language.toLowerCase().indexOf("de") > -1 ? "de-DE" : "en-US";
   _phrases = _phrases || phrases;
-
   if (_phrases[keyword]) {
     if (countryCode.indexOf("de-") > -1) {
       return _phrases[keyword][1];

package/dist/style.scss

@@ -1,5 +1,5 @@
 /*!
- * Blue React v10.0.0-rc1 (https://bruegmann.github.io/blue-react)
+ * Blue React v10.0.0-rc1-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/A.d.ts

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

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

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

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

@@ -1,77 +1,76 @@
-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;
-}
+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;