loon-bulma-react 2026.0.6 → 2026.0.7

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

@@ -0,0 +1,58 @@
+import React from 'react';
+/**
+ * Props voor de DragDropList component
+ * @template T - Het type van de items in de lijst
+ */
+type DragDropListProps<T> = {
+    /** De array van items die getoond en herschikt kunnen worden */
+    items: 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;
+    /** Functie of property naam die de unieke key voor elk item bepaalt */
+    keyExtractor: ((item: T, index: number) => string | number) | keyof T;
+    /** Optionele CSS class voor de lijst container */
+    className?: string;
+    /** Optionele CSS class voor elk list item */
+    itemClassName?: string;
+    /** Children moeten DragDropList.Handle en/of DragDropList.Buttons zijn om de layout te bepalen */
+    children?: React.ReactNode;
+};
+/**
+ * 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' },
+ * ]);
+ *
+ * <DragDropList
+ *   items={items}
+ *   onReorder={setItems}
+ *   keyExtractor="id"
+ *   className='container-class'
+ *   itemClassName='item-class'
+ *   renderItem={(item) => <div>{item.name}</div>}
+ * >
+ *   <DragDropList.Handle>
+ *     <Icon icon={faGripVertical} />
+ *   </DragDropList.Handle>
+ *   <DragDropList.Buttons />
+ * </DragDropList>
+ * ```
+ */
+export declare function DragDropList<T>({ items, onReorder, renderItem, keyExtractor, className, itemClassName, children }: DragDropListProps<T>): import("react/jsx-runtime").JSX.Element;
+export declare namespace DragDropList {
+    var Handle: ({ children }: {
+        children?: React.ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+    var Buttons: ({ children }: {
+        children?: React.ReactNode;
+    }) => import("react/jsx-runtime").JSX.Element;
+}
+export {};

package/dist/components/Dropdown/Dropdown.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 type DropDownProps = {
     children?: React.ReactNode;
-    trigger: string | React.ReactNode | ((open: boolean, disabled?: boolean | undefined) => string | React.ReactNode);
+    trigger?: string | React.ReactNode | ((open: boolean, disabled?: boolean | undefined) => string | React.ReactNode);
     disabled?: boolean | undefined;
     startOpen?: boolean | undefined;
     onHover?: boolean | undefined;
@@ -14,6 +14,9 @@ type DropDownProps = {
 };
 declare const Dropdown: {
     ({ onHover, id, children: childrenProp, trigger: triggerProp, disabled, alignment, dropUp, startOpen, className: classNameProp, keepOpenAfterClick, usePortal, }: DropDownProps): import("react/jsx-runtime").JSX.Element;
+    Trigger({ children }: {
+        children: React.ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
     Divider(): import("react/jsx-runtime").JSX.Element;
     Item({ children, onClick, onItemClick, ...props }: {
         children: React.ReactNode;

package/dist/index.d.ts

@@ -22,6 +22,7 @@ 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 { DragDropList } from './components/DragDrop/DragDropList';
 export { Dropdown } from './components/Dropdown/Dropdown';
 export { HelpTxt } from './components/Help/Help';
 export type { HelpTxtProps } from './components/Help/Help';