loon-bulma-react 2026.0.39 → 2026.0.41

package/dist/lib/components/TreeView/TreeView.d.ts

@@ -0,0 +1,185 @@
+import React from 'react';
+import { DeepPartial, StrictOmit } from './../../types';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+type InitialStateParams = 'expanded' | 'collapsed' | 'auto';
+type GlobalExpandStateParams = 'expanded' | 'collapsed';
+type SearchBehaviorParams = 'hide' | 'dim';
+type GlobalExpandCommand = {
+    state: GlobalExpandStateParams | 'expandToLevel';
+    nonce: number;
+    level?: number;
+};
+type TreeViewRef = {
+    expandAll: () => void;
+    collapseAll: () => void;
+    expandToLevel: (depth: number) => void;
+};
+/** icon-set voor de treeview */
+type IconSet = {
+    /** icon voor node die je kan expanden (default: chevron Down) */
+    expand: IconProp;
+    /** icon voor node die momenteel is uitgebreid (default: chevron Up) */
+    collapse: IconProp;
+    /** icon voor node zonder kinderen (default: Min-teken) */
+    noChildren: IconProp;
+};
+/** De basis-props voor de nodes en de items */
+type BaseProps = {
+    /** het path naar deze node*/
+    path: string;
+    /** het nu gehoverde path */
+    hoveredPath: string;
+    /** hovered-path setter */
+    setHoveredPath: (path: string) => void;
+    /** het nu geselecteerde path */
+    selectedPath: string;
+    /** selected-path setter */
+    setSelectedPath: (path: string) => void;
+};
+type InternTreeViewProps<T extends unknown = string> = BaseProps & {
+    /** (optionele) class prop voor de tree */
+    className?: string;
+    /** (optionele) style-prop */
+    style?: React.CSSProperties;
+    /** Data in de treeview */
+    nodes?: Array<TreeViewNode<T>>;
+    expanded: boolean;
+    /** internal command for expand/collapse actions */
+    globalExpandCommand?: GlobalExpandCommand;
+    /** initial path to select/open */
+    initialPath?: string;
+    /** initial expanded/collapsed state of parent */
+    parentInitialState?: InitialStateParams;
+    /** search term to filter nodes */
+    searchTerm?: string;
+    /** how to display search results */
+    searchBehavior?: SearchBehaviorParams;
+    /** Custom search function to determine if a node matches the search term */
+    searchFn?: (node: TreeViewNode<T>, searchTerm: string) => boolean;
+    /** expand/collapse/noChildren icons */
+    icons: IconSet;
+};
+type TreeViewNode<T extends unknown = string> = {
+    /** de value van deze node (default een string, maar generic) */
+    value: T;
+    /** het label op deze node. string of functie die een string oplevert */
+    label: React.ReactNode | ((v: T) => React.ReactNode);
+    /**
+     * hoe moeten we het item identificeren (te gebruiken als `key` in `.map()`).
+     * Default ='value', die werkt alleen voor strings, booleans en numbers. Voor een ander type moet je een key of een functie geven.
+     * Het resultaat MOET altijd een string opleveren. Wordt gebruikt om het item te identificeren EN in het path dat we exporteren
+     * - `value`: gebruik de value zelf (werkt alleen als value een string, number, boolean is)
+     * - `keyof T`: gebruik de property van T met deze key als identificatie (werkt alleen als die property een string, number, boolean is)
+     * - `(item: T) => string`: een functie die een unieke string oplevert voor deze value. In combinatie met de rest van het path dus uniek
+     */
+    childIdentifier?: 'value' | keyof T | ((item: T) => string);
+    /** de child-items van deze tree node */
+    items?: Array<TreeViewNode<T>>;
+    /** onclick-callback van de node
+     * @param value de value van de node
+     * @param path het path naar deze node
+     */
+    onClick?: (value: T, path: string) => void;
+    /** initial expansion state of the node */
+    initialState?: InitialStateParams;
+    /**
+     * Optionele zoek-string of function die een zoek-string oplevert.
+     * Wanneer opgegeven, wordt deze gebruikt in plaats van te proberen tekst uit het label
+     * of de value te extraheren voor zoekmatching. Dus werkt beter voor complexere Nodes.
+     *
+     * @example
+     * // Static searchable content
+     * searchable: "Item 1 horse icon"
+     * // Dynamic searchable content based on node value
+     * searchable: (value) => `${value} custom searchable text`
+     */
+    searchable?: string | ((value: T) => string);
+};
+/** Props voor de TreeView */
+type TreeViewRootProps<T extends unknown = string> = StrictOmit<InternTreeViewProps<T>, 'path' | 'hoveredPath' | 'setHoveredPath' | 'selectedPath' | 'setSelectedPath' | 'expanded' | 'icons'> & {
+    /** initial path to expand */
+    initialPath?: string;
+    /** Zoekterm om de nodes te doorzoeken */
+    searchTerm?: string;
+    /**
+     * Weergave-gedrag bij zoeken:
+     * 'hide' - verberg niet-overeenkomende nodes
+     * 'dim' - dim niet-overeenkomende nodes (standaard)
+     */
+    searchBehavior?: SearchBehaviorParams;
+    /**
+     * Zoekfunctie om te bepalen of een node overeenkomt met de zoekterm.
+     * @param node - The tree node to check
+     * @param searchTerm - The current search term
+     * @returns true if the node matches the search term
+     */
+    searchFn?: (node: TreeViewNode<T>, searchTerm: string) => boolean;
+    /** Icon set for the TreeView: 3 properties:
+     * - `expand`: icon voor node die je kan expanden (default: chevron Down)
+     * - `collapse`: icon voor node die momenteel is uitgebreid (default: chevron Up)
+     * - `noChildren`: icon voor node zonder kinderen (default: Min-teken)
+     */
+    icons?: DeepPartial<IconSet>;
+};
+/**
+ *  TreeView component om hiërarchische data weer te geven.
+ *
+ * @example
+ *  <input type="text" value={term} onChange={(e) => setTerm(e.target.value)} placeholder="Zoek term" />
+ *  <select value={behavior} onChange={(e) => setBehavior(e.target.value as 'hide' | 'dim')}>
+ *    <option value="dim">Dim niet-overeenkomende items</option>
+ *    <option value="hide">Verberg niet-overeenkomende items</option>
+ *  </select>
+ *
+ *  return <TreeView
+ *    nodes={data}
+ *    initialPath="/Root/Item 1/Item 1.1/Item 1.1.2"
+ *    searchTerm={term}
+ *    searchBehavior={behavior} />
+ * @example // Gebruik van useTreeViewControls hook voor expandAll/collapseAll
+ * function Demo() {
+ *   const { treeRef, expandAll, collapseAll } = useTreeViewControls();
+ *
+ *   return (
+ *     <>
+ *       <Buttons>
+ *         <Button onClick={expandAll}>Expand all</Button>
+ *         <Button onClick={collapseAll}>Collapse all</Button>
+ *       </Buttons>
+ *
+ *       <TreeView ref={treeRef} nodes={data} />
+ *     </>
+ *   );
+ * }
+
+ */
+declare const TreeViewRoot: <T extends unknown = string>(props: TreeViewRootProps<T> & React.RefAttributes<TreeViewRef>) => React.ReactElement;
+declare function TreeViewNode<T extends unknown = string>({ className: cnProp, style, path, expanded, globalExpandCommand, initialPath, hoveredPath, setHoveredPath, selectedPath, setSelectedPath, nodes, parentInitialState, searchTerm, searchBehavior, icons, searchFn, }: InternTreeViewProps<T>): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook om de `TreeView` imperatief aan te sturen met `expandAll`, `collapseAll`, en `expandToLevel`.
+ *
+ * @example
+ * function Demo() {
+ *   const { treeRef, expandAll, collapseAll, expandToLevel } = useTreeViewControls();
+ *
+ *   return (
+ *     <>
+ *       <Buttons>
+ *         <Button onClick={expandAll}>Expand all</Button>
+ *         <Button onClick={collapseAll}>Collapse all</Button>
+ *         <Button onClick={() => expandToLevel(2)}>Show 2 levels</Button>
+ *       </Buttons>
+ *
+ *       <TreeView ref={treeRef} nodes={data} />
+ *     </>
+ *   );
+ * }
+ */
+declare function useTreeViewControls(): {
+    treeRef: React.RefObject<TreeViewRef | null>;
+    expandAll: () => void;
+    collapseAll: () => void;
+    expandToLevel: (depth: number) => void;
+};
+export type { TreeViewRootProps as TreeViewProps, TreeViewNode, TreeViewRef };
+export { TreeViewRoot as TreeView, useTreeViewControls };

