loon-bulma-react 2026.0.61 → 2026.0.62

package/dist/components/DataTable/DataTable.d.ts

@@ -112,11 +112,11 @@ type DataTableProps<T extends unknown = unknown> = {
      */
     onSearch?: (searchTerm: string, data: T[]) => T[];
     /** opmaak voor informatie over het zoeken
-     * @param fc aantal items dat voldoet aan de zoekterm
-     * @param tc totaal aantal items in de tabel
-     * @param term de zoekterm
+     * @param filteredCount aantal items dat voldoet aan de zoekterm
+     * @param totalCount totaal aantal items in de tabel
+     * @param searchTerm de zoekterm
      */
-    searchInfoMessage?: (fc: number, tc: number, term: string) => string;
+    searchInfoMessage?: (filteredCount: number, totalCount: number, searchTerm: string) => string;
     /**
      * callback voor geselecteerde rij
      * @param item het item (als object van type `T`)
@@ -153,7 +153,7 @@ type DataTableProps<T extends unknown = unknown> = {
     /** Vul lege rijen op tot het aantal rijen per pagina op de laatste pagina (default = false). Alleen als er paginatie is */
     fillEmptyRows?: boolean;
     /** Expose helper-functies naar de parent om op elk moment de huidige sorted-data volgorde te lezen. */
-    apiRef?: React.MutableRefObject<DataTableApi<T> | null>;
+    apiRef?: React.RefObject<DataTableApi<T> | null>;
 };
 /**
  * Maak een tabel voor grote hoeveelheden data. De tabel is doorzoekbaar en heeft paginatie. Dat is allemaal uit te zetten.
@@ -205,7 +205,7 @@ type DataTableProps<T extends unknown = unknown> = {
  * @param searchPlaceholder placeholder voor zoek-input (default = 'Zoek ...')
  * @returns
  */
