loon-bulma-react 2026.0.43 → 2026.0.44

package/dist/index.js

@@ -13705,13 +13705,13 @@ function v_({ className: e = "", children: n, onScroll: r, iconScrollLeft: i = h
 		},
 		...l,
 		children: [
-			/* @__PURE__ */ b("button", {
+			f.visible && /* @__PURE__ */ b("button", {
 				type: "button",
 				className: "h-scroll is-left-scroll",
 				onClick: () => h("left"),
 				"aria-label": o,
 				title: o,
-				disabled: !f.visible || !f.canScrollLeft,
+				disabled: !f.canScrollLeft,
 				style: {
 					top: `${f.top}px`,
 					left: `${f.left - 20}px`
@@ -13719,13 +13719,13 @@ function v_({ className: e = "", children: n, onScroll: r, iconScrollLeft: i = h
 				children: /* @__PURE__ */ b(Eo, { icon: i })
 			}),
 			n,
-			/* @__PURE__ */ b("button", {
+			f.visible && /* @__PURE__ */ b("button", {
 				type: "button",
 				className: "h-scroll is-right-scroll",
 				onClick: () => h("right"),
 				"aria-label": s,
 				title: s,
-				disabled: !f.visible || !f.canScrollRight,
+				disabled: !f.canScrollRight,
 				style: {
 					top: `${f.top}px`,
 					left: `${f.right + 20}px`
@@ -16713,22 +16713,22 @@ var Ly = 200, Ry = Object.freeze({
 	ESCAPE_KEY: 27
 });
 function zy({ value: e, options: n, id: r, name: i, label: a, required: o = !1, showRequiredOnLabel: s = !1, errorMessage: c = "", infoMessage: l = "", alignment: u, size: d, direction: f, placeholder: p, helpTag: m, disabled: h = !1, loading: g = !1, autofocus: _ = !1, iconRight: v = "visible", labelHidden: S = !1, icon: C = Wo, infoData: w, className: T, color: E, onValueChanged: D, onChange: O, onFocus: k, onBlur: A, onKeyDown: j, onKeyUp: M, onSearch: N = (e, t) => e.toLowerCase().indexOf(JSON.stringify(t).toLowerCase()) !== -1, formatLabel: P = (e) => typeof e == "string" || typeof e == "number" || typeof e == "boolean" ? `${e}` : JSON.stringify(e), formatValue: F = (e) => /* @__PURE__ */ b(y, { children: typeof e == "string" || typeof e == "number" || typeof e == "boolean" ? `${e}` : JSON.stringify(e) }), formatOption: I = (e, t) => /* @__PURE__ */ b(y, { children: typeof e == "string" || typeof e == "number" || typeof e == "boolean" ? `${e}` : JSON.stringify(e) }) }) {
-	let [L, R] = t.useState(we(n)), [ee, z] = t.useState(P(e)), [B, V] = t.useReducer(Vy, By), [te, ne] = t.useState(!1), [H, re] = t.useState(!1), [U, ie] = t.useState(-1), [ae, oe] = t.useState(!1), [se, ce] = t.useState(!1), { defaults: le } = t.useContext(lh), { scheme: ue } = Ne(), de = d ?? le.input.size, fe = f ?? le.input.direction, pe = u ?? le.input.alignment, me = typeof c == "string" ? c : c({
+	let [L, R] = t.useState(Ce(n)), [ee, z] = t.useState(P(e)), [B, V] = t.useReducer(Vy, By), [te, ne] = t.useState(!1), [H, re] = t.useState(!1), [U, ie] = t.useState(-1), [ae, oe] = t.useState(!1), [se, ce] = t.useState(!1), { defaults: le } = t.useContext(lh), ue = d ?? le.input.size, de = f ?? le.input.direction, fe = u ?? le.input.alignment, pe = typeof c == "string" ? c : c({
 		value: ee,
 		touched: ae,
 		focused: B.focused,
 		required: o,
 		disabled: h,
 		readonly: !1
-	}), he = typeof l == "string" ? l : l(ee), ge = t.useRef(null), _e = t.useRef(null);
-	Iy(B.focusIndex, ge, _e);
-	let ve = "input is-fullwidth";
-	ve += $d(de), ve += Zd(pe), T && (ve += ` ${T}`), g && (ve += " is-loading"), E ? ve += Kd(E, !1) : me.length > 0 && (ve += " is-danger");
-	let ye = "output input";
-	ye += $d(de), ye += Zd(pe), h && (ye += " is-disabled"), E ? ye += Kd(E, !1) : me.length > 0 && (ye += " is-danger");
-	let [be, xe, Se] = Jd({
+	}), me = typeof l == "string" ? l : l(ee), he = t.useRef(null), ge = t.useRef(null);
+	Iy(B.focusIndex, he, ge);
+	let _e = "input is-fullwidth";
+	_e += $d(ue), _e += Zd(fe), T && (_e += ` ${T}`), g && (_e += " is-loading"), E ? _e += Kd(E, !1) : pe.length > 0 && (_e += " is-danger");
+	let ve = "output input";
+	ve += $d(ue), ve += Zd(fe), h && (ve += " is-disabled"), E ? ve += Kd(E, !1) : pe.length > 0 && (ve += " is-danger");
+	let [ye, be, xe] = Jd({
 		icon: C,
-		error: me,
+		error: pe,
 		showInfo: ph(B.focused, se),
 		inputId: r ?? i,
 		infoData: w,
@@ -16742,7 +16742,7 @@ function zy({ value: e, options: n, id: r, name: i, label: a, required: o = !1,
 		type: "select"
 	});
 	t.useEffect(() => {
-		R(we(n));
+		R(Ce(n));
 	}, [n]), t.useEffect(() => {
 		B.focused || z(P(e));
 		let t = e ? L.findIndex((t) => t.key === P(e)) : -1;
@@ -16751,10 +16751,10 @@ function zy({ value: e, options: n, id: r, name: i, label: a, required: o = !1,
 			focusIndex: t
 		}), ie(t);
 	}, [e]), t.useEffect(() => {
-		let e = ge.current?.offsetParent?.getBoundingClientRect(), t = window.innerHeight - (e?.top ?? 0);
+		let e = he.current?.offsetParent?.getBoundingClientRect(), t = window.innerHeight - (e?.top ?? 0);
 		re(Ly > t && (e?.top ?? 0) > t);
 	}, [B.focused]);
-	let Ce = t.useMemo(() => ({
+	let Se = t.useMemo(() => ({
 		position: "absolute",
 		width: "100%",
 		opacity: +!!B.focused,
@@ -16767,13 +16767,14 @@ function zy({ value: e, options: n, id: r, name: i, label: a, required: o = !1,
 		marginBottom: H ? "5px" : void 0,
 		marginTop: H ? void 0 : "5px"
 	}), [H, B]);
-	function we(e) {
+	function Ce(e) {
 		return e.map((e, t) => ({
 			key: P(e),
-			value: I(e, t)
+			value: I(e, t),
+			disabled: !1
 		}));
 	}
-	function Te(t) {
+	function we(t) {
 		z(P(e)), w && !te ? setTimeout(() => {
 			let e = document.getElementById(r ?? i);
 			document.activeElement !== e && (V({
@@ -16785,13 +16786,13 @@ function zy({ value: e, options: n, id: r, name: i, label: a, required: o = !1,
 			isFocused: !1
 		}));
 	}
-	function Ee(e) {
+	function Te(e) {
 		ae || oe(!0), k && k(e, m), V({
 			type: "toggleFocus",
 			isFocused: !0
 		});
 	}
-	function De() {
+	function Ee() {
 		n.forEach((e, t) => {
 			let r = P(e);
 			r === L[B.focusIndex]?.key && (V({
@@ -16800,14 +16801,14 @@ function zy({ value: e, options: n, id: r, name: i, label: a, required: o = !1,
 			}), ie(t), z(r), D && n[t] && D(n[t]));
 		});
 	}
-	function Oe() {
+	function De() {
 		V({
 			type: "toggleFocus",
 			isFocused: !1
-		}), R(L), De();
+		}), R(L), Ee();
 	}
-	function ke(e) {
-		let t = ge.current, r = B.focusIndex;
+	function Oe(e) {
+		let t = he.current, r = B.focusIndex;
 		switch (e.keyCode) {
 			case Ry.DOWN_ARROW:
 				e.preventDefault(), B.focused ? B.focusIndex >= n.length - 1 ? (r = 0, t.scrollTop = 0) : r = B.focusIndex + 1 : V({
@@ -16816,7 +16817,7 @@ function zy({ value: e, options: n, id: r, name: i, label: a, required: o = !1,
 				}), V({
 					type: "setFocusIndex",
 					focusIndex: r
-				}), ge.current = t;
+				}), he.current = t;
 				break;
 			case Ry.UP_ARROW:
 				e.preventDefault(), B.focused ? B.focusIndex <= 0 ? (r = n.length - 1, t && (t.scrollTop = t.scrollHeight)) : r = B.focusIndex - 1 : V({
@@ -16825,10 +16826,10 @@ function zy({ value: e, options: n, id: r, name: i, label: a, required: o = !1,
 				}), V({
 					type: "setFocusIndex",
 					focusIndex: r
-				}), ge.current = t;
+				}), he.current = t;
 				break;
 			case Ry.ENTER_KEY:
-				e.preventDefault(), B.focusIndex > -1 && B.focusIndex < n.length && Oe();
+				e.preventDefault(), B.focusIndex > -1 && B.focusIndex < n.length && De();
 				break;
 			case Ry.ESCAPE_KEY:
 				e.target.blur(), V({
@@ -16839,13 +16840,13 @@ function zy({ value: e, options: n, id: r, name: i, label: a, required: o = !1,
 		}
 		j && j(e);
 	}
-	function Ae(e) {
-		e.length === 0 ? R(we(n)) : R(we(n.filter((t) => N(e, t))));
+	function ke(e) {
+		e.length === 0 ? R(Ce(n)) : R(Ce(n.filter((t) => N(e, t))));
 	}
-	function je(e) {
-		ae || oe(!0), O && O(e), z(e.target.value), Ae(e.target.value);
+	function Ae(e) {
+		ae || oe(!0), O && O(e), z(e.target.value), ke(e.target.value);
 	}
-	function Me() {
+	function je() {
 		V({
 			type: "toggleFocus",
 			isFocused: !0
@@ -16854,7 +16855,7 @@ function zy({ value: e, options: n, id: r, name: i, label: a, required: o = !1,
 			focusIndex: L.findIndex((e) => e.key === ee.toString())
 		});
 	}
-	function Pe(e) {
+	function Me(e) {
 		V({
 			type: "setFocusIndex",
 			focusIndex: e
@@ -16863,11 +16864,11 @@ function zy({ value: e, options: n, id: r, name: i, label: a, required: o = !1,
 	return /* @__PURE__ */ x(Sh, {
 		inputId: r ?? i,
 		label: a ?? i ?? r,
-		direction: fe,
+		direction: de,
 		required: o,
-		size: de,
+		size: ue,
 		labelHidden: S,
-		controlClassName: be,
+		controlClassName: ye,
 		showRequiredOnLabel: s,
 		setHovered: ce,
 		children: [
@@ -16877,20 +16878,20 @@ function zy({ value: e, options: n, id: r, name: i, label: a, required: o = !1,
 					role: "combobox",
 					placeholder: p,
 					value: ee,
-					className: ve,
+					className: _e,
 					name: i,
 					id: r ?? i,
 					disabled: h,
 					autoFocus: _,
-					onChange: je,
-					onClick: Me,
+					onChange: Ae,
+					onClick: je,
 					onKeyUp: M,
-					onKeyDown: ke,
-					onFocus: Ee,
-					onBlur: Te
+					onKeyDown: Oe,
+					onFocus: Te,
+					onBlur: we
 				}),
 				!B.focused && /* @__PURE__ */ b("output", {
-					className: ye,
+					className: ve,
 					onClick: () => {
 						document.getElementById(r ?? i)?.focus();
 					},
@@ -16898,35 +16899,35 @@ function zy({ value: e, options: n, id: r, name: i, label: a, required: o = !1,
 				}),
 				/* @__PURE__ */ b("div", {
 					className: "bulma-box",
-					style: Ce,
-					ref: ge,
+					style: Se,
+					ref: he,
 					onMouseEnter: () => ne(!0),
 					onMouseLeave: () => ne(!1),
 					children: /* @__PURE__ */ b("ul", {
-						ref: _e,
+						ref: ge,
 						className: "combobox-list",
 						children: L.map((e, t) => {
 							let n = "combobox-listitem";
-							return t === U && (n += " is-selected"), /* @__PURE__ */ b("li", {
+							return t === U && (n += " is-selected"), e.disabled && (n += " is-disabled"), /* @__PURE__ */ b("li", {
 								className: n,
-								onClick: () => Oe(),
+								onClick: () => De(),
 								onMouseDown: (e) => e.preventDefault(),
-								onMouseEnter: () => Pe(t),
+								onMouseEnter: () => Me(t),
 								children: e.value
 							}, e.key);
 						})
 					})
 				}),
-				xe,
-				Se
+				be,
+				xe
 			] }),
-			me.length > 0 && /* @__PURE__ */ b("p", {
+			pe.length > 0 && /* @__PURE__ */ b("p", {
 				className: "help is-danger",
-				children: me
+				children: pe
 			}),
-			he.length > 0 && /* @__PURE__ */ b("p", {
+			me.length > 0 && /* @__PURE__ */ b("p", {
 				className: "help is-info",
-				children: he
+				children: me
 			})
 		]
 	});

package/dist/styles/extra-inputs.scss

@@ -5,26 +5,67 @@
 @use 'bulma/sass/utilities/mixins' as mx;
 @use 'bulma/sass/form/shared' as frm;
 
+$cmb-item-h: cv.getVar('scheme-h');
+$cmb-item-s: cv.getVar('scheme-s');
+$cmb-item-l: cv.getVar('scheme-main-l');
+$cmb-item-background-l: cv.getVar('scheme-main-l');
+$cmb-item-background-l-delta: 0%;
+$cmb-item-hover-background-l-delta: cv.getVar('hover-background-l-delta');
+$cmb-item-active-background-l-delta: cv.getVar('active-background-l-delta');
+$cmb-item-color-l: cv.getVar('text-l');
+$cmb-item-radius: cv.getVar('radius-small') !default;
+$cmb-item-selected-h: cv.getVar('link-h');
+$cmb-item-selected-s: cv.getVar('link-s');
+$cmb-item-selected-l: cv.getVar('link-l');
+$cmb-item-selected-background-l: cv.getVar('link-l');
+$cmb-item-selected-color-l: cv.getVar('link-invert-l');
+
 ul.combobox-list,
 ol.combobox-list {
   list-style-type: none;
 
+  @include cv.register-vars(
+    (
+      'cmb-item-h': #{$cmb-item-h},
+      'cmb-item-s': #{$cmb-item-s},
+      'cmb-item-l': #{$cmb-item-l},
+      'cmb-item-background-l': #{$cmb-item-background-l},
+      'cmb-item-background-l-delta': #{$cmb-item-background-l-delta},
+      'cmb-item-hover-background-l-delta': #{$cmb-item-hover-background-l-delta},
+      'cmb-item-active-background-l-delta': #{$cmb-item-active-background-l-delta},
+      'cmb-item-color-l': #{$cmb-item-color-l},
+      'cmb-item-radius': #{$cmb-item-radius},
+      'cmb-item-selected-h': #{$cmb-item-selected-h},
+      'cmb-item-selected-s': #{$cmb-item-selected-s},
+      'cmb-item-selected-l': #{$cmb-item-selected-l},
+      'cmb-item-selected-background-l': #{$cmb-item-selected-background-l},
+      'cmb-item-selected-color-l': #{$cmb-item-selected-color-l},
+    )
+  );
+
   .combobox-listitem {
     padding: 3px 5px;
+    background-color: hsl(#{cv.getVar('cmb-item-h')}, #{cv.getVar('cmb-item-s')}, calc(#{cv.getVar('cmb-item-background-l')} + #{cv.getVar('cmb-item-background-l-delta')}));
+    color: hsl(#{cv.getVar('cmb-item-h')}, #{cv.getVar('cmb-item-s')}, #{cv.getVar('cmb-item-color-l')});
 
     &:hover {
-      background-color: dv.$info;
-      color: white;
+      @include cv.register-vars(
+        (
+          'cmb-item-background-l-delta': #{cv.getVar('cmb-item-hover-background-l-delta')},
+        )
+      );
     }
 
     &.is-selected {
-      background-color: dv.$info;
-      color: white;
-      font-weight: bolder;
-      &:hover {
-        background-color: dv.$info;
-        color: white;
-      }
+      @include cv.register-vars(
+        (
+          'cmb-item-h': #{cv.getVar('cmb-item-selected-h')},
+          'cmb-item-s': #{cv.getVar('cmb-item-selected-s')},
+          'cmb-item-l': #{cv.getVar('cmb-item-selected-l')},
+          'cmb-item-background-l': #{cv.getVar('cmb-item-selected-background-l')},
+          'cmb-item-color-l': #{cv.getVar('cmb-item-selected-color-l')},
+        )
+      );
     }
   }
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "loon-bulma-react",
   "private": false,
-  "version": "2026.0.43",
+  "version": "2026.0.44",
   "description": "Bulma & React componenten voor Loon Salarissoftware",
   "type": "module",
   "license": "MIT",
@@ -92,7 +92,7 @@
     "eslint-plugin-standard": "^5.0.0",
     "eslint-plugin-testing-library": "^7.16.0",
     "globals": "^17.6.0",
-    "happy-dom": "^20.9.0",
+    "happy-dom": "^20.10.1",
     "prettier": "^3.8.3",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",