loon-bulma-react 2024.0.20 → 2024.0.22

package/dist/index.d.cts

@@ -740,10 +740,12 @@ type DataTableColumnProp<T extends unknown = unknown> = {
     sort?: (a: T, b: T) => -1 | 0 | 1 | number;
     /** de waarde van de kolom. Een fucnction of een property van object van type `T` (string) */
     value: KeyOf<T> | ((item: T) => React$1.ReactNode);
-    /** manier om deze cel te identificeren */ cellIdentifier?: KeyOf<T> | ((item: T) => string);
+    /** manier om deze cel te identificeren */
+    cellIdentifier?: KeyOf<T> | ((item: T) => string);
     /** header voor de kolom. Als niet gedefinieerd wordt de `value` gebruikt, Dus als `value` een `function` is, **moet** je deze setten */
     header?: string | React$1.ReactNode;
-    /** alignment van deze kolom (default = `l` */ alignment?: AlignmentProp;
+    /** alignment van deze kolom (default = `l` */
+    alignment?: AlignmentProp;
     /** className voor de kolom, om een cel te stylen afhankelijk van de waarde */
     columnClass?: string | ((item: T) => string);
 };
@@ -767,25 +769,34 @@ type DataTableProps<T extends unknown = unknown> = {
      * ];
      */
     columns: Array<DataTableColumnProp<T>>;
-    /** het kolom-nummer waarop default gesorteerd moet worden. **LET OP: de 1e kolom heeft nr 1! ** */ defaultSortColNum?: number;
-    /** data-array in de tabel */ data?: Array<T>;
-    /** moet de tabel compact wwergegevens worden (voorheen `narrow`, default = `false`) */ compact?: boolean;
-    /** moet de tabel smaller worden weergegeven? */ narrow?: boolean;
+    /** het kolom-nummer waarop default gesorteerd moet worden. **LET OP: de 1e kolom heeft nr 1! ** */
+    defaultSortColNum?: number;
+    /** data-array in de tabel */
+    data?: Array<T>;
+    /** moet de tabel compact wwergegevens worden (voorheen `narrow`, default = `false`) */
+    compact?: boolean;
+    /** moet de tabel smaller worden weergegeven? */
+    narrow?: boolean;
     /** is de header van de tabel sticky ? (default = `none`)
      * - none: geen sticky header
      * - header: alleen de kolom-namen zijn sticky
      * - all: de hele header is sticky, inclusief search en de `headerContent`
      * */
     sticky?: 'none' | 'header' | 'all';
-    /** is de tabel is de tabel hoverbaar (en is dat ook zichtbaar?) hebben? (default = `false`) */ hoverable?: boolean;
-    /** paginatie verstoppen? (default = `false`) */ hidePagination?: boolean;
+    /** is de tabel is de tabel hoverbaar (en is dat ook zichtbaar?) hebben? (default = `false`) */
+    hoverable?: boolean;
+    /** paginatie verstoppen? (default = `false`) */
+    hidePagination?: boolean;
     /** maximaal aantal rijen in de tabel voor paginatie aangaat. (default = 20)
      * - 0: geen maximum, alle rijen worden getoond
-     * - number: maximum aantal rijen voor paginatie */ maxRows?: 0 | number;
-    /** bepaal grootte van paginatie en zoek-input in de tabel */ size?: SizeProp;
-    /** moet het zoeken verborgen zijn? (default = `false`) */ hideSearch?: boolean;
-    /** meoten gebruikte zoekresultaten deze sessie bewaard worden?  */ showPrevSearchTerms?: boolean;
-    /** placeholder voor zoek-input (default = 'Zoek ...') */ searchPlaceholder?: string;
+     * - number: maximum aantal rijen voor paginatie */
+    maxRows?: 0 | number;
+    /** bepaal grootte van paginatie en zoek-input in de tabel */
+    size?: SizeProp;
+    /** moet het zoeken verborgen zijn? (default = `false`) */
+    hideSearch?: boolean;
+    /** placeholder voor zoek-input (default = 'Zoek ...') */
+    searchPlaceholder?: string;
     /** zoek-function voor de datatable. Default gebruikt `JSON.stringify` op het object om te controleren of de zoekterm in een row voorkomt
      * @param searchTerm de zoekterm
      * @param data de data-array
@@ -871,7 +882,7 @@ type DataTableProps<T extends unknown = unknown> = {
  * @param param0
  * @returns
  */
