@db-ux/react-core-components 4.11.0 → 4.11.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @db-ux/react-core-components
 
+## 4.11.1
+
+### Patch Changes
+
+- fix: remove `readonly` attribute on `DBInput` and `DBTextarea` when `readOnly`/`readonly` is `false` - [see commit 312ad4c](https://github.com/db-ux-design-system/core-web/commit/312ad4c7582b7315042b23a7cc8b485889ba6fd8):
+
+    - Passing `readOnly={false}` (e.g. via Angular's `formField` directive) previously rendered `readonly="false"` into the DOM. Since `readonly` is a boolean HTML attribute, its mere presence made the field read-only. The binding now resolves to `undefined` when not read-only, so the attribute is omitted entirely.
+
+- fix(tooltip): clean up parent listeners and observers on unmount - [see commit b050660](https://github.com/db-ux-design-system/core-web/commit/b050660b3b8cc9f0fde2a9d96dfbd6c0f02cc24f)
+
 ## 4.11.0
 
 ### Minor Changes

package/dist/components/input/input.js

@@ -138,7 +138,7 @@ function E(y, E) {
 				minLength: c(y.minLength, y.minlength),
 				max: s(y.max, y.type),
 				min: s(y.min, y.type),
-				readOnly: i(y.readOnly, "readOnly") || i(y.readonly, "readonly"),
+				readOnly: i(y.readOnly, "readOnly") || i(y.readonly, "readonly") || void 0,
 				form: y.form,
 				pattern: y.pattern,
 				size: y.size,

package/dist/components/textarea/textarea.js

@@ -118,7 +118,7 @@ function x(m, x) {
 				"data-hide-resizer": a(m.showResizer ?? !0),
 				disabled: i(m.disabled, "disabled"),
 				required: i(m.required, "required"),
-				readOnly: i(m.readOnly, "readOnly") || i(m.readonly, "readonly"),
+				readOnly: i(m.readOnly, "readOnly") || i(m.readonly, "readonly") || void 0,
 				form: m.form,
 				maxLength: o(m.maxLength, m.maxlength),
 				minLength: o(m.minLength, m.minlength),

package/dist/components/tooltip/model.d.ts

@@ -16,5 +16,14 @@ export type DBTooltipDefaultProps = {
 export type DBTooltipProps = DBTooltipDefaultProps & GlobalProps & EmphasisProps & PlacementProps & PopoverProps & WrapProps & TextProps;
 export type DBTooltipDefaultState = {
     getParent: () => HTMLElement;
+    _attachedParent?: HTMLElement;
+    _attachedId?: string;
+    _activeTriggerCount?: number;
+    _boundListeners?: {
+        parent: HTMLElement;
+        type: string;
+        fn: (event: any) => void;
+    }[];
+    _detachListeners: () => void;
 };
 export type DBTooltipState = DBTooltipDefaultState & GlobalState & ClickEventState<HTMLElement> & PopoverState & InitializedState & DocumentScrollState & ResetIdState;

package/dist/components/tooltip/tooltip.js

@@ -8,55 +8,96 @@ import { forwardRef as c, useEffect as l, useId as u, useRef as d, useState as f
 import { Fragment as p, jsx as m, jsxs as h } from "react/jsx-runtime";
 //#region src/components/tooltip/tooltip.tsx
 function g(c, g) {
-	let _ = u(), v = g || d(g), [y, b] = f(() => a), [x, S] = f(() => !1), [C, w] = f(() => void 0), [T, E] = f(() => void 0);
-	function D(e) {
+	let _ = u(), v = g || d(g), [y, b] = f(() => a), [x, S] = f(() => !1), [C, w] = f(() => void 0), [T, E] = f(() => void 0), [D, O] = f(() => void 0), [k, A] = f(() => void 0), [j, M] = f(() => 0), [N, P] = f(() => []);
+	function F(e) {
 		e.stopPropagation();
 	}
-	function O(e) {
-		(!e || e.key === "Escape") && v.current && getComputedStyle(v.current).visibility === "visible" && k().blur();
+	function I(e) {
+		(!e || e.key === "Escape") && v.current && getComputedStyle(v.current).visibility === "visible" && L().blur();
 	}
-	function k() {
+	function L() {
 		let e = v.current.parentElement;
 		return e && e.localName.includes("tooltip") && (e = e.parentElement), e;
 	}
-	function A(e) {
+	function R(e) {
 		e && v.current && r(() => {
 			v.current && s(v.current, e, c.placement ?? "bottom");
 		}, 1);
 	}
-	function j(e, t) {
-		e?.target?.contains && e?.target?.contains(v.current) && A(t);
+	function z(e, t) {
+		e?.target?.contains && e?.target?.contains(v.current) && R(t);
 	}
-	function M() {
-		C && new o().removeCallback(C), T?.unobserve(k());
+	function B() {
+		M(Math.max((j ?? 0) - 1, 0)), !((j ?? 0) > 0) && (C && (new o().removeCallback(C), w(void 0)), T?.unobserve(L()));
 	}
-	function N(e) {
-		w(new o().addCallback((t) => j(t, e))), A(e), T?.observe(k());
+	function V(e) {
+		M((j ?? 0) + 1), j === 1 && (w(new o().addCallback((t) => z(t, e))), T?.observe(L())), R(e);
 	}
-	function P() {
+	function H() {
 		b(c.id ?? c.propOverrides?.id ?? "tooltip-" + _);
 	}
+	function U() {
+		let e = C;
+		e && (new o().removeCallback(e), w(void 0)), T?.disconnect(), E(void 0), M(0), (N ?? []).forEach((e) => {
+			e.parent.removeEventListener(e.type, e.fn);
+		}), P([]);
+		let t = D;
+		if (t) {
+			let e = k ?? y, n = t.querySelectorAll(".db-tooltip"), r = Array.from(n).some((e) => e !== v.current);
+			t.dataset.hasTooltip === "true" && !r && delete t.dataset.hasTooltip, t.getAttribute("aria-labelledby") === e && t.removeAttribute("aria-labelledby"), t.getAttribute("aria-describedby") === e && t.removeAttribute("aria-describedby"), O(void 0), A(void 0);
+		}
+	}
 	return l(() => {
-		P(), S(!0);
+		H(), S(!0);
 	}, []), l(() => {
-		(c.id ?? c.propOverrides?.id) && P();
+		(c.id ?? c.propOverrides?.id) && H();
 	}, [c.id, c.propOverrides?.id]), l(() => {
 		if (v.current && x && y) {
-			let e = k();
-			e && (A(e), ["mouseenter", "focusin"].forEach((t) => {
-				e.addEventListener(t, () => N(e));
-			}), e.addEventListener("keydown", (e) => O(e)), ["mouseleave", "focusout"].forEach((t) => {
-				e.addEventListener(t, () => M());
-			}), e.dataset.hasTooltip = "true", c.variant === "label" ? e.setAttribute("aria-labelledby", y) : e.setAttribute("aria-describedby", y)), typeof window < "u" && "IntersectionObserver" in window && E(new IntersectionObserver((e) => {
-				let t = e.find(({ target: e }) => e === k());
-				t && !t.isIntersecting && O(!1);
+			let e = L();
+			if (e) {
+				R(e);
+				let t = () => V(e), n = () => B(), r = (e) => I(e);
+				e.addEventListener("mouseenter", t), e.addEventListener("focusin", t), e.addEventListener("keydown", r), e.addEventListener("mouseleave", n), e.addEventListener("focusout", n), P([
+					...N ?? [],
+					{
+						parent: e,
+						type: "mouseenter",
+						fn: t
+					},
+					{
+						parent: e,
+						type: "focusin",
+						fn: t
+					},
+					{
+						parent: e,
+						type: "keydown",
+						fn: r
+					},
+					{
+						parent: e,
+						type: "mouseleave",
+						fn: n
+					},
+					{
+						parent: e,
+						type: "focusout",
+						fn: n
+					}
+				]), e.dataset.hasTooltip = "true", c.variant === "label" ? e.setAttribute("aria-labelledby", y) : e.setAttribute("aria-describedby", y), O(e), A(y);
+			}
+			typeof window < "u" && "IntersectionObserver" in window && E(new IntersectionObserver((e) => {
+				let t = e.find(({ target: e }) => e === L());
+				t && !t.isIntersecting && I(!1);
 			})), S(!1);
 		}
 	}, [
 		v.current,
 		x,
 		y
-	]), /* @__PURE__ */ h("i", {
+	]), l(() => () => {
+		U();
+	}, []), /* @__PURE__ */ h("i", {
 		role: "tooltip",
 		"aria-hidden": "true",
 		"data-gap": "true",
@@ -112,7 +153,7 @@ function g(c, g) {
 		"data-width": c.width,
 		"data-show-arrow": i(c.showArrow ?? !0, "showArrow"),
 		"data-placement": c.placement,
-		onClick: (e) => D(e),
+		onClick: (e) => F(e),
 		children: [c.text ? /* @__PURE__ */ m(p, { children: c.text }) : null, c.children]
 	});
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@db-ux/react-core-components",
-  "version": "4.11.0",
+  "version": "4.11.1",
   "type": "module",
   "description": "React components for @db-ux/core-components",
   "repository": {
@@ -17,15 +17,15 @@
     "dist/"
   ],
   "dependencies": {
-    "@db-ux/core-components": "4.11.0",
-    "@db-ux/core-foundations": "4.11.0"
+    "@db-ux/core-components": "4.11.1",
+    "@db-ux/core-foundations": "4.11.1"
   },
   "devDependencies": {
     "@playwright/experimental-ct-react": "1.60.0",
     "@types/react": "19.2.17",
     "@vitejs/plugin-react": "6.0.2",
     "cpr": "3.0.1",
-    "npm-run-all2": "9.0.1",
+    "npm-run-all2": "9.0.2",
     "playwright": "1.60.0",
     "react": "19.2.7",
     "react-dom": "19.2.7",