loon-bulma-react 2026.0.44 → 2026.0.46

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

@@ -26,13 +26,13 @@ declare const Dropdown: {
         children: React.ReactNode;
     }): React.JSX.Element;
     Divider(): React.JSX.Element;
-    Item({ children, onClick, onItemClick, disabled, ...props }: {
+    Item({ children, onClick, onItemClick, disabled, className, ...props }: {
         children: React.ReactNode;
         onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
         onItemClick?: (isClickable: boolean) => void;
         disabled?: boolean;
     } & React.HTMLAttributes<HTMLDivElement>): React.JSX.Element;
-    Link({ children, onItemClick, disabled, ...props }: {
+    Link({ children, onItemClick, disabled, className, ...props }: {
         children: React.ReactNode;
         onItemClick?: (isClickable: boolean) => void;
         disabled?: boolean;

package/dist/index.js

@@ -13592,19 +13592,19 @@ function g_({ children: e = void 0, searchValue: t, filterCount: n, dataCount: r
 				if (e.hidden) return null;
 				let n = e.sort !== void 0, r = Math.abs(s) - 1 === t, i;
 				i = e.header || e.header === "" ? e.header : typeof e.value == "string" ? e.value : e.value.toString();
-				let a = Zd(e.alignment ?? "l"), o = ss;
+				let a = `${Zd(e.alignment ?? "l")} mx-0 px-1`, o = ss;
 				return r && s > 0 ? o = Lo : r && s < 0 && (o = Ns), /* @__PURE__ */ x("th", {
 					role: "sort-col",
 					style: { cursor: n ? "pointer" : void 0 },
 					className: a,
 					onClick: (e) => g(e, t),
 					children: [n && /* @__PURE__ */ x("span", {
-						className: "icon-text",
+						className: "icon-text mx-0 px-0",
 						role: "icon-with-text",
 						style: { flexWrap: "nowrap" },
 						children: [/* @__PURE__ */ b(t_, {
 							icon: o,
-							className: "is-hidden-mobile"
+							className: "is-hidden-mobile mx-0 px-0"
 						}), /* @__PURE__ */ b("span", { children: i })]
 					}), !n && /* @__PURE__ */ b("span", { children: i })]
 				}, t);
@@ -14032,21 +14032,21 @@ var T_ = ({ onHover: e = !1, id: n, children: r, trigger: i, disabled: a = !1, a
 		}), d && f ? C(D, document.body) : D]
 	});
 };
-T_.Trigger = ({ children: e }) => /* @__PURE__ */ b(y, { children: e }), T_.Divider = () => /* @__PURE__ */ b("hr", { className: "dropdown-divider" }), T_.Item = ({ children: e, onClick: t, onItemClick: n, disabled: r = !1, ...i }) => /* @__PURE__ */ b("div", {
-	className: `dropdown-item ${t ? "is-clickable" : ""} ${r ? "is-disabled" : ""}`,
+T_.Trigger = ({ children: e }) => /* @__PURE__ */ b(y, { children: e }), T_.Divider = () => /* @__PURE__ */ b("hr", { className: "dropdown-divider" }), T_.Item = ({ children: e, onClick: t, onItemClick: n, disabled: r = !1, className: i = "", ...a }) => /* @__PURE__ */ b("div", {
+	className: `dropdown-item ${t ? "is-clickable" : ""} ${r ? "is-disabled" : ""} ${i}`,
 	onClick: (e) => {
 		e.stopPropagation(), t?.(e), n?.(!!t);
 	},
-	...i,
+	...a,
 	children: e
-}), T_.Link = ({ children: e, onItemClick: t, disabled: n = !1, ...r }) => {
-	let i = (e) => {
-		e.stopPropagation(), r.onClick?.(e), t?.(!0);
+}), T_.Link = ({ children: e, onItemClick: t, disabled: n = !1, className: r = "", ...i }) => {
+	let a = (e) => {
+		e.stopPropagation(), i.onClick?.(e), t?.(!0);
 	};
 	return /* @__PURE__ */ b("a", {
-		className: `dropdown-item ${n ? "is-disabled" : ""}`,
-		...r,
-		onClick: i,
+		className: `dropdown-item ${n ? "is-disabled" : ""} ${r}`,
+		...i,
+		onClick: a,
 		children: e
 	});
 };

package/dist/styles/_all.scss

@@ -85,10 +85,10 @@ $table-striped-row-even-hover-background-color: #f0f0f0 !default;
 // @forward 'bulma/sass/elements/box.scss'; // renamed naar bulma-box, wordt vaak al gebruikt door andere libs
 @forward 'bulma-box.scss';
 @forward 'bulma/sass/elements/block.scss';
-//@forward 'bulma/sass/elements/button.scss';
-@forward 'button.scss';
+
+@forward 'button.scss'; // @forward 'bulma/sass/elements/button.scss';
 @forward 'bulma/sass/elements/content.scss';
-@forward 'bulma/sass/elements/icon.scss';
+@forward 'icon.scss'; // @forward 'bulma/sass/elements/icon.scss';
 @forward 'bulma/sass/elements/image.scss';
 @forward 'bulma/sass/elements/notification.scss';
 @forward 'bulma/sass/elements/progress.scss';

package/dist/styles/icon.scss

@@ -0,0 +1,72 @@
+@use 'bulma/sass/utilities/css-variables' as cv;
+@use 'bulma/sass/utilities/initial-variables' as iv;
+
+$icon-dimensions: 1.5rem !default;
+$icon-dimensions-small: 1rem !default;
+$icon-dimensions-medium: 2rem !default;
+$icon-dimensions-large: 3rem !default;
+$icon-text-spacing: 0.25em !default;
+
+.#{iv.$class-prefix}icon,
+.#{iv.$class-prefix}icon-text {
+  @include cv.register-vars(
+    (
+      'icon-dimensions': #{$icon-dimensions},
+      'icon-dimensions-small': #{$icon-dimensions-small},
+      'icon-dimensions-medium': #{$icon-dimensions-medium},
+      'icon-dimensions-large': #{$icon-dimensions-large},
+      'icon-text-spacing': #{$icon-text-spacing},
+    )
+  );
+}
+
+.#{iv.$class-prefix}icon {
+  align-items: center;
+  display: inline-flex;
+  flex-shrink: 0;
+  justify-content: center;
+  height: cv.getVar('icon-dimensions');
+  transition-duration: cv.getVar('duration');
+  transition-property: color;
+  width: cv.getVar('icon-dimensions');
+
+  // Sizes
+  &.#{iv.$class-prefix}is-small {
+    height: cv.getVar('icon-dimensions-small');
+    width: cv.getVar('icon-dimensions-small');
+  }
+
+  &.#{iv.$class-prefix}is-medium {
+    height: cv.getVar('icon-dimensions-medium');
+    width: cv.getVar('icon-dimensions-medium');
+  }
+
+  &.#{iv.$class-prefix}is-large {
+    height: cv.getVar('icon-dimensions-large');
+    width: cv.getVar('icon-dimensions-large');
+  }
+}
+
+td .#{iv.$class-prefix}icon &:first-child,
+td .#{iv.$class-prefix}icon-text &:first-child {
+  margin-left: -0.5em;
+}
+
+.#{iv.$class-prefix}icon-text {
+  align-items: flex-start;
+  color: inherit;
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: cv.getVar('icon-text-spacing');
+  line-height: cv.getVar('icon-dimensions');
+  vertical-align: top;
+
+  .#{iv.$class-prefix}icon {
+    flex-grow: 0;
+    flex-shrink: 0;
+  }
+}
+
+div.#{iv.$class-prefix}icon-text {
+  display: flex;
+}