-declare function DataTable<T extends unknown = unknown>({ data, columns: cols, defaultSortColNum, compact, narrow, hoverable, sticky, hidePagination, hideSearch, showPrevSearchTerms, headerContent, footerContent, size, maxRows: definedMaxRows, searchPlaceholder, rowIdentifier, onSearch, onRowSelected, rowClass, renderWhenNoData, searchInfoMessage, id: tableID, itemRef, }: DataTableProps<T>): JSX.Element;
+declare function DataTable<T extends unknown = unknown>({ data, columns: cols, defaultSortColNum, compact, narrow, hoverable, sticky, hidePagination, hideSearch, headerContent, footerContent, size, maxRows: definedMaxRows, searchPlaceholder, rowIdentifier, onSearch, onRowSelected, rowClass, renderWhenNoData, searchInfoMessage, id: tableID, itemRef, }: DataTableProps<T>): JSX.Element;
 
 type HelpTxtProps = {
     children: React$1.ReactNode;
@@ -3304,6 +3315,7 @@ type InputStylingPropsType = {
     /** moet het label van de input verborgen worden? (screenreader only) (default = `false`) */ labelHidden?: boolean;
     /** label boven (`v`) of voor (`h`) de input, (default = `v`, vertical) */ direction?: DirectionProp;
     /** (optioneel) icon op de input */ icon?: IconProp | string | undefined | null;
+    infoData?: string | React$1.ReactNode | (() => void) | undefined;
 };
 type InputPropsType<T = InputValueType> = {
     optionList?: string[] | Array<{
@@ -3476,7 +3488,7 @@ declare function BaseInput<T extends InputValueType = string>({ alignment, autoC
  * | type           | `string`       | type voor deze input (default = `text`)|
  * | value          | `string`       | value voor deze input (default = `undefined`)|
  */
-declare function Input<T extends InputValueType = string>({ direction, errorMessage, showRequiredOnLabel, icon, id, label, labelHidden, name, required, loading, size, value, optionList, onBlur, ...props }: StrictOmit<InputPropsType<T>, 'optionListId'> & InputStylingPropsType): JSX.Element;
+declare function Input<T extends InputValueType = string>({ direction, errorMessage, showRequiredOnLabel, icon, id, label, labelHidden, name, required, loading, size, value, infoData, optionList, onBlur, onFocus, ...props }: StrictOmit<InputPropsType<T>, 'optionListId'> & InputStylingPropsType): JSX.Element;
 
 type CheckBoxInputProps = StrictOmit<InputPropsType<boolean>, 'value' | 'type' | 'step' | 'pattern' | 'errorMessage' | 'infoMessage' | 'min' | 'max' | 'pattern' | 'placeholder'> & StrictOmit<InputStylingPropsType, 'icon'> & {
     /** is de input checked? */
@@ -3507,7 +3519,7 @@ type CheckBoxInputProps = StrictOmit<InputPropsType<boolean>, 'value' | 'type' |
  * const [x, setX] = React.useState(false);
  * <CheckBox name="test" label="test" value={x} onValueChanged={setX} direction='v'/>
  */
-declare function CheckBox({ id, label, name, size, direction, required, showRequiredOnLabel, value, errorMessage, labelHidden, onValueChanged, onBlur, ...props }: CheckBoxInputProps): JSX.Element;
+declare function CheckBox({ id, label, name, size, direction, required, showRequiredOnLabel, value, errorMessage, labelHidden, helpTag, infoData, onValueChanged, onBlur, onFocus, ...props }: CheckBoxInputProps): JSX.Element;
 /**
  * Een checkbox input die nog helemaal zelf aan te passen is, dus zonder container eromheen. Om een checkbox in met wat meer styling te gebruiken, gebruik dan de `CheckBox` component.
  * Dat is een wrapper om deze component heen. De properties `type`, `step`, `min`, `max`, `icon`, `pattern`, `placeholder` en `direction` zijn niet van toepassing op deze component.
@@ -3633,7 +3645,7 @@ type SelectInputProps<T extends number | string | string[]> = StrictOmit<InputPr
  * ..</Select.OptGroup>
  * </Select>
  */
-declare function Select<T extends number | string | string[] = string>({ value, id, name, label, grouped, required, showRequiredOnLabel, errorMessage, infoMessage, multiple, alignment, size, direction, options, children: nodes, helpTag, disabled, keyboardType, title, spellCheck, loading, autoComplete, autofocus, form, inputRef: ref, labelHidden, icon, onBlur, onFocus, onChange, onKeyDown, onKeyUp, onValueChanged, }: SelectInputProps<T>): JSX.Element;
+declare function Select<T extends number | string | string[] = string>({ value, id, name, label, grouped, required, showRequiredOnLabel, errorMessage, infoMessage, multiple, alignment, size, direction, options, children: nodes, helpTag, disabled, keyboardType, title, spellCheck, loading, autoComplete, autofocus, form, inputRef: ref, labelHidden, icon, infoData, onBlur, onFocus, onChange, onKeyDown, onKeyUp, onValueChanged, }: SelectInputProps<T>): JSX.Element;
 declare namespace Select {
     var Option: ({ value, disabled, id, children, }: {
         id?: string | undefined;
@@ -3690,7 +3702,7 @@ type ComboBoxProps<T extends unknown = {}> = StrictOmit<InputPropsType<number |
  *   onSearch={(txt, v) => v.last_name.includes(txt) || v.first_name.includes(txt)}
  * />
  */
-declare function ComboBox<T extends unknown = {}>({ value, options, id, name, label, required, showRequiredOnLabel, errorMessage, infoMessage, alignment, size, direction, placeholder, helpTag, disabled, loading, autofocus, labelHidden, icon, onValueChanged, onChange, onFocus, onBlur, onKeyDown, onKeyUp, onSearch, formatLabel, }: ComboBoxProps<T>): JSX.Element;
+declare function ComboBox<T extends unknown = {}>({ value, options, id, name, label, required, showRequiredOnLabel, errorMessage, infoMessage, alignment, size, direction, placeholder, helpTag, disabled, loading, autofocus, labelHidden, icon, infoData, onValueChanged, onChange, onFocus, onBlur, onKeyDown, onKeyUp, onSearch, formatLabel, }: ComboBoxProps<T>): JSX.Element;
 
 type MultiComboBoxProps<T extends unknown = {}> = StrictOmit<InputPropsType<number | string | string[]>, 'type' | 'step' | 'inputRef' | 'value' | 'onValueChanged' | 'min' | 'max' | 'readonly' | 'pattern' | 'errorMessage' | 'infoMessage' | 'title' | 'form' | 'autoComplete' | 'spellCheck' | 'keyboardType' | 'onChange'> & InputStylingPropsType & {
     /** De waarde van de combobox */ value: T[];
@@ -3733,7 +3745,7 @@ type MultiComboBoxProps<T extends unknown = {}> = StrictOmit<InputPropsType<numb
  *   onSearch={(txt, v) => v.last_name.includes(txt) || v.first_name.includes(txt)}
  * />
  */
-declare function MultiComboBox<T extends unknown = {}>({ value, options, id, name, label, required, showRequiredOnLabel, errorMessage, infoMessage, alignment, size, direction, placeholder, helpTag, disabled, loading, autofocus, labelHidden, icon, onValueChanged, onFocus, onBlur, onKeyDown, onKeyUp, onSearch, formatLabel, formatValue, }: MultiComboBoxProps<T>): JSX.Element;
+declare function MultiComboBox<T extends unknown = {}>({ value, options, id, name, label, required, showRequiredOnLabel, errorMessage, infoMessage, alignment, size, direction, placeholder, helpTag, disabled, loading, autofocus, labelHidden, icon, infoData, onValueChanged, onFocus, onBlur, onKeyDown, onKeyUp, onSearch, formatLabel, formatValue, }: MultiComboBoxProps<T>): JSX.Element;
 
 type ColorInputProps = StrictOmit<InputPropsType<string>, 'type' | 'value' | 'onValueChanged' | 'step' | 'min' | 'max' | 'autoComplete' | 'spellCheck' | 'keyboardType'> & InputStylingPropsType & {
     /** Gebruik de color-input met een hex-color, bijvooerbeeld`#ff8000` of `#fff` */
@@ -3845,7 +3857,7 @@ type RadioGroupProps<T extends RBValueType = string> = StrictOmit<InputStylingPr
     /** callback voor typen */
     onKeyUp?: (e: React$1.KeyboardEvent<HTMLInputElement>) => void;
 };
-type RadioInputProps<T extends RBValueType = string> = StrictOmit<InputPropsType<number | string>, 'id' | 'label' | 'name' | 'type' | 'value' | 'onValueChanged' | 'step' | 'pattern' | 'errorMessage' | 'infoMessage' | 'min' | 'max' | 'placeholder' | 'showRequiredOnLabel'> & StrictOmit<InputStylingPropsType, 'labelHidden' | 'direction' | 'icon'> & {
+type RadioInputProps<T extends RBValueType = string> = StrictOmit<InputPropsType<number | string>, 'id' | 'label' | 'name' | 'type' | 'value' | 'onValueChanged' | 'step' | 'pattern' | 'errorMessage' | 'infoMessage' | 'min' | 'max' | 'placeholder' | 'showRequiredOnLabel'> & StrictOmit<InputStylingPropsType, 'labelHidden' | 'direction' | 'icon' | 'infoData'> & {
     /** label van de Radio Button. Als niet gedefinieerd, wordt de `name`-prop gebruikt */
     children: React$1.ReactNode;
     /** de waarde van de radiobutton */
@@ -3899,7 +3911,7 @@ declare function RB<T extends RBValueType = string>({ helpTag, disabled, keyboar
  * ..<RB value="Z">set to Z</RB>
  * </RadioGroup>
  */
-declare function RadioGroup<T extends RBValueType = string>({ children: nodeChildren, id, label, disabled, labelHidden, name, value, required, showRequiredOnLabel, size, direction, itemsDirection, alignment, errorMessage, infoMessage, onValueChanged, onBlur, onChange, onFocus, onKeyDown, onKeyUp, }: RadioGroupProps<T>): JSX.Element;
+declare function RadioGroup<T extends RBValueType = string>({ children: nodeChildren, id, label, disabled, labelHidden, name, value, required, showRequiredOnLabel, size, direction, itemsDirection, alignment, errorMessage, infoMessage, infoData, onValueChanged, onBlur, onChange, onFocus, onKeyDown, onKeyUp, }: RadioGroupProps<T>): JSX.Element;
 declare namespace RadioGroup {
     var Item: typeof SpecialRadioItem;
 }
@@ -3944,7 +3956,7 @@ type TagsInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' | 'valu
  * </Section>
  * @returns
  */
-declare function TagsInput({ value, allowDuplicates, disableRemove, disabled, id, name, label, color: colorProp, direction, errorMessage, infoMessage, showRequiredOnLabel, icon, labelHidden, required, loading, size, alignment, autoComplete, optionListId, autofocus, form, helpTag, keyboardType, maxLength, minLength, pattern, placeholder, readonly, spellCheck, title, className: extraClasses, styles, randomColors, maxTags, onBlur, onFocus, onValueChanged, onKeyDown, onKeyUp, }: TagsInputProps): react_jsx_runtime.JSX.Element;
+declare function TagsInput({ value, allowDuplicates, disableRemove, disabled, id, name, label, color: colorProp, direction, errorMessage, infoMessage, showRequiredOnLabel, icon, labelHidden, required, loading, size, alignment, autoComplete, optionListId, autofocus, form, helpTag, keyboardType, maxLength, minLength, pattern, placeholder, readonly, spellCheck, title, className: extraClasses, styles, randomColors, maxTags, infoData, onBlur, onFocus, onValueChanged, onKeyDown, onKeyUp, }: TagsInputProps): react_jsx_runtime.JSX.Element;
 
 type EmailInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step'> & InputStylingPropsType & {
     pattern?: string;
@@ -3992,7 +4004,7 @@ type PasswordInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step'> &
  * @param revealPasswordMsg boodschap bij de checkbox. Default is `Toon wachtwoord`
  * @param iconRevealed icon voor ww revealed. Default is `faEye`
  */
-declare function PasswordInput({ value, autoComplete, icon, name, size, direction, revealPasswordAllowed, revealPasswordMsg, iconRevealed, onValueChanged, ...props }: PasswordInputProps): JSX.Element;
+declare function PasswordInput({ value, autoComplete, icon, name, id, label, required, showRequiredOnLabel, labelHidden, size, direction, revealPasswordAllowed, revealPasswordMsg, iconRevealed, errorMessage, infoMessage, infoData, helpTag, onValueChanged, onBlur, onFocus, ...props }: PasswordInputProps): JSX.Element;
 
 type TextEditorPropsType = {
     content?: string;
@@ -4052,7 +4064,7 @@ type TextAreaProps = StrictOmit<InputPropsType<string>, 'type' | 'inputRef' | 'k
  * @param rows aantal rijen voor de textarea (default: 4)
  * @param cols aantal kolommen voor de textarea. **werkt niet in Bulma! de breedte is altijd maximaal!**
  */
-declare function TextArea({ value, label, errorMessage, infoMessage, helpTag, id, name, spellCheck, required, showRequiredOnLabel, autoComplete, placeholder, disabled, form, readonly, autofocus, inputRef, max, min, title, size, alignment, direction, cols, rows, labelHidden, loading, onValueChanged, onChange, onBlur, onFocus, onKeyDown, onKeyUp, }: TextAreaProps): JSX.Element;
+declare function TextArea({ value, label, errorMessage, infoMessage, helpTag, id, name, spellCheck, required, showRequiredOnLabel, autoComplete, placeholder, disabled, form, readonly, autofocus, inputRef, max, min, title, size, alignment, direction, cols, rows, labelHidden, loading, infoData, onValueChanged, onChange, onBlur, onFocus, onKeyDown, onKeyUp, }: TextAreaProps): JSX.Element;
 
 type CharType = '0-9' | 'a-z' | 'A-Z' | 'a-Z' | '0-Z' | (string & {}) | RegExp;
 type TextInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step'> & InputStylingPropsType & {
@@ -4104,7 +4116,7 @@ type RangeInputProps = StrictOmit<InputPropsType<number>, 'autofocus' | 'autoCom
  * @param step De stapgrootte van de input (default = 1)
  * @example <RangeInput value={50} min={0} max={100} />
  */
-declare function RangeInput({ value, min, max, step, prefix, suffix, helpTag, errorMessage, infoMessage, label, disabled, title, name, size, required, showRequiredOnLabel, id, readonly, form, inputRef, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, direction, labelHidden, }: RangeInputProps): JSX.Element;
+declare function RangeInput({ value, min, max, step, prefix, suffix, helpTag, errorMessage, infoMessage, label, disabled, title, name, size, required, showRequiredOnLabel, id, readonly, form, inputRef, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, direction, labelHidden, infoData, }: RangeInputProps): JSX.Element;
 
 type DateInputProps = StrictOmit<InputPropsType<string>, 'type' | 'value' | 'onValueChanged'> & InputStylingPropsType & {
     /**
@@ -4280,7 +4292,7 @@ type FileInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' | 'valu
  * **default:** toon de namen van alle geselecteerde bestanden, gescheiden door komma's. Als er geen bestanden zijn, dan de noFilesTxt tonen.
  * @param onValueChanged callback voor value changes. Bevat het path naar de file(s) en de files in een array.
  */
-declare function FileInput({ labelHidden, multiple, placeholder, helpTag, errorMessage, infoMessage, label, disabled, keyboardType, title, name, required, showRequiredOnLabel, spellCheck, id, autoComplete, max, min, readonly, pattern, autofocus, form, inputRef: ref, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, size, alignment, direction, value, icon, boxed, accept, capture, noFilesTxt, chooseFileTxt, formatter, }: FileInputProps): JSX.Element;
+declare function FileInput({ labelHidden, multiple, placeholder, helpTag, errorMessage, infoMessage, label, disabled, keyboardType, title, name, required, showRequiredOnLabel, spellCheck, id, autoComplete, max, min, readonly, pattern, autofocus, form, inputRef: ref, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, size, alignment, direction, value, icon, boxed, accept, capture, noFilesTxt, chooseFileTxt, infoData, formatter, }: FileInputProps): JSX.Element;
 
 type CurrencyInputProps = StrictOmit<InputPropsType<number>, 'keyboardType' | 'pattern' | 'value' | 'type' | 'onValueChanged' | 'errorMessage' | 'infoMessage'> & InputStylingPropsType & {
     /** waarde van de input. Als number of als number-string-tuple (zoals waarde uit `onValueChanged`) */
@@ -4322,7 +4334,7 @@ type CurrencyInputProps = StrictOmit<InputPropsType<number>, 'keyboardType' | 'p
  * const [x, setX] = React.useState<string>('0');
  * <CurrencyInput value={x} onValueChanged={([strVal, _numVal]) => setX(strVal)} />
  */
-declare function CurrencyInput({ placeholder, helpTag, errorMessage, infoMessage, label, disabled, title, name, value, required, showRequiredOnLabel, spellCheck, id, autoComplete, max, min, inputRef, readonly, step, autofocus, form, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, size, alignment, direction, labelHidden, loading, icon, suffix, prefix, decimalScale, decimalSeparator, groupSeparator, }: CurrencyInputProps): JSX.Element;
+declare function CurrencyInput({ placeholder, helpTag, errorMessage, infoMessage, label, disabled, title, name, value, required, showRequiredOnLabel, spellCheck, id, autoComplete, max, min, inputRef, readonly, step, autofocus, infoData, form, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, size, alignment, direction, labelHidden, loading, icon, suffix, prefix, decimalScale, decimalSeparator, groupSeparator, }: CurrencyInputProps): JSX.Element;
 
 /** WeekInput: input voor een weeknummer (format: yyyy-Www)
  * -1e getal: jaartal
@@ -4821,40 +4833,31 @@ type UseLocalStoredStateFn<T = string> = {
  */
 declare function useLocalStoredState<T extends unknown>({ key, initialValue, deserialize, serialize }: UseLocalStoredStateFn<T>): readonly [T | undefined, (value: T) => void, () => void];
 
-type PaginationParams = {
-    /** Geselecteerde pagina op 1e render, default = 1 */
+declare const DOTS = "dots";
+interface PaginationParams {
+    /** Page selected on initial render, defaults to 1 */
     initialPage?: number;
-    /** Controlled actieve page number */
+    /** Controlled active page number */
     page?: number;
-    /** Totaal aantal pages */
+    /** Total amount of pages */
     total: number;
-    /** Aantal directe buren van de geselecteerde pagina (default = 1) */
+    /** Siblings amount on left/right side of selected page, defaults to 1 */
     siblings?: number;
-    /** Aantal zichtbare pagina's aan de uiteinden van de paginatie (default = 1) */
+    /** Amount of elements visible on left/right edges, defaults to 1  */
     boundaries?: number;
-    /** Callback voor het wijzigigen van de pagina */
-    onChange?: (page: number | null | undefined) => void;
-};
-type PaginationResult = {
-    range: Array<number | 'dots'>;
-    active: number | null | undefined;
-    setPage: (page: number) => void;
+    /** Callback fired after change of each page */
+    onChange?: (page: number) => void;
+}
+declare function usePagination({ total, siblings, boundaries, page, initialPage, onChange, }: PaginationParams): {
+    range: (number | "dots")[];
+    active: number;
+    total: number;
+    setPage: (pageNumber: number) => void;
     next: () => void;
     prev: () => void;
     first: () => void;
     last: () => void;
 };
-declare const DOTS = "dots";
-/**
- * De usePagination-hook is bedoeld voor de Pagination-component.
- * @param total totaal aantal pagina's - `Math.ceil(totalItems / itemsPerPage)`)
- * @param siblings aantal directe buren van de geselecteerde pagina (default = 1)
- * @param boundaries aantal zichtbare pagina's aan de uiteinden van de paginatie (default = 1)
- * @param page geselecteerde pagina
- * @param initialPage geselecteerde pagina op 1e render, default = 1
- * @param onChange callback voor het wijzigigen van de pagina
- */
-declare function usePagination({ total, siblings, boundaries, page, initialPage, onChange, }: PaginationParams): PaginationResult;
 
 /**
  * Een toggle tussen twee state-opties. de state switched tussen de twee.
@@ -5115,4 +5118,4 @@ type FetchAPIWrapper = {
 };
 declare function useFetchAPI(): FetchAPIWrapper;
 
-export { AND, type ActionSheetButton, ActionSheetProvider, type AlignmentProp, type AnchorRelProp, type AnchorTargetProp, AspectRatio, type AspectRatioProps, type AutoCompleteProp, type BaseEventProps, BaseInput, Block, Box, type BoxProps, Button, Buttons as ButtonGroup, type ButtonGroupProps, type ButtonProps, Buttons, CB, Calendar, type CalendarOptions, type CalendarType, CheckBox, type CheckBoxInputProps as CheckboxInputProps, ColorInput, type ColorInputProps, type ColorProp, Column, type ColumnProps, Columns, ComboBox, type ComboBoxProps, ConfirmProvider, Container, Content, type CoordinatesProp, CurrencyInput, type CurrencyInputProps, DOTS, DataTable, type DataTableColumnProp as DataTableColumn, type DataTableProps, DateInput, type DateInputProps, DateTimeInput, type DateTimeInputProps, DefinedHexColors, DialogsProvider, type DiffFnType, type DirectionProp, EmailInput, type EmailInputProps, EvMv, type ExpandedColumnProps, FileInput, type FileInputProps, type FileInputValue, Footer, H1, H2, H3, H4, H5, H6, type HSLColor, HelpTxt, type HelpTxtProps, Hero, type HeroProps, type HexColor$1 as HexColor, HiddenInput, type HiddenInputProps, type Hotkey, type HotkeyItem, IF, IbanDetailsPerLand, Icon, type IconProps, IconStack, IconText, type IconTextProps, Image, type ImageProps, Indicator, type IndicatorPositionProp, type IndicatorProps, Input, type InputPropsType, type InputStylingPropsType, type InputValueType, type JSChangeDateTimeType, type JSDateSetterType, JSDateTime, JSDuration, Kbd, Kbds, type KeyOf, type KeyboardTypeProp, Link, LinkButton, type LinkButtonProps, type LinkProps, Menu, type MenuItemGroupProps, type MenuItemProps, type MenuProps, Message, type MessageProps, Modal, type ModalProps, MonthInput, type MonthInputProps, type MonthInputString, type MonthViewProps, MultiComboBox, type MultiComboBoxProps, NAND, NOR, NOT, Notification, type NotificationProps, Notifier, type NotifierContextType, type NotifierItemProps, type NotifierProps, NotifierProvider, type NotifierProviderProps, NumberInput, type NumberInputProps, OR, type OnOffToggleItemProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, type PositionProp, type PrettierType, ProgressBar, type ProgressBarProps, PromptProvider, QuickView, type QuickViewProps, RB, type RGBColor, RadioGroup, type RadioInputProps, RangeInput, type RangeInputProps, type RectProp, type RelationshipProp, SWITCH, ScrollArea, Section, Select, type SelectInputProps, SimpleTable, type SimpleTableColProps, type SimpleTableProps, type SizeProp, type StepItemProps, Steps, type StepsProps, type StrictOmit, TabBar, type TabBarItemProps, type TabBarProps, Table, Tag, type TagProps, type TagSizeProp, Tags, TagsInput, type TagsInputProps, type TagsProps, TelephoneInput, type TelephoneInputProps, type TextAlignmentProp, TextArea, type TextAreaProps, TextEditor, TextInput, type TextInputProps, TimeInput, type TimeInputProps, TimeLine, type TimeLineItemProps, type TimeLinePointProps, type TimeLineProps, ToggleBar, type ToggleBarProps, type ToggleItemProps, TT as Tooltip, URLInput, type URLInputProps, type UncontrolledMode, type UncontrolledOptions, WeekInput, type WeekInputProps, type WeekInputString, type WeekViewProps, XNOR, XOR, boolSort, calculateTxtColor, centerPad, dateSort, getHotkeyHandler, getHotkeyMatcher, hasBSN, hexToHSL, hexToRGB, hslToHex, hslToRGB, isHSLColor, isHexColor, isIBAN, isRGBColor, leftPad, numSort, parseHotkey, randomColorProp, randomDbl, randomInt, rgbToHSL, rgbToHex, rightPad, roundTo, stringSort, useActionSheet, useBoolToggle, useClickOutside, useClipboard, useConfirm, useDebouncedState, useDebouncedValue, useFetchAPI, useHotkeys, useLocalStoredState, useNotifier, usePagination, usePrompt, useScrollIntoView, useSessionStoredState, useToggle, useUncontrolled, useValidatedState };
+export { AND, type ActionSheetButton, ActionSheetProvider, type AlignmentProp, type AnchorRelProp, type AnchorTargetProp, AspectRatio, type AspectRatioProps, type AutoCompleteProp, type BaseEventProps, BaseInput, Block, Box, type BoxProps, Button, Buttons as ButtonGroup, type ButtonGroupProps, type ButtonProps, Buttons, CB, Calendar, type CalendarOptions, type CalendarType, CheckBox, type CheckBoxInputProps as CheckboxInputProps, ColorInput, type ColorInputProps, type ColorProp, Column, type ColumnProps, Columns, ComboBox, type ComboBoxProps, ConfirmProvider, Container, Content, type CoordinatesProp, CurrencyInput, type CurrencyInputProps, DOTS, DataTable, type DataTableColumnProp as DataTableColumn, type DataTableProps, DateInput, type DateInputProps, DateTimeInput, type DateTimeInputProps, DefinedHexColors, DialogsProvider, type DiffFnType, type DirectionProp, EmailInput, type EmailInputProps, EvMv, type ExpandedColumnProps, FileInput, type FileInputProps, type FileInputValue, Footer, H1, H2, H3, H4, H5, H6, type HSLColor, HelpTxt, type HelpTxtProps, Hero, type HeroProps, type HexColor$1 as HexColor, HiddenInput, type HiddenInputProps, type Hotkey, type HotkeyItem, IF, IbanDetailsPerLand, Icon, type IconProps, IconStack, IconText, type IconTextProps, Image, type ImageProps, Indicator, type IndicatorPositionProp, type IndicatorProps, Input, type InputPropsType, type InputStylingPropsType, type InputValueType, type JSChangeDateTimeType, type JSDateSetterType, JSDateTime, JSDuration, Kbd, Kbds, type KeyOf, type KeyboardTypeProp, Link, LinkButton, type LinkButtonProps, type LinkProps, Menu, type MenuItemGroupProps, type MenuItemProps, type MenuProps, Message, type MessageProps, Modal, type ModalProps, MonthInput, type MonthInputProps, type MonthInputString, type MonthViewProps, MultiComboBox, type MultiComboBoxProps, NAND, NOR, NOT, Notification, type NotificationProps, Notifier, type NotifierContextType, type NotifierItemProps, type NotifierProps, NotifierProvider, type NotifierProviderProps, NumberInput, type NumberInputProps, OR, type OnOffToggleItemProps, Pagination, type PaginationParams, type PaginationProps, PasswordInput, type PasswordInputProps, type PositionProp, type PrettierType, ProgressBar, type ProgressBarProps, PromptProvider, QuickView, type QuickViewProps, RB, type RGBColor, RadioGroup, type RadioInputProps, RangeInput, type RangeInputProps, type RectProp, type RelationshipProp, SWITCH, ScrollArea, Section, Select, type SelectInputProps, SimpleTable, type SimpleTableColProps, type SimpleTableProps, type SizeProp, type StepItemProps, Steps, type StepsProps, type StrictOmit, TabBar, type TabBarItemProps, type TabBarProps, Table, Tag, type TagProps, type TagSizeProp, Tags, TagsInput, type TagsInputProps, type TagsProps, TelephoneInput, type TelephoneInputProps, type TextAlignmentProp, TextArea, type TextAreaProps, TextEditor, TextInput, type TextInputProps, TimeInput, type TimeInputProps, TimeLine, type TimeLineItemProps, type TimeLinePointProps, type TimeLineProps, ToggleBar, type ToggleBarProps, type ToggleItemProps, TT as Tooltip, URLInput, type URLInputProps, type UncontrolledMode, type UncontrolledOptions, WeekInput, type WeekInputProps, type WeekInputString, type WeekViewProps, XNOR, XOR, boolSort, calculateTxtColor, centerPad, dateSort, getHotkeyHandler, getHotkeyMatcher, hasBSN, hexToHSL, hexToRGB, hslToHex, hslToRGB, isHSLColor, isHexColor, isIBAN, isRGBColor, leftPad, numSort, parseHotkey, randomColorProp, randomDbl, randomInt, rgbToHSL, rgbToHex, rightPad, roundTo, stringSort, useActionSheet, useBoolToggle, useClickOutside, useClipboard, useConfirm, useDebouncedState, useDebouncedValue, useFetchAPI, useHotkeys, useLocalStoredState, useNotifier, usePagination, usePrompt, useScrollIntoView, useSessionStoredState, useToggle, useUncontrolled, useValidatedState };

package/dist/index.d.ts

@@ -740,10 +740,12 @@ type DataTableColumnProp<T extends unknown = unknown> = {
     sort?: (a: T, b: T) => -1 | 0 | 1 | number;
     /** de waarde van de kolom. Een fucnction of een property van object van type `T` (string) */
     value: KeyOf<T> | ((item: T) => React$1.ReactNode);
-    /** manier om deze cel te identificeren */ cellIdentifier?: KeyOf<T> | ((item: T) => string);
+    /** manier om deze cel te identificeren */
+    cellIdentifier?: KeyOf<T> | ((item: T) => string);
     /** header voor de kolom. Als niet gedefinieerd wordt de `value` gebruikt, Dus als `value` een `function` is, **moet** je deze setten */
     header?: string | React$1.ReactNode;
-    /** alignment van deze kolom (default = `l` */ alignment?: AlignmentProp;
+    /** alignment van deze kolom (default = `l` */
+    alignment?: AlignmentProp;
     /** className voor de kolom, om een cel te stylen afhankelijk van de waarde */
     columnClass?: string | ((item: T) => string);
 };
@@ -767,25 +769,34 @@ type DataTableProps<T extends unknown = unknown> = {
      * ];
      */
     columns: Array<DataTableColumnProp<T>>;
-    /** het kolom-nummer waarop default gesorteerd moet worden. **LET OP: de 1e kolom heeft nr 1! ** */ defaultSortColNum?: number;
-    /** data-array in de tabel */ data?: Array<T>;
-    /** moet de tabel compact wwergegevens worden (voorheen `narrow`, default = `false`) */ compact?: boolean;
-    /** moet de tabel smaller worden weergegeven? */ narrow?: boolean;
+    /** het kolom-nummer waarop default gesorteerd moet worden. **LET OP: de 1e kolom heeft nr 1! ** */
+    defaultSortColNum?: number;
+    /** data-array in de tabel */
+    data?: Array<T>;
+    /** moet de tabel compact wwergegevens worden (voorheen `narrow`, default = `false`) */
+    compact?: boolean;
+    /** moet de tabel smaller worden weergegeven? */
+    narrow?: boolean;
     /** is de header van de tabel sticky ? (default = `none`)
      * - none: geen sticky header
      * - header: alleen de kolom-namen zijn sticky
      * - all: de hele header is sticky, inclusief search en de `headerContent`
      * */
     sticky?: 'none' | 'header' | 'all';
-    /** is de tabel is de tabel hoverbaar (en is dat ook zichtbaar?) hebben? (default = `false`) */ hoverable?: boolean;
-    /** paginatie verstoppen? (default = `false`) */ hidePagination?: boolean;
+    /** is de tabel is de tabel hoverbaar (en is dat ook zichtbaar?) hebben? (default = `false`) */
+    hoverable?: boolean;
+    /** paginatie verstoppen? (default = `false`) */
+    hidePagination?: boolean;
     /** maximaal aantal rijen in de tabel voor paginatie aangaat. (default = 20)
      * - 0: geen maximum, alle rijen worden getoond
-     * - number: maximum aantal rijen voor paginatie */ maxRows?: 0 | number;
-    /** bepaal grootte van paginatie en zoek-input in de tabel */ size?: SizeProp;
-    /** moet het zoeken verborgen zijn? (default = `false`) */ hideSearch?: boolean;
-    /** meoten gebruikte zoekresultaten deze sessie bewaard worden?  */ showPrevSearchTerms?: boolean;
-    /** placeholder voor zoek-input (default = 'Zoek ...') */ searchPlaceholder?: string;
+     * - number: maximum aantal rijen voor paginatie */
+    maxRows?: 0 | number;
+    /** bepaal grootte van paginatie en zoek-input in de tabel */
+    size?: SizeProp;
+    /** moet het zoeken verborgen zijn? (default = `false`) */
+    hideSearch?: boolean;
+    /** placeholder voor zoek-input (default = 'Zoek ...') */
+    searchPlaceholder?: string;
     /** zoek-function voor de datatable. Default gebruikt `JSON.stringify` op het object om te controleren of de zoekterm in een row voorkomt
      * @param searchTerm de zoekterm
      * @param data de data-array
@@ -871,7 +882,7 @@ type DataTableProps<T extends unknown = unknown> = {
  * @param param0
  * @returns
  */
-declare function DataTable<T extends unknown = unknown>({ data, columns: cols, defaultSortColNum, compact, narrow, hoverable, sticky, hidePagination, hideSearch, showPrevSearchTerms, headerContent, footerContent, size, maxRows: definedMaxRows, searchPlaceholder, rowIdentifier, onSearch, onRowSelected, rowClass, renderWhenNoData, searchInfoMessage, id: tableID, itemRef, }: DataTableProps<T>): JSX.Element;
+declare function DataTable<T extends unknown = unknown>({ data, columns: cols, defaultSortColNum, compact, narrow, hoverable, sticky, hidePagination, hideSearch, headerContent, footerContent, size, maxRows: definedMaxRows, searchPlaceholder, rowIdentifier, onSearch, onRowSelected, rowClass, renderWhenNoData, searchInfoMessage, id: tableID, itemRef, }: DataTableProps<T>): JSX.Element;
 
 type HelpTxtProps = {
     children: React$1.ReactNode;
@@ -3304,6 +3315,7 @@ type InputStylingPropsType = {
     /** moet het label van de input verborgen worden? (screenreader only) (default = `false`) */ labelHidden?: boolean;
     /** label boven (`v`) of voor (`h`) de input, (default = `v`, vertical) */ direction?: DirectionProp;
     /** (optioneel) icon op de input */ icon?: IconProp | string | undefined | null;
+    infoData?: string | React$1.ReactNode | (() => void) | undefined;
 };
 type InputPropsType<T = InputValueType> = {
     optionList?: string[] | Array<{
@@ -3476,7 +3488,7 @@ declare function BaseInput<T extends InputValueType = string>({ alignment, autoC
  * | type           | `string`       | type voor deze input (default = `text`)|
  * | value          | `string`       | value voor deze input (default = `undefined`)|
  */
-declare function Input<T extends InputValueType = string>({ direction, errorMessage, showRequiredOnLabel, icon, id, label, labelHidden, name, required, loading, size, value, optionList, onBlur, ...props }: StrictOmit<InputPropsType<T>, 'optionListId'> & InputStylingPropsType): JSX.Element;
+declare function Input<T extends InputValueType = string>({ direction, errorMessage, showRequiredOnLabel, icon, id, label, labelHidden, name, required, loading, size, value, infoData, optionList, onBlur, onFocus, ...props }: StrictOmit<InputPropsType<T>, 'optionListId'> & InputStylingPropsType): JSX.Element;
 
 type CheckBoxInputProps = StrictOmit<InputPropsType<boolean>, 'value' | 'type' | 'step' | 'pattern' | 'errorMessage' | 'infoMessage' | 'min' | 'max' | 'pattern' | 'placeholder'> & StrictOmit<InputStylingPropsType, 'icon'> & {
     /** is de input checked? */
@@ -3507,7 +3519,7 @@ type CheckBoxInputProps = StrictOmit<InputPropsType<boolean>, 'value' | 'type' |
  * const [x, setX] = React.useState(false);
  * <CheckBox name="test" label="test" value={x} onValueChanged={setX} direction='v'/>
  */
-declare function CheckBox({ id, label, name, size, direction, required, showRequiredOnLabel, value, errorMessage, labelHidden, onValueChanged, onBlur, ...props }: CheckBoxInputProps): JSX.Element;
+declare function CheckBox({ id, label, name, size, direction, required, showRequiredOnLabel, value, errorMessage, labelHidden, helpTag, infoData, onValueChanged, onBlur, onFocus, ...props }: CheckBoxInputProps): JSX.Element;
 /**
  * Een checkbox input die nog helemaal zelf aan te passen is, dus zonder container eromheen. Om een checkbox in met wat meer styling te gebruiken, gebruik dan de `CheckBox` component.
  * Dat is een wrapper om deze component heen. De properties `type`, `step`, `min`, `max`, `icon`, `pattern`, `placeholder` en `direction` zijn niet van toepassing op deze component.
@@ -3633,7 +3645,7 @@ type SelectInputProps<T extends number | string | string[]> = StrictOmit<InputPr
  * ..</Select.OptGroup>
  * </Select>
  */
-declare function Select<T extends number | string | string[] = string>({ value, id, name, label, grouped, required, showRequiredOnLabel, errorMessage, infoMessage, multiple, alignment, size, direction, options, children: nodes, helpTag, disabled, keyboardType, title, spellCheck, loading, autoComplete, autofocus, form, inputRef: ref, labelHidden, icon, onBlur, onFocus, onChange, onKeyDown, onKeyUp, onValueChanged, }: SelectInputProps<T>): JSX.Element;
+declare function Select<T extends number | string | string[] = string>({ value, id, name, label, grouped, required, showRequiredOnLabel, errorMessage, infoMessage, multiple, alignment, size, direction, options, children: nodes, helpTag, disabled, keyboardType, title, spellCheck, loading, autoComplete, autofocus, form, inputRef: ref, labelHidden, icon, infoData, onBlur, onFocus, onChange, onKeyDown, onKeyUp, onValueChanged, }: SelectInputProps<T>): JSX.Element;
 declare namespace Select {
     var Option: ({ value, disabled, id, children, }: {
         id?: string | undefined;
@@ -3690,7 +3702,7 @@ type ComboBoxProps<T extends unknown = {}> = StrictOmit<InputPropsType<number |
  *   onSearch={(txt, v) => v.last_name.includes(txt) || v.first_name.includes(txt)}
  * />
  */
-declare function ComboBox<T extends unknown = {}>({ value, options, id, name, label, required, showRequiredOnLabel, errorMessage, infoMessage, alignment, size, direction, placeholder, helpTag, disabled, loading, autofocus, labelHidden, icon, onValueChanged, onChange, onFocus, onBlur, onKeyDown, onKeyUp, onSearch, formatLabel, }: ComboBoxProps<T>): JSX.Element;
+declare function ComboBox<T extends unknown = {}>({ value, options, id, name, label, required, showRequiredOnLabel, errorMessage, infoMessage, alignment, size, direction, placeholder, helpTag, disabled, loading, autofocus, labelHidden, icon, infoData, onValueChanged, onChange, onFocus, onBlur, onKeyDown, onKeyUp, onSearch, formatLabel, }: ComboBoxProps<T>): JSX.Element;
 
 type MultiComboBoxProps<T extends unknown = {}> = StrictOmit<InputPropsType<number | string | string[]>, 'type' | 'step' | 'inputRef' | 'value' | 'onValueChanged' | 'min' | 'max' | 'readonly' | 'pattern' | 'errorMessage' | 'infoMessage' | 'title' | 'form' | 'autoComplete' | 'spellCheck' | 'keyboardType' | 'onChange'> & InputStylingPropsType & {
     /** De waarde van de combobox */ value: T[];
@@ -3733,7 +3745,7 @@ type MultiComboBoxProps<T extends unknown = {}> = StrictOmit<InputPropsType<numb
  *   onSearch={(txt, v) => v.last_name.includes(txt) || v.first_name.includes(txt)}
  * />
  */
-declare function MultiComboBox<T extends unknown = {}>({ value, options, id, name, label, required, showRequiredOnLabel, errorMessage, infoMessage, alignment, size, direction, placeholder, helpTag, disabled, loading, autofocus, labelHidden, icon, onValueChanged, onFocus, onBlur, onKeyDown, onKeyUp, onSearch, formatLabel, formatValue, }: MultiComboBoxProps<T>): JSX.Element;
+declare function MultiComboBox<T extends unknown = {}>({ value, options, id, name, label, required, showRequiredOnLabel, errorMessage, infoMessage, alignment, size, direction, placeholder, helpTag, disabled, loading, autofocus, labelHidden, icon, infoData, onValueChanged, onFocus, onBlur, onKeyDown, onKeyUp, onSearch, formatLabel, formatValue, }: MultiComboBoxProps<T>): JSX.Element;
 
 type ColorInputProps = StrictOmit<InputPropsType<string>, 'type' | 'value' | 'onValueChanged' | 'step' | 'min' | 'max' | 'autoComplete' | 'spellCheck' | 'keyboardType'> & InputStylingPropsType & {
     /** Gebruik de color-input met een hex-color, bijvooerbeeld`#ff8000` of `#fff` */
@@ -3845,7 +3857,7 @@ type RadioGroupProps<T extends RBValueType = string> = StrictOmit<InputStylingPr
     /** callback voor typen */
     onKeyUp?: (e: React$1.KeyboardEvent<HTMLInputElement>) => void;
 };
-type RadioInputProps<T extends RBValueType = string> = StrictOmit<InputPropsType<number | string>, 'id' | 'label' | 'name' | 'type' | 'value' | 'onValueChanged' | 'step' | 'pattern' | 'errorMessage' | 'infoMessage' | 'min' | 'max' | 'placeholder' | 'showRequiredOnLabel'> & StrictOmit<InputStylingPropsType, 'labelHidden' | 'direction' | 'icon'> & {
+type RadioInputProps<T extends RBValueType = string> = StrictOmit<InputPropsType<number | string>, 'id' | 'label' | 'name' | 'type' | 'value' | 'onValueChanged' | 'step' | 'pattern' | 'errorMessage' | 'infoMessage' | 'min' | 'max' | 'placeholder' | 'showRequiredOnLabel'> & StrictOmit<InputStylingPropsType, 'labelHidden' | 'direction' | 'icon' | 'infoData'> & {
     /** label van de Radio Button. Als niet gedefinieerd, wordt de `name`-prop gebruikt */
     children: React$1.ReactNode;
     /** de waarde van de radiobutton */
@@ -3899,7 +3911,7 @@ declare function RB<T extends RBValueType = string>({ helpTag, disabled, keyboar
  * ..<RB value="Z">set to Z</RB>
  * </RadioGroup>
  */
-declare function RadioGroup<T extends RBValueType = string>({ children: nodeChildren, id, label, disabled, labelHidden, name, value, required, showRequiredOnLabel, size, direction, itemsDirection, alignment, errorMessage, infoMessage, onValueChanged, onBlur, onChange, onFocus, onKeyDown, onKeyUp, }: RadioGroupProps<T>): JSX.Element;
+declare function RadioGroup<T extends RBValueType = string>({ children: nodeChildren, id, label, disabled, labelHidden, name, value, required, showRequiredOnLabel, size, direction, itemsDirection, alignment, errorMessage, infoMessage, infoData, onValueChanged, onBlur, onChange, onFocus, onKeyDown, onKeyUp, }: RadioGroupProps<T>): JSX.Element;
 declare namespace RadioGroup {
     var Item: typeof SpecialRadioItem;
 }
@@ -3944,7 +3956,7 @@ type TagsInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' | 'valu
  * </Section>
  * @returns
  */
-declare function TagsInput({ value, allowDuplicates, disableRemove, disabled, id, name, label, color: colorProp, direction, errorMessage, infoMessage, showRequiredOnLabel, icon, labelHidden, required, loading, size, alignment, autoComplete, optionListId, autofocus, form, helpTag, keyboardType, maxLength, minLength, pattern, placeholder, readonly, spellCheck, title, className: extraClasses, styles, randomColors, maxTags, onBlur, onFocus, onValueChanged, onKeyDown, onKeyUp, }: TagsInputProps): react_jsx_runtime.JSX.Element;
+declare function TagsInput({ value, allowDuplicates, disableRemove, disabled, id, name, label, color: colorProp, direction, errorMessage, infoMessage, showRequiredOnLabel, icon, labelHidden, required, loading, size, alignment, autoComplete, optionListId, autofocus, form, helpTag, keyboardType, maxLength, minLength, pattern, placeholder, readonly, spellCheck, title, className: extraClasses, styles, randomColors, maxTags, infoData, onBlur, onFocus, onValueChanged, onKeyDown, onKeyUp, }: TagsInputProps): react_jsx_runtime.JSX.Element;
 
 type EmailInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step'> & InputStylingPropsType & {
     pattern?: string;
@@ -3992,7 +4004,7 @@ type PasswordInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step'> &
  * @param revealPasswordMsg boodschap bij de checkbox. Default is `Toon wachtwoord`
  * @param iconRevealed icon voor ww revealed. Default is `faEye`
  */
-declare function PasswordInput({ value, autoComplete, icon, name, size, direction, revealPasswordAllowed, revealPasswordMsg, iconRevealed, onValueChanged, ...props }: PasswordInputProps): JSX.Element;
+declare function PasswordInput({ value, autoComplete, icon, name, id, label, required, showRequiredOnLabel, labelHidden, size, direction, revealPasswordAllowed, revealPasswordMsg, iconRevealed, errorMessage, infoMessage, infoData, helpTag, onValueChanged, onBlur, onFocus, ...props }: PasswordInputProps): JSX.Element;
 
 type TextEditorPropsType = {
     content?: string;
@@ -4052,7 +4064,7 @@ type TextAreaProps = StrictOmit<InputPropsType<string>, 'type' | 'inputRef' | 'k
  * @param rows aantal rijen voor de textarea (default: 4)
  * @param cols aantal kolommen voor de textarea. **werkt niet in Bulma! de breedte is altijd maximaal!**
  */
-declare function TextArea({ value, label, errorMessage, infoMessage, helpTag, id, name, spellCheck, required, showRequiredOnLabel, autoComplete, placeholder, disabled, form, readonly, autofocus, inputRef, max, min, title, size, alignment, direction, cols, rows, labelHidden, loading, onValueChanged, onChange, onBlur, onFocus, onKeyDown, onKeyUp, }: TextAreaProps): JSX.Element;
+declare function TextArea({ value, label, errorMessage, infoMessage, helpTag, id, name, spellCheck, required, showRequiredOnLabel, autoComplete, placeholder, disabled, form, readonly, autofocus, inputRef, max, min, title, size, alignment, direction, cols, rows, labelHidden, loading, infoData, onValueChanged, onChange, onBlur, onFocus, onKeyDown, onKeyUp, }: TextAreaProps): JSX.Element;
 
 type CharType = '0-9' | 'a-z' | 'A-Z' | 'a-Z' | '0-Z' | (string & {}) | RegExp;
 type TextInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step'> & InputStylingPropsType & {
@@ -4104,7 +4116,7 @@ type RangeInputProps = StrictOmit<InputPropsType<number>, 'autofocus' | 'autoCom
  * @param step De stapgrootte van de input (default = 1)
  * @example <RangeInput value={50} min={0} max={100} />
  */
-declare function RangeInput({ value, min, max, step, prefix, suffix, helpTag, errorMessage, infoMessage, label, disabled, title, name, size, required, showRequiredOnLabel, id, readonly, form, inputRef, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, direction, labelHidden, }: RangeInputProps): JSX.Element;
+declare function RangeInput({ value, min, max, step, prefix, suffix, helpTag, errorMessage, infoMessage, label, disabled, title, name, size, required, showRequiredOnLabel, id, readonly, form, inputRef, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, direction, labelHidden, infoData, }: RangeInputProps): JSX.Element;
 
 type DateInputProps = StrictOmit<InputPropsType<string>, 'type' | 'value' | 'onValueChanged'> & InputStylingPropsType & {
     /**
@@ -4280,7 +4292,7 @@ type FileInputProps = StrictOmit<InputPropsType<string>, 'type' | 'step' | 'valu
  * **default:** toon de namen van alle geselecteerde bestanden, gescheiden door komma's. Als er geen bestanden zijn, dan de noFilesTxt tonen.
  * @param onValueChanged callback voor value changes. Bevat het path naar de file(s) en de files in een array.
  */
-declare function FileInput({ labelHidden, multiple, placeholder, helpTag, errorMessage, infoMessage, label, disabled, keyboardType, title, name, required, showRequiredOnLabel, spellCheck, id, autoComplete, max, min, readonly, pattern, autofocus, form, inputRef: ref, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, size, alignment, direction, value, icon, boxed, accept, capture, noFilesTxt, chooseFileTxt, formatter, }: FileInputProps): JSX.Element;
+declare function FileInput({ labelHidden, multiple, placeholder, helpTag, errorMessage, infoMessage, label, disabled, keyboardType, title, name, required, showRequiredOnLabel, spellCheck, id, autoComplete, max, min, readonly, pattern, autofocus, form, inputRef: ref, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, size, alignment, direction, value, icon, boxed, accept, capture, noFilesTxt, chooseFileTxt, infoData, formatter, }: FileInputProps): JSX.Element;
 
 type CurrencyInputProps = StrictOmit<InputPropsType<number>, 'keyboardType' | 'pattern' | 'value' | 'type' | 'onValueChanged' | 'errorMessage' | 'infoMessage'> & InputStylingPropsType & {
     /** waarde van de input. Als number of als number-string-tuple (zoals waarde uit `onValueChanged`) */
@@ -4322,7 +4334,7 @@ type CurrencyInputProps = StrictOmit<InputPropsType<number>, 'keyboardType' | 'p
  * const [x, setX] = React.useState<string>('0');
  * <CurrencyInput value={x} onValueChanged={([strVal, _numVal]) => setX(strVal)} />
  */
-declare function CurrencyInput({ placeholder, helpTag, errorMessage, infoMessage, label, disabled, title, name, value, required, showRequiredOnLabel, spellCheck, id, autoComplete, max, min, inputRef, readonly, step, autofocus, form, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, size, alignment, direction, labelHidden, loading, icon, suffix, prefix, decimalScale, decimalSeparator, groupSeparator, }: CurrencyInputProps): JSX.Element;
+declare function CurrencyInput({ placeholder, helpTag, errorMessage, infoMessage, label, disabled, title, name, value, required, showRequiredOnLabel, spellCheck, id, autoComplete, max, min, inputRef, readonly, step, autofocus, infoData, form, onBlur, onChange, onFocus, onKeyDown, onKeyUp, onValueChanged, size, alignment, direction, labelHidden, loading, icon, suffix, prefix, decimalScale, decimalSeparator, groupSeparator, }: CurrencyInputProps): JSX.Element;
 
 /** WeekInput: input voor een weeknummer (format: yyyy-Www)
  * -1e getal: jaartal
@@ -4821,40 +4833,31 @@ type UseLocalStoredStateFn<T = string> = {
  */
 declare function useLocalStoredState<T extends unknown>({ key, initialValue, deserialize, serialize }: UseLocalStoredStateFn<T>): readonly [T | undefined, (value: T) => void, () => void];
 
-type PaginationParams = {
-    /** Geselecteerde pagina op 1e render, default = 1 */
+declare const DOTS = "dots";
+interface PaginationParams {
+    /** Page selected on initial render, defaults to 1 */
     initialPage?: number;
-    /** Controlled actieve page number */
+    /** Controlled active page number */
     page?: number;
-    /** Totaal aantal pages */
+    /** Total amount of pages */
     total: number;
-    /** Aantal directe buren van de geselecteerde pagina (default = 1) */
+    /** Siblings amount on left/right side of selected page, defaults to 1 */
     siblings?: number;
-    /** Aantal zichtbare pagina's aan de uiteinden van de paginatie (default = 1) */
+    /** Amount of elements visible on left/right edges, defaults to 1  */
     boundaries?: number;
-    /** Callback voor het wijzigigen van de pagina */
-    onChange?: (page: number | null | undefined) => void;
-};
-type PaginationResult = {
-    range: Array<number | 'dots'>;
-    active: number | null | undefined;
-    setPage: (page: number) => void;
+    /** Callback fired after change of each page */
+    onChange?: (page: number) => void;
+}
+declare function usePagination({ total, siblings, boundaries, page, initialPage, onChange, }: PaginationParams): {
+    range: (number | "dots")[];
+    active: number;
+    total: number;
+    setPage: (pageNumber: number) => void;
     next: () => void;
     prev: () => void;
     first: () => void;
     last: () => void;
 };
-declare const DOTS = "dots";
-/**
- * De usePagination-hook is bedoeld voor de Pagination-component.
- * @param total totaal aantal pagina's - `Math.ceil(totalItems / itemsPerPage)`)
- * @param siblings aantal directe buren van de geselecteerde pagina (default = 1)
- * @param boundaries aantal zichtbare pagina's aan de uiteinden van de paginatie (default = 1)
- * @param page geselecteerde pagina
- * @param initialPage geselecteerde pagina op 1e render, default = 1
- * @param onChange callback voor het wijzigigen van de pagina
- */
-declare function usePagination({ total, siblings, boundaries, page, initialPage, onChange, }: PaginationParams): PaginationResult;
 
 /**
  * Een toggle tussen twee state-opties. de state switched tussen de twee.
@@ -5115,4 +5118,4 @@ type FetchAPIWrapper = {
 };
 declare function useFetchAPI(): FetchAPIWrapper;
 
-export { AND, type ActionSheetButton, ActionSheetProvider, type AlignmentProp, type AnchorRelProp, type AnchorTargetProp, AspectRatio, type AspectRatioProps, type AutoCompleteProp, type BaseEventProps, BaseInput, Block, Box, type BoxProps, Button, Buttons as ButtonGroup, type ButtonGroupProps, type ButtonProps, Buttons, CB, Calendar, type CalendarOptions, type CalendarType, CheckBox, type CheckBoxInputProps as CheckboxInputProps, ColorInput, type ColorInputProps, type ColorProp, Column, type ColumnProps, Columns, ComboBox, type ComboBoxProps, ConfirmProvider, Container, Content, type CoordinatesProp, CurrencyInput, type CurrencyInputProps, DOTS, DataTable, type DataTableColumnProp as DataTableColumn, type DataTableProps, DateInput, type DateInputProps, DateTimeInput, type DateTimeInputProps, DefinedHexColors, DialogsProvider, type DiffFnType, type DirectionProp, EmailInput, type EmailInputProps, EvMv, type ExpandedColumnProps, FileInput, type FileInputProps, type FileInputValue, Footer, H1, H2, H3, H4, H5, H6, type HSLColor, HelpTxt, type HelpTxtProps, Hero, type HeroProps, type HexColor$1 as HexColor, HiddenInput, type HiddenInputProps, type Hotkey, type HotkeyItem, IF, IbanDetailsPerLand, Icon, type IconProps, IconStack, IconText, type IconTextProps, Image, type ImageProps, Indicator, type IndicatorPositionProp, type IndicatorProps, Input, type InputPropsType, type InputStylingPropsType, type InputValueType, type JSChangeDateTimeType, type JSDateSetterType, JSDateTime, JSDuration, Kbd, Kbds, type KeyOf, type KeyboardTypeProp, Link, LinkButton, type LinkButtonProps, type LinkProps, Menu, type MenuItemGroupProps, type MenuItemProps, type MenuProps, Message, type MessageProps, Modal, type ModalProps, MonthInput, type MonthInputProps, type MonthInputString, type MonthViewProps, MultiComboBox, type MultiComboBoxProps, NAND, NOR, NOT, Notification, type NotificationProps, Notifier, type NotifierContextType, type NotifierItemProps, type NotifierProps, NotifierProvider, type NotifierProviderProps, NumberInput, type NumberInputProps, OR, type OnOffToggleItemProps, Pagination, type PaginationProps, PasswordInput, type PasswordInputProps, type PositionProp, type PrettierType, ProgressBar, type ProgressBarProps, PromptProvider, QuickView, type QuickViewProps, RB, type RGBColor, RadioGroup, type RadioInputProps, RangeInput, type RangeInputProps, type RectProp, type RelationshipProp, SWITCH, ScrollArea, Section, Select, type SelectInputProps, SimpleTable, type SimpleTableColProps, type SimpleTableProps, type SizeProp, type StepItemProps, Steps, type StepsProps, type StrictOmit, TabBar, type TabBarItemProps, type TabBarProps, Table, Tag, type TagProps, type TagSizeProp, Tags, TagsInput, type TagsInputProps, type TagsProps, TelephoneInput, type TelephoneInputProps, type TextAlignmentProp, TextArea, type TextAreaProps, TextEditor, TextInput, type TextInputProps, TimeInput, type TimeInputProps, TimeLine, type TimeLineItemProps, type TimeLinePointProps, type TimeLineProps, ToggleBar, type ToggleBarProps, type ToggleItemProps, TT as Tooltip, URLInput, type URLInputProps, type UncontrolledMode, type UncontrolledOptions, WeekInput, type WeekInputProps, type WeekInputString, type WeekViewProps, XNOR, XOR, boolSort, calculateTxtColor, centerPad, dateSort, getHotkeyHandler, getHotkeyMatcher, hasBSN, hexToHSL, hexToRGB, hslToHex, hslToRGB, isHSLColor, isHexColor, isIBAN, isRGBColor, leftPad, numSort, parseHotkey, randomColorProp, randomDbl, randomInt, rgbToHSL, rgbToHex, rightPad, roundTo, stringSort, useActionSheet, useBoolToggle, useClickOutside, useClipboard, useConfirm, useDebouncedState, useDebouncedValue, useFetchAPI, useHotkeys, useLocalStoredState, useNotifier, usePagination, usePrompt, useScrollIntoView, useSessionStoredState, useToggle, useUncontrolled, useValidatedState };
+export { AND, type ActionSheetButton, ActionSheetProvider, type AlignmentProp, type AnchorRelProp, type AnchorTargetProp, AspectRatio, type AspectRatioProps, type AutoCompleteProp, type BaseEventProps, BaseInput, Block, Box, type BoxProps, Button, Buttons as ButtonGroup, type ButtonGroupProps, type ButtonProps, Buttons, CB, Calendar, type CalendarOptions, type CalendarType, CheckBox, type CheckBoxInputProps as CheckboxInputProps, ColorInput, type ColorInputProps, type ColorProp, Column, type ColumnProps, Columns, ComboBox, type ComboBoxProps, ConfirmProvider, Container, Content, type CoordinatesProp, CurrencyInput, type CurrencyInputProps, DOTS, DataTable, type DataTableColumnProp as DataTableColumn, type DataTableProps, DateInput, type DateInputProps, DateTimeInput, type DateTimeInputProps, DefinedHexColors, DialogsProvider, type DiffFnType, type DirectionProp, EmailInput, type EmailInputProps, EvMv, type ExpandedColumnProps, FileInput, type FileInputProps, type FileInputValue, Footer, H1, H2, H3, H4, H5, H6, type HSLColor, HelpTxt, type HelpTxtProps, Hero, type HeroProps, type HexColor$1 as HexColor, HiddenInput, type HiddenInputProps, type Hotkey, type HotkeyItem, IF, IbanDetailsPerLand, Icon, type IconProps, IconStack, IconText, type IconTextProps, Image, type ImageProps, Indicator, type IndicatorPositionProp, type IndicatorProps, Input, type InputPropsType, type InputStylingPropsType, type InputValueType, type JSChangeDateTimeType, type JSDateSetterType, JSDateTime, JSDuration, Kbd, Kbds, type KeyOf, type KeyboardTypeProp, Link, LinkButton, type LinkButtonProps, type LinkProps, Menu, type MenuItemGroupProps, type MenuItemProps, type MenuProps, Message, type MessageProps, Modal, type ModalProps, MonthInput, type MonthInputProps, type MonthInputString, type MonthViewProps, MultiComboBox, type MultiComboBoxProps, NAND, NOR, NOT, Notification, type NotificationProps, Notifier, type NotifierContextType, type NotifierItemProps, type NotifierProps, NotifierProvider, type NotifierProviderProps, NumberInput, type NumberInputProps, OR, type OnOffToggleItemProps, Pagination, type PaginationParams, type PaginationProps, PasswordInput, type PasswordInputProps, type PositionProp, type PrettierType, ProgressBar, type ProgressBarProps, PromptProvider, QuickView, type QuickViewProps, RB, type RGBColor, RadioGroup, type RadioInputProps, RangeInput, type RangeInputProps, type RectProp, type RelationshipProp, SWITCH, ScrollArea, Section, Select, type SelectInputProps, SimpleTable, type SimpleTableColProps, type SimpleTableProps, type SizeProp, type StepItemProps, Steps, type StepsProps, type StrictOmit, TabBar, type TabBarItemProps, type TabBarProps, Table, Tag, type TagProps, type TagSizeProp, Tags, TagsInput, type TagsInputProps, type TagsProps, TelephoneInput, type TelephoneInputProps, type TextAlignmentProp, TextArea, type TextAreaProps, TextEditor, TextInput, type TextInputProps, TimeInput, type TimeInputProps, TimeLine, type TimeLineItemProps, type TimeLinePointProps, type TimeLineProps, ToggleBar, type ToggleBarProps, type ToggleItemProps, TT as Tooltip, URLInput, type URLInputProps, type UncontrolledMode, type UncontrolledOptions, WeekInput, type WeekInputProps, type WeekInputString, type WeekViewProps, XNOR, XOR, boolSort, calculateTxtColor, centerPad, dateSort, getHotkeyHandler, getHotkeyMatcher, hasBSN, hexToHSL, hexToRGB, hslToHex, hslToRGB, isHSLColor, isHexColor, isIBAN, isRGBColor, leftPad, numSort, parseHotkey, randomColorProp, randomDbl, randomInt, rgbToHSL, rgbToHex, rightPad, roundTo, stringSort, useActionSheet, useBoolToggle, useClickOutside, useClipboard, useConfirm, useDebouncedState, useDebouncedValue, useFetchAPI, useHotkeys, useLocalStoredState, useNotifier, usePagination, usePrompt, useScrollIntoView, useSessionStoredState, useToggle, useUncontrolled, useValidatedState };