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

package/dist/components/textarea/textarea.js

@@ -1,167 +1,141 @@
 "use client";
-import { filterPassingProps as e, getRootProps as t } from "../../utils/react.js";
-import { cls as n, delay as r, getBoolean as i, getHideProp as a, getNumber as o, hasVoiceOver as s, stringPropVisible as c } from "../../utils/index.js";
-import { DEFAULT_INVALID_MESSAGE_ID_SUFFIX as l, DEFAULT_MESSAGE_ID_SUFFIX as u, DEFAULT_VALID_MESSAGE_ID_SUFFIX as d } from "../../shared/constants.js";
-import { addValueResetEventListener as f } from "../../utils/form-components.js";
-import p from "../infotext/infotext.js";
-import { forwardRef as m, useEffect as h, useId as g, useRef as _, useState as v } from "react";
-import { jsx as y, jsxs as b } from "react/jsx-runtime";
-//#region src/components/textarea/textarea.tsx
-function x(m, x) {
-	let S = g(), C = x || _(x), [w, T] = v(() => void 0), [E, D] = v(() => void 0), [O, k] = v(() => void 0), [A, j] = v(() => void 0), [M, N] = v(() => void 0), [P, F] = v(() => void 0), [I, L] = v(() => ""), [R, z] = v(() => ""), [B, V] = v(() => void 0);
-	function H() {
-		return !!(m.validMessage ?? m.validation === "valid");
-	}
-	function U() {
-		!C.current?.validity.valid || m.validation === "invalid" ? (F(A), N(m.invalidMessage || C.current?.validationMessage || "TODO: Add an invalidMessage"), s() && (z(M), r(() => z(""), 1e3))) : H() && C.current?.validity.valid && (m.required || m.minLength || m.maxLength) ? (F(O), s() && (z(m.validMessage ?? "TODO: Add a validMessage"), r(() => z(""), 1e3))) : c(m.message, m.showMessage) ? F(E) : F(void 0);
-	}
-	function W(e, t) {
-		m.onInput && m.onInput(e), U();
-	}
-	function G(e, t) {
-		m.onChange && m.onChange(e), U();
-	}
-	function K(e) {
-		m.onBlur && m.onBlur(e);
-	}
-	function q(e) {
-		m.onFocus && m.onFocus(e);
-	}
-	function J() {
-		let e = m.id ?? m.propOverrides?.id ?? `textarea-${S}`;
-		T(e), D(e + u), k(e + d), j(e + l);
-	}
-	return h(() => {
-		J(), N(m.invalidMessage || "TODO: Add an invalidMessage");
-	}, []), h(() => {
-		(m.id ?? m.propOverrides?.id) && J();
-	}, [m.id, m.propOverrides?.id]), h(() => {
-		N(m.invalidMessage || C.current?.validationMessage || "TODO: Add an invalidMessage");
-	}, [C.current, m.invalidMessage]), h(() => {
-		if (w) {
-			let e = w + u;
-			D(e), k(w + d), j(w + l), c(m.message, m.showMessage) && F(e), U();
-		}
-	}, [w]), h(() => {
-		L(m.value);
-	}, [m.value]), h(() => {
-		if (C.current) {
-			let e = m.defaultValue, t = B;
-			t || (t = new AbortController(), V(t)), f(C.current, {
-				value: m.value,
-				defaultValue: e
-			}, (e) => {
-				G(e, !0), W(e, !0);
-			}, t.signal);
-		}
-	}, [C.current]), h(() => () => {
-		B?.abort();
-	}, []), /* @__PURE__ */ b("div", {
-		...t(m, [
-			"data-icon-variant",
-			"data-icon-variant-before",
-			"data-icon-variant-after",
-			"data-icon-weight",
-			"data-icon-weight-before",
-			"data-icon-weight-after",
-			"data-interactive",
-			"data-force-mobile",
-			"data-color",
-			"data-container-color",
-			"data-bg-color",
-			"data-on-bg-color",
-			"data-color-scheme",
-			"data-font-size",
-			"data-headline-size",
-			"data-divider",
-			"data-focus",
-			"data-font",
-			"data-density"
-		]),
-		className: n("db-textarea", m.className),
-		"data-variant": m.variant,
-		"data-hide-asterisk": a(m.showRequiredAsterisk),
-		"data-hide-label": a(m.showLabel),
-		children: [
-			/* @__PURE__ */ y("label", {
-				htmlFor: w,
-				children: m.label ?? "LABEL SHOULD BE SET"
-			}),
-			/* @__PURE__ */ y("textarea", {
-				"aria-invalid": m.validation === "invalid",
-				"data-custom-validity": m.validation,
-				"data-field-sizing": m.fieldSizing,
-				ref: C,
-				...e(m, [
-					"data-icon-variant",
-					"data-icon-variant-before",
-					"data-icon-variant-after",
-					"data-icon-weight",
-					"data-icon-weight-before",
-					"data-icon-weight-after",
-					"data-interactive",
-					"data-force-mobile",
-					"data-color",
-					"data-container-color",
-					"data-bg-color",
-					"data-on-bg-color",
-					"data-color-scheme",
-					"data-font-size",
-					"data-headline-size",
-					"data-divider",
-					"data-focus",
-					"data-font",
-					"data-density"
-				]),
-				id: w,
-				"data-resize": m.resize,
-				"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") || void 0,
-				form: m.form,
-				maxLength: o(m.maxLength, m.maxlength),
-				minLength: o(m.minLength, m.minlength),
-				name: m.name,
-				wrap: m.wrap,
-				spellCheck: m.spellCheck,
-				autoComplete: m.autocomplete,
-				onInput: (e) => W(e),
-				onChange: (e) => G(e),
-				onBlur: (e) => K(e),
-				onFocus: (e) => q(e),
-				value: m.value,
-				"aria-describedby": m.ariaDescribedBy ?? P,
-				placeholder: m.placeholder ?? " ",
-				rows: o(m.rows, 4),
-				cols: o(m.cols)
-			}),
-			c(m.message, m.showMessage) ? /* @__PURE__ */ y(p, {
-				size: "small",
-				icon: m.messageIcon,
-				id: E,
-				children: m.message
-			}) : null,
-			H() ? /* @__PURE__ */ y(p, {
-				size: "small",
-				semantic: "successful",
-				id: O,
-				children: m.validMessage || "TODO: Add a validMessage"
-			}) : null,
-			/* @__PURE__ */ y(p, {
-				size: "small",
-				semantic: "critical",
-				id: A,
-				children: M
-			}),
-			/* @__PURE__ */ y("span", {
-				"data-visually-hidden": "true",
-				role: "status",
-				children: R
-			})
-		]
-	});
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { filterPassingProps, getRootProps } from "../../utils/react.js";
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { DEFAULT_INVALID_MESSAGE, DEFAULT_INVALID_MESSAGE_ID_SUFFIX, DEFAULT_LABEL, DEFAULT_MESSAGE_ID_SUFFIX, DEFAULT_PLACEHOLDER, DEFAULT_ROWS, DEFAULT_VALID_MESSAGE, DEFAULT_VALID_MESSAGE_ID_SUFFIX, } from "../../shared/constants.js";
+import { cls, delay, getBoolean, getHideProp, getNumber, hasVoiceOver, stringPropVisible, } from "../../utils/index.js";
+import { addValueResetEventListener, } from "../../utils/form-components.js";
+import DBInfotext from "../infotext/infotext.js";
+import { useId } from "react";
+function DBTextareaFn(props, component) {
+    const uuid = useId();
+    const _ref = component || useRef(component);
+    const [_id, set_id] = useState(() => undefined);
+    const [_messageId, set_messageId] = useState(() => undefined);
+    const [_validMessageId, set_validMessageId] = useState(() => undefined);
+    const [_invalidMessageId, set_invalidMessageId] = useState(() => undefined);
+    const [_invalidMessage, set_invalidMessage] = useState(() => undefined);
+    const [_descByIds, set_descByIds] = useState(() => undefined);
+    const [_value, set_value] = useState(() => "");
+    const [_voiceOverFallback, set_voiceOverFallback] = useState(() => "");
+    const [abortController, setAbortController] = useState(() => undefined);
+    function hasValidState() {
+        return !!(props.validMessage ?? props.validation === "valid");
+    }
+    function handleValidation() {
+        /* For a11y reasons we need to map the correct message with the textarea */
+        if (!_ref.current?.validity.valid || props.validation === "invalid") {
+            set_descByIds(_invalidMessageId);
+            set_invalidMessage(props.invalidMessage ||
+                _ref.current?.validationMessage ||
+                DEFAULT_INVALID_MESSAGE);
+            if (hasVoiceOver()) {
+                set_voiceOverFallback(_invalidMessage);
+                void delay(() => set_voiceOverFallback(""), 1000);
+            }
+        }
+        else if (hasValidState() &&
+            _ref.current?.validity.valid &&
+            (props.required || props.minLength || props.maxLength)) {
+            set_descByIds(_validMessageId);
+            if (hasVoiceOver()) {
+                set_voiceOverFallback(props.validMessage ?? DEFAULT_VALID_MESSAGE);
+                void delay(() => set_voiceOverFallback(""), 1000);
+            }
+        }
+        else if (stringPropVisible(props.message, props.showMessage)) {
+            set_descByIds(_messageId);
+        }
+        else {
+            set_descByIds(undefined);
+        }
+    }
+    function handleInput(event, reset) {
+        if (props.onInput) {
+            props.onInput(event);
+        }
+        handleValidation();
+    }
+    function handleChange(event, reset) {
+        if (props.onChange) {
+            props.onChange(event);
+        }
+        handleValidation();
+    }
+    function handleBlur(event) {
+        if (props.onBlur) {
+            props.onBlur(event);
+        }
+    }
+    function handleFocus(event) {
+        if (props.onFocus) {
+            props.onFocus(event);
+        }
+    }
+    function resetIds() {
+        const mId = props.id ?? props.propOverrides?.id ?? `textarea-${uuid}`;
+        set_id(mId);
+        set_messageId(mId + DEFAULT_MESSAGE_ID_SUFFIX);
+        set_validMessageId(mId + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
+        set_invalidMessageId(mId + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
+    }
+    useEffect(() => {
+        resetIds();
+        set_invalidMessage(props.invalidMessage || DEFAULT_INVALID_MESSAGE);
+    }, []);
+    useEffect(() => {
+        if (props.id ?? props.propOverrides?.id) {
+            resetIds();
+        }
+    }, [props.id, props.propOverrides?.id]);
+    useEffect(() => {
+        set_invalidMessage(props.invalidMessage ||
+            _ref.current?.validationMessage ||
+            DEFAULT_INVALID_MESSAGE);
+    }, [_ref.current, props.invalidMessage]);
+    useEffect(() => {
+        if (_id) {
+            const messageId = _id + DEFAULT_MESSAGE_ID_SUFFIX;
+            set_messageId(messageId);
+            set_validMessageId(_id + DEFAULT_VALID_MESSAGE_ID_SUFFIX);
+            set_invalidMessageId(_id + DEFAULT_INVALID_MESSAGE_ID_SUFFIX);
+            if (stringPropVisible(props.message, props.showMessage)) {
+                set_descByIds(messageId);
+            }
+            handleValidation();
+        }
+    }, [_id]);
+    useEffect(() => {
+        set_value(props.value);
+    }, [props.value]);
+    useEffect(() => {
+        // If angular uses ngModel value and _value are null
+        // then the value will be set afterward and the _ref will be refreshed
+        const addResetListener = true;
+        if (_ref.current && addResetListener) {
+            const defaultValue = props.defaultValue;
+            let controller = abortController;
+            if (!controller) {
+                controller = new AbortController();
+                setAbortController(controller);
+            }
+            addValueResetEventListener(_ref.current, {
+                value: props.value,
+                defaultValue,
+            }, (event) => {
+                handleChange(event, true);
+                handleInput(event, true);
+            }, controller.signal);
+        }
+    }, [_ref.current]);
+    useEffect(() => {
+        return () => {
+            abortController?.abort();
+        };
+    }, []);
+    return (_jsxs("div", { ...getRootProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), className: cls("db-textarea", props.className), "data-variant": props.variant, "data-hide-asterisk": getHideProp(props.showRequiredAsterisk), "data-hide-label": getHideProp(props.showLabel), children: [_jsx("label", { htmlFor: _id, children: props.label ?? DEFAULT_LABEL }), _jsx("textarea", { "aria-invalid": props.validation === "invalid", "data-custom-validity": props.validation, "data-field-sizing": props.fieldSizing, ref: _ref, ...filterPassingProps(props, ["data-icon-variant", "data-icon-variant-before", "data-icon-variant-after", "data-icon-weight", "data-icon-weight-before", "data-icon-weight-after", "data-interactive", "data-force-mobile", "data-color", "data-container-color", "data-bg-color", "data-on-bg-color", "data-color-scheme", "data-font-size", "data-headline-size", "data-divider", "data-focus", "data-font", "data-density"]), id: _id, "data-resize": props.resize, "data-hide-resizer": getHideProp(props.showResizer ?? true), disabled: getBoolean(props.disabled, "disabled"), required: getBoolean(props.required, "required"), readOnly: getBoolean(props.readOnly, "readOnly") ||
+                    getBoolean(props.readonly, "readonly") ||
+                    undefined, form: props.form, maxLength: getNumber(props.maxLength, props.maxlength), minLength: getNumber(props.minLength, props.minlength), name: props.name, wrap: props.wrap, spellCheck: props.spellCheck, autoComplete: props.autocomplete, onInput: (event) => handleInput(event), onChange: (event) => handleChange(event), onBlur: (event) => handleBlur(event), onFocus: (event) => handleFocus(event), value: props.value, "aria-describedby": props.ariaDescribedBy ?? _descByIds, placeholder: props.placeholder ?? DEFAULT_PLACEHOLDER, rows: getNumber(props.rows, DEFAULT_ROWS), cols: getNumber(props.cols) }), stringPropVisible(props.message, props.showMessage) ? (_jsx(DBInfotext, { size: "small", icon: props.messageIcon, id: _messageId, children: props.message })) : null, hasValidState() ? (_jsx(DBInfotext, { size: "small", semantic: "successful", id: _validMessageId, children: props.validMessage || DEFAULT_VALID_MESSAGE })) : null, _jsx(DBInfotext, { size: "small", semantic: "critical", id: _invalidMessageId, children: _invalidMessage }), _jsx("span", { "data-visually-hidden": "true", role: "status", children: _voiceOverFallback })] }));
 }
-var S = m(x);
-//#endregion
-export { S as default };
+const DBTextarea = forwardRef(DBTextareaFn);
+export default DBTextarea;

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

@@ -1 +1 @@
-export { default as DBTooltip } from './tooltip';
+export { default as DBTooltip } from './tooltip.js';

package/dist/components/tooltip/index.js

@@ -0,0 +1 @@
+export { default as DBTooltip } from './tooltip.js';

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

@@ -1,4 +1,4 @@
-import type { ClickEventState, DocumentScrollState, EmphasisProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState, ResetIdState, TextProps, WrapProps } from '../../shared/model';
+import type { ClickEventState, DocumentScrollState, EmphasisProps, GlobalProps, GlobalState, InitializedState, PlacementProps, PopoverProps, PopoverState, ResetIdState, TextProps, WrapProps } from '../../shared/model.js';
 export declare const TooltipVariantList: readonly ["description", "label"];
 export type TooltipVariantType = (typeof TooltipVariantList)[number];
 export type DBTooltipDefaultProps = {

package/dist/components/tooltip/model.js

@@ -1,4 +1 @@
-//#region src/components/tooltip/model.ts
-var e = ["description", "label"];
-//#endregion
-export { e as TooltipVariantList };
+export const TooltipVariantList = ['description', 'label'];

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

@@ -1,3 +1,3 @@
 import * as React from "react";
-declare const DBTooltip: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model").GlobalProps | "text" | "placement" | "emphasis" | "wrap" | keyof import("./model").DBTooltipDefaultProps | keyof import("../../shared/model").PopoverProps> & import("./model").DBTooltipDefaultProps & import("../../shared/model").GlobalProps & import("../../shared/model").EmphasisProps & import("../../shared/model").PlacementProps & import("../../shared/model").PopoverProps & import("../../shared/model").WrapProps & import("../../shared/model").TextProps & React.RefAttributes<any>>;
+declare const DBTooltip: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<any>, keyof import("../../shared/model.js").GlobalProps | "text" | "placement" | "emphasis" | "wrap" | keyof import("./model.js").DBTooltipDefaultProps | keyof import("../../shared/model.js").PopoverProps> & import("./model.js").DBTooltipDefaultProps & import("../../shared/model.js").GlobalProps & import("../../shared/model.js").EmphasisProps & import("../../shared/model.js").PlacementProps & import("../../shared/model.js").PopoverProps & import("../../shared/model.js").WrapProps & import("../../shared/model.js").TextProps & React.RefAttributes<any>>;
 export default DBTooltip;