package/dist/lib/contexts/ActionSheet/ActionSheetContextProvider.d.ts

@@ -0,0 +1,76 @@
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+import { ColorProp } from './../../types';
+import React from 'react';
+type ActionSheetButton<T extends unknown = {}> = string | {
+    txt?: string | ((v: T) => string);
+    icon?: string | IconProp;
+    value: T | string;
+    color?: ColorProp;
+    key?: string | undefined;
+};
+type State<T extends unknown = {}> = {
+    show: boolean;
+    content: string | React.ReactNode;
+    buttons: Array<ActionSheetButton<T>>;
+    value?: ActionSheetButton<T>;
+    modalID: number;
+};
+/**
+ * ActionSheet provider om `useActionSheet`-hook te kunnen gebruiken.
+ * @param children de children
+ * @returns
+ * @example // index.tsx of App.tsx
+ * root.render(
+ * <ActionSheetProvider>
+ *   <>
+ *    // ...
+ *   </>
+ * </ActionSheetProvider>)
+ */
+declare function ActionSheetProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook voor de confirmation
+ * @param buttons tekst voor op de OK-button (default = 'OK')
+ * @returns onAction-fn, actionSheet-fn, confirmState
+ * @example
+ * const { actionSheet } = useActionSheet(['1', '2', '3', '4']);
+ * // ...
+ * const onClick = async () => {
+ *   let value = await actionSheetObjects(<p>Wooooot</p>);
+ * };
+ * @example
+ * const { actionSheet } = useActionSheet<{ num: number } | string>();
+ * const onClick = async () => {
+ *   let value = await actionSheet({
+ *    content:<p>Wooooot</p>,
+ *    buttons:[
+ *       { value: '1', txt: 'een', color: 'i' },
+ *       { value: '2', txt: 'twee', color: 's', icon: faHorseHead },
+ *       { value: { num: 3 }, color: 'd' },
+ *       { value: '4', txt: 'vier', color: 'w', icon: faShareNodes },
+ *     ]
+ *   });
+ * }
+ */
+declare function useActionSheet<T extends unknown = string>(): {
+    /**
+     * awaitable actionsheet function. Geef een string of Fragment op om iets in de actionsheet-modal te tonen
+     * @param content string of Fragment met de boodschap voor de actionsheet
+     * @param buttons array van ActionSheetButton-objecten
+     * @returns `Promise<string|ActionSheetButton>` met true als de gebruiker op een action heeft geklikt,
+     */
+    actionSheet: ({ content, buttons }: {
+        content: string | React.ReactNode;
+        buttons: ActionSheetButton<T>[];
+    }) => Promise<T>;
+    /** INTERNAL USE ONLY - DO NOT USE */
+    actionSheetState: State<T>;
+    /** INTERNAL USE ONLY - DO NOT USE */
+    onAction: (val: ActionSheetButton<T>) => void;
+    /** INTERNAL USE ONLY - DO NOT USE */
+    onCancel: () => void;
+};
+export { ActionSheetProvider, useActionSheet };
+export type { ActionSheetButton };