-declare function DataTable<T extends unknown = unknown>({ data, columns: cols, defaultSortColNum, compact, noStripes, narrow, bordered, hoverable, sticky, hideSearch, headerContent, footerContent, size, searchPlaceholder, rowIdentifier, rowClass, id: tableID, itemRef, paginationOptions: paginationOptionsProp, fillEmptyRows, apiRef, onSearch, onRowSelected, onRowRightClick, renderWhenNoData, searchInfoMessage, onSortColumnChanged, }: DataTableProps<T>): React.JSX.Element;
+declare function DataTable<T extends unknown = unknown>({ data, columns: cols, defaultSortColNum, compact, noStripes, narrow, bordered, hoverable, sticky, hideSearch, headerContent, footerContent, size, searchPlaceholder, rowIdentifier, rowClass, id: tableID, itemRef, paginationOptions: paginationOptionsProp, fillEmptyRows, apiRef, onSearch, onRowSelected, onRowRightClick, renderWhenNoData, searchInfoMessage: searchInfoMsgFn, onSortColumnChanged, }: DataTableProps<T>): React.JSX.Element;
 declare namespace DataTable {
     var Dropdown: {
         ({ onHover, id, children: childrenProp, trigger: triggerProp, disabled, alignment, dropUp, startOpen, className: classNameProp, keepOpenAfterClick, }: import("./DataTableDropdown").DataTableDropdownProps): React.JSX.Element;

package/dist/forms/Checkbox/Checkbox.d.ts

@@ -27,7 +27,7 @@ type CheckBoxInputProps = StrictOmit<InputPropsType<string>, 'value' | 'onValueC
  * const [x, setX] = React.useState(false);
  * <CheckBox name="test" label="test" value={x} onValueChanged={setX} direction='v'/>
  */
-declare function CheckBox({ id, label, name, size: sizeProp, direction: directionProp, required, showRequiredOnLabel, value, labelHidden, helpTag, infoData, onValueChanged, onBlur, onFocus, ...props }: CheckBoxInputProps): React.JSX.Element;
+declare function CheckBox({ id, label, name, size: sizeProp, direction: directionProp, required, showRequiredOnLabel, value, labelHidden, helpTag, infoData, className: cn, onValueChanged, onBlur, onFocus, ...props }: CheckBoxInputProps): React.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.

package/dist/forms/Input.d.ts

@@ -237,12 +237,13 @@ type InputContainerProps = {
     size: SizeProp;
     direction: DirectionProp;
     controlClassName?: string;
+    outerClassName?: string;
     infoData?: React.ReactNode | undefined;
     setHovered?: (hovered: boolean) => void;
     onMouseEnter?: (e: React.MouseEvent<HTMLDivElement>) => void;
     onMouseLeave?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
 /** Een wrapper voor een input component, om te zorgen dat ze allemaal op dezelfde manier horizontaal of verticaal aligned worden. */
-declare function InputContainer({ children, controlClassName, direction, showRequiredOnLabel, inputId, label, labelHidden, required, size, loading, infoData, setHovered, onMouseEnter, onMouseLeave, }: InputContainerProps): React.JSX.Element;
+declare function InputContainer({ children, controlClassName, outerClassName, direction, showRequiredOnLabel, inputId, label, labelHidden, required, size, loading, infoData, setHovered, onMouseEnter, onMouseLeave, }: InputContainerProps): React.JSX.Element;
 export { BaseInput, Input, InputContainer, FOCUS_HELP_TIMEOUT_IN_MS };
 export type { InputPropsType, InputStylingPropsType, InputValueType };

package/dist/forms/Radio/Radio.d.ts

@@ -3,6 +3,7 @@ import React from 'react';
 import { InputValueType, InputStylingPropsType, InputErrorProps, InputPropsType } from '../Input';
 type RBValueType = InputValueType | {};
 type RadioGroupProps<T extends RBValueType = string> = StrictOmit<InputStylingPropsType, 'icon'> & {
+    className?: string;
     /** id voor de container van de radio-items */ id?: string;
     /** label bij de radio-group. Als geen label, dan wordt de `name`-property gebruikt */ label?: string;
     /** name-property voor de input. Deze hoort bij **alle** radio-buttons in de groep */ name: string;
@@ -86,7 +87,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: childrenProp, id: _id, label, disabled, labelHidden, name, value, required, showRequiredOnLabel, size: sizeProp, direction: directionProp, itemsDirection: itemsDirectionProp, alignment: alignmentProp, errorMessage, infoMessage, infoData, helpTag, color, onValueChanged, onBlur, onChange, onFocus, onKeyDown, onKeyUp, }: RadioGroupProps<T>): React.JSX.Element;
+declare function RadioGroup<T extends RBValueType = string>({ children: childrenProp, id: _id, label, disabled, labelHidden, name, value, required, showRequiredOnLabel, size: sizeProp, direction: directionProp, itemsDirection: itemsDirectionProp, alignment: alignmentProp, errorMessage, infoMessage, infoData, helpTag, color, className: cn, onValueChanged, onBlur, onChange, onFocus, onKeyDown, onKeyUp, }: RadioGroupProps<T>): React.JSX.Element;
 declare namespace RadioGroup {
     var Item: typeof SpecialRadioItem;
 }

package/dist/forms/Select/Select.d.ts

@@ -114,7 +114,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: alignmentProp, size: sizeProp, direction: directionProp, options, children: nodes, helpTag, disabled, keyboardType, title, spellCheck, loading, autoComplete, autofocus, form, inputRef: ref, labelHidden, icon, infoData, useCssArrow, color, onBlur, onFocus, onChange, onKeyDown, onKeyUp, onValueChanged, }: SelectInputProps<T>): React.JSX.Element;
+declare function Select<T extends number | string | string[] = string>({ value, id, name, label, grouped, required, showRequiredOnLabel, errorMessage, infoMessage, multiple, alignment: alignmentProp, className: cn, size: sizeProp, direction: directionProp, options, children: nodes, helpTag, disabled, keyboardType, title, spellCheck, loading, autoComplete, autofocus, form, inputRef: ref, labelHidden, icon, infoData, useCssArrow, color, onBlur, onFocus, onChange, onKeyDown, onKeyUp, onValueChanged, }: SelectInputProps<T>): React.JSX.Element;
 declare namespace Select {
     var Option: ({ value, disabled, id, children }: {
         id?: string;