loon-bulma-react 2026.0.21 → 2026.0.22

package/dist/assets/index-BM9oOHBx.css

@@ -0,0 +1 @@
+:root{--bulma-control-radius: var(--bulma-radius);--bulma-control-radius-small: var(--bulma-radius-small);--bulma-control-border-width: 1px;--bulma-control-height: 2.5em;--bulma-control-line-height: 1.5;--bulma-control-padding-vertical: calc(.5em - 1px) ;--bulma-control-padding-horizontal: calc(.75em - 1px) ;--bulma-control-size: var(--bulma-size-normal);--bulma-control-focus-shadow-l: 50%}.dropdown{--bulma-dropdown-menu-min-width: 12rem;--bulma-dropdown-content-background-color: var(--bulma-scheme-main);--bulma-dropdown-content-offset: .25rem;--bulma-dropdown-content-padding-bottom: .5rem;--bulma-dropdown-content-padding-top: .5rem;--bulma-dropdown-content-radius: var(--bulma-radius);--bulma-dropdown-content-shadow: var(--bulma-shadow);--bulma-dropdown-content-z: 20;--bulma-dropdown-item-h: var(--bulma-scheme-h);--bulma-dropdown-item-s: var(--bulma-scheme-s);--bulma-dropdown-item-l: var(--bulma-scheme-main-l);--bulma-dropdown-item-background-l: var(--bulma-scheme-main-l);--bulma-dropdown-item-background-l-delta: 0%;--bulma-dropdown-item-hover-background-l-delta: var(--bulma-hover-background-l-delta);--bulma-dropdown-item-active-background-l-delta: var(--bulma-active-background-l-delta);--bulma-dropdown-item-color-l: var(--bulma-text-strong-l);--bulma-dropdown-item-selected-h: var(--bulma-link-h);--bulma-dropdown-item-selected-s: var(--bulma-link-s);--bulma-dropdown-item-selected-l: var(--bulma-link-l);--bulma-dropdown-item-selected-background-l: var(--bulma-link-l);--bulma-dropdown-item-selected-color-l: var(--bulma-link-invert-l);--bulma-dropdown-divider-background-color: var(--bulma-border-weak)}.dropdown{display:inline-flex;position:relative;vertical-align:top}.dropdown.is-active .dropdown-menu,.dropdown.is-active .dt-dropdown-menu,.dropdown.is-hoverable:hover .dropdown-menu,.dropdown.is-hoverable:hover .dt-dropdown-menu{display:block}.dropdown.is-right .dropdown-menu,.dropdown.is-right .dt-dropdown-menu{left:auto;right:0}.dropdown.is-up .dropdown-menu,.dropdown.is-up .dt-dropdown-menu{bottom:100%;padding-bottom:var(--bulma-dropdown-content-offset);padding-top:initial;top:auto}.dropdown.is-disabled{cursor:not-allowed;opacity:.5}.dropdown-menu,.dt-dropdown-menu{display:none;left:0;min-width:var(--bulma-dropdown-menu-min-width);padding-top:var(--bulma-dropdown-content-offset);position:absolute;top:100%;z-index:var(--bulma-dropdown-content-z)}.dropdown-content,.dt-dropdown-content{background-color:var(--bulma-dropdown-content-background-color);border-radius:var(--bulma-dropdown-content-radius);box-shadow:var(--bulma-dropdown-content-shadow);padding-bottom:var(--bulma-dropdown-content-padding-bottom);padding-top:var(--bulma-dropdown-content-padding-top);text-align:left}.dropdown-item{color:hsl(var(--bulma-dropdown-item-h),var(--bulma-dropdown-item-s),var(--bulma-dropdown-item-color-l));display:block;font-size:.875rem;line-height:1.5;padding:.375rem 1rem}a.dropdown-item,div.dropdown-item.is-clickable,span.dropdown-item.is-clickable,button.dropdown-item{background-color:hsl(var(--bulma-dropdown-item-h),var(--bulma-dropdown-item-s),calc(var(--bulma-dropdown-item-background-l) + var(--bulma-dropdown-item-background-l-delta)));padding-inline-end:3rem;text-align:inherit;white-space:nowrap;width:100%}a.dropdown-item:hover,div.dropdown-item.is-clickable:hover,span.dropdown-item.is-clickable:hover,button.dropdown-item:hover{--bulma-dropdown-item-background-l-delta: var(--bulma-dropdown-item-hover-background-l-delta);--bulma-dropdown-item-border-l-delta: var(--bulma-dropdown-item-hover-border-l-delta)}a.dropdown-item:active,div.dropdown-item.is-clickable:active,span.dropdown-item.is-clickable:active,button.dropdown-item:active{--bulma-dropdown-item-background-l-delta: var(--bulma-dropdown-item-active-background-l-delta);--bulma-dropdown-item-border-l-delta: var(--bulma-dropdown-item-active-border-l-delta)}a.dropdown-item.is-active,a.dropdown-item.is-selected,div.dropdown-item.is-clickable.is-active,div.dropdown-item.is-clickable.is-selected,span.dropdown-item.is-clickable.is-active,span.dropdown-item.is-clickable.is-selected,button.dropdown-item.is-active,button.dropdown-item.is-selected{--bulma-dropdown-item-h: var(--bulma-dropdown-item-selected-h);--bulma-dropdown-item-s: var(--bulma-dropdown-item-selected-s);--bulma-dropdown-item-l: var(--bulma-dropdown-item-selected-l);--bulma-dropdown-item-background-l: var(--bulma-dropdown-item-selected-background-l);--bulma-dropdown-item-color-l: var(--bulma-dropdown-item-selected-color-l)}.dropdown-divider{background-color:var(--bulma-dropdown-divider-background-color);border:none;display:block;height:1px;margin:.5rem 0}.dt-dropdown-menu{display:block!important}