package/dist/lib/contexts/AppProvider/AppProviders.d.ts

@@ -0,0 +1,17 @@
+import { ColorSchemeType } from './../../types';
+import React from 'react';
+import { OptionalDefaultsType } from '../DefaultsProvider/DefaultsProvider';
+type AppProviderProps = {
+    children: React.ReactNode;
+    notifierLocation?: 'top' | 'bottom';
+    initialTheme?: ColorSchemeType;
+    defaults?: OptionalDefaultsType;
+    onThemeChanged?: (v: ColorSchemeType) => void;
+};
+/**
+ * Provider-wrapper die alle LoonBulmaReact providers bevat.
+ * @param param0
+ * @returns
+ */
+export declare function LoonBulmaReactProviders({ children, initialTheme, notifierLocation, defaults, onThemeChanged }: AppProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/contexts/ColorSchemeProvider/ColorSchemeProvider.d.ts

@@ -0,0 +1,15 @@
+import { ColorSchemeType } from './../../types';
+import React from 'react';
+export declare const ColorSchemeContext: React.Context<{
+    scheme: ColorSchemeType;
+    setScheme: (v: ColorSchemeType) => void;
+}>;
+export declare function ColorSchemeProvider({ children, initialScheme, onThemeChanged, }: {
+    children: React.ReactNode;
+    initialScheme?: ColorSchemeType | undefined;
+    onThemeChanged?: (t: ColorSchemeType) => void;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useColorScheme(): {
+    scheme: ColorSchemeType;
+    setScheme: (v: ColorSchemeType) => void;
+};

package/dist/lib/contexts/Confirm/ConfirmContextProvider.d.ts

@@ -0,0 +1,60 @@
+import React from 'react';
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+type State = {
+    show: boolean;
+    content: string | React.ReactNode;
+    ok: string;
+    okIcon?: IconProp | undefined;
+    cancel: string;
+    cancelIcon?: IconProp | undefined;
+    otherButtons?: React.ReactNode[];
+    modalID: number;
+};
+/**
+ * Confirm provider om `useConfirm`-hook te kunnen gebruiken.
+ * @param children de children
+ * @returns
+ * @example // index.tsx of App.tsx
+ * root.render(
+ * <ConfirmProvider>
+ *   <>
+ *    // ...
+ *   </>
+ * </ConfirmProvider>)
+ */
+declare function ConfirmProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook voor de confirmation
+ * @param ok tekst voor op de OK-button (default = 'OK')
+ * @param cancel tekst voor opd e cancel-button (default = 'Annuleren')
+ * @param others eventuele andere buttons (default = undefined)
+ * @returns onConfirm-fn, onCancel-fn, confirm-fn, confirmState
+ * @example
+ * const {  confirm } = useConfirm();
+ * const confirmSomethingFromString = (msg: string) => {
+ *   const isConfirmed = await (confirm(msg), "OKeeeee", "Annuleeeeren")
+ * }
+ * @example // met default ok & annuleren
+ * const {  confirm } = useConfirm();
+ * const confirmSomethingFromFragment = (fragment: React.ReactNode) => {
+ *   const isConfirmed = await (confirm(fragment)) // OK = "OK", Cancel = "Annuleren" (defaults)
+ * }
+ */
+declare function useConfirm(): {
+    /** INTERNAL USE ONLY - DO NOT USE */
+    onConfirm: () => void;
+    /** INTERNAL USE ONLY - DO NOT USE */
+    onCancel: () => void;
+    /**
+     * awaitable confirm function. Geef een string of Fragment op om iets in de confirm-modal te tonen
+     * @param content string of Fragment met de boodschap voor de confirm
+     * @returns Promise<boolean> met true als de gebruiker op OK heeft geklikt, false als anders
+     * @example const isConfirmed = await confirm("Weet je het zeker?")
+     */
+    confirm: (content: string | React.ReactNode, okText: string | undefined, cancelText: string | undefined, okIcon?: IconProp | undefined, cancelIcon?: IconProp | undefined, ...otherButtons: React.ReactNode[]) => Promise<boolean>;
+    /** INTERNAL USE ONLY - DO NOT USE */
+    confirmState: State;
+};
+export { ConfirmProvider, useConfirm };

package/dist/lib/contexts/DefaultsProvider/DefaultsProvider.d.ts

@@ -0,0 +1,100 @@
+import { SizeProp, DirectionProp, AlignmentProp, ColorProp, TagSizeProp } from './../../types';
+import React from 'react';
+type InputSettings = {
+    /** default size setting (`m`) */
+    size: SizeProp;
+    /** default direction setting (`v`) */
+    direction: DirectionProp;
+    /** default alignment setting (`l`) */
+    alignment: AlignmentProp;
+    /** default direction setting for radio-button-items (`v`) */
+    rbDirection: DirectionProp;
+};
+type ButtonSettings = {
+    /** default size setting (`m`) */
+    size: SizeProp;
+    /** default color setting (`p`) , voor als er geen color is opgegeven*/
+    color: ColorProp;
+};
+type TabSettings = {
+    /** default size setting (`m`) */
+    size: SizeProp;
+    /** default tab type setting (`lined`) */
+    type: 'page' | 'lined' | 'toggle' | 'pill';
+};
+type TagSettings = {
+    /** default size setting (`m`) */
+    size: TagSizeProp;
+};
+type DefaultsType = {
+    /** default settings for inputs */
+    input: InputSettings;
+    /** default button settings*/
+    button: ButtonSettings;
+    /** default tabbar settings */
+    tabs: TabSettings;
+    /** default tag settings */
+    tags: TagSettings;
+    /** default alignment settings */
+    alignment: AlignmentProp;
+    /** default settings voor de datatable paginatie */
+    datatablePagination: DatatablePaginationOptions;
+};
+export type DatatablePaginationOptions = {
+    /** tonen we pagination? */
+    hidden: boolean;
+    /** vanaf wel aantal rijen is paginatie actief */
+    threshold: number;
+    /** initiele pagination number. default = 1 (first) */
+    initialPage: number;
+    /** Default aantal rijen per pagina  (Infinity voor alles)*/
+    initialRowsPerPage: number;
+    /** Opties voor aantal rijen per pagina (gebruik value `Infinity` voor alles) */
+    rowsPerPageOptions: {
+        label: string;
+        value: number;
+    }[];
+    /** Callback functie die wordt aangeroepen als de user een andere rowsPerPage optie kiest. Zodat je deze kan opslaan (als gewenst) */
+    onRowsPerPerPageOptionChanged?: (option: {
+        label: string;
+        value: number;
+    }) => void;
+};
+/** Partial type voor het updaten van een of meer enkele settings.
+ * Alle properties zijn optioneel, en kunnen dus ook weggelaten worden.
+ */
+export type OptionalDefaultsType = Partial<{
+    /** default settings for inputs */
+    input: Partial<InputSettings>;
+    /** default button settings*/
+    button: Partial<ButtonSettings>;
+    /** default tabbar settings */
+    tabs: Partial<TabSettings>;
+    /** default tag settings */
+    tags: Partial<TagSettings>;
+    /** default alignment settings */
+    alignment: Partial<AlignmentProp>;
+    datatablePagination: Partial<DatatablePaginationOptions>;
+}>;
+/**
+ * Context voor het bijhouden van de default waardes voor de LoonBulmaReact componenten
+ * @param defaults de defaults zoals geconfigureerd: een merge van de standaard-defaults en de opgegeven defaults in de provider.
+ * @param update: update functie voor de defaults
+ * @param reset: reset functie voor de defaults. Zet de defaults terug naar de custom defaults.
+ * @returns een context met de default waardes en een functie om deze te updaten
+ */
+export declare const DefaultsContext: React.Context<{
+    defaults: DefaultsType;
+    update: (d: OptionalDefaultsType) => void;
+    reset: () => void;
+}>;
+/** Provider voor de DefaultsContext
+ * @param children de children van de provider
+ * @param defaults de custom defaults die de standaard defaults overschrijven
+ * @returns de provider met de defaults en de update en reset functies
+ */
+export declare function DefaultsProvider({ children, defaults: customDefaults }: {
+    children: React.ReactNode;
+    defaults?: OptionalDefaultsType;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/contexts/DialogsProvider/DialogsProvider.d.ts

@@ -0,0 +1,4 @@
+/** DialogsProvider bevat provider contexts voor ConfirmContext, ActionSheetContext EN PromptContext */
+export declare function DialogsProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/lib/contexts/KeysProvider/KeysProvider.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { type HotkeyItem } from '../../hooks/useHotkeys';
+type HotkeyRegistration = {
+    id: string;
+    hotkeys: HotkeyItem[];
+    tagsToIgnore: string[];
+    triggerOnContentEditable: boolean;
+};
+export type RegisteredHotkeyMatch = {
+    id: string;
+    hotkey: string;
+};
+type KeysContextType = {
+    /** Welke functietoetsen (F1, F2, ...) ingedrukt */
+    fnKeys: Set<FnKey>;
+    /** Welke speciale toetsen ingedrukt */
+    specialKeys: Set<SpecialKey>;
+    digitKeys: Set<DigitKey>;
+    charKeys: Set<CharKey>;
+    otherKeys: Set<OtherKey>;
+    keys: Set<Key>;
+    modifiers: {
+        ctrl: boolean;
+        shift: boolean;
+        alt: boolean;
+        meta: boolean;
+        escape: boolean;
+        enter: boolean;
+    };
+    /** Register hotkeys to be handled by the provider */
+    registerHotkeys: (registration: HotkeyRegistration) => void;
+    /** Unregister hotkeys */
+    unregisterHotkeys: (id: string) => void;
+    /** Check welke registraties een bepaalde hotkey gebruiken */
+    getRegisteredHotkeys: (hotkeyToFind: string) => RegisteredHotkeyMatch[];
+};
+/**
+ * De KeysProvider zorgt ervoor dat de toetsenbordstatus (ctrl, shift, alt) beschikbaar is in de hele app.
+ */
+export declare const KeysContext: React.Context<KeysContextType>;
+export declare function KeysProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+/** hook mag ook */
+export declare const useKeyContext: () => KeysContextType;
+type FnKey = 'F1' | 'F2' | 'F3' | 'F4' | 'F5' | 'F6' | 'F7' | 'F8' | 'F9' | 'F10' | 'F11' | 'F12' | 'F13' | 'F14' | 'F15' | 'F16' | 'F17' | 'F18' | 'F19' | 'F20' | 'F21' | 'F22' | 'F23' | 'F24';
+type SpecialKey = 'Escape' | 'Tab' | 'Enter' | 'NumpadEnter' | 'Backspace' | 'Delete' | 'ArrowUp' | 'ArrowDown' | 'ArrowLeft' | 'ArrowRight' | 'ControlLeft' | 'ControlRight' | 'ShiftLeft' | 'ShiftRight' | 'AltLeft' | 'AltRight' | 'MetaLeft' | 'MetaRight' | 'CapsLock' | 'Home' | 'End' | 'PageUp' | 'PageDown';
+type DigitKey = 'Digit0' | 'Digit1' | 'Digit2' | 'Digit3' | 'Digit4' | 'Digit5' | 'Digit6' | 'Digit7' | 'Digit8' | 'Digit9' | 'Numpad0' | 'Numpad1' | 'Numpad2' | 'Numpad3' | 'Numpad4' | 'Numpad5' | 'Numpad6' | 'Numpad7' | 'Numpad8' | 'Numpad9';
+type CharKey = 'KeyA' | 'KeyB' | 'KeyC' | 'KeyD' | 'KeyE' | 'KeyF' | 'KeyG' | 'KeyH' | 'KeyI' | 'KeyJ' | 'KeyK' | 'KeyL' | 'KeyM' | 'KeyN' | 'KeyO' | 'KeyP' | 'KeyQ' | 'KeyR' | 'KeyS' | 'KeyT' | 'KeyU' | 'KeyV' | 'KeyW' | 'KeyX' | 'KeyY' | 'KeyZ';
+type OtherKey = 'Equal' | 'Minus' | 'NumpadEqual' | 'NumpadMinus' | 'NumpadPlus' | 'NumpadMultiply' | 'NumpadDivide' | 'NumpadDecimal' | 'NumpadComma' | 'NumpadPeriod' | 'NumpadSeparator' | 'BracketRight' | 'BracketLeft' | 'Backslash' | 'Quote' | 'Semicolon' | 'Comma' | 'Period' | 'Slash' | 'Backquote';
+type Key = FnKey | SpecialKey | DigitKey | CharKey | OtherKey;
+export {};

package/dist/lib/contexts/ModalProvider/ModalProvider.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type ModalContextType = {
+    push: (id?: number | undefined) => number;
+    pop: (id: number) => boolean;
+    remove: (id: number) => void;
+};
+export declare const ModalContext: React.Context<ModalContextType>;
+export declare function ModalProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/contexts/ModeProvider/ModeProvider.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+type ContextType = {
+    /** is de special mode van Loon-Bulma-React aan? */
+    specialMode: boolean;
+    /** zet de special mode van Loon-Bulma-React aan of uit */
+    setSpecialMode: (isSpecialMode: boolean) => void;
+};
+export declare const ModeContext: React.Context<ContextType>;
+/** Zet een specifieke modus aan voor de loon-bulma-react-componenten
+ * @deprecated - deze gaat er uit!
+ */
+export declare function ModeProvider({ children, isSpecialMode }: {
+    children: React.ReactNode;
+    isSpecialMode?: boolean | undefined;
+}): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/lib/contexts/Notifier/Notifier.d.ts

@@ -0,0 +1,81 @@
+import { ColorProp } from './../../types';
+import React from 'react';
+export type NotifierProviderProps = {
+    /** De child-components die de notifier mogen gebruiken */
+    children: React.ReactNode;
+    /** Waar moet de notifier getoont worden? (default = 'top') */
+    location?: 'top' | 'bottom';
+    /** De tijd (in ms) waarna een notificatie automatisch moet dismissen */
+    defaultAutoDismiss?: number;
+};
+export type NotifierProps = {
+    next?: NotifierItemProps;
+    del?: number;
+    clearTime: Date;
+    /** De standaard-tijd om notificaties te sluiten in milliseconden. (default = 5000 (ms)) */
+    defaultDismissTime?: number;
+    /** Notificaties komen altijd aan de rechterkant, kies uit bovenkant of onderkant (default = 'top') */
+    location?: 'top' | 'bottom';
+    /** de breedte van de notification-bar. Default =  `20vw` (20% schermbreedte) */
+    width?: `${number}%` | `${number}px` | `${number}em` | `${number}vw` | `${number}vh`;
+};
+export type NotifierItemProps = {
+    /** Optioneel id voor notificatie, als niet gedefinieerd wordt het een random integer */
+    id?: number;
+    /** Type notificatie I(info), S(success), D(danger), W(warning)
+     * @deprecated use `color` instead
+     */
+    type?: ColorProp;
+    /** Kleur van de notificatie */
+    color?: ColorProp;
+    /** De content voor de notificatie */
+    content?: React.ReactNode;
+    /** Tijd voor automatisch sluiten.
+     * - `0`:niet automatisch te sluiten. Dan is de notificatie alleen te sluiten met een 'click'
+     * - `number`: aantal milliseconden voor automatisch sluiten */
+    dismissAfter?: 0 | number;
+    /** Wat te doen als er geklikt wordt. Bij een 'click' wordt de notificatie ook gesloten. */
+    onClick?: (e: any) => void;
+    /** Payload voor de notification */
+    payload?: any;
+};
+export type NotifierContextType = {
+    /** Toon een notificatie
+     * @param notification de notificatie-data
+     * @returns ID van de notificatie (om te kunnen verwijderen)
+     */
+    notify: (notification: NotifierItemProps) => number;
+    /** Cerwijder een notificatie
+     * @param id ID van de notificatie
+     */
+    remove: (id: number) => void;
+    /**
+     * Verwijder ALLE notificaties
+     */
+    clear: () => void;
+};
+/** Provider voor de notifier.
+ * De inhoud van de app moet binnen deze <NotifierProvider>...</NotifierProvider vallen.
+ * De notifier is dan via de hook @see useNotifier te gebruiken in child-components van de App zelf, niet in APP!
+ * @param props: bevat alleen de children van de notifier, dus ook van de app.
+ * @example
+ * <NotifierProvider>
+ *  <App />
+ * </NotifierProvider>
+ * */
+export declare const NotifierProvider: (props: NotifierProviderProps) => import("react/jsx-runtime").JSX.Element;
+/** React Hook om notificaties in de notifier te beïnvloeden
+ * @function notify(n: NotifierItemProps): toon een notificatie, returns ID
+ * @function remove(id: number): verwijder een notificatie obv ID
+ * @function clear(): verwijder alle notificaties
+ * @example
+ * const { notify, remove, clear } = useNotifier();
+ */
+export declare function useNotifier(): NotifierContextType;
+/**
+ * Een component om notificaties in weer te geven, die na verloop van tijd weer verdwijnen. Dat is per notificatie instelbaar.
+ * Notificaties hebben ook een click-handler om een onClick() actie uit te voeren. De notificatie wordt dan ook gesloten.
+ * @param props
+ * @returns een Notificatie-component die (tijdelijke) berichtjes weergeeft aan de rechterkant van het scherm.
+ */
+export declare function Notifier({ next, clearTime, del, defaultDismissTime, location, width: containerWidth }: NotifierProps): import("react/jsx-runtime").JSX.Element;