loon-bulma-react 2026.0.32 → 2026.0.34

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

@@ -11,7 +11,7 @@ type DataTableColumnProp<T extends unknown = unknown> = {
     /** sorteer-functie voor deze kolom. Als niet gedefinieerd kan je niet op deze kolom sorteren */
     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, hovered?: boolean, prev?: T, next?: T) => React.ReactNode);
+    value: keyof T | ((item: T, hovered?: boolean) => React.ReactNode);
     /** 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 */
@@ -41,6 +41,21 @@ type DatatablePaginationOptionsProp = {
         value: number;
     }) => void;
 };
+/** Data Table API - voor programatische toegang tot de DataTable */
+type DataTableApi<T extends unknown = unknown> = {
+    /** Geef de index terug binnen de complete gesorteerde lijst (incl. zoekfilter, excl. paginatie-slice). */
+    getIndexForRowID: (rowIdentifier: string | number) => number;
+    /** Geef een item terug op basis van index binnen de complete gesorteerde lijst (incl. zoekfilter). */
+    getItemForIndex: (index: number) => T | undefined;
+    /** Geef de complete gesorteerde lijst terug (incl. zoekfilter, excl. paginatie-slice). */
+    getSortedData: () => T[];
+    /** Navigeer de paginatie naar de pagina die het item bevat. */
+    navigateToItem: (item: T) => void;
+    /** Navigeer de paginatie naar de pagina die het item bevat op basis van de gesorteerde index. */
+    navigateToIndex: (sortedIndex: number) => void;
+    /** Navigeer de paginatie naar de pagina die het item bevat op basis van de rowIdentifier. */
+    navigateToRowId: (rowId: string | number) => void;
+};
 type DataTableProps<T extends unknown = unknown> = {
     /** De kolommen voor de DataTable
      * @param sort een functie die twee items vergelijkt en -1, 0, 1 of een `number` teruggeeft. Als er geen sort-function is, kan de tabel **niet** op deze kolom gesorteerd worden.
@@ -132,6 +147,8 @@ type DataTableProps<T extends unknown = unknown> = {
     paginationOptions?: DatatablePaginationOptionsProp | undefined;
     /** 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>;
 };
 /**
  * Maak een tabel voor grote hoeveelheden data. De tabel is doorzoekbaar en heeft paginatie. Dat is allemaal uit te zetten.
@@ -183,7 +200,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, onSearch, onRowSelected, onRowRightClick, renderWhenNoData, searchInfoMessage, onSortColumnChanged, }: DataTableProps<T>): import("react/jsx-runtime").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, onSortColumnChanged, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace DataTable {
     var Dropdown: {
         ({ onHover, id, children: childrenProp, trigger: triggerProp, disabled, alignment, dropUp, startOpen, className: classNameProp, keepOpenAfterClick, }: import("./DataTableDropdown").DataTableDropdownProps): import("react/jsx-runtime").JSX.Element;
@@ -195,7 +212,7 @@ declare namespace DataTable {
             children: React.ReactNode;
             disabled?: boolean;
             onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
-            onItemClick? /** is de tabel is de tabel hoverbaar (en is dat ook zichtbaar?) hebben? (default = `false`) */: (isClickable: boolean) => void;
+            onItemClick?: (isClickable: boolean) => void;
         } & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
         Link({ children, onItemClick, disabled, ...props }: {
             children: React.ReactNode;
@@ -207,4 +224,4 @@ declare namespace DataTable {
 }
 declare function DataTableContainer({ className: classNameProp, ...props }: {} & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 export { DataTable };
-export type { DataTableProps, DataTableColumnProp as DataTableColumn };
+export type { DataTableProps, DataTableColumnProp as DataTableColumn, DataTableApi };

package/dist/forms/Input.d.ts

@@ -1,5 +1,5 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
-import { AlignmentProp, DirectionProp, AutoCompleteProp, KeyboardTypeProp, StrictOmit, SizeProp } from './../types';
+import { AlignmentProp, DirectionProp, AutoCompleteProp, KeyboardTypeProp, StrictOmit, SizeProp, ColorProp } from './../types';
 import React from 'react';
 import { MonthInputString } from './Periodes/MonthInput';
 import { WeekInputString } from './Periodes/WeekInput';
@@ -28,7 +28,7 @@ export type InputErrorProps<T = InputValueType> = {
  * - 1e item `ReactNode` MOET van het component-type `<Icon icon={...} />` zijn!
  * - 2e item`onClick` is optioneel en is een callback voor een click op het icon.
  */
-export type InputIconRightFn<T extends InputValueType = InputValueType> = (v: T | undefined, hovered: boolean, disabled: boolean, loading: boolean, focused: boolean) => [IconComponent: React.ReactNode, onClick?: () => void];
+export type InputIconRightFn<T extends InputValueType = InputValueType> = (v: T | undefined, hovered: boolean, disabled: boolean, loading: boolean, focused: boolean) => [IconComponent: React.ReactNode, onClick?: () => void, color?: ColorProp];
 type InputValueType = string | number | string[] | readonly string[] | undefined;
 type InputStylingPropsType = {
     /** grootte van de input (default = `m`, medium) */ size?: SizeProp | undefined;

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

@@ -1,10 +1,11 @@
 import { StrictOmit } from './../../types';
 import React from 'react';
 import { InputPropsType, InputStylingPropsType } from '../Input';
-type SelectInputProps<T extends number | string | string[]> = StrictOmit<InputPropsType<number | string | string[]>, 'type' | 'step' | 'inputRef' | 'value' | 'onValueChanged' | 'onBlur' | 'onFocus' | 'onChange' | 'onKeyDown' | 'onKeyUp' | 'min' | 'max' | 'readonly' | 'pattern' | 'placeholder'> & InputStylingPropsType & {
+import { IconProp } from '@fortawesome/fontawesome-svg-core';
+type SelectInputProps<T extends number | string | string[]> = StrictOmit<InputPropsType<number | string | string[]>, 'type' | 'step' | 'iconRight' | 'inputRef' | 'value' | 'onValueChanged' | 'onBlur' | 'onFocus' | 'onChange' | 'onKeyDown' | 'onKeyUp' | 'min' | 'max' | 'readonly' | 'pattern' | 'placeholder'> & InputStylingPropsType & {
     /** De waarde van de select
      * - bij `multiple` is dit een array van strings
-     * - bij `gewoon` is dit een string (default)
+     * - bij `gewoon` is dit een string (defsault)
      * Om het type te setten:
      * @example <Select<string[]> value={x} onValueChanged={setX} />
      * @example <Select<string> value={x} onValueChanged={setX} /> // string
@@ -21,6 +22,8 @@ type SelectInputProps<T extends number | string | string[]> = StrictOmit<InputPr
      * Moeten de items gegroupeerd wewergegeven worden (voor als de `options`-prop een array van objecten is met een `group`-property)
      */
     grouped?: boolean;
+    iconOpen?: IconProp | undefined;
+    iconClosed?: IconProp | undefined;
     /** De opties van de select. Kan een array van strings zijn, of een array van objecten met een `value`-property en een `label`-property.
      * - `string`: is het label EN de value van de `<Select.Option>`
      * - `object`: Een object met de volgende properties
@@ -110,7 +113,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, iconRight, 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>): import("react/jsx-runtime").JSX.Element;
+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, iconOpen, iconClosed, infoData, onBlur, onFocus, onChange, onKeyDown, onKeyUp, onValueChanged, }: SelectInputProps<T>): import("react/jsx-runtime").JSX.Element;
 declare namespace Select {
     var Option: ({ value, disabled, id, children }: {
         id?: string;

package/dist/index.d.ts

@@ -21,7 +21,7 @@ export { ScrollArea } from './components/ScrollArea/ScrollArea';
 export { CodeBlock } from './components/CodeBlock/CodeBlock';
 export type { CodeBlockProps, CodeLanguage } from './components/CodeBlock/CodeBlock';
 export { DataTable } from './components/DataTable/DataTable';
-export type { DataTableColumn, DataTableProps } from './components/DataTable/DataTable';
+export type { DataTableApi, DataTableColumn, DataTableProps } from './components/DataTable/DataTable';
 export { DragDropList } from './components/DragDrop/DragDropList';
 export { Dropdown } from './components/Dropdown/Dropdown';
 export { HelpTxt } from './components/Help/Help';