package/dist/styles/table.scss

@@ -158,6 +158,11 @@ $table-colors: dv.$colors !default;
       border-width: cv.getVar('table-head-cell-border-width');
       color: cv.getVar('table-head-cell-color');
     }
+
+    // header moet op 1 regel blijven!
+    th span {
+      text-wrap: nowrap;
+    }
   }
 
   tfoot {

package/dist/utils/IBAN.functions.d.ts

@@ -51,7 +51,7 @@ export type DutchBankCode = {
  * @example
  * cleanIBAN('NL91 ABNA 0417 1643 00'); // 'NL91ABNA0417164300'
  * cleanIBAN('NL91-ABNA-0417-1643-00'); // 'NL91ABNA0417164300'
- * cleanIBAN('nl91abna0417164300'); // 'NL91ABNA0417164300'
+ * cleanIBAN('nl91abna0417164300');     // 'NL91ABNA0417164300'
  */
 export declare function cleanIBAN(iban: string | null | undefined): string;
 /**

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "loon-bulma-react",
   "private": false,
-  "version": "2026.0.44",
+  "version": "2026.0.46",
   "description": "Bulma & React componenten voor Loon Salarissoftware",
   "type": "module",
   "license": "MIT",
@@ -71,8 +71,8 @@
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
-    "@types/node": "^25.9.1",
-    "@types/react": "^19.2.16",
+    "@types/node": "^25.9.2",
+    "@types/react": "^19.2.17",
     "@types/react-dom": "^19.2.3",
     "@types/react-is": "^19.2.0",
     "@types/react-syntax-highlighter": "^15.5.13",
@@ -92,14 +92,14 @@
     "eslint-plugin-standard": "^5.0.0",
     "eslint-plugin-testing-library": "^7.16.0",
     "globals": "^17.6.0",
-    "happy-dom": "^20.10.1",
+    "happy-dom": "^20.10.2",
     "prettier": "^3.8.3",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "rollup-plugin-copy": "^3.5.0",
     "sass": "^1.100.0",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.60.1",
+    "typescript-eslint": "^8.61.0",
     "vite": "^8.0.16",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vite-tsconfig-paths": "^6.1.1",