loon-bulma-react 2026.0.13 → 2026.0.15

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

@@ -21,20 +21,25 @@ type DataTableColumnProp<T extends unknown = unknown> = {
     /** className voor de kolom, om een cel te stylen afhankelijk van de waarde */
     columnClass?: string | ((item: T) => string);
 };
-type PaginationOptionsProp = {
+type DatatablePaginationOptionsProp = {
     /** tonen we paginatie? */
     hidden?: boolean;
     /** vanaf wel aantal rijen is paginatie actief */
     threshold?: number;
     /** initiele pagination number. default = 1 (first) */
     initialPage?: number;
-    /** Default aantal rijen per pagina  (-1 voor alles)*/
+    /** Default aantal rijen per pagina  (Infinity voor alles)*/
     initialRowsPerPage?: number;
-    /** Opties voor aantal rijen per pagina (gebruik `-1` voor alles) */
+    /** Opties voor aantal rijen per pagina (gebruik `Infinity` voor alles) */
     rowsPerPageOptions?: {
         label: string;
         value: number;
     }[];
+    /** callback voor wijzigen van de `rowsPerPage` - zodat je die (als gewenst) kan opslaan */
+    onRowsPerPerPageOptionChanged?: (selected: {
+        label: string;
+        value: number;
+    }) => void;
 };
 type DataTableProps<T extends unknown = unknown> = {
     /** De kolommen voor de DataTable
@@ -121,7 +126,8 @@ type DataTableProps<T extends unknown = unknown> = {
     footerContent?: React.ReactNode;
     itemRef?: React.RefObject<any> | null;
     id?: string;
-    paginationOptions?: PaginationOptionsProp | undefined;
+    /** opties voor paginatie */
+    paginationOptions?: DatatablePaginationOptionsProp | undefined;
 };
 /**
  * Maak een tabel voor grote hoeveelheden data. De tabel is doorzoekbaar en heeft paginatie. Dat is allemaal uit te zetten.

package/dist/components/DragDrop/DragDropList.d.ts

@@ -1,4 +1,23 @@
 import React from 'react';
+/**
+ * Informatie over een item die wordt meegegeven aan de renderItem functie
+ */
+type RenderItemInfo = {
+    /** De index van het item in de lijst */
+    index: number;
+    /** Of het item disabled is */
+    isDisabled: boolean;
+    /** Of dit het eerste item in de lijst is */
+    isFirstItem: boolean;
+    /** Of dit het laatste item in de lijst is */
+    isLastItem: boolean;
+    /** Of dit item momenteel wordt gesleept */
+    isDragging: boolean;
+    /** Of dit een placeholder/preview is van waar het item zal landen */
+    isPlaceholder: boolean;
+    /** Totaal aantal items in de lijst */
+    totalItems: number;
+};
 /**
  * Props voor de DragDropList component
  * @template T - Het type van de items in de lijst
@@ -9,9 +28,11 @@ type DragDropListProps<T> = {
     /** Callback functie die wordt aangeroepen wanneer de volgorde van items verandert */
     onReorder: (items: T[]) => void;
     /** Functie die bepaalt hoe elk item gerenderd wordt */
-    renderItem: (item: T, index: number) => React.ReactNode;
+    renderItem: (item: T, info: RenderItemInfo) => React.ReactNode;
     /** Functie of property naam die de unieke key voor elk item bepaalt */
     keyExtractor: ((item: T, index: number) => string | number) | keyof T;
+    /** Functie of property naam die bepaalt of een item disabled is */
+    isDisabled?: ((item: T, index: number) => boolean) | keyof T;
     /** Optionele CSS class voor de lijst container */
     className?: string;
     /** Optionele CSS class voor elk list item */
@@ -21,23 +42,28 @@ type DragDropListProps<T> = {
 };
 /**
  * Een drag-and-drop lijst component waarmee items verticaal herschikt kunnen worden.
- *
  * @template T - Het type van de items in de lijst
- *
  * @example
  * ```tsx
  * const [items, setItems] = useState([
- *   { id: 1, name: 'Item 1' },
- *   { id: 2, name: 'Item 2' },
+ *   { id: 1, name: 'Item 1', locked: false },
+ *   { id: 2, name: 'Item 2', locked: true },
  * ]);
  *
  * <DragDropList
  *   items={items}
  *   onReorder={setItems}
  *   keyExtractor="id"
+ *   isDisabled="locked"
  *   className='container-class'
  *   itemClassName='item-class'
- *   renderItem={(item) => <div>{item.name}</div>}
+ *   renderItem={(item, info) => (
+ *     <div>
+ *       {item.name}
+ *       {info.isFirstItem && ' (eerste)'}
+ *       {info.isDisabled && ' (vergrendeld)'}
+ *     </div>
+ *   )}
  * >
  *   <DragDropList.Handle>
  *     <Icon icon={faGripVertical} />
@@ -46,7 +72,7 @@ type DragDropListProps<T> = {
  * </DragDropList>
  * ```
  */
-export declare function DragDropList<T>({ items, onReorder, renderItem, keyExtractor, className, itemClassName, children }: DragDropListProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare function DragDropList<T>({ items, onReorder, renderItem, keyExtractor, isDisabled, className, itemClassName, children }: DragDropListProps<T>): import("react/jsx-runtime").JSX.Element;
 export declare namespace DragDropList {
     var Handle: ({ children }: {
         children?: React.ReactNode;

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

@@ -37,22 +37,28 @@ type DefaultsType = {
     tags: TagSettings;
     /** default alignment settings */
     alignment: AlignmentProp;
-    datatablePagination: PaginationOptions;
+    /** default settings voor de datatable paginatie */
+    datatablePagination: DatatablePaginationOptions;
 };
-export type PaginationOptions = {
+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  (-1 voor alles)*/
+    /** Default aantal rijen per pagina  (Infinity voor alles)*/
     initialRowsPerPage: number;
-    /** Opties voor aantal rijen per pagina (gebruik value `-1` voor alles) */
+    /** 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.
@@ -68,7 +74,7 @@ export type OptionalDefaultsType = Partial<{
     tags: Partial<TagSettings>;
     /** default alignment settings */
     alignment: Partial<AlignmentProp>;
-    datatablePagination: Partial<PaginationOptions>;
+    datatablePagination: Partial<DatatablePaginationOptions>;
 }>;
 /**
  * Context voor het bijhouden van de default waardes voor de LoonBulmaReact componenten