package/dist/assets/index-BURxowh-.css

@@ -0,0 +1 @@
+.dt-dropdown-menu{display:block!important;background-color:var(--bulma-dropdown-content-background-color, white);border-radius:var(--bulma-dropdown-content-radius, 4px);box-shadow:var(--bulma-dropdown-content-shadow, 0 .5em 1em -.125em rgba(10, 10, 10, .1), 0 0 0 1px rgba(10, 10, 10, .02));padding:0}.dt-dropdown-content{padding:.5rem 0}.dt-dropdown-content .dropdown-item{color:var(--bulma-dropdown-item-color, #4a4a4a);display:block;font-size:.875rem;line-height:1.5;padding:.375rem 1rem;position:relative}.dt-dropdown-content .dropdown-item.is-clickable{cursor:pointer}.dt-dropdown-content .dropdown-item.is-clickable:hover{background-color:var(--bulma-dropdown-item-hover-background-color, whitesmoke);color:var(--bulma-dropdown-item-hover-color, #0a0a0a)}.dt-dropdown-content .dropdown-item.is-clickable:active{background-color:var(--bulma-dropdown-item-active-background-color, #485fc7);color:var(--bulma-dropdown-item-active-color, #fff)}.dt-dropdown-content a.dropdown-item{cursor:pointer;text-decoration:none;white-space:nowrap;width:100%}.dt-dropdown-content a.dropdown-item:hover{background-color:var(--bulma-dropdown-item-hover-background-color, whitesmoke);color:var(--bulma-dropdown-item-hover-color, #0a0a0a)}.dt-dropdown-content a.dropdown-item:active{background-color:var(--bulma-dropdown-item-active-background-color, #485fc7);color:var(--bulma-dropdown-item-active-color, #fff)}.dt-dropdown-content .dropdown-divider{background-color:var(--bulma-dropdown-divider-background-color, #ededed);border:none;display:block;height:1px;margin:.5rem 0}

package/dist/assets/index-BrbpdSxD.css

@@ -0,0 +1 @@
+.dt-dropdown{display:inline-flex;position:relative;vertical-align:top}.dt-dropdown.is-disabled{cursor:not-allowed;opacity:.5}.dt-dropdown-menu{display:block!important;min-width:var(--bulma-dropdown-menu-min-width);position:absolute;z-index:var(--bulma-dropdown-content-z)}.dt-dropdown-content{background-color:var(--bulma-dropdown-content-background-color);border-radius:var(--bulma-dropdown-content-radius);box-shadow:var(--bulma-dropdown-content-shadow);padding-bottom:var(--bulma-dropdown-content-padding-bottom);padding-top:var(--bulma-dropdown-content-padding-top);text-align:left}.dt-dropdown-content .dropdown-item{color:hsl(var(--bulma-dropdown-item-h),var(--bulma-dropdown-item-s),var(--bulma-dropdown-item-color-l));display:block;font-size:.875rem;line-height:1.5;padding:.375rem 1rem}.dt-dropdown-content a.dropdown-item,.dt-dropdown-content div.dropdown-item.is-clickable,.dt-dropdown-content span.dropdown-item.is-clickable,.dt-dropdown-content button.dropdown-item{background-color:hsl(var(--bulma-dropdown-item-h),var(--bulma-dropdown-item-s),calc(var(--bulma-dropdown-item-background-l) + var(--bulma-dropdown-item-background-l-delta)));padding-inline-end:3rem;text-align:inherit;white-space:nowrap;width:100%;cursor:pointer}.dt-dropdown-content a.dropdown-item:hover,.dt-dropdown-content div.dropdown-item.is-clickable:hover,.dt-dropdown-content span.dropdown-item.is-clickable:hover,.dt-dropdown-content button.dropdown-item:hover{--bulma-dropdown-item-background-l-delta: var(--bulma-dropdown-item-hover-background-l-delta)}.dt-dropdown-content a.dropdown-item:active,.dt-dropdown-content div.dropdown-item.is-clickable:active,.dt-dropdown-content span.dropdown-item.is-clickable:active,.dt-dropdown-content button.dropdown-item:active{--bulma-dropdown-item-background-l-delta: var(--bulma-dropdown-item-active-background-l-delta)}.dt-dropdown-content a.dropdown-item.is-active,.dt-dropdown-content a.dropdown-item.is-selected,.dt-dropdown-content div.dropdown-item.is-clickable.is-active,.dt-dropdown-content div.dropdown-item.is-clickable.is-selected,.dt-dropdown-content span.dropdown-item.is-clickable.is-active,.dt-dropdown-content span.dropdown-item.is-clickable.is-selected,.dt-dropdown-content button.dropdown-item.is-active,.dt-dropdown-content button.dropdown-item.is-selected{--bulma-dropdown-item-h: var(--bulma-dropdown-item-selected-h);--bulma-dropdown-item-s: var(--bulma-dropdown-item-selected-s);--bulma-dropdown-item-l: var(--bulma-dropdown-item-selected-l);--bulma-dropdown-item-background-l: var(--bulma-dropdown-item-selected-background-l);--bulma-dropdown-item-color-l: var(--bulma-dropdown-item-selected-color-l)}.dt-dropdown-content .dropdown-divider{background-color:var(--bulma-dropdown-divider-background-color);border:none;display:block;height:1px;margin:.5rem 0}

package/dist/assets/index-Dc7D2cKW.css

@@ -0,0 +1 @@
+:root{--bulma-control-radius: var(--bulma-radius);--bulma-control-radius-small: var(--bulma-radius-small);--bulma-control-border-width: 1px;--bulma-control-height: 2.5em;--bulma-control-line-height: 1.5;--bulma-control-padding-vertical: calc(.5em - 1px) ;--bulma-control-padding-horizontal: calc(.75em - 1px) ;--bulma-control-size: var(--bulma-size-normal);--bulma-control-focus-shadow-l: 50%}.dt-dropdown{--bulma-dropdown-menu-min-width: 12rem;--bulma-dropdown-content-background-color: var(--bulma-scheme-main);--bulma-dropdown-content-offset: .25rem;--bulma-dropdown-content-padding-bottom: .5rem;--bulma-dropdown-content-padding-top: .5rem;--bulma-dropdown-content-radius: var(--bulma-radius);--bulma-dropdown-content-shadow: var(--bulma-shadow);--bulma-dropdown-content-z: 20;--bulma-dropdown-item-h: var(--bulma-scheme-h);--bulma-dropdown-item-s: var(--bulma-scheme-s);--bulma-dropdown-item-l: var(--bulma-scheme-main-l);--bulma-dropdown-item-background-l: var(--bulma-scheme-main-l);--bulma-dropdown-item-background-l-delta: 0%;--bulma-dropdown-item-hover-background-l-delta: var(--bulma-hover-background-l-delta);--bulma-dropdown-item-active-background-l-delta: var(--bulma-active-background-l-delta);--bulma-dropdown-item-color-l: var(--bulma-text-strong-l);--bulma-dropdown-item-selected-h: var(--bulma-link-h);--bulma-dropdown-item-selected-s: var(--bulma-link-s);--bulma-dropdown-item-selected-l: var(--bulma-link-l);--bulma-dropdown-item-selected-background-l: var(--bulma-link-l);--bulma-dropdown-item-selected-color-l: var(--bulma-link-invert-l);--bulma-dropdown-divider-background-color: var(--bulma-border-weak);display:inline-flex;position:relative;vertical-align:top}.dt-dropdown.is-active .dt-dropdown-menu,.dt-dropdown.is-hoverable:hover .dt-dropdown-menu{display:block}.dt-dropdown.is-right .dt-dropdown-menu{left:auto;right:0}.dt-dropdown.is-up .dt-dropdown-menu{bottom:100%;padding-bottom:var(--bulma-dropdown-content-offset);padding-top:initial;top:auto}.dt-dropdown.is-disabled{cursor:not-allowed;opacity:.5}.dt-dropdown-menu{display:block!important;left:0;min-width:var(--bulma-dropdown-menu-min-width);padding-top:var(--bulma-dropdown-content-offset);position:absolute;top:100%;z-index:var(--bulma-dropdown-content-z)}.dt-dropdown-content{background-color:var(--bulma-dropdown-content-background-color);border-radius:var(--bulma-dropdown-content-radius);box-shadow:var(--bulma-dropdown-content-shadow);padding-bottom:var(--bulma-dropdown-content-padding-bottom);padding-top:var(--bulma-dropdown-content-padding-top);text-align:left}.dt-dropdown-content .dropdown-item{color:hsl(var(--bulma-dropdown-item-h),var(--bulma-dropdown-item-s),var(--bulma-dropdown-item-color-l));display:block;font-size:.875rem;line-height:1.5;padding:.375rem 1rem}.dt-dropdown-content a.dropdown-item,.dt-dropdown-content div.dropdown-item.is-clickable,.dt-dropdown-content span.dropdown-item.is-clickable,.dt-dropdown-content button.dropdown-item{background-color:hsl(var(--bulma-dropdown-item-h),var(--bulma-dropdown-item-s),calc(var(--bulma-dropdown-item-background-l) + var(--bulma-dropdown-item-background-l-delta)));padding-inline-end:3rem;text-align:inherit;white-space:nowrap;width:100%}.dt-dropdown-content a.dropdown-item:hover,.dt-dropdown-content div.dropdown-item.is-clickable:hover,.dt-dropdown-content span.dropdown-item.is-clickable:hover,.dt-dropdown-content button.dropdown-item:hover{--bulma-dropdown-item-background-l-delta: var(--bulma-dropdown-item-hover-background-l-delta);--bulma-dropdown-item-border-l-delta: var(--bulma-dropdown-item-hover-border-l-delta)}.dt-dropdown-content a.dropdown-item:active,.dt-dropdown-content div.dropdown-item.is-clickable:active,.dt-dropdown-content span.dropdown-item.is-clickable:active,.dt-dropdown-content button.dropdown-item:active{--bulma-dropdown-item-background-l-delta: var(--bulma-dropdown-item-active-background-l-delta);--bulma-dropdown-item-border-l-delta: var(--bulma-dropdown-item-active-border-l-delta)}.dt-dropdown-content a.dropdown-item.is-active,.dt-dropdown-content a.dropdown-item.is-selected,.dt-dropdown-content div.dropdown-item.is-clickable.is-active,.dt-dropdown-content div.dropdown-item.is-clickable.is-selected,.dt-dropdown-content span.dropdown-item.is-clickable.is-active,.dt-dropdown-content span.dropdown-item.is-clickable.is-selected,.dt-dropdown-content button.dropdown-item.is-active,.dt-dropdown-content button.dropdown-item.is-selected{--bulma-dropdown-item-h: var(--bulma-dropdown-item-selected-h);--bulma-dropdown-item-s: var(--bulma-dropdown-item-selected-s);--bulma-dropdown-item-l: var(--bulma-dropdown-item-selected-l);--bulma-dropdown-item-background-l: var(--bulma-dropdown-item-selected-background-l);--bulma-dropdown-item-color-l: var(--bulma-dropdown-item-selected-color-l)}.dt-dropdown-content .dropdown-divider{background-color:var(--bulma-dropdown-divider-background-color);border:none;display:block;height:1px;margin:.5rem 0}

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

@@ -134,6 +134,10 @@ type DataTableProps<T extends unknown = unknown> = {
 /**
  * Maak een tabel voor grote hoeveelheden data. De tabel is doorzoekbaar en heeft paginatie. Dat is allemaal uit te zetten.
  * Het sorteren moet per kolom ingesteld worden.
+ * @description
+ * ⚠️ __LET OP__: Als je een dropdown binnen een DataTable gebruikt, gebruik dan altijd `DataTable.Dropdown` in plaats van de gewone `Dropdown` component.
+ * Het gaat alleen fout als je de table-container voor horizontaal scrollen in de tabel gebruikt, maar toch.
+ *
  * @example
  * const naamSort = (a: User, B: User) =>  { a.first_name < b.first_name ? -1 : 1; }
  * const searchFn = (searchTerm: string, data: User[]) => data.filter((u) => u.first_name.includes(searchTerm));
@@ -178,5 +182,25 @@ type DataTableProps<T extends unknown = unknown> = {
  * @returns
  */
 declare function DataTable<T extends unknown = unknown>({ data, columns: cols, defaultSortColNum, compact, noStripes, narrow, bordered, hoverable, sticky, hideSearch, headerContent, footerContent, size, searchPlaceholder, rowIdentifier, onSearch, onRowSelected, onRowRightClick, rowClass, renderWhenNoData, searchInfoMessage, id: tableID, itemRef, paginationOptions: paginationOptionsProp, fillEmptyRows, }: 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;
+        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;
+            onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+            onItemClick?: (isClickable: boolean) => void;
+        } & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+        Link({ children, onItemClick, ...props }: {
+            children: React.ReactNode;
+            onItemClick?: (isClickable: boolean) => void;
+        } & React.AnchorHTMLAttributes<HTMLAnchorElement>): import("react/jsx-runtime").JSX.Element;
+    };
+    var Container: typeof DataTableContainer;
+}
+declare function DataTableContainer({ className: classNameProp, ...props }: {} & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
 export { DataTable };
 export type { DataTableProps, DataTableColumnProp as DataTableColumn };

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import './DataTableDropdown.scss';
+type DataTableDropdownProps = {
+    children?: React.ReactNode;
+    trigger?: string | React.ReactNode | ((open: boolean, disabled?: boolean | undefined) => string | React.ReactNode);
+    disabled?: boolean | undefined;
+    startOpen?: boolean | undefined;
+    onHover?: boolean | undefined;
+    id?: string | undefined;
+    alignment?: 'l' | 'r' | undefined;
+    dropUp?: boolean | undefined;
+    className?: string | undefined;
+    keepOpenAfterClick?: boolean | undefined;
+};
+/**
+ * DataTable.Dropdown - A specialized dropdown component for use within DataTable.
+ * This component always uses a portal to render outside the table-container,
+ * preventing clipping issues caused by overflow properties on the table container.
+ */
+declare const DataTableDropdown: {
+    ({ onHover, id, children: childrenProp, trigger: triggerProp, disabled, alignment, dropUp, startOpen, className: classNameProp, keepOpenAfterClick, }: DataTableDropdownProps): 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;
+        onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+        onItemClick?: (isClickable: boolean) => void;
+    } & React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+    Link({ children, onItemClick, ...props }: {
+        children: React.ReactNode;
+        onItemClick?: (isClickable: boolean) => void;
+    } & React.AnchorHTMLAttributes<HTMLAnchorElement>): import("react/jsx-runtime").JSX.Element;
+};
+export { DataTableDropdown };
+export type { DataTableDropdownProps };

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

@@ -0,0 +1,24 @@
+export declare function DataTableDropdownExample(): import("react/jsx-runtime").JSX.Element;
+/**
+ * Key differences between DataTable.Dropdown and regular Dropdown:
+ *
+ * 1. DataTable.Dropdown has usePortal={true} by default
+ *    - This renders the dropdown menu outside the table-container
+ *    - Prevents clipping issues caused by overflow:auto on table-container
+ *
+ * 2. You can still override usePortal if needed:
+ *    <DataTable.Dropdown usePortal={false} ... />
+ *
+ * 3. All sub-components work the same way:
+ *    - DataTable.Dropdown.Trigger
+ *    - DataTable.Dropdown.Item
+ *    - DataTable.Dropdown.Link
+ *    - DataTable.Dropdown.Divider
+ *
+ * 4. All props from regular Dropdown are supported:
+ *    - trigger
+ *    - alignment
+ *    - dropUp
+ *    - keepOpenAfterClick
+ *    - etc.
+ */

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

@@ -12,6 +12,14 @@ type DropDownProps = {
     keepOpenAfterClick?: boolean | undefined;
     usePortal?: boolean | undefined;
 };
+/**
+ * Dropdown component for creating dropdown menus.
+ * @description
+ * ⚠️ __LET OP__: Als je een dropdown binnen een DataTable gebruikt, gebruik dan altijd `DataTable.Dropdown` in plaats van deze `Dropdown` component.
+ * Het gaat alleen fout als je de table-container voor horizontaal scrollen in de tabel gebruikt, maar toch.
+ *
+ * @see DataTable.Dropdown for table-specific dropdown usage
+ */
 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 }: {