blue-react 10.1.3 → 10.2.0

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

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

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

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

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

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

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

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "blue-react",
-    "version": "10.1.3",
+    "version": "10.2.0",
     "description": "Blue React Components",
     "license": "LGPL-3.0-or-later",
     "type": "module",
@@ -35,7 +35,7 @@
     },
     "dependencies": {
         "@popperjs/core": "^2.11.5",
-        "blue-web": "^1.15.1",
+        "blue-web": "^1.17.4",
         "bootstrap": "~5.3.3",
         "clsx": "^1.1.1"
     },